/*
 * Tema clínico de Cliniclick — versión segura.
 *
 * OJO (para el próximo que toque esto): la versión anterior forzaba el
 * fondo de .fi-body y .fi-sidebar a colores fijos, sin importar si el
 * panel estaba en modo claro u oscuro. Filament calcula el color de TEXTO
 * (blanco en oscuro, gris oscuro en claro) asumiendo que el fondo que él
 * mismo define para cada modo sigue intacto. Al pisarle el fondo sin pisar
 * también el texto, en modo oscuro quedaba texto blanco sobre fondo claro
 * (casi invisible) y en el sidebar, texto gris oscuro sobre verde oscuro
 * (ítems inactivos casi invisibles). Por eso esta versión NO toca fondos
 * generales — solo agrega detalles que no dependen de que el fondo sea
 * claro u oscuro.
 *
 * La sección "Sidebar con identidad de marca" de más abajo SÍ vuelve a
 * tocar el fondo del sidebar (a propósito, es la Opción B aprobada), pero
 * esta vez cada regla de fondo va acompañada de su propia regla de texto/
 * ícono en el mismo bloque — para no repetir el error de arriba. Los
 * selectores son los mismos que usa Filament (sin ":where(.dark,.dark *)")
 * a propósito: como este archivo se carga después del CSS compilado de
 * Filament, gana por orden de aparición tanto en claro como en oscuro, así
 * que el sidebar queda igual de navy en los dos modos sin duplicar reglas.
 */

:root {
    --clinic-teal-soft: rgb(45 212 191 / 10%);
}

/* Fondo general en modo oscuro: el gris-950 que trae Filament por defecto
   (#020618, calculado de Slate) es mucho más negro que el navy suave del
   boceto (#0E1420) — al lado del navy del sidebar y las tarjetas (que sí
   quedan cerca del boceto, gris-900 ≈ #0f172b) se sentía un salto de
   contraste raro. Acá SOLO se cambia el color del fondo, no el del texto
   (Filament ya usa blanco para .fi-body en oscuro y sigue siendo correcto),
   así que no aplica el riesgo que describe la nota de arriba. */
.fi-body:where(.dark, .dark *) {
    background-color: #0E1420;
}

/* Tablas: más aire entre filas y hover sutil en el color de marca (rgba,
   por lo que funciona igual de bien sobre fondo claro u oscuro). */
.fi-ta-cell {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.fi-ta-row:hover {
    background-color: var(--clinic-teal-soft);
}

/* Cards: sombra liviana, no toca color de fondo ni de texto. */
.fi-section,
.fi-wi-stats-overview-stat {
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

/* Botones primarios con un poco más de profundidad. */
.fi-btn.fi-color-primary {
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}

/* Botones sólidos en modo claro con letra blanca.
   Filament calcula automáticamente fondo/texto según contraste accesible;
   para nuestras paletas (Teal, Sky, Emerald, Amber) el 600 no tiene
   contraste suficiente con texto claro, así que cae a un fondo más
   pálido (400) con texto oscuro del mismo color (900), que se lee mal.
   Acá forzamos el estilo sólido de toda la vida: fondo 600 + texto
   blanco, igual al que Filament ya usa por su cuenta en modo oscuro.
   No toca "gray" (usa su propio estilo, ya legible) ni "danger" (Rose
   ya resuelve solo a fondo 600 + texto blanco). */
.fi-btn:not(.fi-outlined).fi-color-primary:not(label),
.fi-btn:not(.fi-outlined).fi-color-info:not(label),
.fi-btn:not(.fi-outlined).fi-color-success:not(label),
.fi-btn:not(.fi-outlined).fi-color-warning:not(label) {
    --bg: var(--color-600);
    --hover-bg: var(--color-500);
    --text: oklch(100% 0 0);
    --hover-text: oklch(100% 0 0);
}

/* Números de los widgets de estadísticas, más protagonistas. */
.fi-wi-stats-overview-stat-value {
    font-weight: 700;
}

/* ===== Tarjeta de lectura rápida (Consulta) ===== */
.cc-quick-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--rounded-xl, 0.75rem);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.cc-quick-summary:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.cc-quick-summary__title {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.cc-quick-summary__item {
    min-width: 0;
}

.cc-quick-summary__label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.cc-quick-summary__value {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950);
    word-break: break-word;
}

.cc-quick-summary__value:where(.dark, .dark *) {
    color: var(--gray-50);
}

/* ===== Lectura rápida compacta (dentro del Asistente Clínico) =====
   Misma información que .cc-quick-summary de arriba (mismo builder, sin
   duplicar lógica) pero en 3 líneas + chips, para no repetir media
   pantalla del drawer con algo que ya se ve detrás. */
.cc-quick-compact {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rounded-lg, 0.5rem);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    font-size: 0.8125rem;
    color: var(--gray-700);
}

