/* ═══════════════════════════════════════════════════════════════════════════
   EndoArt ERP — Estilos Principales
   Paleta: Azul #1E3A8A | Verde Lima #78BE20 | Gris #8C8C8C
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --color-primario:      #1E3A8A;
    --color-secundario:    #78BE20;
    --color-acento:        #8C8C8C;
    --color-prim-dark:     #152B6B;
    --color-prim-light:    #2d4fa3;
    --color-sec-dark:      #5A8E18;
    --color-sec-light:     #8fd42a;
    --color-light-bg:      #F0F7FF;
    --color-sidebar-bg:    #1A2F72;
    --color-sidebar-hover: #162663;
    --color-sidebar-active:#0f1d47;
    --color-texto:         #1A1A2E;
    --color-texto-muted:   #6B7280;
    --color-borde:         #D1D9E0;
    --sidebar-w:           250px;
    --navbar-h:            56px;
    --font-main:           'Poppins', sans-serif;
    --border-radius:       0.5rem;
    --transition:          0.2s ease;
}

/* ── Reset / base ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* iOS: remove tap flash */
}

html {
    /* iOS Safari: use fill-available to avoid address-bar height issues */
    height: -webkit-fill-available;
}

body {
    font-family:  var(--font-main);
    font-size:    14px;
    color:        var(--color-texto);
    background:   #F5F7FB;
    overflow-x:   hidden;
    min-height:   100vh;
    min-height:   -webkit-fill-available;
}

a { text-decoration: none; }

/* iOS: fast tap + pointer on all interactive elements */
a, button, [type="button"], [type="submit"], [type="reset"],
label, [role="button"], .btn, .nav-link, .sidebar-link,
.sidebar-sublink, .page-link, .dropdown-item, .form-check-input {
    touch-action: manipulation;
    cursor: pointer;
}

