/* =========================================================
   ENO · style.css global limpio — PILOTO
   ---------------------------------------------------------
   Objetivo:
   - Mantener solo base global, header/nav, layout general,
     componentes reutilizables mínimos y estilos de bandejas.
   - Sacar del CSS global los estilos específicos del Wizard,
     que ahora viven en static/css/wizard.css y print_wizard.css.
   - Archivo piloto: probar antes de reemplazar definitivo.
   ========================================================= */

/* =========================================================
   0. RESET Y BASE GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    --context-header-start: #0a4cd6;
    --context-header-end: #0b5cff;
    --context-header-ink: #ffffff;
    --context-header-muted: rgba(255, 255, 255, .88);
    --context-header-hover: rgba(255, 255, 255, .14);
    --context-header-rule: rgba(255, 255, 255, .18);
    --context-header-button-bg: #ffffff;
    --context-header-button-ink: #0b5cff;
    --context-header-button-hover-bg: #f0f0f0;
    --context-page-start: #edf6f2;
    --context-page-end: #f8faf9;
    --context-back-surface: #e7f5f0;
    --context-back-border: #91c7b8;
    --context-back-ink: #0a4f3f;
    --context-back-hover-surface: #ffffff;
    --context-back-hover-border: #6eae9c;
    --context-back-hover-ink: #073d31;
    font-family: system-ui, Segoe UI, Roboto;
    line-height: 1.4;
    margin: 0;
    background: #f6f7fb;
}

/* =========================================================
   1. HEADER / NAV GLOBAL
   ========================================================= */

header {
    background: linear-gradient(90deg, var(--context-header-start) 0%, var(--context-header-end) 100%);
    color: var(--context-header-ink);
    padding: 12px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Contenedor interno del header */
header .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 18px;
}

/* Marca ENO */
header .brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--context-header-ink);
    margin-right: 6px;
}

/* Texto secundario (Plataforma de notificación) */
header .muted {
    font-size: .9rem;
    color: var(--context-header-muted);
}

/* Enlaces del header */
header a {
    color: var(--context-header-ink);
    text-decoration: none;
    margin-left: 1rem;
    font-weight: 400;
    font-size: 0.92rem;
}

header a:hover {
    text-decoration: underline;
}

/* Botón de cerrar sesión */
header .btn {
    background: var(--context-header-button-bg);
    color: var(--context-header-button-ink) !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

header .btn:hover {
    background: var(--context-header-button-hover-bg);
}

/* =========================================================
   2. LAYOUT GLOBAL (contenedores)
   ========================================================= */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* =========================================================
   3. COMPONENTES REUTILIZABLES (cards, grid, forms, botones, tablas)
   ========================================================= */

.step-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* Utilidad genérica (por si acaso) */
.grid {
    display: grid;
    gap: 12px;
}

.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 16px;
    margin: 16px 0;
}

