/* Endodontics — theme override para Filament v4
 *
 * Sprint B · B3 (19/05/2026, decisión #74): consolidación + WCAG AA fixes.
 * El theme original es de mayo 2026 (decisión post-Sprint 1), esta iteración:
 *   - Usa --endo-bronze-dark (#8B6D45, 4.86:1 sobre blanco) en lugar de
 *     --endo-bronze (#A6835A, 3.48:1) para todo lo que tiene texto blanco encima
 *     (primary buttons, section header borders cuando hacen de divider clave).
 *   - Mantiene --endo-bronze para decorativos (iconos, accents donde el contraste
 *     no aplica directamente al texto).
 *   - Agrega .fi-section-header border-bottom bronze como divider distintivo.
 *
 * El bronze que ya vive en PDFs (decisión #31 letterhead), emails (#54 cierre mensual),
 * frontend público (BL-06 reschedule) y print views ahora también en el admin —
 * brand cohesion full-stack.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --endo-cream:        #FAF6F0;
    --endo-cream-deep:   #F3EDE3;
    --endo-beige:        #EDE6DB;
    --endo-sand:         #D4C8B5;
    --endo-bronze:       #A6835A;  /* Decorativo: iconos, group labels (no carga texto blanco) */
    --endo-bronze-dark:  #8B6D45;  /* WCAG AA 4.86:1 — primary buttons, active states, focus rings */
    --endo-espresso:     #2C2118;
    --endo-white:        #FFFDF9;

    /* Sub-sprint 34 (28/05/2026): typography tokens.
     * Cormorant Garamond = voz de marca ESCASA — solo H1 hero + data hero.
     * DM Sans = scaffolding del panel (H2 sección, body, forms, tables).
     * DM Mono = labels uppercase (card labels, eventuales metadatos). */
    --font-display:      'Cormorant Garamond', Georgia, serif;
    --font-sans:         'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono:         ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    --h1-hero-size:      44px;   /* página title — Cormorant 500 */
    --h1-hero-lh:        1.1;

    --data-hero-size:    36px;   /* monto/fecha grande dentro de Tier A cards — Cormorant 500 */
    --data-hero-lh:      1.05;

    --h2-section-size:   18px;   /* heading de sección / card — DM Sans 500 */
    --h2-section-lh:     1.35;

    --h3-label-size:     11px;   /* label uppercase de card — DM Mono 500 */
    --h3-label-track:    0.14em;

    /* Sub-sprint 33 (28/05/2026): cards 2 niveles — Tier A (dato/acción) vs
     * Tier B (contexto read-only). Criterio = densidad de acción, no
     * criticidad. Empty states nunca son Tier A → .is-empty degrada a B. */
    --card-a-bg:         #FFFFFF;
    --card-a-border:     #E5DDD0;
    --card-a-radius:     8px;
    --card-a-pad-y:      24px;
    --card-a-pad-x:      28px;

    --card-b-bg:         #FFFFFF;
    --card-b-border:     #EFEAE0;
    --card-b-radius:     8px;
    --card-b-pad-y:      16px;
    --card-b-pad-x:      18px;

    --bronze-tint:       #F4EBDA;   /* fondo Tier A hero (próxima cita filled, saldo, Neto del mes) */
    --bronze-tint-edge:  rgba(139, 109, 69, 0.20);  /* border Tier A hero */
}

