/* ==========================================================================
   GTECH DOC · las hojas de las pantallas

   Los COLORES, la LETRA, los TAMAÑOS y los CORTES no se deciden aquí: vienen del contrato de la
   suite (css/gtech-tokens.css, copia entera del ERP) y de lo que DOC redefine después
   (css/gtech-doc.css). Esta hoja da forma a las piezas de DOC usando los papeles del contrato
   (var(--gt-texto), var(--gt-acento)...) o los nombres viejos de DOC, que ahora apuntan a ellos.

   Se mide con tools/Estilo/censo.py (Principios de la suite §5 a §9).
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Base Reset
   -------------------------------------------------------------------------- */
/* Sin tamaño en html: el cuerpo es de 16 px (principio 7.8). Antes había 14 px y luego 15 px aquí, y
   en iOS un campo de menos de 16 px hace zoom al tocarlo. La letra, el color y el fondo del cuerpo
   los pone el contrato. */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   3. Layout: Sidebar + Main
   -------------------------------------------------------------------------- */
/* EL MENÚ ES UN CAJÓN HASTA EL CORTE md (960 px). Se escribe primero el teléfono, sin consulta de
   medios, y se AMPLÍA con min-width (principios 6.7 y 9.3): la barra entra por la izquierda, con un
   velo detrás, y se cierra al tocar el velo, al navegar o con Escape (js/suite.js).

   Medido a 375 px antes de esto (tools/Accesibilidad --aspecto): abrir el menú lo ponía ENCIMA del
   contenido, como una columna de 375 × 1.917 px, y Escape no lo cerraba.

   «visibility: hidden» cerrado no es un adorno: sin él, quien navega con teclado entra en los
   enlaces de un menú que no se ve. */
.page { display: flex; flex-direction: column; min-height: 100vh; }

.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    z-index: var(--gt-z-menu);
    background-color: var(--gt-sidebar-bg);
    border-right: 1px solid var(--gt-borde);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--gt-transicion), visibility 0s linear 150ms;
}

body.menu-abierto .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--gt-sombra-3);
    transition: transform var(--gt-transicion);
}

.velo-menu { display: none; }
body.menu-abierto .velo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--gt-z-menu) - 1);
    background: var(--gt-velo);
}

/* Con el cajón abierto, la página de atrás no se desplaza. */
body.menu-abierto { overflow: hidden; }

