/* OdontoApp · capa de estilo sobre Metronic (etapa 3 · V9, 2026-11-04).
   Se carga DESPUÉS de style.bundle.css y no toca el CSS de Metronic: redefine sus variables con los colores de la app
   (lib/theme/colors.dart del repo móvil) y con contraste AA. Quitar la línea <link> de este archivo deja el panel como
   estaba. Medidas y razones en docs/analisis/2026-10-29-diseno-visual.md (H1, H2, H6 y «Correspondencia para el panel»). */

/* ── Letra: Manrope servida desde el propio servidor (variable, 400–800) ── */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Comunes a los dos temas (letra, radios y el verde agua de relleno) ── */
:root {
    --oa-dental: #12B5B5;
    --bs-font-sans-serif: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .85rem;
}

/* ── Tema claro ── (sin «:root» a secas: ganaría al bloque oscuro de Metronic en las variables que aquí no se repiten) */
:root:not([data-bs-theme=dark]),
[data-bs-theme=light] {
    --oa-fondo: #F6F7FB;
    --oa-superficie: #FFFFFF;
    --oa-superficie-2: #F0F2F8;
    --oa-borde: #E2E6F0;
    --oa-borde-2: #C3CAD9;
    --oa-texto: #0D1220;
    --oa-texto-2: #4A5771;
    --oa-texto-3: #5F6A84;
    --oa-tinta: #0C7D7D;
    --oa-tinta-hover: #0B6B6B;
    --oa-dental-fondo: #E7F8F8;
    --oa-medico: #A1611B;
    --oa-medico-fondo: #FBF3E9;
    --oa-exito: #117F3A;
    --oa-exito-fondo: #E6F5EE;
    --oa-aviso: #6C3B03;
    --oa-aviso-fondo: #FDF3E7;
    --oa-error: #D12424;
    --oa-error-fondo: #FBEAE8;
    --oa-primario: #0C7D7D;
    --oa-sobre-primario: #FFFFFF;
    --oa-banda: linear-gradient(135deg, #0C7D7D 0%, #12B5B5 100%);
    --oa-elevacion-1: 0 1px 2px rgba(13, 18, 32, .04), 0 6px 18px rgba(13, 18, 32, .05);
    --oa-elevacion-2: 0 2px 4px rgba(13, 18, 32, .06), 0 12px 28px -6px rgba(13, 18, 32, .14);

    --bs-body-color: #0D1220;
    --bs-body-color-rgb: 13, 18, 32;
    --bs-app-bg-color: #F6F7FB;
    --bs-text-gray-900: #0D1220;
    --bs-gray-900: #0D1220;
    --bs-text-gray-800: #1F2A44;
    --bs-text-muted: #5F6A84;
    --bs-gray-500: #5F6A84;
    --bs-text-gray-500: #5F6A84;
    --bs-gray-600: #4A5771;
    --bs-text-gray-600: #4A5771;
    --bs-secondary-color: #4A5771;

    /* Color principal: el verde agua de la app (blanco encima 4,95:1). */
    --bs-primary: #0C7D7D;
    --bs-primary-rgb: 12, 125, 125;
    --bs-primary-active: #0B6B6B;
    --bs-primary-light: #E7F8F8;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(12, 125, 125, .2);
    --bs-primary-text-emphasis: #064040;
    --bs-primary-bg-subtle: #CFEDED;
    --bs-primary-border-subtle: #9ED0D0;
    --bs-text-primary: #0C7D7D;
    --bs-link-color: #0C7D7D;
    --bs-link-color-rgb: 12, 125, 125;
    --bs-link-hover-color: #0B6B6B;
    --bs-link-hover-color-rgb: 11, 107, 107;
    --bs-focus-ring-color: rgba(12, 125, 125, .25);
    --bs-component-active-bg: #0C7D7D;
    --bs-component-hover-color: #0C7D7D;
    --bs-component-checked-bg: #0C7D7D;
    --bs-menu-link-color-hover: #0C7D7D;
    --bs-menu-link-color-show: #0C7D7D;
    --bs-menu-link-color-here: #0C7D7D;
    --bs-menu-link-color-active: #0C7D7D;
    --bs-ribbon-label-bg: #0C7D7D;
    --bs-scrolltop-bg-color: #0C7D7D;
    --bs-scrolltop-bg-color-hover: #0B6B6B;

    /* Info deja de ser morado: «Confirmada» es verde agua, como en la app. */
    --bs-info: #0C7D7D;
    --bs-info-rgb: 12, 125, 125;
    --bs-info-active: #0B6B6B;
    --bs-info-light: #E7F8F8;
    --bs-info-inverse: #FFFFFF;
    --bs-info-clarity: rgba(12, 125, 125, .2);
    --bs-text-info: #0C7D7D;

    /* Éxito: el verde de Metronic daba 2,27:1 con blanco; este da 5,1:1. */
    --bs-success: #117F3A;
    --bs-success-rgb: 17, 127, 58;
    --bs-success-active: #0E6B31;
    --bs-success-light: #E6F5EE;
    --bs-success-inverse: #FFFFFF;
    --bs-success-clarity: rgba(17, 127, 58, .2);
    --bs-success-text-emphasis: #094F21;
    --bs-text-success: #117F3A;
    --bs-form-valid-color: #117F3A;
    --bs-form-valid-border-color: #117F3A;

    /* Aviso: el amarillo daba 1,58–1,69:1; el ámbar oscuro da 8,46:1 sobre su fondo. */
    --bs-warning: #6C3B03;
    --bs-warning-rgb: 108, 59, 3;
    --bs-warning-active: #5A3102;
    --bs-warning-light: #FDF3E7;
    --bs-warning-inverse: #FFFFFF;
    --bs-warning-clarity: rgba(108, 59, 3, .2);
    --bs-warning-text-emphasis: #4A2802;
    --bs-text-warning: #6C3B03;

    --bs-danger: #D12424;
    --bs-danger-rgb: 209, 36, 36;
    --bs-danger-active: #B01E1E;
    --bs-danger-light: #FBEAE8;
    --bs-danger-inverse: #FFFFFF;
    --bs-danger-clarity: rgba(209, 36, 36, .2);
    --bs-danger-text-emphasis: #6E1212;
    --bs-text-danger: #D12424;
    --bs-form-invalid-color: #D12424;
    --bs-form-invalid-border-color: #D12424;

}

/* ── Tema oscuro (fondos y textos de la app; el principal lleva texto oscuro encima) ── */
[data-bs-theme=dark] {
    --oa-fondo: #070B14;
    --oa-superficie: #111726;
    --oa-superficie-2: #1A2232;
    --oa-borde: #263046;
    --oa-borde-2: #3A4660;
    --oa-texto: #F0F2F8;
    --oa-texto-2: #C3CAD9;
    --oa-texto-3: #98A2B8;
    --oa-tinta: #5FDCDC;
    --oa-tinta-hover: #8BE7E7;
    --oa-dental-fondo: rgba(18, 181, 181, .16);
    --oa-medico: #F0B368;
    --oa-medico-fondo: rgba(217, 131, 36, .18);
    --oa-exito: #6FD39A;
    --oa-exito-fondo: rgba(17, 127, 58, .24);
    --oa-aviso: #F0B368;
    --oa-aviso-fondo: rgba(217, 131, 36, .18);
    --oa-error: #FF8A80;
    --oa-error-fondo: rgba(209, 36, 36, .22);
    --oa-primario: #12B5B5;
    --oa-sobre-primario: #04201F;
    --oa-banda: linear-gradient(135deg, #06393A 0%, #0C6E6E 100%);
    --oa-elevacion-1: none;
    --oa-elevacion-2: none;

    --bs-body-color: #F0F2F8;
    --bs-body-color-rgb: 240, 242, 248;
    --bs-body-bg: #111726;
    --bs-body-bg-rgb: 17, 23, 38;
    --bs-app-bg-color: #070B14;
    --bs-text-gray-900: #F0F2F8;
    --bs-text-muted: #98A2B8;
    --bs-gray-500: #98A2B8;
    --bs-text-gray-500: #98A2B8;
    --bs-gray-600: #C3CAD9;
    --bs-text-gray-600: #C3CAD9;
    --bs-secondary-color: #C3CAD9;

    --bs-primary: #12B5B5;
    --bs-primary-rgb: 18, 181, 181;
    --bs-primary-active: #0FA0A0;
    --bs-primary-light: rgba(18, 181, 181, .16);
    --bs-primary-inverse: #04201F;
    --bs-primary-clarity: rgba(18, 181, 181, .2);
    --bs-text-primary: #5FDCDC;
    --bs-link-color: #5FDCDC;
    --bs-link-color-rgb: 95, 220, 220;
    --bs-link-hover-color: #8BE7E7;
    --bs-link-hover-color-rgb: 139, 231, 231;
    --bs-focus-ring-color: rgba(18, 181, 181, .3);
    --bs-component-active-bg: #12B5B5;
    --bs-component-active-color: #04201F;
    --bs-component-hover-color: #5FDCDC;
    --bs-component-checked-bg: #12B5B5;
    --bs-menu-link-color-hover: #5FDCDC;
    --bs-menu-link-color-show: #5FDCDC;
    --bs-menu-link-color-here: #5FDCDC;
    --bs-menu-link-color-active: #5FDCDC;
    --bs-ribbon-label-bg: #12B5B5;
    --bs-scrolltop-bg-color: #12B5B5;
    --bs-scrolltop-bg-color-hover: #0FA0A0;

    --bs-info: #12B5B5;
    --bs-info-rgb: 18, 181, 181;
    --bs-info-active: #0FA0A0;
    --bs-info-light: rgba(18, 181, 181, .16);
    --bs-info-inverse: #04201F;
    --bs-text-info: #5FDCDC;

    --bs-success: #6FD39A;
    --bs-success-rgb: 111, 211, 154;
    --bs-success-active: #58C487;
    --bs-success-light: rgba(17, 127, 58, .24);
    --bs-success-inverse: #062812;
    --bs-text-success: #6FD39A;
    --bs-form-valid-color: #6FD39A;
    --bs-form-valid-border-color: #6FD39A;

    --bs-warning: #F0B368;
    --bs-warning-rgb: 240, 179, 104;
    --bs-warning-active: #E8A04A;
    --bs-warning-light: rgba(217, 131, 36, .18);
    --bs-warning-inverse: #2B1700;
    --bs-text-warning: #F0B368;

    --bs-danger: #FF8A80;
    --bs-danger-rgb: 255, 138, 128;
    --bs-danger-active: #FF6F63;
    --bs-danger-light: rgba(209, 36, 36, .22);
    --bs-danger-inverse: #3A0A07;
    --bs-text-danger: #FF8A80;
    --bs-form-invalid-color: #FF8A80;
    --bs-form-invalid-border-color: #FF8A80;
}

/* ── Escala: 14 px fijos (Metronic usa 13 y baja a 12 en tableta, que es la pantalla de la recepción) ── */
html { font-size: 14px !important; font-family: var(--bs-font-sans-serif); }
@media (max-width: 991.98px) { html { font-size: 14px !important; } }
body { font-family: var(--bs-body-font-family); }
.fs-9 { font-size: 12px !important; }      /* mínimo absoluto: 12 px en cualquier superficie */
.fs-8 { font-size: 12.5px !important; }
.badge { font-weight: 700; }

/* «Solo consulta» y el resto de avisos en amarillo relleno: texto oscuro no, blanco sobre ámbar (4,95:1). */
.badge-warning, .btn.btn-warning { background-color: var(--oa-medico); border-color: var(--oa-medico); }
[data-bs-theme=dark] .badge-warning, [data-bs-theme=dark] .btn.btn-warning { color: #2B1700; }

/* ── Tarjetas, botones y campos: radios y elevación de la casa ── */
.card {
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    --bs-card-border-color: var(--oa-borde);
    box-shadow: var(--oa-elevacion-1);
}
.btn { --bs-btn-border-radius: 12px; }
.btn.btn-sm { --bs-btn-border-radius: 10px; }
.btn.btn-icon.btn-circle, .btn.rounded-circle { --bs-btn-border-radius: 50%; }
.modal-content { --bs-modal-border-radius: 20px; --bs-modal-inner-border-radius: 19px; }
.dropdown-menu, .menu-sub-dropdown { box-shadow: var(--oa-elevacion-2); }
.text-primary-dental { color: var(--oa-tinta) !important; }

/* ── Login: la banda en degradado de la app en lugar de la foto de muestra de Metronic ── */
body.oa-login { background: var(--oa-banda) fixed !important; }

/* ── Avisos flotantes (antes en css/style.css, heredado de Servicios Expresos) ── */
#alerts-container .alert { position: relative; overflow: hidden; }
#alerts-container .alert-progress {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: rgba(var(--bs-body-color-rgb), .18); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
    #alerts-container .alert { animation: oa-aviso-entra .22s cubic-bezier(.22, 1, .36, 1); }
    #alerts-container .alert.closing { animation: oa-aviso-sale .2s ease-in forwards; }
}
@keyframes oa-aviso-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oa-aviso-sale { to { transform: translateX(24px); opacity: 0; } }

/* ── Números de dato: ancho fijo para que las cifras no bailen ── */
.oa-cifra, .table td.text-end, .fw-bolder.fs-2x, .fw-bolder.fs-2hx { font-variant-numeric: tabular-nums; }

/* Montos en tablas: la moneda no se separa del número al pasar a 14 px. */
.table td.text-end, .table th.text-end { white-space: nowrap; }

/* ── Situación de una cita: una sola tabla para web, app y portal (H3). Color + icono + texto, nunca el color solo ── */
.badge.oa-sit { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.oa-sit i, .oa-sit-ico { font-size: 14px; color: inherit; }
.oa-sit i span::before { color: inherit; }
.oa-sit-solicitada   { background: var(--oa-aviso-fondo);   color: var(--oa-aviso); }
.oa-sit-programada   { background: var(--oa-superficie-2);  color: var(--oa-texto-2); }
.oa-sit-confirmada   { background: var(--oa-dental-fondo);  color: var(--oa-tinta); }
.oa-sit-en_sala      { background: var(--oa-medico-fondo);  color: var(--oa-medico); }
.oa-sit-en_atencion  { background: var(--oa-primario);      color: var(--oa-sobre-primario); }
.oa-sit-atendida     { background: var(--oa-exito-fondo);   color: var(--oa-exito); }
.oa-sit-no_asistio   { background: var(--oa-error-fondo);   color: var(--oa-error); }
.oa-sit-cancelada    { background: var(--oa-superficie-2);  color: var(--oa-texto-3); text-decoration: line-through; }
.oa-sit-reprogramada { background: var(--oa-superficie-2);  color: var(--oa-texto-3); }
/* El icono suelto (dentro de la cita del calendario) va con la tinta de su situación. */
.oa-ico-solicitada { color: var(--oa-aviso); } .oa-ico-programada { color: var(--oa-texto-2); } .oa-ico-confirmada { color: var(--oa-tinta); }
.oa-ico-en_sala { color: var(--oa-medico); } .oa-ico-en_atencion { color: var(--oa-tinta); } .oa-ico-atendida { color: var(--oa-exito); }
.oa-ico-no_asistio { color: var(--oa-error); } .oa-ico-cancelada, .oa-ico-reprogramada { color: var(--oa-texto-3); }

/* ── Calendario de la agenda (H4): relleno claro del color del sillón + franja de 4 px; el texto siempre oscuro ── */
#Agenda_Card .fc-event.oa-cita { border-width: 0 0 0 4px; border-style: solid; }
#Agenda_Card .fc-event.oa-cita .fc-event-main { color: var(--oa-texto); }
#Agenda_Card .oa-cita-hora { font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
#Agenda_Card .oa-cita-nombre { font-size: 13px; font-weight: 700; }
#Agenda_Card .oa-cita-extra { font-size: 12px; color: var(--oa-texto-2); }

/* FullCalendar toma el blanco como color de página (cabecera fija y anillo de cada cita); que siga al tema. */
.fc { --fc-page-bg-color: var(--bs-body-bg); --fc-today-bg-color: color-mix(in srgb, var(--oa-dental) 8%, transparent); }

/* Casillas, interruptores y deslizadores: Metronic deja el azul escrito a mano (no por variable). */
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }

/* ── Buscador de pacientes de la cabecera (etapa 7 · T4) ───────────────────── */
.cab-buscador { position: relative; width: 280px; display: none; }
@media (min-width: 768px) { .cab-buscador { display: block; } }
.cab-buscador.abierto { display: block; position: fixed; top: 12px; left: 16px; right: 16px; width: auto; z-index: 1060; }
@media (min-width: 768px) { .cab-buscador.abierto { position: relative; top: auto; left: auto; right: auto; width: 280px; } }
.cab-buscador .form-control { padding-left: 2.4rem; padding-right: 2.2rem; }
.cab-buscador-ico { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.cab-buscador-atajo { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: 11px; padding: 1px 6px;
    border: 1px solid var(--bs-gray-300); border-radius: 4px; background: transparent; color: var(--bs-gray-600); pointer-events: none; }
.cab-buscador .form-control:focus ~ .cab-buscador-atajo { display: none; }
.cab-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 360px; overflow-y: auto; z-index: 1061;
    background: var(--bs-body-bg); border: 1px solid var(--bs-gray-200); border-radius: .75rem; box-shadow: var(--bs-dropdown-box-shadow, 0 8px 24px rgba(0,0,0,.12)); }
.cab-resultado { padding: .6rem 1rem; cursor: pointer; }
.cab-resultado + .cab-resultado { border-top: 1px solid var(--bs-gray-100); }
.cab-resultado.activo, .cab-resultado:hover { background: var(--bs-gray-100); }

/* Botones del calendario: sin mayúscula en cada palabra («Lista del día», no «Lista Del Día») · etapa 7 */
#Agenda_Card .fc .fc-button { text-transform: none; }