/* Cuerpo + sidebar — fondo cream */
body, .fi-body {
    background-color: var(--endo-cream) !important;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

.fi-sidebar, .fi-sidebar-nav, .fi-topbar {
    background-color: var(--endo-white) !important;
    border-color: var(--endo-beige) !important;
}

/* Sub-sprint 34 (28/05/2026): typography scale aplicada — Cormorant ESCASA.
 * Reemplaza el rule combinado que mezclaba H1 (página) con section headings.
 * Ahora:
 *   - H1 hero (página title) → Cormorant 500 44px
 *   - H2 sección (Filament section headings: "Datos personales", "Recibos de
 *     abono", "Plan de tratamiento") → DM Sans 500 18px
 *   - H3 card-label (custom blade cards del Resumen: "Identidad", "Atajos",
 *     "Alertas clínicas activas") → DM Mono uppercase 500 11px
 *   - Data hero (monto/fecha grande dentro de Tier A cards) → Cormorant 500 36px */

/* H1 hero — título de página (sigue siendo Cormorant) */
.fi-header-heading, .fi-page-heading,
h1.fi-h {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-size: var(--h1-hero-size) !important;
    line-height: var(--h1-hero-lh) !important;
    color: var(--endo-espresso) !important;
    letter-spacing: -0.01em;
}

/* H2 sección — Filament section headings (cambia a DM Sans, Cormorant escasa) */
.fi-section-header-heading,
h1.fi-section-header-heading,
.fi-section .fi-section-header h3,
.fi-section .fi-section-header h2 {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: var(--h2-section-size) !important;
    line-height: var(--h2-section-lh) !important;
    color: var(--endo-espresso) !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
}

/* H3 card-label — custom blade cards del Resumen (Identidad, Atajos, Alertas).
 * .card > h2 / .card > h3 cubre los blades de resumen/* sin colisionar con
 * los section headers de Filament (selector más específico con > child). */
.card > h2,
.card > h3,
.card-label,
.card .label {
    font-family: var(--font-mono) !important;
    font-weight: 500 !important;
    font-size: var(--h3-label-size) !important;
    letter-spacing: var(--h3-label-track) !important;
    text-transform: uppercase !important;
    color: var(--endo-bronze-dark) !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

/* Data hero — monto/fecha grande Cormorant dentro de cards Tier A.
 * Aplica selectivamente vía clases helper en blades de Resumen
 * (next-cita .when, saldo .monto) — Sub-sprint 33 también las usa. */
.data-hero,
.pt-next-cita .when,
.pt-saldo .monto {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--data-hero-size);
    line-height: var(--data-hero-lh);
    color: var(--endo-espresso);
    letter-spacing: -0.01em;
}

/* Sprint B · B3: section header con divider bronze — separator distintivo del brand. */
.fi-section-header {
    border-bottom: 1px solid var(--endo-bronze-dark) !important;
    padding-bottom: 0.75rem !important;
}

/* Sidebar group headers — caps elegante */
.fi-sidebar-group-label {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--endo-bronze-dark) !important;  /* Sprint B · B3: WCAG AA — antes era bronze (3.48:1) */
    padding-top: 1rem !important;
}

/* Sidebar items */
.fi-sidebar-item-button {
    color: var(--endo-espresso) !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-item-button:hover {
    background-color: var(--endo-cream-deep) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: var(--endo-cream-deep) !important;
    color: var(--endo-bronze-dark) !important;   /* Sprint B · B3: WCAG AA */
    border-left: 2px solid var(--endo-bronze-dark) !important;
    padding-left: calc(0.75rem - 2px) !important; /* compensa el border-left */
}

.fi-sidebar-item-icon {
    color: var(--endo-bronze-dark) !important;   /* Sprint B · B3: WCAG AA (era bronze) */
}

/* Botones primarios → bronze WCAG AA */
.fi-btn-color-primary {
    background-color: var(--endo-bronze-dark) !important;   /* Sprint B · B3: 4.86:1 sobre blanco con texto blanco */
    border-color: var(--endo-bronze-dark) !important;
}

.fi-btn-color-primary:hover {
    background-color: var(--endo-espresso) !important;   /* Hover más oscuro (~12:1 sobre blanco) */
}

/* Sprint B · B3: focus ring bronze-dark para WCAG AA cumplir indicación visible */
.fi-btn-color-primary:focus-visible,
.fi-input:focus-visible {
    box-shadow: 0 0 0 2px var(--endo-bronze-dark), 0 0 0 4px rgba(139, 109, 69, 0.25) !important;
    outline: none !important;
}

/* Cards y secciones */
.fi-section, .fi-wi-stats-overview-stat-card, .fi-fo-section,
.fi-ta, .fi-modal-window {
    background-color: var(--endo-white) !important;
    border: 1px solid var(--endo-beige) !important;
    border-radius: 0.75rem !important;
}

/* Topbar / app brand */
.fi-topbar { box-shadow: 0 1px 0 var(--endo-beige) !important; }

/* Brand container (sidebar + login) — constrain size */
.fi-logo,
.fi-sidebar-header .fi-logo,
.fi-simple-layout-logo,
.fi-simple-page .fi-logo {
    max-height: 2.75rem !important;
    overflow: hidden !important;
    align-items: center !important;
}

.fi-logo img,
.fi-sidebar-header .fi-logo img,
.fi-simple-layout-logo img,
.fi-simple-page .fi-logo img,
.fi-simple-page img[alt="Endodontics"] {
    max-height: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    width: 36px !important;
}

/* Login page: hacer el brand container chico también */
.fi-simple-layout > .fi-simple-main > .fi-logo {
    margin-bottom: 0.5rem !important;
}

/* Inputs */
.fi-input, .fi-select-input, .fi-fo-textarea {
    background-color: var(--endo-cream) !important;
    border-color: var(--endo-sand) !important;
}

.fi-input:focus, .fi-select-input:focus {
    border-color: var(--endo-bronze-dark) !important;
    box-shadow: 0 0 0 1px var(--endo-bronze-dark) !important;
}

/* Tablas */
.fi-ta-header-cell {
    background-color: var(--endo-cream-deep) !important;
    color: var(--endo-espresso) !important;
    font-weight: 500 !important;
}

.fi-ta-row:hover {
    background-color: var(--endo-cream) !important;
}

/* Sprint B · B3: badges bronze para items con accent del brand (status, tags, etc.) */
.fi-badge-color-primary {
    background-color: rgba(139, 109, 69, 0.12) !important;
    color: var(--endo-bronze-dark) !important;
    border-color: var(--endo-bronze-dark) !important;
}

/* ============================================================
 * Ola 2 (24/05/2026) — accesibilidad + pulido visual.
 * Revisión de diseño (Claude Design). Ítems #5, #6, #7, #19.
 * ============================================================ */

/* #5 — Números tabulares: importes, fechas y stats alinean por dígito */
.fi-ta-cell,
.fi-ta-text,
.fi-wi-stats-overview-stat-value,
.fi-in-text,
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* #6 — Anillo de foco visible en TODO (no solo botones primarios + inputs) */
*:focus-visible {
    outline: 2px solid var(--endo-bronze-dark) !important;
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.fi-sidebar-item-button:focus-visible,
.fi-dropdown-list-item:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--endo-bronze-dark) !important;
    outline-offset: 2px;
}