main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.top-row {
    background-color: var(--gt-superficie);
    border-bottom: 1px solid var(--gt-borde);
    min-height: 3.5rem;
    padding: var(--gt-esp-2) var(--gt-esp-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gt-esp-3);
    box-shadow: var(--gt-sombra-1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.boton-menu {
    display: inline-flex; align-items: center; gap: var(--gt-esp-2);
    min-height: var(--gt-toque-min); min-width: var(--gt-toque-min);
    border: 1px solid var(--borde-campo); background: var(--gt-superficie); color: var(--gt-texto);
    border-radius: var(--gt-radio-md); padding: var(--gt-esp-1) var(--gt-esp-3); margin-right: auto;
}

.content { flex: 1; padding: var(--gt-esp-4); }

/* Una tabla ancha se desplaza dentro de su caja: la página nunca se corre de lado. */
article.content table.table:not(.tabla-tarjetas) { display: block; max-width: 100%; overflow-x: auto; }

@media (min-width: 640px) {
    .content { padding: var(--gt-esp-5) var(--gt-esp-5); }
}

@media (min-width: 960px) {
    .page { flex-direction: row; }
    .sidebar,
    body.menu-abierto .sidebar {
        position: sticky;
        width: 256px;
        min-width: 256px;
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: none;
    }
    body.menu-abierto { overflow: auto; }
    body.menu-abierto .velo-menu,
    .boton-menu { display: none; }
    .top-row { padding: 0 var(--gt-esp-6); height: 58px; flex-wrap: nowrap; }
    .content { padding: var(--gt-esp-6) var(--gt-esp-6); }
    article.content table.table:not(.tabla-tarjetas) { display: table; overflow-x: visible; }
}


.trd-list-item {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
    padding: .75rem .85rem;
    border: 1px solid var(--gt-border);
    border-radius: var(--gt-radius-sm);
    background: var(--gt-surface);
    color: var(--gt-text);
    text-align: left;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.trd-list-item:hover {
    border-color: var(--gt-primary-light);
    background: var(--gt-primary-50);
}

.trd-list-item.selected {
    border-color: var(--gt-primary);
    background: var(--gt-primary-50);
    box-shadow: inset 3px 0 0 var(--gt-primary);
}

.trd-list-item.readonly { cursor: default; }

.trd-list-item small { color: var(--gt-text-muted); }

.empty-state {
    min-height: 135px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1rem;
    color: var(--gt-text-muted);
    text-align: center;
}

.empty-state i, .empty-state .gt-icono { color: var(--gt-accent); }
.empty-state strong { color: var(--gt-text-secondary); }
.empty-state span { font-size: var(--gt-texto-xs); }

/* --------------------------------------------------------------------------
   4. El menú lateral (claro, como en TH)
   Iba escrito dos veces: el menú oscuro de la plantilla de 2025 y, al final de la hoja, el claro de la
   suite que le ganaba con !important. Queda una sola vez, la clara; el resultado en pantalla es el
   mismo. El logo de texto (sidebar-brand-logo, -name, -sub) ya no lo pintaba nadie.
   -------------------------------------------------------------------------- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linea);
    text-decoration: none;
    flex-shrink: 0;
}

.sidebar-brand img { height: 30px; width: auto; display: block; }
.sidebar-brand img.logo-empresa { height: auto; max-height: 44px; max-width: 100%; object-fit: contain; }

.sidebar-nav { padding: 0.75rem 0 1rem; flex: 1; }

.sidebar-section {
    color: var(--tinta-suave);
    font-size: var(--gt-texto-xs); font-weight: var(--gt-peso-fuerte);
    padding: 1rem 1.25rem 0.3rem;
}

.sidebar-nav .nav-item { padding: 0.1rem 0.65rem; }

.sidebar-nav .nav-link {
    color: var(--tinta);
    border-radius: var(--gt-radius-sm);
    border-left: 3px solid transparent;
    min-height: var(--gt-toque-min);
    padding: 0.6rem 0.875rem;
    display: flex; align-items: center; gap: 0.7rem;
    font-size: var(--gt-texto-sm); font-weight: 400;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

/* El ícono de Común va a 20 px, el de las filas (8.3): lo da su clase gt-icono-fila en NavMenu. */
.sidebar-nav .nav-link i, .sidebar-nav .nav-link .gt-icono {
    width: 20px; text-align: center;
    opacity: 0.8; transition: opacity 0.15s;
}

.sidebar-nav .nav-link:hover { background: var(--fondo); color: var(--tinta); }

.sidebar-nav .nav-link:hover i, .sidebar-nav .nav-link:hover .gt-icono { opacity: 1; }

.sidebar-nav .nav-link.active {
    background: var(--marca-clara); color: var(--sobre-marca-clara);
    border-left-color: var(--marca); font-weight: 600;
}

.sidebar-nav .nav-link.active i, .sidebar-nav .nav-link.active .gt-icono { opacity: 1; }

/* Lo programado del menú se ve apagado por el color de su nota, no por la opacidad (que bajaba el contraste). */
.sidebar-nav .nav-link-disabled { cursor: default; flex-wrap: wrap; }

.sidebar-nav .nav-link-disabled small {
    width: 100%;
    padding-left: 1.7rem;
    font-size: var(--gt-texto-xs);
    color: var(--tinta-suave);
}

.sidebar-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--linea);
    color: var(--tinta-suave); font-size: var(--gt-texto-xs);
}

/* --------------------------------------------------------------------------
   6. Page Header
   -------------------------------------------------------------------------- */
.page-header {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1.5rem; gap: 1rem;
}

.page-title {
    font-size: var(--gt-texto-xl); font-weight: 700;
    color: var(--gt-text); margin: 0; line-height: 1.3;
}

.page-subtitle {
    font-size: var(--gt-texto-sm); color: var(--gt-text-muted);
    margin-top: 0.2rem; margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
/* Las esquinas de la cabecera y del pie: Bootstrap las redondea con esta variable (.card-header:first-child y
   .card-footer:last-child, que pesan más que una clase). Se le da el radio de la tarjeta, en vez de ganarle con !important. */
.card {
    --bs-card-inner-border-radius: var(--gt-radius-lg);
    background: var(--gt-surface);
    border: 1px solid var(--gt-border-light);
    border-radius: var(--gt-radius-lg);
    box-shadow: var(--gt-shadow-sm);
}

.card-header {
    background: var(--gt-surface);
    border-bottom: 1px solid var(--gt-border-light);
    padding: 1rem 1.4rem;
}

.card-header h6 { font-size: var(--gt-texto-sm); font-weight: 600; color: var(--gt-text); }

.card-footer {
    background: var(--gt-bg);
    border-top: 1px solid var(--gt-border-light);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 500; font-size: var(--gt-texto-sm);
    border-radius: var(--gt-radius-sm);
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; gap: 0.35rem;
}

.btn-primary { background-color: var(--gt-primary); border-color: var(--gt-primary); color: var(--gt-texto-sobre-acento); }
.btn-primary:hover, .btn-primary:focus-visible {
    /* Al apuntar se oscurece: el verde 600 con texto blanco quedaba en 2,9:1. */
    background-color: var(--gt-primary-dark); border-color: var(--gt-primary-dark);
    color: var(--gt-texto-sobre-acento); box-shadow: 0 2px 8px rgba(26,107,60,0.35);
}
.btn-primary:active { background-color: var(--gt-primary-dark); border-color: var(--gt-primary-dark); }

.btn-outline-primary { border-color: var(--gt-primary); color: var(--gt-primary); }
.btn-outline-primary:hover { background-color: var(--gt-primary); border-color: var(--gt-primary); color: var(--gt-texto-sobre-acento); }

.btn-outline-secondary { border-color: var(--gt-border); color: var(--gt-text-secondary); background: transparent; }
.btn-outline-secondary:hover { background: var(--gt-border-light); border-color: var(--gt-border); color: var(--gt-text); }

/* El rojo al apuntar es el oscuro del contrato (antes #b91c1c, de Tailwind): blanco encima 9:1. El
   contorno del botón vacío es el rojo entero: el rosado de antes daba 1,9:1 y un control pide 3:1. */
.btn-danger { background-color: var(--gt-danger); border-color: var(--gt-danger); color: var(--gt-texto-sobre-acento); }
.btn-danger:hover { background-color: var(--rz-danger-dark); border-color: var(--rz-danger-dark); color: var(--gt-texto-sobre-acento); }

.btn-outline-danger { border-color: var(--gt-danger); color: var(--gt-danger); }
.btn-outline-danger:hover { background-color: var(--gt-danger); border-color: var(--gt-danger); color: var(--gt-texto-sobre-acento); }

.btn-sm { padding: 0.35rem 0.75rem; font-size: var(--gt-texto-sm); }
.btn-lg { padding: 0.7rem 1.5rem; font-size: var(--gt-texto-md); }

/* --------------------------------------------------------------------------
   9. Form Controls
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border: 1px solid var(--gt-border);
    border-radius: var(--gt-radius-sm);
    font-size: var(--gt-texto-sm); color: var(--gt-text);
    background-color: var(--gt-surface);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder { color: var(--gt-text-muted); }

/* El foco del campo es el contorno de la suite (:focus-visible, abajo): no se quita (7.11). */
.form-control:focus, .form-select:focus {
    border-color: var(--gt-acento);
    box-shadow: 0 0 0 3px var(--gt-acento-suave);
}

.form-label {
    font-size: var(--gt-texto-sm); font-weight: var(--gt-peso-medio);
    color: var(--gt-text-secondary);
    margin-bottom: 0.35rem;
}

.input-group-text {
    background: var(--gt-bg); border-color: var(--gt-border);
    color: var(--gt-text-muted); font-size: var(--gt-texto-sm);
}

/* --------------------------------------------------------------------------
   10. Filter Bar
   -------------------------------------------------------------------------- */
.filter-bar {
    background: var(--gt-surface);
    border: 1px solid var(--gt-border-light);
    border-radius: var(--gt-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--gt-shadow-xs);
}

/* --------------------------------------------------------------------------
   11. Table
   -------------------------------------------------------------------------- */
.table { color: var(--gt-text); font-size: var(--gt-texto-sm); margin-bottom: 0; }

.table thead th {
    background-color: var(--gt-bg); color: var(--gt-text-secondary);
    font-weight: var(--gt-peso-medio); font-size: var(--gt-texto-sm);
    border-bottom: 2px solid var(--gt-border);
    padding: 0.75rem 1rem; white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid var(--gt-border-light);
    transition: background-color 0.1s ease;
}

.table tbody tr:hover { background-color: var(--gt-primary-50); }
.table td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--gt-border-light); }
.table tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   12. Pagination
   -------------------------------------------------------------------------- */
