/* ============================================================ RECONECTA — Sistema de diseño "Flat Warm" (experiencia de pareja) ============================================================ Fuente única de verdad para toda pantalla que ve una pareja: login, registro, dashboard, lecciones, diario, tests, perfil. Antes cada una tenía su propia paleta improvisada (ver auditoría visual) — esta hoja es la que se comparte entre todas a partir de ahora. Los admin/pastor/director/lider dashboards NO usan este archivo a propósito: siguen con css/design-tokens.css (el sistema "corporativo"). Unificar ambos es una decisión aparte, para más adelante. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap'); /* Fase 1 del rediseño "juego 2D": letra base más grande en toda la experiencia de pareja (de 16px a 18px), pensado para parejas que puedan necesitar lentes. Como casi todo el tamaño de texto en estas páginas está en rem, este único cambio escala todo proporcionalmente sin tener que tocar cada archivo. Solo afecta páginas que cargan este archivo (login, dashboard, lecciones, diario, tests) — los paneles de admin/pastor/director/líder no lo usan y no se ven afectados. */ html { font-size: 112.5%; } :root { /* Paleta cálida */ --color-primary: #D95B5B; --color-primary-dark: #C94A4A; --color-primary-light: #F4A460; --color-secondary: #B39DDB; --color-terracota: #E8A87C; --color-mustard: #E8C37C; --color-sage: #8EB897; /* Semánticos (mismo tono cálido, no rojo/ámbar genérico) */ --color-danger: #C94A4A; --color-danger-bg: #FDF0EE; --color-warning: #A97B1F; --color-warning-bg: #FFF8EC; --color-success: #4A7A57; --color-success-bg: #F0F7F1; /* Fondos y superficies */ --color-soft-bg: #FCF9F6; --color-card: #FFFFFF; --color-text: #2D1B3D; --color-text-secondary: #6C5D7A; /* Fase 4 (accesibilidad): antes era #7A6B8A, que da 4.0:1 contra el fondo acuarela — por debajo del minimo AA (4.5:1) para texto normal. Este tono mantiene el mismo matiz pero pasa 4.9:1. */ --color-border: #F0EBE6; /* Formas — Fase 1 "juego 2D": más redondeado y con más volumen (sombra más presente, con un tinte cálido) para que las tarjetas se sientan táctiles, como piezas de un juego, en vez de planas. */ --radius-card: 24px; --radius-element: 16px; --radius-pill: 50px; --shadow-flat: 0 4px 14px rgba(217, 91, 91, 0.10); --shadow-flat-hover: 0 8px 22px rgba(217, 91, 91, 0.14); --shadow-lg: 0 14px 36px rgba(217, 91, 91, 0.16); /* Espaciado (misma escala en toda pantalla de pareja) */ --space-xs: 6px; --space-sm: 12px; --space-md: 20px; --space-lg: 28px; --space-xl: 40px; /* Tipografía */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter', -apple-system, "Segoe UI", sans-serif; } /* ============================================ AVATAR DOBLE DE PAREJA — dos círculos superpuestos (hombre a la izquierda, mujer a la derecha), con un borde blanco brilloso/glossy en vez del verde plano de antes. Se usa en el header compartido (solo se renderiza para rol pareja). ============================================ */ .rc-avatar-doble { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; position: relative; border: 3px solid #ffffff; box-shadow: 0 0 0 2px var(--color-primary), inset 0 2px 3px rgba(255, 255, 255, .6), 0 3px 8px rgba(45, 27, 61, .22); } .rc-avatar-izq { z-index: 1; } .rc-avatar-der { z-index: 2; margin-left: -20px; } /* ============================================ UTILIDAD: BOTÓN GLOSSY REUTILIZABLE Fase 4 — extiende el acabado 3D tipo botón de juego (ya usado en el dashboard) al resto de la experiencia de pareja: login, lecciones, diario, perfil, contraseña, tests. Se agrega como clase adicional (ej. class="btn-primary rc-glossy") sobre el botón que ya existe en cada página, sin tener que rehacer su HTML — por eso usa !important, a propósito, para ganarle a la declaración propia de cada página. Variantes de color via clases: rc-glossy (coral, por defecto), rc-glossy-lavanda, rc-glossy-salvia, rc-glossy-mostaza. ============================================ */ .rc-glossy { --tone-light: #F2A5A5; --tone-base: var(--color-primary); --tone-dark: var(--color-primary-dark); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--tone-light) 0%, var(--tone-base) 55%, var(--tone-dark) 100%) !important; color: #fff !important; border: 2px solid var(--tone-dark) !important; box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -3px 4px rgba(0, 0, 0, .16), 0 5px 0 var(--tone-dark), 0 9px 14px rgba(45, 27, 61, .18) !important; transition: transform .08s ease, box-shadow .08s ease !important; } .rc-glossy:hover { filter: brightness(1.03); } .rc-glossy:active { transform: translateY(3px); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .16), 0 2px 0 var(--tone-dark), 0 4px 8px rgba(45, 27, 61, .15) !important; } .rc-glossy-lavanda { --tone-light: #E8E2F5; --tone-base: var(--color-secondary); --tone-dark: #7C64A8; } .rc-glossy-salvia { --tone-light: #C9E4CE; --tone-base: var(--color-sage); --tone-dark: #4A7A57; } .rc-glossy-mostaza { --tone-light: #F5DFA3; --tone-base: var(--color-mustard); --tone-dark: #B4903F; } /* Identidad de color por género para "Diario Emocional" (Fase 4c) — el mismo diario.php se ve azul cuando lo abre el esposo y fucsia cuando lo abre la esposa, para que cada quien reconozca "su" página al instante y las dos no se confundan visualmente entre sí. */ .rc-glossy-azul { --tone-light: #A9C9F5; --tone-base: #4A78D9; --tone-dark: #2F56B0; } .rc-glossy-fucsia { --tone-light: #F5A9D9; --tone-base: #D94A9E; --tone-dark: #B02F79; } /* Color "misión secreta" — deliberadamente frío/índigo en vez de la paleta cálida del resto de la app, para que este ícono resalte y se sienta "de espía", en vez de mezclarse con los demás pasos. */ .rc-glossy-indigo { --tone-light: #A79AE0; --tone-base: #5B4B9E; --tone-dark: #3E3170; } /* Fondo tipo acuarela reutilizable — la misma idea que ya tiene el dashboard, disponible para cualquier página de pareja que quiera sumarse (clase en , ver ejemplos en diario.php, ver_leccion.php). */ .rc-fondo-acuarela { background: radial-gradient(1100px 550px at 12% -8%, rgba(179, 157, 219, 0.12), transparent 60%), radial-gradient(900px 500px at 92% 4%, rgba(142, 184, 151, 0.12), transparent 55%), radial-gradient(1000px 650px at 45% 105%, rgba(232, 195, 124, 0.10), transparent 60%), #EAE8E5 !important; background-attachment: fixed !important; }