/* ===================================================== UI.CSS — RUEDA DE LA SALUD INTEGRAL Documentado para que sepas qué mover después. ----------------------------------------------------- Guía rápida: 1) Colores y sombras: en :root (VARIABLES) 2) Fondo de inicio: body.home-bg + overlay 3) Navbar: .navbar, .links, .navToggle (móvil) 4) Tipografía: .h1, .h2, .p, .muted 5) Componentes: .btn, .badge, .card 6) Plantilla tipo Index: .pageWrap, .heroShell, .heroCard, .heroGrid 7) Responsivo: media queries al final ===================================================== */ /* ===================================================== 1) RESET BÁSICO - Normaliza márgenes y caja, evita sorpresas entre navegadores. ===================================================== */ *{ box-sizing: border-box; margin: 0; padding: 0; } html, body{ height: 100%; } body{ font-family: "Lato", sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; } /* ===================================================== 2) VARIABLES DE DISEÑO (FÁCIL DE PERSONALIZAR) - Cambia aquí y afecta todo el sitio. ===================================================== */ :root{ /* ===================================================== Paleta institucional V6 Estos colores vienen del diseño del reporte PDF V6. Modificar aquí permite alinear menú, botones y tarjetas con la identidad visual institucional. ===================================================== */ --azul:#98C3DA; ---principal:#0f7f8a; --verde:#BCED0E; --oro:#D8B379; --morado:#CABAD8; --gris:#EEBEBA; --fisica:#98C3DA; --mental:#BCDEDE; --emocional:#D8B379; --espiritual:#CABAD8; --valores:#EEEBEA; --fortaleza:#008C95; --trabajar:#F2BD45; --prioridad:#C6005B; --texto:#4A4A4A; --borde:#5B5B5B; --titulo:#207C80; --blanco:#FFFFFF; --suave:#F8F7F5; /* Variables existentes mapeadas a la paleta V6. Mantienen compatibilidad con componentes ya creados. */ --bg:var(--suave); /* fondo por defecto */ --card:var(--blanco); /* tarjetas */ --text:var(--texto); /* texto principal */ --muted:#64748b; /* texto secundario */ --line:var(--borde); /* bordes / separadores */ /* Botón principal */ --primary:var(--titulo); --primary2:var(--fortaleza); /* Bordes / sombras */ --radius:18px; --shadow:0 18px 40px rgba(15,23,42,.10); --shadow2:0 10px 22px rgba(15,23,42,.08); } html, body{ max-width:100%; overflow-x:hidden; } /* ===================================================== 3) LAYOUT GENERAL (contenedor tradicional) - Útil para páginas normales (contacto, registro, etc.). ===================================================== */ .container{ max-width: 1080px; margin: 0 auto; padding: 22px 18px 40px; } /* ===================================================== 4) FONDO HOME (IMÁGENES) - Se activa con - Cambia las rutas si renombraste tus fondos. ===================================================== */ body.home-bg{ background-image: url("../img/Fondo_rueda.png"); /* escritorio */ background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } /* Overlay: suaviza el fondo y mejora legibilidad */ body.home-bg::before{ content:""; position: fixed; inset: 0; background: rgba(255,255,255,.65); z-index: -1; } /* En móvil usa el fondo vertical */ @media (max-width: 768px){ body.home-bg{ background-image: url("../img/Fondo_rueda.png"); background-attachment: scroll; } } /* ===================================================== 5) NAVBAR (menú superior) - Estructura: .navbar > .inner > .brand + .navToggle + .links ===================================================== */ .navbar{ /* Navbar institucional: usa fondo suave de la paleta V6 y acento azul inferior. */ /* Fija el menú al borde superior al hacer scroll. Si en el futuro se prefiere menú estático, cambiar position. */ position: sticky; top: 0; /* z-index alto para quedar sobre tarjetas, fondos y hero. Debe mantenerse por encima de overlays decorativos. */ z-index: 50; background: rgba(238,235,234,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--azul); } .navbar .inner{ /* Contenedor real del navbar. max-width controla hasta dónde se extiende el contenido en desktop. */ max-width: 1360px; margin: 0 auto; padding: 12px 18px; /* Flex horizontal: marca a la izquierda, navegación a la derecha. */ display: flex; align-items: center; justify-content: space-between; gap: 14px; /* Permite que hijos con ellipsis puedan encogerse correctamente. */ min-width: 0; } /* Logo / marca */ .brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); /* No debe ocupar todo el navbar; permite compartir espacio con links. */ flex: 0 1 auto; min-width: 0; } .brand b{ color: var(--titulo); font-weight: 800; letter-spacing: -.4px; white-space: nowrap; } .brand .sub{ font-size: 12px; color: var(--fortaleza); } /* Links de navegación */ .links{ /* Contenedor de navegación principal. En escritorio debe mantenerse en una sola línea. */ display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; } .link{ text-decoration:none; //font-size:10px !important; font-weight:600; padding:10px 14px; border-radius:999px; color:var(--titulo); border:1px solid transparent; white-space:nowrap; } .link:hover, .link.active{ /* Estados hover/active: blanco institucional + borde azul + texto fortaleza. */ background: var(--blanco); border-color: var(--azul); color: var(--fortaleza); } /* “Pastilla” de usuario logueado */ .userpill{ /* Bloque del usuario logueado: avatar, nombre y posibles acciones. Debe comportarse como un elemento único dentro del navbar. */ display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--azul); background: var(--blanco); color: var(--texto); font-size: 13px; font-weight: 700; /* Clave para que el nombre no empuje el menú a otra línea. */ white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; } .avatar{ /* Círculo corto para inicial o icono de usuario. */ width: 22px; height: 22px; border-radius: 999px; background: var(--azul); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-size: 12px; } /* ===================================================== 6) TIPOGRAFÍA (títulos y texto) ===================================================== */ /*.h1{ font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.6px; margin-bottom: 10px; }*/ .h1{ font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.6px; margin-bottom: 10px; color: var(---principal); } .h2{ font-size: 18px; margin-bottom: 6px; letter-spacing: -.2px; } .p{ font-size: 15px; } .muted{ color: var(--muted); } /* Separador horizontal */ .hr{ border: none; height: 1px; background: var(--line); margin: 14px 0; } /* ===================================================== 7) BOTONES - .btn: botón principal - .btn-ghost: botón secundario (blanco) ===================================================== */ .btn{ display: inline-block; text-decoration: none; padding: 12px 16px; border-radius: 12px; /* Botón principal con degradado institucional V6. */ background: linear-gradient(180deg, var(--primary), var(--primary2)); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow2); } .btn:hover{ opacity: .92; } .btn-ghost{ background: var(--blanco); color: var(--text); border: 1px solid var(--line); box-shadow: none; } /* ===================================================== 8) BADGES (píldoras: "5-8 min", "seguimiento", etc.) ===================================================== */ .badge{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; font-size: 12px; background: rgba(15,23,42,.03); border: 1px solid var(--line); color: var(--muted); } .badge .dot{ width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg,var(--fortaleza),var(--trabajar)); } /* ===================================================== 9) CARDS (contenedores) - Usar .card para cualquier bloque principal. ===================================================== */ .card{ background: transparent !important; background-color: transparent !important; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; } /* ===================================================== 10) HERO “ANTIGUO” (grid texto + caja derecha) - Si aún usas la clase .hero en páginas viejas. ===================================================== */ .hero{ /* Grid de dos columnas para páginas antiguas: contenido principal + panel visual/lateral. */ display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; } /* Home hero: hace más amplia la tarjeta principal de bienvenida sin cambiar el HTML ni afectar el comportamiento del resto del sistema. */ .container > .hero{ max-width: 1240px; margin: 0 auto; padding: 32px; gap: 28px; } .container > .hero .h1{ font-size: clamp(32px, 3.4vw, 46px); } .container > .hero .p{ font-size: 16px; line-height: 1.62; } @media (max-width: 1000px){ .hero{ grid-template-columns: 1fr; } .container > .hero{ padding: 22px; } } /* Home organizado en 4 bloques: 1) izquierda superior, 2) derecha superior, 3) CTA ancho, 4) acciones + imagen ancho. */ .homeIntroGrid{ display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; align-items: start; } .homeIntroLeft{ min-width: 0; } .homeIntroRight{ min-width: 0; align-self: start; } .homeIntroCta{ grid-column: 1 / -1; text-align: center; margin-top: 10px; } .homeIntroCta .hr{ width: 100%; margin: 0 0 16px 0; } .homeIntroActions{ grid-column: 1 / -1; text-align: center; } .homeIntroActions .actions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Caja derecha del hero */ .heroBox{ background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(34,197,94,.08) ); border-radius: var(--radius); padding: 18px; border: 1px solid var(--line); } /* Contenedor derecho del inicio: aumenta legibilidad sin modificar la estructura ni la lógica de index.php. */ .container > .hero .heroBox{ font-size: 14px; line-height: 1.55; } .container > .hero .heroBox p, .container > .hero .heroBox li{ font-size: 14px; line-height: 1.55; } /* CTA de acceso del inicio: centra el texto y los botones de sesión/registro. */ .homeCta{ text-align: center; margin-top: 18px; } .homeCtaActions{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } /* Imagen inferior del inicio: mantiene proporción, evita desbordes y centra la imagen en la tarjeta. */ .indexBottomImageWrap{ grid-column: 1 / -1; width: 100%; } .indexBottomImage{ display: block; margin: 28px auto 0 auto; width: 70%; max-width: 620px; height: auto; } .heroVisual{ display: flex; justify-content: center; align-items: center; } .heroVisual img{ /*max-width: 260px;*/ width: 100%; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.15); } @media (max-width: 768px){ .heroVisual img{ /*max-width: 200px;*/ } .homeIntroGrid{ grid-template-columns: 1fr; } .homeIntroCta, .homeIntroActions{ grid-column: 1; } .indexBottomImage{ width: 92%; max-width: 420px; } } /* ===================================================== 11) GRID DE FEATURES (3 columnas) - Usado para bloques de beneficios. ===================================================== */ .grid3{ /* Tres columnas iguales para features. Cambiar repeat(3, 1fr) si se requieren más/menos columnas. */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } } .feature{ background: #fff; border-radius: var(--radius); border: 1px solid var(--line); padding: 14px; box-shadow: var(--shadow2); } .feature small{ color: var(--muted); } /* ===================================================== 12) UTILIDADES (helpers) ===================================================== */ .text-center{ text-align: center; } .mt-10{ margin-top: 10px; } .mt-20{ margin-top: 20px; } /* ===================================================== 13) PLANTILLA TIPO INDEX (REGIÓN EDITABLE) - Esta es la que te da el look de tu captura. - Estructura:

[Columna izquierda editable] [Columna derecha editable]

===================================================== */ .pageWrap{ min-height: calc(100vh - 64px); /* ajusta si tu navbar cambia de alto */ /* Flex centra horizontalmente la región principal y permite controlar verticalmente el arranque del contenido. */ display: flex; align-items: flex-start; justify-content: center; padding: 26px 0 44px; } .heroShell{ width: 100%; max-width: 1080px; padding: 0 18px; /* margen lateral para móviles */ } .heroCard{ padding: 26px; } /* Rectángulo editable: grid 2 columnas */ .heroGrid{ /* Grid editable de la portada: columna textual + columna visual. */ display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: stretch; } /* Caja derecha estilo “tarjeta suave” */ .heroRight{ background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(34,197,94,.08)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .heroImg{ width: 100%; border-radius: 16px; display: block; box-shadow: 0 18px 40px rgba(0,0,0,.15); } .heroCaption{ text-align: center; margin-top: 10px; font-size: 12px; color: var(--muted); } /* Responsive de la plantilla tipo index */ @media (max-width: 900px){ .heroGrid{ grid-template-columns: 1fr; } .heroCard{ padding: 18px; } } /* ===================================================== 14) RESPONSIVE NAV (MÓVIL) - Botón hamburguesa: .navToggle - Menú desplegable: .links.open ===================================================== */ .navToggle{ /* Botón hamburguesa. Oculto en escritorio, visible en móvil. */ display:none; background:none; border:none; font-size:22px; cursor:pointer; } /* Escritorio: links visibles */ @media (min-width: 769px){ /* ===================================================== RESPONSIVE ESCRITORIO / TABLET HORIZONTAL Objetivo: - Mantener navbar en una sola línea. - Compactar espaciados con clamp(). - Permitir ellipsis en textos largos. - Evitar que el bloque del usuario baje a segunda línea. ===================================================== */ /* Navbar escritorio: una sola línea. El spacing se compacta con clamp() para conservar el diseño sin activar el menú móvil ni partir enlaces. */ .navbar .inner{ flex-wrap: nowrap; gap: clamp(6px, 1vw, 14px); padding-left: clamp(10px, 1.4vw, 18px); padding-right: clamp(10px, 1.4vw, 18px); } .brandText{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:clamp(92px, 20vw, 290px); font-size:24px; font-weight:700; } .links{ display:flex !important; /* flex:1 permite que el menú use el espacio restante. */ flex: 1 1 0; justify-content: flex-end; min-width: 0; flex-wrap: nowrap; gap: clamp(1px, .32vw, 6px); overflow: hidden; } .link{ /* En desktop compacto, los links se encogen sin saltar de línea. */ flex: 0 1 auto; min-width: 0; max-width: clamp(48px, 9vw, 160px); overflow: hidden; text-overflow: ellipsis; font-size: clamp(10px, .76vw, 13px); padding: 8px clamp(5px, .48vw, 11px); } .userpill{ /* Usuario logueado: conserva avatar, nombre y salir en horizontal. El nombre se recorta para que no fuerce una segunda línea. */ flex: 0 1 clamp(108px, 15vw, 220px); display: inline-flex; align-items: center; flex-wrap: nowrap; max-width: clamp(108px, 15vw, 220px); gap: clamp(3px, .35vw, 7px); padding: 7px clamp(5px, .45vw, 10px); overflow: hidden; } .userpill .avatar, .userpill .link{ flex: 0 0 auto; } .userpill .name{ /* Nombre largo del usuario: se recorta con puntos suspensivos. */ flex: 1 1 auto; min-width: 0; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ===================================================== RESPONSIVE MÓVIL Se activa en pantallas menores a 768px. Ajusta: - Menú hamburguesa. - Menú desplegable vertical. - Ancho completo de links. - Espaciado general de contenedores. ===================================================== */ @media (max-width: 768px){ .navToggle{ display:block; } .links{ /* Responsive menú móvil: el desplegable usa el fondo Valores y borde azul institucional. */ /* El menú sale del flujo normal y se despliega bajo el navbar. */ position: absolute; top: 64px; /* altura aproximada del navbar */ left: 0; right: 0; background: var(--valores); border-bottom: 1px solid var(--azul); display: none; flex-direction: column; gap: 0; padding: 10px 14px; box-shadow: 0 18px 40px rgba(0,0,0,.12); } .links.open{ /* Clase agregada por JavaScript para abrir el menú móvil. */ display:flex; } .link{ width: 100%; padding: 12px; border-radius: 12px; } .userpill{ width: 100%; justify-content: flex-start; margin: 6px 0; } /* Ajustes generales de móvil */ .h1{ font-size: 26px; } .container{ padding: 18px 14px 30px; } /* Ajuste para la plantilla tipo index */ .heroShell{ padding: 0 14px; } } /* ===================================================== 15) MICRO-RESPONSIVE (pantallas muy chicas) ===================================================== */ @media (max-width: 520px){ .brand .sub{ display:none; } .userpill span.name{ display:none; } } /* LOGO NAVBAR */ .brandLogo{ /* Logo del navbar. object-fit mantiene proporción sin deformar. */ height:70px; /* escritorio */ width:auto; display:block; object-fit:contain; } /* Ajuste en móvil */ @media (max-width:768px){ .brandLogo{ height:26px; } } /* ===================================================== CAPA DE CONTENIDO SOBRE FONDOS Función: Garantiza que cards, contenedores y hero queden por encima de pseudo-elementos o fondos decorativos. Modificar aquí: - z-index general de contenido. - Solo si aparece contenido detrás de overlays. ===================================================== */ .pageWrap, .heroShell, .hero, .container, .card { position: relative !important; z-index: 10 !important; } /* Si el fondo usa pseudo-elementos, mandarlos atrás y evitar clics. */ .home-bg::before, .home-bg::after, body.home-bg::before, body.home-bg::after, .heroShell::before, .heroShell::after { z-index: 0 !important; pointer-events: none !important; } /* Card principal al 90% y centrado */ .card90{ /* Variante de tarjeta ancha. Útil para pantallas principales donde se quiere ocupar más espacio sin cambiar .card global. */ width: 90%; max-width: 1100px; /* ajusta si lo quieres más ancho */ margin: 0 auto; } /* Opcional: en pantallas chicas que use casi todo */ @media (max-width: 600px){ .card90{ width: 100%; } } @media(max-width:768px){ .testContainer, .testCard, .questionCard, .pageWrap, .container{ width:100% !important; max-width:100% !important; padding:16px !important; box-sizing:border-box; } .testShell, .heroShell{ width:100% !important; max-width:100% !important; } .testGrid, .questionGrid, .preguntaGrid, .pilarBox{ grid-template-columns:1fr !important; } .pregunta, .question, .opcion, .option, .respuesta, .qRow, .qTitle, .testContent, .testTextBlock{ max-width:100%; min-width:0; overflow-wrap:break-word; word-wrap:break-word; } .opcion, .option, .respuesta, .scoreBtn{ width:100% !important; min-height:48px; padding:12px; font-size:16px; box-sizing:border-box; } .scoreGroup{ width:100%; max-width:100%; } .testActions{ display:flex !important; flex-direction:column; align-items:center; gap:10px; width:100%; } .testActionsGroup{ width:100%; display:flex !important; flex-direction:column; align-items:center; gap:10px; } .testActions button, .testActions .btn{ width:100%; max-width:320px; margin:0 auto; display:flex !important; justify-content:center; } }