/* Cada botón con sus cuatro esquinas: los del medio no tienen radio en Bootstrap y el primero y el último lo toman de
   esta variable (con reglas que pesan más que una clase). Sin !important. */
.pagination { gap: 2px; --bs-pagination-border-radius: var(--gt-radius-sm); }

.pagination .page-link {
    color: var(--gt-primary); border-color: var(--gt-border);
    border-radius: var(--gt-radius-sm);
    font-size: var(--gt-texto-sm); padding: 0.35rem 0.65rem; transition: all 0.12s;
}

.pagination .page-item.active .page-link {
    background-color: var(--gt-primary); border-color: var(--gt-primary);
    color: var(--gt-texto-sobre-acento); box-shadow: 0 1px 4px rgba(26,107,60,0.3);
}

.pagination .page-link:hover {
    background-color: var(--gt-primary-50);
    border-color: var(--gt-primary-100); color: var(--gt-primary);
}

/* --------------------------------------------------------------------------
   13. Badges & Status
   -------------------------------------------------------------------------- */
.badge { font-weight: 500; font-size: var(--gt-texto-xs); border-radius: 50px; padding: 0.3em 0.65em; }

.badge-tipo-doc {
    background: var(--gt-primary-50); color: var(--gt-primary-dark);
    border: 1px solid var(--gt-primary-100);
    font-size: var(--gt-texto-xs); font-weight: 600; border-radius: 50px; padding: 0.25em 0.6em;
}