.cc-quick-compact:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}

.cc-quick-compact__line {
    line-height: 1.5;
}

.cc-quick-compact__line--allergy {
    color: var(--warning-700);
}

.cc-quick-compact__line--allergy:where(.dark, .dark *) {
    color: var(--warning-400);
}

.cc-quick-compact__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.cc-quick-compact__chip {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.cc-quick-compact__chip:where(.dark, .dark *) {
    background-color: var(--gray-700);
    color: var(--gray-200);
}

/* ===== Tarjetas de sección de la Sugerencia IA ===== */
.cc-ai-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-ai-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--rounded-lg, 0.5rem);
    background-color: var(--gray-50);
    overflow: hidden;
}

.cc-ai-card:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.cc-ai-card summary {
    cursor: pointer;
    list-style: none;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-950);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-ai-card summary:where(.dark, .dark *) {
    color: var(--gray-50);
}

.cc-ai-card summary::-webkit-details-marker {
    display: none;
}

.cc-ai-card[open] summary {
    border-bottom: 1px solid var(--gray-200);
}

.cc-ai-card[open] summary:where(.dark, .dark *) {
    border-bottom-color: var(--gray-700);
}

.cc-ai-card__body {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gray-700);
    white-space: pre-line;
}

.cc-ai-card__body:where(.dark, .dark *) {
    color: var(--gray-300);
}

.cc-ai-empty {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    text-align: center;
    border: 1px dashed var(--gray-300);
    border-radius: var(--rounded-lg, 0.5rem);
}

.cc-ai-empty:where(.dark, .dark *) {
    border-color: var(--gray-700);
}

.cc-ai-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* ===== Botón "Copiar" chico ===== */
.cc-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--rounded-lg, 0.5rem);
    border: 1px solid var(--gray-300);
    background-color: transparent;
    color: var(--gray-700);
    cursor: pointer;
}

.cc-copy-btn:where(.dark, .dark *) {
    border-color: var(--gray-600);
    color: var(--gray-200);
}

.cc-copy-btn:hover {
    background-color: var(--gray-100);
}

.cc-copy-btn:where(.dark, .dark *):hover {
    background-color: var(--gray-700);
}

/* ===== Panel de Resumen para el Paciente ===== */
.cc-patient-summary {
    border: 1px solid var(--gray-200);
    border-radius: var(--rounded-lg, 0.5rem);
    background-color: var(--gray-50);
    padding: 1rem;
}

.cc-patient-summary:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.cc-patient-summary__text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-700);
    white-space: pre-line;
    margin-bottom: 0.75rem;
}

.cc-patient-summary__text:where(.dark, .dark *) {
    color: var(--gray-300);
}

/* ===== Launcher "Asistente Clínico" ===== */
.cc-launcher {
    border-radius: var(--rounded-xl, 0.75rem) !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 0 1px rgb(13 148 136 / 12%);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.cc-launcher:hover {
    box-shadow: 0 2px 8px rgb(13 148 136 / 20%), 0 0 0 1px rgb(13 148 136 / 20%);
    transform: translateY(-1px);
}

.cc-launcher .fi-badge {
    animation: none;
}

.cc-launcher--pulse .fi-btn-badge-ctn {
    animation: cc-pulse 1.4s ease-in-out 3;
}

@keyframes cc-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.35);
    }
}

/* ===== Header de estado dentro del panel del Asistente ===== */
.cc-assistant-header {
    margin-bottom: 1rem;
}

.cc-assistant-header__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.cc-assistant-header__status:where(.dark, .dark *) {
    background-color: var(--gray-800);
    color: var(--gray-300);
}

.cc-assistant-header__status--sin_analizar,
.cc-assistant-header__status--pendiente {
    background-color: color-mix(in oklab, var(--warning-500) 15%, transparent);
    color: var(--warning-700);
}

.cc-assistant-header__status--sin_analizar:where(.dark, .dark *),
.cc-assistant-header__status--pendiente:where(.dark, .dark *) {
    color: var(--warning-400);
}

.cc-assistant-header__status--sin_guardar {
    background-color: color-mix(in oklab, var(--danger-500) 15%, transparent);
    color: var(--danger-700);
}