.card.inner {
    background: #fbfcff;
    border: 1px dashed #c9d5ff;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

input,
select,
textarea {
    padding: 8px 10px;
    border: 1px solid #c8c8d0;
    border-radius: 8px;
    background: #fff;
}

.btn {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    background: #e9ecf5;
    cursor: pointer;
    text-decoration: none;
    color: #111;
    margin-right: 8px;
}

.btn.primary {
    background: #0b5cff;
    color: #fff;
}

body.theme-sanitary {
    --vet-ink: #102a43;
    --vet-muted: #52697e;
    --vet-line: #caddea;
    --vet-mist: #edf6fd;
    --vet-green: #1976b9;
    --vet-green-dark: #0b4f8a;
    --context-header-start: #0b4f8a;
    --context-header-end: #1976b9;
    --context-header-button-ink: #0b4f8a;
    --context-header-button-hover-bg: #eaf4ff;
    --context-page-start: #eaf4ff;
    --context-page-end: #f8fbff;
    --context-back-surface: #eaf4ff;
    --context-back-border: #91bde0;
    --context-back-ink: #0b4f8a;
    --context-back-hover-border: #5796c8;
    --context-back-hover-ink: #07375f;
}

body.theme-clinical {
    --vet-ink: #172e28;
    --vet-muted: #5f6b65;
    --vet-line: #d8d5c9;
    --vet-mist: #f5f0e6;
    --vet-green: #1f715a;
    --vet-green-dark: #155343;
    --context-header-start: #155343;
    --context-header-end: #26785f;
    --context-header-button-ink: #155343;
    --context-header-button-hover-bg: #f3ebdd;
    --context-page-start: #eaf3ee;
    --context-page-end: #f7f3ea;
    --context-back-surface: #f3ebdd;
    --context-back-border: #c9bda6;
    --context-back-ink: #155343;
    --context-back-hover-border: #9ead9f;
    --context-back-hover-ink: #0d3c30;
}

body.theme-institutional {
    --vet-ink: #2f2413;
    --vet-muted: #6b5a3e;
    --vet-line: #e2c993;
    --vet-mist: #fff4d6;
    --vet-green: #9a4a12;
    --vet-green-dark: #743407;
    --vet-amber: #9a4a12;
    --context-header-start: #e9af32;
    --context-header-end: #f2c85b;
    --context-header-ink: #2f2413;
    --context-header-muted: rgba(47, 36, 19, .82);
    --context-header-hover: rgba(47, 36, 19, .10);
    --context-header-rule: rgba(47, 36, 19, .20);
    --context-header-button-bg: #fff8e7;
    --context-header-button-ink: #5b2b08;
    --context-header-button-hover-bg: #fff1c7;
    --context-page-start: #fff4d6;
    --context-page-end: #fffaf0;
    --context-back-surface: #fff4d6;
    --context-back-border: #d3a74a;
    --context-back-ink: #5b2b08;
    --context-back-hover-surface: #ffffff;
    --context-back-hover-border: #b77a21;
    --context-back-hover-ink: #3c1c05;
}

body.theme-municipal {
    --vet-ink: #16343b;
    --vet-muted: #5b7075;
    --vet-line: #c9dde1;
    --vet-mist: #edf7f8;
    --vet-green: #287c91;
    --vet-green-dark: #15586a;
    --context-header-start: #15586a;
    --context-header-end: #287c91;
    --context-header-button-ink: #15586a;
    --context-header-button-hover-bg: #e9f6f8;
    --context-page-start: #edf7f8;
    --context-page-end: #f8f4ea;
    --context-back-surface: #f7f0df;
    --context-back-border: #cdbd95;
    --context-back-ink: #15586a;
    --context-back-hover-border: #8aaeb6;
    --context-back-hover-ink: #0d4553;
}

/* Navegación secundaria estandarizada: siempre inmediatamente antes del título. */
.vet-page-back {
    align-items: center;
    color: var(--vet-green);
    display: flex;
    font-size: .82rem;
    font-weight: 800;
    gap: .3rem;
    margin: 0 0 .72rem;
    text-decoration: none;
    width: fit-content;
}

.vet-page-back:hover {
    color: var(--vet-green-dark);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.vet-page-back.vet-page-back-on-dark {
    background: var(--context-back-surface);
    border: 1px solid var(--context-back-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(10, 61, 48, .12);
    color: var(--context-back-ink);
    padding: .38rem .68rem;
}

.vet-page-back.vet-page-back-on-dark:hover {
    background: var(--context-back-hover-surface);
    border-color: var(--context-back-hover-border);
    color: var(--context-back-hover-ink);
}

header .vet-page-back {
    margin-left: 0;
}

@media print {
    .vet-page-back {
        display: none !important;
    }
}

/* Botón de "peligro" si en algún lugar se usa .btn.danger */
.btn.danger {
    background: #fee2e2;
    color: #991b1b;
}

.flash {
    background: #fde8ea;
    border: 1px solid #f5b1bb;
    padding: 8px;
    border-radius: 8px;
    margin: 8px 0;
}

.flash.ok {
    background: #e6faee;
    border-color: #a8e6bd;
}

.small {
    color: #666;
    font-size: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===============================
   ENO · Antecedentes
=============================== */

.antecedentes-sep {
    border: none;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
    margin: 1.2rem 0;
}


/* =========================================================
   4. TEXTO SECUNDARIO / BADGES (vistas no-Bootstrap)
   ========================================================= */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: #e5e7eb;
    /* gris claro por defecto */
    color: #111827;
}

/* Estados de validación */
.badge.ok {
    background: #e6faee;
    color: #166534;
}

.badge.warn {
    background: #fef3c7;
    color: #92400e;
}

.badge.muted {
    background: #e5e7eb;
    color: #4b5563;
}

/* Texto secundario */
.muted {
    color: #6b7280;
    font-size: 13px;
}

/* =========================================================
   11. BANDEJAS / VISTAS NO-WIZARD
   ========================================================= */

body.bandeja td:last-child {
    white-space: nowrap;
    /* solo en acciones */
}

body.bandeja .btn-group .btn {
    white-space: nowrap;
}

/* ===========================
   BANDEJAS: rail + submenú pills
   (alinear buscador + menú + tarjeta)
   =========================== */

:root {
    --bandeja-max: clamp(1100px, 92vw, 1500px);
    --bandeja-pad-x: 16px;
}

/* Rail: centra y da el mismo ancho/padding que la tarjeta (step-wrap) */
body.bandeja .bandeja-rail {
    max-width: var(--bandeja-max);
    margin: 0 auto;
    padding: 0 var(--bandeja-pad-x);
}

/* Submenú bandejas (pills) */
body.bandeja .bandeja-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .25rem 0 1.25rem;
    /* un poco más arriba, alineado al rail */
}

body.bandeja .bandeja-pill {
    display: inline-flex;
    align-items: center;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #dbe4ff;
    color: #0b57d0;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
}

body.bandeja .bandeja-pill:hover {
    background: #e3ebff;
    border-color: #c8d6ff;
    text-decoration: none;
}

body.bandeja .bandeja-pill.active {
    background: #0b5cff;
    border-color: #0b5cff;
    color: #fff;
}

/* =========================================================
   BANDEJAS (vistas no-wizard): ancho mayor + sin scroll lateral global
   ========================================================= */

body.bandeja {
    overflow-x: hidden;
    /* evita scroll horizontal de toda la página */
}

/* La tarjeta/contenido de bandeja mantiene el ancho ampliado */
body.bandeja .step-wrap {
    max-width: var(--bandeja-max);
    margin: 0 auto;
    padding: 1rem var(--bandeja-pad-x) 2rem;
}

body.bandeja .step-card,
body.bandeja .step-card.card,
body.bandeja .step-card.step-card {
    width: 100%;
    max-width: 100%;
}

/* DataTables: permitir wrap de texto y evitar empujes */
body.bandeja table.dataTable {
    width: 100% !important;
    font-size: 0.95rem;
}

body.bandeja table.dataTable td,
body.bandeja table.dataTable th {
    white-space: normal;
    word-break: break-word;
}

/* Si la tabla se pasa, el scroll queda “dentro” del wrapper */
body.bandeja .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.bandeja .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
}

body.bandeja table.dataTable thead input {
    width: 100%;
    box-sizing: border-box;
}

/* Acciones: que no se partan */
body.bandeja td:last-child,
body.bandeja .btn-group .btn {
    white-space: nowrap;
}

/* =========================================================
   BANDEJA MÉDICA
   ========================================================= */

.medical-tray {
    display: grid;
    gap: 16px;
    box-sizing: border-box;
}

.medical-tray-header,
.medical-filter-card,
.medical-results-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.medical-tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
}

