/* ========================= iCuali · Base layout/theme (CSS GLOBAL “BUENO”) ========================= */ /* Full height para poder calcular vh sin sorpresas */ html, body { height: 100%; } /* Fondo global (aplícalo con class="icuali-bg" en ) */ body.icuali-bg{ min-height: 100%; margin: 0; /* Fondo iCuali (mac/iPad): morado -> azul -> celeste */ background: linear-gradient(to bottom, #4b1e8e 0%, #2e5fae 32%, #3f96c8 62%, #bfe6fb 100% ); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } /* ========================= Shell “glass” ========================= */ .icuali-shell{ max-width: 980px; margin: 24px auto; padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0,0,0,0.18); } .icuali-shell.icuali-shell-wide{ max-width: none; width: min(84%, 1400px); } @media (max-width: 1200px){ .icuali-shell.icuali-shell-wide{ width: 94%; } } /* Texto */ .icuali-title{ color: rgba(255,255,255,0.96); } .icuali-muted{ color: rgba(255,255,255,0.72); } /* Mejor contraste dentro de tarjetas */ .icuali-shell .card, .icuali-shell .card-body{ color: rgba(255,255,255,0.92); } .icuali-shell .text-white-50{ opacity: .85; } /* code legible en glass */ .icuali-shell code{ color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.18); padding: .1rem .35rem; border-radius: .35rem; } /* ========================= Login compacto tipo app ========================= */ .icuali-shell.icuali-login{ max-width: 620px; padding: 22px; /* centrado visual (tu 20vh, pero con clamp) */ margin-top: clamp(24px, 20vh, 180px); } @media (max-width: 768px){ .icuali-shell.icuali-login{ max-width: 92vw; margin: 18px auto; margin-top: clamp(18px, 14vh, 120px); } } /* ========================= Topbar iCuali (GES) ========================= */ .icuali-topbar{ position: sticky; top: 0; z-index: 1030; padding: 10px 0; background: transparent !important; border-bottom: 0 !important; backdrop-filter: blur(8px); } /* marca */ .icuali-topbar .navbar-brand{ color: rgba(255,255,255,.96) !important; font-weight: 800; letter-spacing: .2px; } /* links */ .icuali-topbar .nav-link{ color: rgba(255,255,255,.82) !important; font-weight: 600; padding: .45rem .65rem; border-radius: 10px; text-decoration: none !important; } .icuali-topbar .nav-link:hover{ color: rgba(255,255,255,.98) !important; background: rgba(255,255,255,.08); } .icuali-topbar .nav-link.active{ color: rgba(255,255,255,.98) !important; background: rgba(255,255,255,.12); } /* legibilidad sobre el fondo */ .icuali-topbar .navbar-brand, .icuali-topbar .nav-link{ text-shadow: 0 1px 8px rgba(0,0,0,.35); } /* toggler visible */ .icuali-topbar .navbar-toggler{ border: 1px solid rgba(255,255,255,.35); border-radius: 12px; } .icuali-topbar .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.18); } /* icono hamburguesa blanco */ .icuali-topbar .navbar-toggler-icon{ filter: invert(1); opacity: .95; } /* ========================= Lists (reusable) - funciona para expedientes, cualis, etc. - hover/active con fondo oscuro (NO “blanco sobre blanco”) ========================= */ .icuali-list{ --icuali-list-border: rgba(255,255,255,0.12); --icuali-list-hover: rgba(0,0,0,0.14); --icuali-list-active: rgba(0,0,0,0.22); --icuali-list-outline: rgba(255,255,255,0.18); } /* Item genérico */ .icuali-list-item{ background: transparent !important; border-color: var(--icuali-list-border) !important; color: rgba(255,255,255,0.92) !important; text-decoration: none !important; } /* Hover: fondo oscuro + texto más blanco */ .icuali-list-item:hover{ background: var(--icuali-list-hover) !important; color: rgba(255,255,255,0.98) !important; } /* Active */ .icuali-list-item.active{ background: var(--icuali-list-active) !important; outline: 1px solid var(--icuali-list-outline); } /* Subtexto dentro del item (cuali · cod / etc.) */ .icuali-list-item .icuali-muted, .icuali-list-item .text-muted, .icuali-list-item small{ color: rgba(255,255,255,0.72) !important; } .icuali-list-item:hover .icuali-muted, .icuali-list-item.active .icuali-muted, .icuali-list-item:hover .text-muted, .icuali-list-item.active .text-muted, .icuali-list-item:hover small, .icuali-list-item.active small{ color: rgba(255,255,255,0.78) !important; } /* Focus visible (teclado / accesibilidad) */ .icuali-list-item:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,0.12) !important; } /* Para list-group-flush en glass */ .list-group-flush > .icuali-list-item{ border-left: 0; border-right: 0; border-top: 0; border-bottom-width: 1px; } /* ========================= Split (Navigator + Detail) - pensado para Activos/Histor/etc. ========================= */ .icuali-split{ display: flex; gap: 16px; width: 100%; min-height: 70vh; /* altura mínima “útil” */ } .icuali-pane{ min-width: 0; /* clave en flex */ } .icuali-pane-left{ flex: 0 0 360px; max-width: 420px; } .icuali-pane-right{ flex: 1 1 auto; } /* Scroll interno de paneles (lista/detalle) */ .icuali-pane-scroll{ overflow: auto; max-height: calc(100vh - 170px); /* ajusta si cambias el header superior */ } /* Cards a altura completa dentro del panel */ .icuali-pane .card{ height: 100%; } /* Responsive: en móvil se apila (porque no cabe) */ @media (max-width: 992px){ .icuali-split{ display: block; } .icuali-pane-left, .icuali-pane-right{ max-width: none; } .icuali-pane-scroll{ max-height: none; } } /* ========================= iCuali · Tabs (Histórico / navegadores) Solo dentro del panel izquierdo ========================= */ .icuali-pane-left .nav-pills{ display: flex; flex-direction: row; flex-wrap: nowrap; /* ✅ evita que salten a otra línea */ gap: 10px; width: 100%; margin-bottom: 10px; } .icuali-pane-left .nav-pills .nav-item{ flex: 1 1 0; /* ✅ ambos tabs ocupan lo mismo */ min-width: 0; } .icuali-pane-left .nav-pills .nav-link{ width: 100%; display: flex; /* ✅ alinea texto/contador */ align-items: center; justify-content: center; gap: 8px; height: 44px; /* ✅ misma altura */ padding: 0 12px; white-space: nowrap; /* ✅ no partir texto */ border-radius: 12px; /* INACTIVO: se lee bien, pero claramente “apagado” */ color: rgba(255,255,255,0.78) !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.35); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; /* ✅ sin subrayados nunca */ text-decoration: none !important; } .icuali-pane-left .nav-pills .nav-link:hover{ color: rgba(255,255,255,0.92) !important; background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.22) !important; } /* ACTIVO: claramente diferente (oscuro + borde más fuerte) */ .icuali-pane-left .nav-pills .nav-link.active, .icuali-pane-left .nav-pills .show > .nav-link{ color: rgba(255,255,255,0.98) !important; background: rgba(0,0,0,0.34) !important; border-color: rgba(255,255,255,0.34) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.18); position: relative; /* ✅ sin “subrayado”/borde inferior */ border-bottom: 0 !important; text-decoration: none !important; } /* Por si en algún momento añadiste ::after como subrayado */ .icuali-pane-left .nav-pills .nav-link.active::after{ content: none !important; } /* Focus accesible sin azul Bootstrap */ .icuali-pane-left .nav-pills .nav-link:focus{ box-shadow: 0 0 0 .18rem rgba(255,255,255,0.14) !important; } /* Contador un poco menos protagonista */ .icuali-pane-left .nav-pills .nav-link .opacity-75{ opacity: .80 !important; } /* Ajuste: menos separación entre topbar y contenido */ body.icuali-bg .icuali-shell{ margin-top: 12px; /* antes 24px */ } /* En móvil aún más pegado */ @media (max-width: 768px){ body.icuali-bg .icuali-shell{ margin-top: 10px; } } /* ========================= ASE: opciones 1–4 como “botones” (más cuadrados y más altos) - Sin mini-check ========================= */ /* El label que contiene un input.ase-radio se convierte en botón */ .ase-page label:has(> input.ase-radio){ padding: 10px 12px; /* más alto */ border-radius: 7px; /* más cuadrado */ background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.16); cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease; } /* Hover */ .ase-page label:has(> input.ase-radio):hover{ background: rgba(0,0,0,0.26); border-color: rgba(255,255,255,0.26); } /* Seleccionado: más marcado */ .ase-page label:has(> input.ase-radio:checked){ background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.60); box-shadow: 0 10px 22px rgba(0,0,0,0.18), 0 0 0 2px rgba(255,255,255,0.10) inset; transform: translateY(-1px); } /* El numerito */ .ase-page label:has(> input.ase-radio) > span{ font-weight: 900; color: rgba(255,255,255,0.96); min-width: 14px; text-align: center; font-size: 13px; line-height: 1; } /* Oculta el “circulito” del radio para que parezca botón puro */ .ase-page label:has(> input.ase-radio) > input.ase-radio{ position: absolute; opacity: 0; pointer-events: none; } /* ========================= EVA: contraste propio (sin afectar ASE/GES) ========================= */ .eva-page .card, .eva-page .card-body{ color: rgba(33,37,41,0.96); } .eva-page .card h1, .eva-page .card h2, .eva-page .card h3, .eva-page .card h4, .eva-page .card h5, .eva-page .card h6, .eva-page .card .fw-semibold, .eva-page .card .fw-bold, .eva-page #evaTimer{ color: rgba(33,37,41,0.98); } .eva-page .card .text-muted, .eva-page .card .small.text-muted, .eva-page .card small.text-muted{ color: rgba(108,117,125,0.95) !important; } .eva-page #evaQuestionHost .list-group-item{ color: rgba(33,37,41,0.96); background: transparent; } .eva-page #evaQuestionHost label.list-group-item:hover{ background: rgba(13,110,253,0.04); }