/* --------------------------------------------------------------------------
   14. Loading & Empty States
   -------------------------------------------------------------------------- */
.spinner-overlay {
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 1.5rem; gap: 0.75rem;
    color: var(--gt-text-secondary); font-size: var(--gt-texto-sm);
}

.spinner-border { color: var(--gt-primary); }

.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--gt-text-muted); }
.empty-state i, .empty-state .gt-icono { font-size: var(--gt-texto-2xl); margin-bottom: 0.875rem; display: block; opacity: 0.35; color: var(--gt-primary); }
.empty-state p { font-size: var(--gt-texto-sm); margin: 0; }

/* --------------------------------------------------------------------------
   15. Checkboxes
   -------------------------------------------------------------------------- */
.form-check-input:checked { background-color: var(--gt-primary); border-color: var(--gt-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(26,107,60,0.15); border-color: var(--gt-primary-light); }

/* --------------------------------------------------------------------------
   16. Alerts
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--gt-radius); font-size: var(--gt-texto-sm); }
.alert-danger { background: var(--gt-peligro-suave); border-color: var(--doc-peligro-borde); color: var(--doc-peligro-texto); }
.alert-success { background: var(--gt-primary-50); border-color: var(--gt-primary-100); color: var(--gt-primary-dark); }
.alert-info { background: var(--gt-accent-light); border-color: var(--doc-info-borde); color: var(--gt-accent-dark); }

/* --------------------------------------------------------------------------
   17. Blazor Error UI
   -------------------------------------------------------------------------- */
/* El fondo y el color los pone MainLayout.razor.css (aislada, le gana a esta hoja). */
#blazor-error-ui {
    border-top: 2px solid var(--gt-peligro-500);
    bottom: 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    display: none; left: 0;
    padding: 0.75rem 2rem; position: fixed; width: 100%; z-index: 9999;
    font-size: var(--gt-texto-sm);
}

#blazor-error-ui .reload { color: var(--gt-danger); font-weight: 600; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); opacity: 0.6; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   18. Top Row User
   -------------------------------------------------------------------------- */
.top-row .user-info { display: flex; align-items: center; gap: 0.5rem; font-size: var(--gt-texto-sm); color: var(--gt-text-secondary); }
.top-row .user-avatar {
    width: 30px; height: 30px;
    background: var(--gt-primary-50);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gt-primary); font-size: var(--gt-texto-xs);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
/* El lateral se esconde donde aparece el botón que lo abre (860 px, abajo): antes, entre 861 y
   900 px quedaba escondido sin forma de abrirlo, y abierto en el teléfono quedaba corrido 256 px. */
@media (min-width: 640px) {
    .page-header { flex-direction: row; align-items: flex-start; }
}

/* ==========================================================================
   Suite GTECH (2026-09-29, rehecho el 2026-10-27)
   La paleta propia que había aquí (--tinta, --marca, --papel...) se fue: esos nombres los define
   ahora css/gtech-doc.css y apuntan a los papeles del contrato. Contraste comprobado por
   AccesibilidadTests (WCAG 2.2 AA) leyendo el contrato y gtech-doc.css.
   ========================================================================== */