.medical-tray-header h1,
.medical-section-heading h2,
.medical-results-heading h2 {
    margin: 0;
    color: #15324b;
}

.medical-tray-header h1 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
}

.medical-tray-eyebrow {
    margin: 0 0 4px;
    color: #486581;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.medical-tray-intro,
.medical-section-heading p,
.medical-result-count {
    margin: 4px 0 0;
    color: #5b7083;
}

.medical-new-case {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    font-weight: 700;
}

.medical-filter-card,
.medical-results-card {
    padding: 18px 20px;
}

.medical-section-heading,
.medical-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.medical-section-heading h2,
.medical-results-heading h2 {
    font-size: 1.05rem;
}

.medical-section-heading p,
.medical-result-count {
    font-size: 0.88rem;
}

.medical-active-filter {
    border: 1px solid #a9c7ed;
    border-radius: 999px;
    padding: 4px 9px;
    background: #eef6ff;
    color: #164e82;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.medical-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.medical-field {
    grid-column: span 3;
    min-width: 0;
}

.medical-field label,
.medical-date-range legend {
    color: #294861;
    font-size: 0.82rem;
    font-weight: 700;
}

.medical-field input,
.medical-field select {
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
}

.medical-field input:focus,
.medical-field select:focus,
.medical-tray .btn:focus-visible,
.medical-tray a:focus-visible {
    outline: 3px solid rgba(11, 92, 255, 0.28);
    outline-offset: 2px;
}

.medical-search-field {
    grid-column: span 8;
}

.medical-disease-field {
    grid-column: span 4;
}

.medical-date-range {
    grid-column: span 6;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.medical-date-range legend {
    margin-bottom: 6px;
}

.medical-date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.medical-date-fields .medical-field {
    grid-column: auto;
}

.medical-filter-actions {
    grid-column: span 6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.medical-filter-actions .btn {
    min-height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.medical-clear-filters {
    border: 1px solid #b7c4d1;
    background: #fff;
    color: #294861;
}

.medical-filter-errors {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #e7b96b;
    border-radius: 10px;
    background: #fff8e8;
    color: #68450b;
}

.medical-filter-errors p,
.medical-filter-errors ul {
    margin: 0;
}

.medical-filter-errors ul {
    padding: 6px 0 0 20px;
}

.medical-result-count {
    font-weight: 700;
}

.medical-result-count span {
    font-weight: 400;
}

.medical-results-clear {
    color: #0b57d0;
    font-size: 0.86rem;
    font-weight: 700;
}

.medical-table-wrap {
    overflow-x: auto;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
}

.medical-cases-table {
    min-width: 850px;
    margin: 0;
}

.medical-cases-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.medical-cases-table thead {
    background: #edf5fb;
}

.medical-cases-table th {
    color: #294861;
    font-size: 0.78rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.medical-cases-table th,
.medical-cases-table td {
    padding: 11px 12px;
    vertical-align: middle;
}

.medical-cases-table tbody tr:hover {
    background: #f8fbfd;
}

.medical-folio,
.medical-date {
    white-space: nowrap;
}

.medical-folio {
    color: #164e82;
    font-weight: 800;
}

.medical-patient-name,
.medical-disease-name {
    display: block;
    color: #20384d;
    font-weight: 700;
}

.medical-patient-id,
.medical-periodicity {
    display: block;
    margin-top: 2px;
    color: #657b8e;
    font-size: 0.8rem;
}

.medical-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.77rem;
    font-weight: 800;
    white-space: nowrap;
}

.medical-status-valid {
    border-color: #93c5aa;
    background: #e9f8ef;
    color: #17633a;
}

.medical-status-invalid {
    border-color: #e6a6a6;
    background: #fff0f0;
    color: #8b2424;
}

.medical-status-review {
    border-color: #a7bce7;
    background: #eef3ff;
    color: #254f9b;
}

.medical-status-pending {
    border-color: #e4c37a;
    background: #fff8df;
    color: #72510b;
}

.medical-status-open {
    border-color: #a9c7ed;
    background: #eef6ff;
    color: #164e82;
}

.medical-status-closed {
    border-color: #b9c1ca;
    background: #f1f3f5;
    color: #495867;
}

.medical-view-case {
    margin: 0;
    border: 1px solid #8fb5e7;
    background: #fff;
    color: #0b57d0;
    font-weight: 800;
}

.medical-view-case:hover {
    background: #eaf3ff;
}

.medical-empty-state {
    border: 1px dashed #aac2d6;
    border-radius: 10px;
    padding: 24px;
    background: #f8fbfd;
    text-align: center;
    color: #486581;
}

.medical-empty-state strong {
    display: block;
    color: #294861;
    font-size: 1rem;
}

.medical-empty-state p {
    margin: 5px 0 0;
}

@media (max-width: 820px) {
    .medical-search-field,
    .medical-disease-field,
    .medical-field {
        grid-column: span 6;
    }

    .medical-date-range,
    .medical-filter-actions {
        grid-column: span 12;
    }
}

@media (max-width: 560px) {
    .medical-tray-header,
    .medical-section-heading,
    .medical-results-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .medical-tray-header,
    .medical-filter-card,
    .medical-results-card {
        padding: 16px;
    }

    .medical-new-case {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .medical-search-field,
    .medical-disease-field,
    .medical-field {
        grid-column: span 12;
    }

    .medical-date-fields {
        grid-template-columns: 1fr;
    }

    .medical-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .medical-filter-actions .btn {
        width: 100%;
        box-sizing: border-box;
    }
}
/* =========================================================
   1B. HEADER / NAV GLOBAL — versión ordenada
   ---------------------------------------------------------
   Estructura visual:
   - Marca institucional a la izquierda.
   - Navegación principal al centro.
   - Datos de sesión y acciones a la derecha.
   ========================================================= */

header.app-header {
    padding: 8px 0;
}

header.app-header .app-header-inner {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(480px, 1fr) minmax(420px, 480px);
    align-items: center;
    gap: 14px 18px;
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 22px;
}

header.app-header a {
    margin-left: 0;
}

.app-brand-block {
    min-width: 0;
}

.app-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    color: var(--context-header-ink);
    text-decoration: none;
}

.app-brand-link:hover {
    text-decoration: none;
}

.app-brand-symbol {
    display: block;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    box-sizing: border-box;
    padding: 4px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 3px 10px rgba(0, 35, 45, .24);
}

header.app-header .brand {
    flex: 0 0 auto;
    font-size: 1.3rem;
    letter-spacing: .02em;
    line-height: 1;
    margin-right: 0;
}

.app-brand-subtitle {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--context-header-rule);
    border-radius: 999px;
    padding: .18rem .5rem;
    color: var(--context-header-muted);
    background: var(--context-header-hover);
    font-size: .72rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.app-main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--context-header-ink);
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.app-main-nav a:hover {
    background: var(--context-header-hover);
    text-decoration: none;
}

.app-session-block {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--context-header-rule);
    border-radius: 13px;
    background: var(--context-header-hover);
    box-shadow: 0 5px 18px rgba(5, 30, 24, .10);
}

.app-session-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--context-header-rule);
    border-radius: 11px;
    color: var(--context-header-ink);
    background: var(--context-header-hover);
}