/* #7 — Breadcrumb a bronce-dark (4.86:1 AA). El bronce decorativo queda para divisores/fondos. */
.fi-breadcrumbs a,
.fi-breadcrumbs-item a,
.fi-breadcrumbs-item-label {
    color: var(--endo-bronze-dark) !important;
}

/* #19 — Targets táctiles ≥44px solo en móvil (no afecta desktop) */
@media (max-width: 640px) {
    .fi-btn,
    .fi-link[role="button"],
    .fi-input,
    .fi-select-input,
    .fi-fo-field-wrp input,
    .fc-button {
        min-height: 44px;
    }
    .fi-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
 * Ola 3 (24/05/2026) — #8 toolbar de la Agenda (FullCalendar) en móvil.
 * ============================================================ */

/* Jerarquía: prev/next/today + view buttons como ghost (no azul sólido) */
.fc .fc-button-primary,
.fc .fc-prev-button,
.fc .fc-next-button,
.fc .fc-today-button {
    background-color: #FFFFFF !important;
    border: 1px solid var(--endo-sand) !important;
    color: var(--endo-espresso) !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.fc .fc-button-primary:hover,
.fc .fc-today-button:hover:not(:disabled) {
    background-color: var(--endo-cream-deep) !important;
    color: var(--endo-espresso) !important;
}
/* Control segmentado Mes/Semana/Día: el activo en bronce-dark */
.fc .fc-button-group .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--endo-bronze-dark) !important;
    border-color: var(--endo-bronze-dark) !important;
    color: #fff !important;
}