/* El borde de los campos con 3:1 contra el papel (WCAG 1.4.11). */
.form-control, .form-select { border-color: var(--borde-campo); }

/* El ícono del título, en el acento. Sin !important: el único que lo pintaba en línea (Mis llaves) ya
   pedía el mismo color. */
.page-title i, .page-title .gt-icono { color: var(--marca); }

/* Pie de la suite */
.pie-suite {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .75rem 2rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: var(--gt-texto-xs); background: var(--papel);
}
.pie-suite img { height: 22px; width: auto; }

/* --------------------------------------------------------------------------
   Accesibilidad (WCAG 2.2 AA), como en TH
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute; left: .75rem; top: -3rem; z-index: 2000;
    background: var(--tinta); color: var(--gt-superficie); padding: .5rem .9rem; border-radius: var(--radio); text-decoration: none;
}
.skip-link:focus { top: .75rem; color: var(--gt-superficie); }
/* El !important se queda, y es el único de esta hoja: Bootstrap y Radzen quitan el contorno con reglas que pesan más que
   :focus-visible (.btn:focus-visible, .form-control:focus y las de rz-*: outline 0). Sin él, el foco no se ve en botones ni
   campos (7.11, WCAG 2.4.7). Lo que pide menos movimiento ya lo trae el contrato de Común, igual que estaba aquí. */
:focus-visible { outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none; }
main:focus { outline: none; }

/* Modo tarjeta en el teléfono: cada fila es una tarjeta y cada celda lleva el título de su columna
   (data-label, que pone suite.js desde el encabezado). Para las tablas con la clase tabla-tarjetas. */
/* Móvil primero (6.6 y 6.7): las tarjetas son lo de siempre y desde el corte sm (640 px) vuelve la tabla.
   Antes iba al revés, con la única max-width de DOC y tres !important para ganarle a la tabla de Bootstrap.
   - Borde y relleno: este selector (table.tabla-tarjetas td) ya pesa más que los de la tabla (.table td y
     .table > :not(caption) > * > *), y ninguna celda de estas tablas lleva una clase de borde o de relleno.
   - Alineación: la celda es flex y su contenido se pone al principio; el text-end de una columna de números
     ya no la corre a la derecha, y el título de la columna (::before) se alinea él mismo al principio: sin el
     !important que había.
   Desde 640 px se devuelve lo que la tabla tiene en el escritorio (.table td, .table tbody tr, arriba). */
table.tabla-tarjetas, table.tabla-tarjetas tbody, table.tabla-tarjetas tr, table.tabla-tarjetas td { display: block; width: 100%; }
table.tabla-tarjetas thead { display: none; }
table.tabla-tarjetas tr { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .6rem; padding: .35rem .65rem; background: var(--papel); }
table.tabla-tarjetas td { border: 0; padding: .2rem 0; display: flex; gap: .6rem; white-space: normal; }
table.tabla-tarjetas td[data-label]::before { content: attr(data-label); flex: 0 0 38%; font-weight: 600; color: var(--tinta-suave); text-align: start; }
table.tabla-tarjetas td:empty { display: none; }

@media (min-width: 640px) {
    table.tabla-tarjetas { display: table; }
    table.tabla-tarjetas thead { display: table-header-group; }
    table.tabla-tarjetas tbody { display: table-row-group; width: auto; }
    table.tabla-tarjetas tr { display: table-row; width: auto; border: 0; border-bottom: 1px solid var(--gt-border-light); border-radius: 0; margin-bottom: 0; padding: 0; background: none; }
    table.tabla-tarjetas td,
    table.tabla-tarjetas td:empty { display: table-cell; width: auto; border: 0; border-bottom: 1px solid var(--gt-border-light); padding: 0.75rem 1rem; }
    table.tabla-tarjetas td[data-label]::before { content: none; }
    table.tabla-tarjetas tbody tr:last-child td { border-bottom: none; }
}

/* Marca de lo que el plan de la empresa no incluye (no se esconde). */
.marca-plan {
    display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px;
    font-size: var(--gt-texto-xs); font-weight: 600; line-height: 1.4; vertical-align: middle;
    color: var(--doc-aviso-texto); background: var(--aviso-suave); border: 1px solid var(--aviso);
}