/* ── Navbar superior ────────────────────────────────────────────────────────── */
.navbar-principal {
    background: var(--color-primario) !important;
    height:     var(--navbar-h);
    z-index:    1040;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.navbar-logo {
    border-radius: 4px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.badge-campanita {
    position: absolute;
    top: -4px; right: -6px;
    font-size: 9px;
    min-width: 16px;
    padding: 2px 4px;
    border-radius: 8px;
}
.avatar-initials {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-secundario);
    color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar {
    position:   fixed;
    top:        var(--navbar-h);
    left:       0;
    width:      var(--sidebar-w);
    height:     calc(100vh - var(--navbar-h));
    height:     calc(100dvh - var(--navbar-h)); /* iOS 15.4+: excludes browser chrome */
    background: var(--color-sidebar-bg);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    z-index:    1030;
    display:    flex;
    flex-direction: column;
    transition: transform var(--transition);
    /* Ensure sidebar stays within safe area on notched iPhones */
    padding-bottom: env(safe-area-inset-bottom);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

.sidebar-profile {
    padding: 1.25rem 1rem .75rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.avatar-lg {
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--color-secundario);
    color: #fff; font-size: 20px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-badge-rol { margin-top: 4px; }

/* Navegación */
.sidebar-nav { flex: 1; padding: .5rem 0; }

.sidebar-link {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    padding:     .6rem 1rem;
    color:       rgba(255,255,255,.80) !important;
    font-weight: 500;
    font-size:   .85rem;
    border-left: 3px solid transparent;
    transition:  background var(--transition), border-color var(--transition), color var(--transition);
}
.sidebar-link:hover {
    background:   var(--color-sidebar-hover);
    color:        #fff !important;
}
.sidebar-link.active, .sidebar-link[aria-expanded="true"] {
    background:   var(--color-sidebar-active);
    border-color: var(--color-secundario);
    color:        #fff !important;
}
.sidebar-icon { font-size: 1.05rem; flex-shrink: 0; }
.sidebar-chevron {
    font-size: .7rem; transition: transform var(--transition);
}
.sidebar-link[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }

/* Submenú */
.sidebar-submenu { padding: 0; }
.sidebar-sublink {
    padding:  .45rem 1rem .45rem 2.4rem;
    color:    rgba(255,255,255,.65) !important;
    font-size:.82rem;
    transition: background var(--transition), color var(--transition);
}
.sidebar-sublink:hover, .sidebar-sublink.active {
    background: rgba(255,255,255,.07);
    color: #fff !important;
}

.sidebar-footer {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
}

/* ── Layout principal ────────────────────────────────────────────────────────── */
.layout-wrapper {
    display: flex;
    margin-top: var(--navbar-h);
}
.contenido-principal {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height:  calc(100vh - var(--navbar-h));
    min-height:  calc(100dvh - var(--navbar-h)); /* iOS 15.4+ */
    padding: 1.5rem;
    /* Respect safe-area on notched iPhones (landscape) */
    padding-left:  max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    transition:  margin-left var(--transition);
}

/* ── Overlay móvil ───────────────────────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* expanded: inset shorthand not in iOS < 14.1 */
    background: rgba(0,0,0,.5);
    z-index: 1029;
}
.sidebar-overlay.visible { display: block; }

/* Responsive: sidebar oculto por defecto en móvil */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.sidebar-visible { transform: translateX(0); }
    .contenido-principal { margin-left: 0; }
}

/* ── Breadcrumb / Page header ────────────────────────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
    padding-bottom:  .75rem;
    border-bottom:   2px solid var(--color-borde);
}
.page-header h1, .page-header h2 {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--color-primario);
    margin:      0;
}
.page-header .bi { color: var(--color-secundario); }

/* ── Cards KPI ───────────────────────────────────────────────────────────────── */
.card-kpi {
    border:        none;
    border-radius: var(--border-radius);
    box-shadow:    0 2px 12px rgba(0,0,0,.07);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.card-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.card-kpi .kpi-icono {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.kpi-primario  { background: rgba(30,58,138,.1);  color: var(--color-primario); }
.kpi-secundario{ background: rgba(120,190,32,.15); color: var(--color-sec-dark); }
.kpi-peligro   { background: rgba(239,68,68,.1);  color: #dc2626; }
.kpi-advertencia{ background: rgba(245,158,11,.1); color: #d97706; }
.kpi-valor {
    font-size:   1.8rem;
    font-weight: 700;
    color:       var(--color-texto);
    line-height: 1;
}
.kpi-label { font-size: .78rem; color: var(--color-texto-muted); font-weight: 500; }

/* ── Botones custom ─────────────────────────────────────────────────────────── */
.btn-primario {
    background:   var(--color-primario);
    border-color: var(--color-primario);
    color:        #fff;
}
.btn-primario:hover, .btn-primario:focus {
    background:   var(--color-prim-dark);
    border-color: var(--color-prim-dark);
    color:        #fff;
}
.btn-secundario {
    background:   var(--color-secundario);
    border-color: var(--color-secundario);
    color:        #fff;
}
.btn-secundario:hover, .btn-secundario:focus {
    background:   var(--color-sec-dark);
    border-color: var(--color-sec-dark);
    color:        #fff;
}
.btn-whatsapp {
    background: #25D366; border-color: #25D366; color: #fff;
}
.btn-whatsapp:hover { background: #128C7E; border-color: #128C7E; color: #fff; }

/* ── Tablas ─────────────────────────────────────────────────────────────────── */
.tabla-dental {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .85rem;
}
.tabla-dental thead th {
    background:    var(--color-primario);
    color:         #fff;
    font-weight:   600;
    letter-spacing:.3px;
    border:        none;
    padding:       .6rem .75rem;
    white-space:   nowrap;
}
.tabla-dental thead th:first-child { border-radius: var(--border-radius) 0 0 0; }
.tabla-dental thead th:last-child  { border-radius: 0 var(--border-radius) 0 0; }
.tabla-dental tbody tr:hover { background: var(--color-light-bg); }
.tabla-dental tbody td { padding: .55rem .75rem; vertical-align: middle; }
.tabla-dental tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--border-radius); }
.tabla-dental tbody tr:last-child td:last-child  { border-radius: 0 0 var(--border-radius) 0; }

/* ── Formularios ────────────────────────────────────────────────────────────── */
.form-label { font-weight: 500; font-size: .85rem; color: var(--color-texto); }
.form-control:focus, .form-select:focus {
    border-color: var(--color-primario);
    box-shadow:   0 0 0 .2rem rgba(30,58,138,.15);
}
.form-section-title {
    font-size:   .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:       var(--color-acento);
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: .85rem;
    margin-top:    1rem;
}

/* Alerta de alergia en formularios */
.alerta-alergia {
    background: #FEF2F2; border: 1px solid #FECACA;
    border-radius: var(--border-radius); padding: .65rem 1rem;
    color: #991B1B; font-size: .85rem; font-weight: 500;
}
.alerta-alergia i { color: #EF4444; }

/* ── Cards contenedoras ──────────────────────────────────────────────────────── */
.card-dental {
    border:        none;
    border-radius: var(--border-radius);
    box-shadow:    0 2px 12px rgba(0,0,0,.07);
}
.card-dental .card-header {
    background:    var(--color-light-bg);
    border-bottom: 1px solid var(--color-borde);
    font-weight:   600;
    color:         var(--color-primario);
    font-size:     .9rem;
}

/* ── Login ───────────────────────────────────────────────────────────────────── */
.login-wrapper {
    min-height:      100vh;
    min-height:      100dvh; /* iOS 15.4+: true viewport height */
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, var(--color-primario) 0%, var(--color-sidebar-hover) 60%, #0f1d47 100%);
    padding:         1rem;
}
.login-card {
    width:         100%;
    max-width:     420px;
    border:        none;
    border-radius: 1rem;
    box-shadow:    0 20px 60px rgba(0,0,0,.35);
    overflow:      hidden;
}
.login-header {
    background: var(--color-primario);
    padding:    2rem 1.5rem 1.5rem;
    text-align: center;
}
.login-header img  { max-width: 160px; }
.login-header h2   { color: #fff; font-size: 1rem; margin: .75rem 0 0; font-weight: 400; opacity: .9; }
.login-body        { padding: 2rem 1.5rem; background: #fff; }
.btn-login {
    background:   var(--color-primario);
    border-color: var(--color-primario);
    color:        #fff;
    font-weight:  600;
    padding:      .6rem;
    font-size:    .95rem;
    transition:   background var(--transition);
}
.btn-login:hover { background: var(--color-prim-dark); border-color: var(--color-prim-dark); color: #fff; }
.login-divider {
    display: flex; align-items: center; gap: .75rem;
    color: var(--color-acento); font-size: .78rem;
}
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--color-borde);
}

/* ── Badges / etiquetas ──────────────────────────────────────────────────────── */
.badge { font-size: .75rem; font-weight: 500; }

/* ── Toast / Notificaciones ──────────────────────────────────────────────────── */
#toastContainer {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 9999; min-width: 300px;
}

/* ── Scrollbar personalizado ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-acento); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primario); }

/* ── Página 403 / error ──────────────────────────────────────────────────────── */
.error-page {
    min-height:      80vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}
.error-page .error-code {
    font-size:   6rem;
    font-weight: 800;
    color:       var(--color-primario);
    line-height: 1;
}
.error-page .error-code span { color: var(--color-secundario); }

/* ── Utilidades ───────────────────────────────────────────────────────────────── */
.text-primario  { color: var(--color-primario) !important; }
.text-secundario{ color: var(--color-secundario) !important; }
.bg-primario    { background: var(--color-primario) !important; }
.bg-secundario  { background: var(--color-secundario) !important; }
.border-primario{ border-color: var(--color-primario) !important; }
.fw-600         { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet y Móvil
   ══════════════════════════════════════════════════════════════════════════ */

/* Bloquear scroll del body cuando el sidebar está abierto.
   position:fixed es el único método que funciona en iOS Safari
   (overflow:hidden en body es ignorado por iOS). El JS guarda/restaura scrollY.
   Solo aplica en móvil/tablet donde el sidebar es un drawer. */
@media (max-width: 991.98px) {
    body.sidebar-abierta {
        position: fixed;
        width: 100%;
        overflow-y: scroll; /* keeps scrollbar width, prevents layout shift */
    }
}

/* ── Navbar safe-area (notch / Dynamic Island) ────────────────────────── */
.navbar-principal {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ── iOS: prevent input auto-zoom (triggered when font-size < 16px) ───── */
/* Applied only on touch devices to avoid affecting desktop layout */
@media (max-width: 991.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS Safari auto-zoom on focus */
    }
}

/* ── Tablet (< 992px) ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .contenido-principal {
        padding: 1rem;
    }

    /* Page header apila título + acciones en pantallas medianas */
    .page-header {
        flex-wrap: wrap;
        gap: .5rem;
        align-items: flex-start;
    }

    /* KPI: mostrar 2 por fila en tablet */
    .row-kpi > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tabla responsive: scroll horizontal automático */
    .tabla-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Navbar: dar más espacio al brand en tablet */
    .navbar-principal .navbar-brand span {
        font-size: .9rem;
    }
}

/* ── Móvil (< 576px) ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .contenido-principal {
        padding: .75rem .6rem;
    }

    .page-header h1, .page-header h2 {
        font-size: 1.1rem;
    }

    /* KPI: 1 por fila en móvil */
    .row-kpi > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .kpi-valor { font-size: 1.4rem; }

    /* Tablas más compactas */
    .tabla-dental { font-size: .78rem; }
    .tabla-dental thead th,
    .tabla-dental tbody td { padding: .4rem .5rem; }

    /* Toast más pequeño en móvil */
    #toastContainer { min-width: 260px; right: .5rem; bottom: .75rem; }

    /* Cards con menos padding */
    .card-dental .card-body { padding: .75rem; }

    /* Formularios: botones a ancho completo */
    .d-flex.gap-2.mb-4 { flex-direction: column; }
    .d-flex.gap-2.mb-4 .btn { width: 100%; }
}

/* ── Odontograma en tablet: scroll horizontal ─────────────────────────── */
@media (max-width: 991.98px) {
    .odontograma-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Toolbar del odontograma en 2 filas si no cabe */
    .odo-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Leyenda en columna en tablet */
    .leyenda-hallazgos {
        gap: 4px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS SAFARI — Ajustes adicionales
   ══════════════════════════════════════════════════════════════════════════ */

/* Smooth scroll en todas las áreas overflow */
.table-responsive,
.modal-body,
.card-body[style*="overflow"],
.card-body[style*="max-height"] {
    -webkit-overflow-scrolling: touch;
}

/* iOS Safari: remove the inner shadow/inset that iOS applies to text inputs.
   Bootstrap already handles .form-control and .form-select, so this
   only targets inputs that don't carry Bootstrap classes. */
input:not([class]),
textarea:not([class]) {
    -webkit-appearance: none;
    appearance: none;
}

/* iOS Safari: date/time inputs need a minimum height to be tappable */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-height: 38px;
    line-height: normal;
}

/* iOS Safari: Bootstrap's modal sets overflow:hidden on body (.modal-open)
   which is ignored by iOS. Bootstrap 5.3+ compensates with padding-right,
   but scroll still leaks. The -webkit-overflow-scrolling on the modal itself
   ensures smooth inner scrolling. */
.modal {
    -webkit-overflow-scrolling: touch;
}
.modal-dialog {
    /* Ensure modal is within safe areas on notched iPhones */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* iOS: fix para que el contenido del contenido-principal en móvil
   no quede debajo del sidebar cuando se usa position:fixed en body */
@media (max-width: 991.98px) {
    .contenido-principal {
        padding-left:  max(.6rem, env(safe-area-inset-left));
        padding-right: max(.6rem, env(safe-area-inset-right));
        padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    }
}

/* Autocomplete dropdown: asegurar tap en iOS */
.ac-resultados .ac-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Charts: asegurar que canvas no sea más ancho que su contenedor en iOS */
canvas {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDSCAPE — Tablet horizontal (uso principal en trabajo clínico)
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * En tablet landscape (768–1199 px de ancho) el sidebar se muestra siempre,
 * igual que en desktop, pero con dimensiones más compactas para aprovechar
 * el espacio vertical reducido.
 */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {

    /* Variables ajustadas */
    :root {
        --sidebar-w: 220px;
        --navbar-h:  48px;
    }

    /* Sidebar siempre visible (anula el translateX(-100%) del breakpoint general) */
    .sidebar {
        transform: translateX(0) !important;
    }

    /* Contenido empujado por el sidebar */
    .contenido-principal {
        margin-left: var(--sidebar-w) !important;
        padding:     .85rem 1rem;
        padding-left:  max(.85rem, env(safe-area-inset-left));
        padding-right: max(.85rem, env(safe-area-inset-right));
        padding-bottom: max(.85rem, env(safe-area-inset-bottom));
    }

    /* Botón hamburguesa innecesario */
    #btnToggleSidebar { display: none !important; }

    /* Overlay no aplica */
    .sidebar-overlay { display: none !important; }

    /* Perfil: horizontal y compacto para no desperdiciar altura */
    .sidebar-profile {
        display:     flex;
        align-items: center;
        gap:         .5rem;
        padding:     .5rem .75rem;
        text-align:  left;
    }
    .sidebar-profile .avatar-lg,
    .sidebar-profile img.rounded-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px;
        flex-shrink: 0;
        margin: 0 !important;
    }
    .sidebar-profile .small  { font-size: .75rem; }
    .sidebar-badge-rol       { display: none; }     /* quita badge de rol */

    /* Links del menú más compactos */
    .sidebar-link   { padding: .42rem .75rem; font-size: .82rem; }
    .sidebar-sublink{ padding: .33rem .75rem .33rem 2rem; font-size: .79rem; }
    .sidebar-footer { padding: .4rem .75rem; }

    /* Page header: sin margen excesivo */
    .page-header {
        margin-bottom: .75rem;
        padding-bottom: .45rem;
    }
    .page-header h1,
    .page-header h2 { font-size: 1.15rem; }

    /* KPI: 4 tarjetas por fila en tablet landscape */
    .row-kpi > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* Tabla: sin altura mínima forzada */
    .tabla-dental { font-size: .82rem; }
    .tabla-dental thead th,
    .tabla-dental tbody td { padding: .48rem .65rem; }
}

/* ── Navbar reducida en cualquier landscape (altura < 650px) ─────────── */
@media (max-height: 650px) and (orientation: landscape) {
    :root { --navbar-h: 48px; }
}

/* ── Teléfono landscape (< 768px ancho ó altura ≤ 500px) — ultra-compacto */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --navbar-h: 44px; }

    .sidebar-profile          { padding: .35rem .6rem; }
    .sidebar-profile .small,
    .sidebar-badge-rol        { display: none; }
    .avatar-lg                { width: 28px; height: 28px; font-size: 12px; }

    .sidebar-link             { padding: .32rem .65rem; font-size: .79rem; }
    .sidebar-sublink          { padding: .25rem .65rem .25rem 1.9rem; font-size: .76rem; }
    .sidebar-footer           { padding: .3rem .6rem; }

    .contenido-principal      { padding: .5rem .65rem; }
    .page-header              { margin-bottom: .45rem; padding-bottom: .3rem; }
    .page-header h1,
    .page-header h2           { font-size: 1rem; }

    #toastContainer           { bottom: .5rem; right: .5rem; min-width: 240px; }
}

/* ── Login: layout lado a lado en landscape ─────────────────────────── */
@media (max-height: 650px) and (orientation: landscape) {
    .login-wrapper {
        align-items:  flex-start;
        overflow-y:   auto;
        padding:      .6rem;
    }
    .login-card {
        display:        flex;
        flex-direction: row;
        max-width:      680px;
        margin:         0 auto;
    }
    .login-header {
        width:           200px;
        flex-shrink:     0;
        border-radius:   1rem 0 0 1rem;
        padding:         1.5rem 1rem;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
    }
    .login-header img       { max-width: 90px; }
    .login-header h2        { font-size: .82rem; margin-top: .4rem; }
    .login-body             { flex: 1; padding: 1.25rem 1.5rem; overflow-y: auto; }
    .login-body h5          { font-size: 1rem; margin-bottom: .75rem !important; }
    .login-divider          { margin-top: .75rem !important; }
}

/* ── Odontograma: aprovechar ancho en landscape ─────────────────────── */
@media (orientation: landscape) {
    /* Dientes más grandes — más espacio horizontal disponible */
    .diente-svg { height: 46px; }
}
@media (orientation: landscape) and (max-height: 600px) {
    /* En landscape estrecho (teléfono) volver al tamaño base */
    .diente-svg { height: 40px; }
}