/* ========================================================================== REFUGIO BASE — capa visual compartida El Refugio Invisible ========================================================================== Cómo se usa: <- o zona-zafiro Las páginas siguen teniendo su CSS propio. Este archivo define solamente lo que es común: colores, tipografía y unos pocos componentes que se repiten en todas. IMPORTANTE — por qué --acento y no --lava-core: la variable se llamaba --lava-core y valía #ff3c00 en casi todas las páginas, pero #3B82F6 en dashboard.html. El mismo nombre con dos valores distintos hace imposible centralizar. Ahora el nombre es neutro y la zona se declara en el . ========================================================================== */ /* ---------- Base: Zona Lava ---------- Entrada, emociones, urgencia. Es el valor por defecto porque es el que usan la mayoría de las páginas. */ :root { /* Fondos */ --bg-deep: #050505; --bg-surface: #0d0d0d; --bg-raised: #141414; /* Acento de zona */ --acento: #ff3c00; --acento-glow: #ff6a33; --acento-soft: rgba(255, 60, 0, 0.12); /* Texto */ --text-main: #F8FAFC; --text-muted: #94a3b8; --text-faint: #64748b; /* Colores fijos, iguales en todas las zonas */ --gold: #fbbf24; --gold-soft: rgba(251, 191, 36, 0.08); --jade: #10b981; --alerta: #ef4444; /* Roles del Triángulo Dramático */ --color-v: #3B82F6; /* Víctima */ --color-p: #ef4444; /* Perseguidor */ --color-s: #10b981; /* Salvador */ /* Tipografía */ --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; --font-mono: 'SF Mono', Menlo, Consolas, monospace; /* Medidas */ --radio: 8px; --radio-sm: 6px; --ancho-max: 900px; --borde: 1px solid rgba(255, 255, 255, 0.08); } /* ---------- Zona Zafiro ---------- Dashboard, cognición, estado del Yo Adulto. */ body.zona-zafiro { --bg-deep: #0F172A; --bg-surface: #1a2436; --bg-raised: #223047; --acento: #3B82F6; --acento-glow: #60A5FA; --acento-soft: rgba(59, 130, 246, 0.12); } /* ---------- Zona Refugio ---------- Registro íntimo: escritura libre, diario, SOS. Fondo algo más profundo y acento cálido, para bajar la intensidad. */ body.zona-refugio { --bg-deep: #020617; --bg-surface: #0b1120; --bg-raised: #131c2e; --acento: #fbbf24; --acento-glow: #fcd34d; --acento-soft: rgba(251, 191, 36, 0.10); } /* ========================================================================== RESET Y BASE ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg-deep); color: var(--text-main); font-family: var(--font-main); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--acento); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--acento-glow); } /* ========================================================================== COMPONENTES COMPARTIDOS ========================================================================== */ /* ---------- Botones ---------- */ .rf-btn { display: inline-block; background: var(--acento); color: #000; border: none; padding: 12px 25px; border-radius: var(--radio-sm); font-family: var(--font-main); font-weight: bold; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.3s, transform 0.1s; } .rf-btn:hover { background: var(--acento-glow); } .rf-btn:active { transform: translateY(1px); } .rf-btn:disabled { opacity: 0.45; cursor: not-allowed; } .rf-btn--secundario { background: transparent; color: var(--text-muted); border: var(--borde); } .rf-btn--secundario:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-main); } .rf-btn--dorado { background: var(--gold); color: #000; } .rf-btn--dorado:hover { background: #fff; } /* ---------- Campos de texto ---------- */ .rf-input, .rf-textarea { width: 100%; background: var(--bg-surface); color: var(--text-main); border: var(--borde); border-radius: var(--radio-sm); padding: 14px; font-family: var(--font-main); font-size: 1rem; line-height: 1.6; transition: border-color 0.2s; } .rf-textarea { min-height: 160px; resize: vertical; } .rf-input:focus, .rf-textarea:focus { outline: none; border-color: var(--acento); } .rf-input::placeholder, .rf-textarea::placeholder { color: var(--text-faint); } /* ---------- Tarjetas ---------- */ .rf-card { background: var(--bg-surface); border: var(--borde); border-radius: var(--radio); padding: 20px; } .rf-card--acento { border-left: 3px solid var(--acento); } /* ---------- Aviso de espera ---------- Se muestra mientras El Faro procesa. Ver refugio-core.js */ .rf-espera { font-size: 0.75rem; color: var(--text-faint); font-style: italic; text-align: center; margin: 10px 0 0 0; } /* ---------- Mensaje de error ---------- Nunca expone la maquinaria. Ver sección 6 de las pautas. */ .rf-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--radio-sm); padding: 14px 16px; color: var(--text-main); font-size: 0.9rem; } /* ---------- Cargando ---------- */ .rf-cargando { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--acento-soft); border-top-color: var(--acento); border-radius: 50%; animation: rf-girar 0.8s linear infinite; } @keyframes rf-girar { to { transform: rotate(360deg); } } /* ---------- Utilidades ---------- */ .rf-oculto { display: none !important; } .rf-centro { text-align: center; } .rf-contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 20px; } .rf-serif { font-family: var(--font-serif); } .rf-tenue { color: var(--text-muted); } /* ========================================================================== ACCESIBILIDAD ========================================================================== */ /* Foco visible en teclado. Hoy solo 1 de 21 páginas tiene atributos aria-, así que esto es el piso mínimo. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* Respeta la preferencia del sistema de reducir animaciones */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Texto solo para lectores de pantalla */ .rf-solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== MÓVIL ========================================================================== */ @media (max-width: 640px) { .rf-contenedor { padding: 0 15px; } .rf-btn { width: 100%; } .rf-card { padding: 15px; } }