.cc-assistant-header__status--sin_guardar:where(.dark, .dark *) {
    color: var(--danger-400);
}

.cc-assistant-header__detail {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Disclaimer persistente (no solo la primera vez) — chico y discreto,
   nunca una card grande. */
.cc-assistant-header__disclaimer {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray-500);
}

/* ===== Estado vacío del Asistente (2 líneas) ===== */
.cc-ai-empty__title {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.cc-ai-empty__title:where(.dark, .dark *) {
    color: var(--gray-200);
}

.cc-ai-empty__text {
    color: var(--gray-500);
}

/* ===== Loading: "Analizando información clínica..." =====
   wire:target por nombre de método (sin paréntesis) matchea cualquier
   mountAction, no solo el de generar análisis — Livewire lo resuelve así
   nativamente. Puede destellar brevemente en otras acciones rápidas del
   panel, pero el caso que importa (esperar a OpenAI, varios segundos)
   se ve siempre bien. */
.cc-assistant-loading {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
    border-radius: var(--rounded-lg, 0.5rem);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.cc-assistant-loading:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.cc-assistant-loading__shimmer {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: cc-shimmer 1.4s ease-in-out infinite;
}

.cc-assistant-loading__shimmer:where(.dark, .dark *) {
    background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
    background-size: 200% 100%;
}

@keyframes cc-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cc-assistant-loading__text {
    font-size: 0.8125rem;
}

.cc-assistant-loading__text strong {
    display: block;
    color: var(--gray-800);
    font-weight: 600;
}

.cc-assistant-loading__text strong:where(.dark, .dark *) {
    color: var(--gray-100);
}

.cc-assistant-loading__text span {
    color: var(--gray-500);
}

/* ===== Alergias: presencia visual sin ser una alarma clínica ===== */
.cc-quick-summary__item--allergy .cc-quick-summary__value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in oklab, var(--warning-500) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--warning-500) 30%, transparent);
}

/* ===== Contexto del paciente (Nueva Consulta) =====
   Compacto a propósito: solo lo que un médico necesita recordar antes de
   empezar a escribir, no una ficha completa. Mismos tokens --gray-*/
   --warning-* que el resto del tema, funciona igual en claro y oscuro. */
.cc-patient-context {
    padding: 0.85rem 1.1rem;
    margin-top: 1rem;
    border-radius: var(--rounded-lg, 0.5rem);
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    font-size: 0.8125rem;
    color: var(--gray-700);
}

.cc-patient-context:where(.dark, .dark *) {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

.cc-patient-context__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.cc-patient-context__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.cc-patient-context__link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-600);
    text-decoration: none;
}

.cc-patient-context__link:hover {
    text-decoration: underline;
}

.cc-patient-context__link:where(.dark, .dark *) {
    color: var(--primary-400);
}

.cc-patient-context__line {
    line-height: 1.6;
}

.cc-patient-context__line--muted {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.cc-patient-context__label {
    font-weight: 600;
    color: var(--gray-600);
}

.cc-patient-context__label:where(.dark, .dark *) {
    color: var(--gray-300);
}

.cc-patient-context__allergy-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    background-color: color-mix(in oklab, var(--warning-500) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--warning-500) 30%, transparent);
    color: var(--warning-700);
}

.cc-patient-context__allergy-badge:where(.dark, .dark *) {
    color: var(--warning-400);
}

/* ===== Sidebar con identidad de marca (Opción B) =====
   Navy de marca (#12375C), igual en claro y oscuro. Cada regla de fondo
   trae su propia regla de texto/ícono al lado — ver nota al principio
   del archivo sobre por qué. Colores calcados del boceto aprobado
   (OptionB-Light.dc.html): ítem inactivo #B7C4D6, ítem activo fondo
   sólido #2CADB4 (teal de marca) con texto oscuro #0D2A2C, no un tinte
   traslúcido — el activo tiene que resaltar fuerte, no sutil. */
:root {
    --cc-sidebar-bg: #12375C;
    --cc-sidebar-hover-bg: rgb(255 255 255 / 6%);
    --cc-sidebar-text: #B7C4D6;
    --cc-sidebar-text-muted: #5C7699;
    --cc-sidebar-active-bg: #2CADB4;
    --cc-sidebar-active-text: #0D2A2C;
}

.fi-sidebar {
    background-color: var(--cc-sidebar-bg);
}

.fi-sidebar-header {
    background-color: var(--cc-sidebar-bg);
}