@media (max-width: 640px) {
    .fc .fc-header-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "nav   view";
        gap: 12px;
        align-items: center;
    }
    .fc .fc-toolbar-title {
        grid-area: title;
        text-align: center;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 18px;
    }
    .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(1) {
        grid-area: nav;
        display: flex;
        gap: 4px;
        align-items: center;
    }
    .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
        grid-area: view;
        justify-self: end;
    }
    .fc .fc-button {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================================================
 * Ola A · Patch 04 (26/05/2026) — FAB Nueva cita en agenda móvil.
 *
 * Scope: solo .page-agenda (body class agregada por renderHook
 * en AdminPanelProvider cuando la route actual es pages.agenda).
 * El selector .fi-ac.shrink-0 apunta al wrapper que mete el
 * widget de saade/filament-fullcalendar para sus header actions
 * (vendor/saade/filament-fullcalendar/resources/views/
 * fullcalendar.blade.php). En este repo la acción Crear vive en
 * el widget, no en el header del Page, así que el selector
 * sugerido por el handoff (.fi-page-header-actions) no aplica;
 * scope adaptado al markup real del widget.
 * ============================================================ */
@media (max-width: 640px) {
    .page-agenda .fi-section .flex > .fi-ac.shrink-0 {
        position: fixed;
        bottom: max(20px, env(safe-area-inset-bottom));
        right: 20px;
        z-index: 30;
        margin: 0;
    }
    .page-agenda .fi-section .flex > .fi-ac.shrink-0 .fi-btn {
        border-radius: 999px;
        min-height: 48px;
        padding: 12px 20px;
        box-shadow: 0 4px 12px rgba(27, 23, 20, 0.22);
    }
}

/* =====================================================================
 * Sub-sprint 33 (28/05/2026): cards 2 niveles
 *
 * Sistema: .card-primary (Tier A — dato hero / CTA) vs .card-secondary
 * (Tier B — contexto read-only). Empty states del Tier A degradan vía
 * .card-primary.is-empty al estilo Tier B (override de padding + colors).
 * Las cards custom del Tab Resumen del Patient Edit + el dashboard de
 * /admin/reportes son scope MVP. Caja / Histórico cajas / Comisiones /
 * Cierres mensuales / Patient Tables / sub-tabs de Personales NO se
 * tocan — quedan para v2 después de 2 semanas de rodaje (per handoff
 * Claude Design 28/05 sección 4).
 * ===================================================================== */

/* Tier A — dato o acción primaria. Padding generoso (24 28), borde
 * line (--card-a-border #E5DDD0 vs #EFEAE0 line-soft del Tier B). */
.card-primary {
    background: var(--card-a-bg);
    border: 1px solid var(--card-a-border);
    border-radius: var(--card-a-radius);
    padding: var(--card-a-pad-y) var(--card-a-pad-x);
}

/* Tier A hero — para cards-ancla con dato accionable: próxima cita
 * con datos, saldo pendiente > 0, Neto del mes. Fondo bronze-tint. */
.card-primary--hero {
    background: var(--bronze-tint);
    border-color: var(--bronze-tint-edge);
}

/* Empty state degradation — un vacío no merece ser ancla. Override
 * de bg + border + padding para que el card se comporte como Tier B
 * aunque la clase base siga siendo card-primary. */
.card-primary.is-empty {
    background: var(--card-b-bg);
    border-color: var(--card-b-border);
    padding: var(--card-b-pad-y) var(--card-b-pad-x);
}
.card-primary.is-empty > h2,
.card-primary.is-empty > h3,
.card-primary.is-empty .card-label,
.card-primary.is-empty .label {
    color: var(--endo-bronze) !important;   /* atenuado vs bronze-dark del Tier A */
}

/* Tier B — contexto read-only. Padding compacto (16 18), borde más claro. */
.card-secondary {
    background: var(--card-b-bg);
    border: 1px solid var(--card-b-border);
    border-radius: var(--card-b-radius);
    padding: var(--card-b-pad-y) var(--card-b-pad-x);
}
.card-secondary > h2,
.card-secondary > h3,
.card-secondary .card-label,
.card-secondary .label {
    color: var(--endo-bronze) !important;   /* muted vs Tier A bronze-dark */
}

/* Atajos grid — variantes per-card.
 *   .atajo (base)        → Tier B card mini (contenido legible)
 *   .atajo--actionable   → CTA real disponible (ej. cobrar abono con saldo)
 *   .atajo--dim          → contenido vacío atenuado
 *
 * El blade existente usa .ql (quicklink) como clase semántica heredada
 * de Ola C; agrego los modifiers compatibles. */
.atajo--actionable,
.pt-atajos .ql.atajo--actionable {
    border-color: var(--endo-bronze) !important;
    background: var(--bronze-tint) !important;
}
.atajo--actionable .ic,
.pt-atajos .ql.atajo--actionable .ic {
    background: var(--endo-bronze-dark) !important;
    color: #fff !important;
}
.atajo--actionable .c,
.pt-atajos .ql.atajo--actionable .c {
    color: var(--endo-bronze-dark) !important;
    font-weight: 500;
}
.atajo--dim,
.pt-atajos .ql.atajo--dim {
    opacity: 0.55;
}

/* Reportes dashboard — grid asimétrico con Neto como ancla (1.4fr).
 * Tier A para Neto, Tier B para Ingresos / Egresos / Cuentas por cobrar.
 * Sparklines solo en Tier A — Tier B son lecturas planas sin ruido. */
.rep-grid-tiered {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .rep-grid-tiered { grid-template-columns: repeat(2, 1fr); }
}
.rep-kpi {
    background: var(--card-b-bg);
    border-radius: 8px;
    padding: 16px 18px;
}
.rep-kpi.tier-a {
    border: 1px solid var(--card-a-border);
    padding: 24px 22px;
}
.rep-kpi.tier-b {
    border: 1px solid var(--card-b-border);
}
.rep-kpi .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--endo-bronze);   /* Tier B muted */
    margin: 0 0 10px;
    font-weight: 500;
}
.rep-kpi.tier-a .lbl {
    color: var(--endo-bronze-dark);   /* Tier A bronze ancla */
}
.rep-kpi .big {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--endo-espresso);
    font-variant-numeric: tabular-nums;
}
.rep-kpi.tier-a .big { font-size: 36px; }
.rep-kpi.tier-b .big { font-size: 22px; font-weight: 500; color: #4A4036; }
.rep-kpi .delta { font-size: 12px; margin: 0; }
.rep-kpi .delta.up { color: #2F7D5B; }
.rep-kpi .delta.down { color: #B23A48; }
.rep-kpi .delta.flat { color: var(--endo-bronze); }
.rep-kpi .ftnote {
    font-size: 11px;
    color: var(--endo-bronze);
    margin: 6px 0 0;
    font-style: italic;
}
.rep-kpi .spark { margin-top: 14px; height: 32px; }

/* ============================================================
 * Sub-sprint 37 (28/05/2026) - 6.3 headers de columna de la agenda
 * (FullCalendar) en movil: dia y fecha en 2 lineas consistentes.
 * word-spacing fuerza el salto en el espacio entre dia y fecha
 * sin JS. Scoped a <=640px. dayHeaderFormat (widget) quita la coma.
 * ============================================================ */
@media (max-width: 640px) {
    .fc .fc-col-header-cell-cushion {
        display: inline-block;
        white-space: normal;
        word-spacing: 9999px;
        line-height: 1.2;
        font-size: 11px;
        padding: 4px 1px;
        text-align: center;
    }
}

/* =====================================================================
 * Sprint auth-screens-polish (30/05/2026) - login + 2FA challenge.
 * Calibracion visual de las pantallas de acceso (simple layout):
 *   - Tipografia hermana: eyebrow DM Mono + titulo Cormorant 500 (login y 2FA).
 *   - Boton primario ya es #8B6D45 + blanco (regla .fi-btn-color-primary arriba).
 *   - Inputs de auth: fondo #FCFAF6, borde #E5DDD0, focus ring bronce suave.
 *   - Asterisco required a bronce #A6835A.
 *   - 2FA: input segmentado de 6 cajas (.endo-otp) + links apilados.
 * Todo scopeado a .fi-simple-page o a clases .endo-* (no afecta el panel).
 * Solo capa visual; nada de logica de auth.
 * ===================================================================== */

.fi-simple-header-heading {
    display: block !important;
    text-align: center;
}
.endo-auth-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--endo-bronze-dark);
    margin: 0 0 8px;
}
.endo-auth-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--endo-espresso);
}