.app-session-avatar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-session-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    color: var(--context-header-muted);
    line-height: 1.18;
    text-align: left;
}

.app-session-kicker {
    color: var(--context-header-muted);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-session-user {
    display: block;
    overflow: hidden;
    color: var(--context-header-ink);
    font-size: .8rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-session-context {
    display: grid;
    gap: 1px;
    color: var(--context-header-muted);
    font-size: .62rem;
}

.app-session-context b,
.app-session-scope {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-session-context b {
    color: var(--context-header-ink);
    font-weight: 650;
}

.app-session-context i {
    margin: 0 .28rem;
    opacity: .55;
    font-style: normal;
}

.app-session-actions {
    display: grid;
    align-items: center;
    justify-items: stretch;
    gap: 4px;
    flex-shrink: 0;
}

.app-session-actions form {
    margin: 0;
}

header.app-header .btn.header-btn {
    margin-right: 0;
    width: 100%;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.vet-header-menu {
    position: relative;
    color: var(--context-header-ink);
}

.vet-header-menu summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 700;
}

.vet-header-menu summary::-webkit-details-marker {
    display: none;
}

.vet-header-menu summary::after {
    content: " ▾";
    font-size: .75em;
}

.vet-header-menu > div {
    position: absolute;
    z-index: 30;
    top: calc(100% + .5rem);
    right: 0;
    display: grid;
    min-width: 230px;
    padding: .45rem;
    border: 1px solid var(--vet-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(10, 40, 32, .2);
}

.vet-header-menu > div a {
    display: block;
    padding: .6rem .7rem;
    border-radius: 7px;
    color: var(--vet-ink) !important;
    text-decoration: none;
}

.vet-header-menu > div a:hover {
    background: var(--vet-mist);
}

.vet-scope-menu summary {
    border: 1px solid var(--context-header-rule);
    border-radius: 7px;
    padding: 5px 9px;
    color: var(--context-header-ink);
    background: var(--context-header-hover);
}

@media (max-width: 1380px) {
    header.app-header .app-header-inner {
        grid-template-columns: minmax(220px, 1fr) minmax(390px, 460px);
        grid-template-areas:
            "brand session"
            "nav nav";
        row-gap: 7px;
    }

    .app-brand-block {
        grid-area: brand;
    }

    .app-main-nav {
        grid-area: nav;
        justify-content: flex-start;
        overflow-x: auto;
        border-top: 1px solid var(--context-header-rule);
        padding-top: 6px;
    }

    .app-session-block {
        grid-area: session;
    }
}

@media (max-width: 800px) {
    header.app-header .app-header-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "session"
            "nav";
        padding: 0 14px;
    }

    .app-brand-link {
        width: 100%;
    }

    .app-main-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .app-main-nav::-webkit-scrollbar {
        display: none;
    }

    .app-session-block {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }
}

@media (max-width: 560px) {
    .app-brand-symbol {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        padding: 3px;
    }

    .app-session-block {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .app-session-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}
/* Autoría documental común: se reutiliza en HTML, impresión y documentos cerrados. */
.document-authorship{margin:1rem 0;padding:1rem 1.1rem;border:1px solid #b8d3ca;border-left:5px solid #187b63;border-radius:12px;background:#f1f8f5;color:#173f35;break-inside:avoid}.document-authorship-heading{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.75rem;padding-bottom:.55rem;border-bottom:1px solid #cfe1db}.document-authorship-heading span{font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#187b63}.document-authorship-heading strong{font-size:.82rem}.document-authorship-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.2rem}.document-authorship-grid div{display:flex;flex-direction:column;gap:.12rem}.document-authorship-grid small{font-size:.68rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#60766f}.document-authorship-grid strong{font-size:.9rem}.document-authorship-grid span{font-size:.78rem;color:#536a62}@media(max-width:700px){.document-authorship-heading{display:block}.document-authorship-heading strong{display:block;margin-top:.2rem}.document-authorship-grid{grid-template-columns:1fr}}@media print{.document-authorship{background:#fff;border-color:#777;color:#111}.document-authorship-grid span,.document-authorship-grid small{color:#333}}

/* Acción común para corregir una selección local antes de enviar cualquier archivo. */
.file-selection-clear{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:.65rem 0 0;border:1px solid #c56a6a;border-radius:9px;padding:.55rem .8rem;color:#8d2e34;background:#fff;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.file-selection-clear:hover,.file-selection-clear:focus-visible{border-color:#9d343a;outline:0;background:#fff3f3;box-shadow:0 0 0 3px rgba(157,52,58,.1)}.file-selection-clear[hidden]{display:none!important}

.flash.delivery-pending{background:#eef6ff!important;border-color:#9bbddd!important;color:#234b71!important}
.flash.delivery-confirmed{background:#eaf8f2!important;border-color:#a9d8c8!important;color:#135b49!important}