/* Menos aire: el sidebar real tiene más ítems que el boceto (todos los
   recursos de Filament), así que se achica el padding/gap para que
   entre sin scroll — "Administración" y "Agenda" además arrancan
   colapsados (ver AdminPanelProvider::navigationGroups()). */
.fi-sidebar-nav {
    padding-block: 1rem;
    padding-inline: 0.85rem;
    row-gap: 0.75rem;
}

.fi-sidebar-nav-groups {
    row-gap: 0.5rem;
}

/* Ítems del menú: inactivos en gris azulado claro (ícono y etiqueta
   comparten el mismo color, igual que en el boceto). */
.fi-sidebar-item-label {
    color: var(--cc-sidebar-text);
}

.fi-sidebar-item-btn > .fi-icon {
    color: var(--cc-sidebar-text);
}

/* :not(.fi-active) — el ítem activo ya tiene su propio fondo teal sólido
   (más abajo); sin este :not(), el :hover ganaba por especificidad y el
   activo "perdía" su color al pasar el mouse. */
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--cc-sidebar-hover-bg);
}

/* Ítem activo: pastilla sólida en el teal exacto de marca con texto
   oscuro — el mismo tratamiento que "Consultas" en el boceto aprobado,
   no un tinte translúcido con texto teal (eso fue lo que se implementó
   primero y no coincidía). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--cc-sidebar-active-bg);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--cc-sidebar-active-text);
    font-weight: 700;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: var(--cc-sidebar-active-text);
}

.fi-sidebar-group-label {
    color: var(--cc-sidebar-text-muted);
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--cc-sidebar-text-muted);
}

.fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--cc-sidebar-active-bg);
}

.fi-sidebar-database-notifications-btn > .fi-icon {
    color: var(--cc-sidebar-text);
}

.fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
    color: var(--cc-sidebar-text);
}

/* Selector de cuenta al pie del sidebar. */
.fi-sidebar .fi-user-menu-trigger .fi-tenant-menu-trigger-text {
    color: var(--cc-sidebar-text);
}

.fi-sidebar .fi-user-menu-trigger .fi-icon {
    color: var(--cc-sidebar-text-muted);
}

.fi-sidebar .fi-user-menu-trigger:hover .fi-icon,
.fi-sidebar .fi-user-menu-trigger:focus-visible .fi-icon {
    color: var(--cc-sidebar-text);
}

/* ===== Logo en el topbar (Opción B) =====
   El topbar de Filament es una sola franja blanca de punta a punta; para
   que el navy del sidebar "suba" hasta arriba como en el boceto, se pinta
   de navy solo el segmento donde vive el logo (.fi-topbar-start), del
   mismo ancho que el sidebar — el resto del topbar (buscador, cuenta)
   queda igual que antes. */
.fi-topbar-start {
    background-color: var(--cc-sidebar-bg);
    align-self: stretch;
    width: var(--sidebar-width);
    margin-inline-start: calc(var(--spacing) * -4);
    padding-inline-start: calc(var(--spacing) * 4);
    box-sizing: border-box;
}

/* ===== Acento del panel del Asistente Clínico =====
   Franja teal arriba del contenido, a juego con el ícono en círculo que ya
   pone Filament (->modalIcon()) junto al título. */
.cc-assistant-header {
    position: relative;
    padding-top: 0.85rem;
}

.cc-assistant-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    background-color: var(--primary-500);
}

/* ===== Mis Preferencias / Mi Suscripción =====
   Estas 2 páginas antes vivían fuera de Filament (Blade + Tailwind CDN
   suelto); ahora son páginas nativas del panel. Filament compila su CSS
   por su cuenta (JIT sobre sus propios .blade.php), así que clases
   sueltas como text-sm o rounded-xl acá no existen en ese bundle — de
   ahí estas pocas clases propias, con las mismas variables --gray-* que
   ya se usan en el resto de este archivo. */
.cc-muted {
    color: var(--gray-500);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cc-pago-movil-box {
    background-color: var(--gray-50);
    border-radius: var(--rounded-lg, 0.5rem);
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.cc-pago-movil-box:where(.dark, .dark *) {
    background-color: var(--gray-800);
    color: var(--gray-300);
}

.cc-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.cc-table th {
    text-align: left;
    padding-block: 0.5rem;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
}

.cc-table td {
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}

.cc-table th:where(.dark, .dark *),
.cc-table td:where(.dark, .dark *) {
    border-bottom-color: var(--gray-700);
}

.cc-table td:where(.dark, .dark *) {
    color: var(--gray-300);
}