.fi-simple-page .fi-input {
    background-color: #FCFAF6 !important;
    border-color: #E5DDD0 !important;
}
.fi-simple-page .fi-input:focus,
.fi-simple-page .fi-input:focus-visible {
    border-color: var(--endo-bronze-dark) !important;
    box-shadow: 0 0 0 3px rgba(139, 109, 69, 0.13) !important;
    outline: none !important;
}

.fi-simple-page .fi-fo-field-label-required-mark,
.fi-simple-page label sup {
    color: var(--endo-bronze) !important;
}

.endo-auth-helper {
    text-align: center;
    color: var(--endo-espresso);
    opacity: 0.82;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 22px;
}
.endo-auth-form { display: block; text-align: center; }

.endo-otp {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
    margin-bottom: 22px;
}
.endo-otp-box {
    width: 100%;
    height: 58px;
    border-radius: 10px;
    border: 1px solid #E5DDD0;
    background: #FCFAF6;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--endo-espresso);
    padding: 0;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.endo-otp-box:focus,
.endo-otp-box:focus-visible {
    background: #fff;
    border-color: var(--endo-bronze-dark);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(139, 109, 69, 0.13);
    outline: none;
}

.endo-recovery-input {
    display: block;
    width: 100%;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #E5DDD0;
    background: #FCFAF6;
    padding: 0 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: var(--font-mono);
    font-size: 17px;
    color: var(--endo-espresso);
    margin-bottom: 22px;
}
.endo-recovery-input:focus,
.endo-recovery-input:focus-visible {
    background: #fff;
    border-color: var(--endo-bronze-dark);
    box-shadow: 0 0 0 3px rgba(139, 109, 69, 0.13);
    outline: none;
}

.endo-2fa-foot {
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.endo-2fa-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--endo-bronze-dark);
}
.endo-2fa-link:hover { text-decoration: underline; }
.endo-2fa-sep {
    height: 1px;
    background: #EFEAE0;
    margin: 2px 0;
}
.endo-2fa-logout {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 12.5px;
    color: #8B7B62;
}
.endo-2fa-logout:hover { text-decoration: underline; }