/* Aviso fijo mientras se trabaja con un acceso de soporte: no se cierra. */
.aviso-soporte {
    display: flex; gap: .6rem; align-items: center; padding: .55rem 1.25rem;
    background: var(--aviso-suave); color: var(--doc-aviso-texto); border-bottom: 2px solid var(--aviso); font-weight: 600; font-size: var(--gt-texto-sm);
}

/* La muestra de la pantalla de marca. */
.muestra-marca { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.muestra-marca .ficha { padding: .45rem .9rem; border-radius: 8px; font-weight: 600; }

/* Panel de ayuda en línea (el Markdown de docs/usuario convertido a HTML). */
.ayuda-contenido { font-size: var(--gt-texto-sm); line-height: 1.5; }
.ayuda-contenido h3 { font-size: var(--gt-texto-lg); margin-top: 1.1rem; }
.ayuda-contenido h4 { font-size: var(--gt-texto-md); margin-top: .9rem; }
.ayuda-contenido table { width: 100%; font-size: var(--gt-texto-sm); margin-bottom: .8rem; }
.ayuda-contenido th, .ayuda-contenido td { border-bottom: 1px solid var(--bs-border-color); padding: .25rem .4rem; vertical-align: top; }
.ayuda-contenido code { font-size: inherit; }

/* El zonificador (6.9.1): las zonas sobre la página de muestra. */
.gt-zonificador { position: relative; user-select: none; touch-action: none; cursor: crosshair; border: 1px solid var(--bs-border-color); max-width: 900px; }
/* La zona se ve a través: el acento diluido, no el tinte opaco (debajo está la página que se zonifica). */
.gt-zona { position: absolute; border: 2px solid var(--gt-acento); background: color-mix(in srgb, var(--gt-acento) 12%, transparent); pointer-events: none; }
.gt-zona span { position: absolute; top: -1.3rem; left: -2px; font-size: var(--gt-texto-xs); background: var(--gt-acento); color: var(--gt-texto-sobre-acento); padding: 0 .3rem; white-space: nowrap; border-radius: 2px; }
.gt-zona-nueva { border-style: dashed; }

/* El chat de la sede (27b2): flotante abajo a la derecha, sin tapar el pie en un teléfono. */
.sede-asistente-boton { position: fixed; right: 16px; bottom: 16px; z-index: 1050; }
.sede-asistente { position: fixed; right: 16px; bottom: 16px; z-index: 1050; width: min(380px, calc(100vw - 32px)); max-height: min(75vh, 640px); display: flex; flex-direction: column; }
.sede-asistente-mensajes { overflow-y: auto; flex: 1 1 auto; }

/* Contraste de las clases de Bootstrap en las pantallas con sesión (axe, E7-183): el gris, el verde y el amarillo de Bootstrap no llegan a
   4.5:1 sobre el fondo de la suite ni sobre los fondos suaves; se usan los tonos del contrato, que sí llegan (AccesibilidadTests).
   El gris y el verde se reapuntan en la tripleta de Bootstrap (gtech-doc.css, :root). El ámbar, solo en la letra: .bg-warning lleva
   letra oscura encima y con el ámbar del contrato no se leería. Bootstrap escribe la clase con !important, pero lee la tripleta del
   mismo elemento: dársela aquí basta, sin otro !important. 180, 83, 9 es --gt-aviso-500. */
.text-warning { --bs-warning-rgb: 180, 83, 9; }
.btn-outline-success {
    --bs-btn-color: var(--exito-texto); --bs-btn-border-color: var(--exito-texto);
    --bs-btn-hover-bg: var(--exito-texto); --bs-btn-hover-border-color: var(--exito-texto);
    --bs-btn-active-bg: var(--exito-texto); --bs-btn-active-border-color: var(--exito-texto);
}
.bg-purple { background-color: var(--morado); }

/* --------------------------------------------------------------------------
   Sede electrónica en nivel AAA (matriz EAAB 9.16; informe en docs/evidencias)
   - 1.4.6: texto y enlaces con contraste de 7:1 sobre el fondo y sobre blanco; los botones, texto blanco a 7:1. Los tonos están en
     gtech-doc.css («.sede», --doc-sede-*); aquí, las reglas que los usan.
   - 1.4.8: interlineado de 1,6, texto sin justificar y líneas de hasta 80 caracteres.
   - 2.5.5: botones, campos y enlaces sueltos de al menos 44 × 44 px; van a 48, el mínimo de la suite (--gt-toque-min, 7.7).
   El gris de .text-secondary, .text-muted y .badge.bg-secondary ya sale de la sede (--bs-secondary-rgb y --bs-secondary-color):
   la regla con !important que lo repetía sobraba.
   -------------------------------------------------------------------------- */
.sede { line-height: 1.6; }
.sede .alert-info { --bs-alert-color: var(--doc-sede-info); color: var(--doc-sede-info); }   /* 9,4:1 sobre su fondo */
.sede .alert-warning { --bs-alert-color: var(--doc-sede-aviso); color: var(--doc-sede-aviso); }
.sede .alert-success { --bs-alert-color: var(--doc-sede-exito); color: var(--doc-sede-exito); }
.sede .alert-danger { --bs-alert-color: var(--doc-sede-peligro); color: var(--doc-sede-peligro); }
.sede .btn-primary {
    --bs-btn-bg: var(--doc-sede-acento); --bs-btn-border-color: var(--doc-sede-acento); --bs-btn-color: var(--gt-texto-sobre-acento);
    --bs-btn-hover-bg: var(--doc-sede-acento-hover); --bs-btn-hover-border-color: var(--doc-sede-acento-hover); --bs-btn-hover-color: var(--gt-texto-sobre-acento);
    --bs-btn-active-bg: var(--doc-sede-acento-activo); --bs-btn-active-border-color: var(--doc-sede-acento-activo);
    --bs-btn-disabled-bg: var(--doc-sede-acento); --bs-btn-disabled-border-color: var(--doc-sede-acento); --bs-btn-disabled-color: var(--gt-texto-sobre-acento);
}
.sede .btn-outline-primary {
    --bs-btn-color: var(--doc-sede-acento); --bs-btn-border-color: var(--doc-sede-acento);
    --bs-btn-hover-bg: var(--doc-sede-acento); --bs-btn-hover-border-color: var(--doc-sede-acento); --bs-btn-hover-color: var(--gt-texto-sobre-acento);
    --bs-btn-active-bg: var(--doc-sede-acento-hover); --bs-btn-active-border-color: var(--doc-sede-acento-hover); --bs-btn-active-color: var(--gt-texto-sobre-acento);
}
.sede .btn-outline-secondary { --bs-btn-color: var(--doc-sede-texto-suave); --bs-btn-border-color: var(--doc-sede-texto-suave); --bs-btn-hover-bg: var(--doc-sede-texto-suave); --bs-btn-hover-color: var(--gt-texto-sobre-acento); }
.sede .btn, .sede .form-control, .sede .form-select { min-height: var(--gt-toque-min); }
.sede .btn { min-width: var(--gt-toque-min); display: inline-flex; align-items: center; justify-content: center; }
.sede .btn-link { padding-top: .6rem; padding-bottom: .6rem; }
.sede .sede-cabecera a, .sede .sede-miga a { display: inline-flex; align-items: center; min-height: var(--gt-toque-min); }
.sede-cuerpo p, .sede-cuerpo li, .sede-cuerpo dd, .sede-cuerpo .form-text, .sede-cuerpo .alert { max-width: 80ch; text-align: start; }
.sede-miga { padding: 0 16px; }
.sede-miga ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .5rem 0 0; padding: 0; }
.sede-miga li + li::before { content: "›"; margin-right: .5rem; color: var(--gt-texto-suave); }
.sede-miga a { color: var(--marca); }
/* 2.4.13: el foco sobre la cabecera oscura va en blanco (gtech-doc.css, .sede-cabecera); 2.4.12: el botón fijo del asistente no tapa
   lo que tiene el foco. */
html:has(.sede) { scroll-padding-bottom: 6rem; }
.sede-glosario { padding: 0 16px 8px; }
.sede-glosario summary { min-height: var(--gt-toque-min); display: flex; align-items: center; cursor: pointer; color: var(--marca); font-weight: 600; }
.sede-glosario dt { margin-top: .5rem; }
.sede-glosario dd { margin-left: 0; }

/* Ambiente demo (ADR-0005): fijo en todas las pantallas de una empresa demo, no se cierra. */
.aviso-demo {
    display: flex; gap: .6rem; align-items: center; padding: .45rem 1.25rem;
    background: var(--aviso-suave); color: var(--doc-aviso-texto); border-bottom: 2px dashed var(--aviso); font-weight: 600; font-size: var(--gt-texto-sm);
}