/* ============================================================================
   DeCA — Pretium Gestion · App shell
   Usa SIEMPRE los tokens de tokens.css. No hardcodear colores/medidas aqui.

   REDISENO #339 (S-221, D-339-4/D-339-5): estructura, navegacion y componentes
   compartidos construidos desde las maquetas aprobadas por el cliente. Barra
   lateral con degradado (expandida, o rail de iconos de 76 px), cabecera pegajosa
   de 68 px y contenido. Las areas se pasan cada una en su slice; mientras tanto
   conviven con esta estructura a traves de los tokens, que conservan su nombre.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* Suavizado y cifras tabulares de la maqueta: las columnas de numeros no bailan. */
body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* Las dos familias de pantallas (auditoria §3). La A es la de :root; la B solo cambia estas
   cuatro medidas, y lo hace aqui, en un unico sitio: ninguna regla se duplica por familia. La
   clase la pone `views/layout.php` a partir del area activa. */
body.app--familia-b {
    --sidebar-w: var(--sidebar-w-b);
    --sidebar-w-mid: var(--sidebar-w-mid-b);
    --color-text-muted: var(--color-text-muted-b);
    --btn-min-h: var(--btn-min-h-b);
}

a { color: var(--color-primary-600); }

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

/* Recortado igual que .visually-hidden, pero se revela al enfocar por teclado (issue #48 F9
   debt: botones de envio anadidos para el H32.2 de pa11y no pueden quedar invisibles tambien
   al foco, o pasan el chequeo automatico y siguen fallando para un usuario de teclado real). */
.visually-hidden--focusable:focus-visible {
    position: static; width: auto; height: auto; margin: 0;
    padding: var(--sp-1) var(--sp-3); overflow: visible; clip: auto; white-space: nowrap;
    background: var(--color-primary-600); color: var(--color-text-invert);
    border-radius: var(--r-sm);
}
/* S-231: son botones, y un boton no hereda la letra de la pagina; al revelarse con el foco salian en la fuente del
   sistema, los unicos textos de la aplicacion fuera de Inter. */
.visually-hidden--focusable { font-family: inherit; }

/* Enlace de salto (maqueta): fuera de la pantalla hasta que recibe el foco. Fijo y no absoluto,
   porque en movil el menu se pinta en el flujo y la pagina puede estar desplazada. */
.skip-link {
    position: fixed; z-index: var(--z-toast); top: -80px; left: 12px;
    padding: 12px 18px; border-radius: var(--r-lg);
    background: var(--color-surface); color: var(--color-primary-700);
    font-weight: var(--fw-semibold); text-decoration: none; box-shadow: var(--sh-lg);
}
.skip-link:focus { top: 12px; }

/* ---- Estructura ---- */
/* La barra lateral es pegajosa dentro de un flex, no fija con un margen en el contenido como en
   la maqueta: el resultado es el mismo y en movil basta con apilar para que el menu quede en el
   flujo, encima de la cabecera. `--side` es el ancho EFECTIVO de la barra en cada tramo. */
.app-shell { --side: var(--sidebar-w); display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh; }
.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }

.app-main {
    flex: 1;
    padding: 29px 34px 20px;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    outline: none;
}

/* ---- Sidebar ---- */
.sidebar {
    width: var(--side); flex: none;
    position: sticky; top: 0; z-index: var(--z-sticky);
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    padding: 0 13px;
    background: var(--grad-brand);
    color: var(--sidebar-text);
    transition: width var(--dur-slow) var(--ease);
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--sidebar-scroll) transparent;
}
.sidebar__brand {
    display: flex; align-items: center; gap: 9px;
    height: 83px; padding: 0 11px; flex: none;
    color: var(--sidebar-text-strong); text-decoration: none;
    border-radius: var(--r-md);
}
/* Isotipo (issue #220) sin fondo desde el #339: barras blancas y check celeste, como la maqueta.
   Solo se ve en el rail; expandida manda el logotipo. */
.brand-tile { display: none; align-items: center; justify-content: center; flex: none; color: var(--sidebar-text-strong); }
.brand-tile__check { color: var(--sidebar-brand-check); }
/* Logotipo de la plataforma en blanco (issue #8); en expandido sustituye al tile.
   Issue #220: pasa a SVG en trazado. El `aspect-ratio` declara la proporcion real del
   fichero (615x140) para que el hueco este reservado antes de que el SVG pinte: sin
   el, la fila de marca de la sidebar da un salto al cargar. */
.brand-logo { height: 30px; width: auto; display: block; aspect-ratio: 615 / 140; }

.sidebar__nav { display: block; }
.nav-group {
    margin: 0; padding: 17px 13px 9px;
    font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: 1.35px;
    color: var(--sidebar-label); white-space: nowrap;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.nav-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 44px; padding: 11px 12px;
    border-radius: var(--r-md);
    background: none; color: var(--sidebar-text); text-decoration: none; text-align: left;
    font-size: 14px; line-height: 1.5; white-space: nowrap;
    transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.nav-item__icon { display: inline-flex; flex: none; color: var(--sidebar-icon); }
.nav-item:hover { background: var(--sidebar-hover); }
/* Activo: lavado azul translucido + filete interior, icono celeste y un punto a la derecha. */
.nav-item.is-active {
    background: var(--sidebar-active); color: var(--sidebar-text-strong);
    box-shadow: inset 0 0 0 1px var(--sidebar-active-line);
}
.nav-item.is-active .nav-item__icon { color: var(--sidebar-icon-active); }
.nav-item__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sidebar-dot); margin-left: auto; flex: none; }
/* "Cerrar sesion" (issue #17): <button> dentro de un form POST+CSRF que replica .nav-item. */
.nav-logout { margin: 0; }
.nav-item--button { border: none; font-family: inherit; cursor: pointer; }

.sidebar__bottom { margin-top: auto; padding: 26px 12px 23px; font-size: 13px; line-height: 1.5; color: var(--sidebar-muted); }
.sidebar__bottom::before { content: ""; display: block; height: 1px; background: var(--sidebar-line); margin-bottom: 15px; }
.sidebar__bottom strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--sidebar-strong); }

/* ---- Topbar ---- */
.topbar {
    height: var(--topbar-h); flex: none;
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 17px;
    padding: 0 34px;
    background: var(--topbar-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: var(--bw-1) solid var(--color-border);
}
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: none; border-radius: var(--r-md);
    background: transparent; color: var(--color-text-muted); cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-primary-500); }
.topbar__toggle { width: 37px; height: 37px; }

/* Buscador. El borde y el anillo de foco los lleva la caja, no el <input>: el campo no tiene
   borde propio y un anillo solo alrededor del texto dejaria fuera la lupa. La maqueta pinta el
   texto en #647b93 y el ejemplo en #6a8099, que sobre el lienzo dan 4,07:1 y 3,79:1: el texto usa
   la tinta y el ejemplo el secundario (4,62:1 o mas). */
.topbar__search {
    display: flex; align-items: center; gap: 11px;
    flex: 0 1 510px; min-width: 0;
    padding: 0 13px; height: 39px;
    background: var(--color-bg);
    border: var(--bw-1) solid var(--color-border);
    border-radius: var(--r-md);
    color: var(--color-text-subtle);
}
.topbar__search > svg { flex: none; }
.topbar__search input {
    flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0;
    border: none; background: transparent;
    font: inherit; font-size: 15px; color: var(--color-text); text-overflow: ellipsis;
}
.topbar__search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.topbar__right { display: flex; align-items: center; gap: 15px; margin-left: auto; }

/* Selector de idioma con el aspecto del boton de la maqueta (globo, idioma, flecha). El <select>
   ocupa TODA la caja —el globo y la flecha se pintan encima y no reciben el puntero—, asi que
   pulsar en cualquier punto abre la lista, igual que el boton dibujado. */
.lang-switch { position: relative; display: flex; align-items: center; flex: none; color: var(--color-text-muted); }
.lang-switch__globe, .lang-switch__chevron { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lang-switch__globe { left: 0; }
.lang-switch__chevron { right: 0; }
.lang-switch select {
    -webkit-appearance: none; appearance: none;
    min-height: 37px; padding: 5px 23px;
    border: none; border-radius: var(--r-md); background: transparent;
    color: inherit; font: inherit; font-size: 15px; cursor: pointer;
}
.lang-switch select:hover { color: var(--color-primary-600); }

.account-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: var(--r-pill);
    background: var(--color-primary-050); color: var(--color-primary-600);
    border: var(--bw-1) solid var(--color-primary-100);
    font-weight: 700; font-size: 15px;
    text-decoration: none;
}
/* Icono de cuenta interactivo (issue #17): enlace a /cuenta con estado hover visible. */
a.account-avatar:hover { background: var(--color-surface-3); }

/* ---- Rail de iconos (76 px) ----
   Dos caminos llevan al mismo rail, y por eso el bloque aparece dos veces con el mismo cuerpo:
   por encima de 1000 px lo pide el usuario con el boton (`.is-collapsed`, que se recuerda), y
   entre 761 y 1000 px es el estado por defecto y el boton lo expande (`.is-expanded`).
   Los rotulos se RECORTAN, no se quitan con `display: none`: un enlace que solo tiene icono se
   quedaria sin nombre accesible, que es justo lo que le pasaba al menu contraido anterior. */
@media (max-width: 1230px) {
    .app-shell { --side: var(--sidebar-w-mid); }
    .topbar { padding: 0 24px; gap: 12px; }
    .app-main { padding: 25px 24px 18px; }
}
@media (min-width: 1001px) {
    .app-shell.is-collapsed { --side: var(--sidebar-w-collapse); }
    .app-shell.is-collapsed .sidebar { padding: 0 11px; }
    .app-shell.is-collapsed .sidebar__brand { padding: 0; justify-content: center; }
    .app-shell.is-collapsed .brand-logo,
    .app-shell.is-collapsed .nav-group,
    .app-shell.is-collapsed .sidebar__bottom,
    .app-shell.is-collapsed .nav-item__dot { display: none; }
    .app-shell.is-collapsed .brand-tile { display: inline-flex; }
    .app-shell.is-collapsed .nav-item__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
    .app-shell.is-collapsed .nav-list { margin: 12px 0; }
    .app-shell.is-collapsed .nav-item { justify-content: center; padding: 12px; }
}
@media (min-width: 761px) and (max-width: 1000.98px) {
    .app-shell:not(.is-expanded) { --side: var(--sidebar-w-collapse); }
    .app-shell:not(.is-expanded) .sidebar { padding: 0 11px; }
    .app-shell:not(.is-expanded) .sidebar__brand { padding: 0; justify-content: center; }
    .app-shell:not(.is-expanded) .brand-logo,
    .app-shell:not(.is-expanded) .nav-group,
    .app-shell:not(.is-expanded) .sidebar__bottom,
    .app-shell:not(.is-expanded) .nav-item__dot { display: none; }
    .app-shell:not(.is-expanded) .brand-tile { display: inline-flex; }
    .app-shell:not(.is-expanded) .nav-item__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
    .app-shell:not(.is-expanded) .nav-list { margin: 12px 0; }
    .app-shell:not(.is-expanded) .nav-item { justify-content: center; padding: 12px; }
    /* Expandida a este ancho no cabe el pie de la barra (la maqueta tampoco lo pinta). */
    .app-shell.is-expanded .sidebar__bottom { display: none; }
}

/* ---- Movil (hasta 760 px): el menu NO es un cajon lateral ----
   Se pinta en el flujo, encima de la cabecera y en dos columnas; `app.js` desplaza la pagina
   hasta el al abrirlo (comprobacion G03 de la maqueta). Sin fondo oscurecido ni capa encima. */
/* Los cortes llevan `.98`: con zoom o pantallas de densidad fraccionaria el ancho puede ser 760,5 px,
   y entre `max-width: 760px` y `min-width: 761px` no casaria ninguna regla. `app.js` usa los mismos. */
@media (max-width: 760.98px) {
    .app-shell { display: block; --side: 0px; }
    .sidebar {
        display: none; position: static; width: auto; height: auto;
        padding: 0 16px 17px; overflow: visible;
    }
    .app-shell.is-mobile-open .sidebar { display: block; }
    .sidebar__brand { height: 60px; padding: 0 8px; }
    .sidebar__bottom, .nav-item__dot { display: none; }
    .nav-group { padding: 12px 10px 8px; }
    .nav-list { grid-template-columns: 1fr 1fr; gap: 6px; }
    .nav-item { padding: 10px; gap: 9px; white-space: normal; }

    /* Sin desenfoque en movil: `backdrop-filter` convierte la cabecera en el bloque contenedor de
       sus descendientes `position: fixed`, y la ventana de la campana es justo eso aqui. */
    .topbar {
        height: auto; min-height: 65px; padding: 9px 12px; gap: 8px;
        background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .topbar__toggle { width: 44px; height: 44px; }
    .topbar__right { gap: 5px; }
    .topbar__search { flex: 1 1 auto; height: 44px; padding: 0 10px; gap: 7px; }
    /* 16 px: por debajo, iOS Safari amplia la pagina al enfocar el campo. */
    .topbar__search input { font-size: 16px; }

    /* La maqueta oculta el idioma en movil; aqui se queda como boton de solo icono de 44 px (el
       <select>, invisible, ocupa toda la caja): quitarlo dejaria el movil sin cambio de idioma. */
    .lang-switch { width: 44px; height: 44px; justify-content: center; border-radius: var(--r-md); }
    .lang-switch__globe { position: static; transform: none; width: 20px; height: 20px; }
    .lang-switch__chevron { display: none; }
    .lang-switch select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; font-size: 16px; }
    .lang-switch:focus-within { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
    /* El boton de envio (solo sirve sin JavaScript) se revela al enfocarlo: aqui sale DEBAJO de la
       caja de 44 px, o quedaria tapado por el <select> invisible y el foco no se veria. */
    .lang-switch .visually-hidden--focusable:focus-visible { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); white-space: nowrap; }

    /* 36 px a la vista, 44 px al dedo: el area tactil se amplia sin engordar el circulo. */
    .account-avatar { width: 36px; height: 36px; font-size: 14px; }
    .account-avatar::after { content: ""; position: absolute; inset: -4px; }

    .app-main { padding: 24px 18px 22px; }
}
@media (max-width: 360px) {
    .topbar { padding-left: 9px; padding-right: 9px; }
    .app-main { padding-left: 14px; padding-right: 14px; }
}
/* El punto de corte menor de la familia B es 370 px, no 360 (auditoria §3). */
@media (max-width: 370px) {
    .app--familia-b .app-main { padding-left: 12px; padding-right: 12px; }
}

/* ---- Foco accesible (AA) ----
   Maqueta: contorno de 3 px separado 4 px. El color cambia segun la superficie (ver los tokens):
   azul sobre las claras, celeste dentro de la barra lateral oscura. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--color-focus-ring); outline-offset: 4px;
}
.sidebar :focus-visible { outline-color: var(--color-focus-ring-on-dark); outline-offset: 2px; }
/* El anillo del buscador lo pinta la caja (ver arriba), no el campo. */
.topbar__search input:focus-visible { outline: none; }
.topbar__search:focus-within { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-primary-500); }
/* El avatar es el unico focable con radio pill (issue #17): se le fija su radio para que el
   contorno lo siga tambien con hover. */
a.account-avatar:focus-visible { border-radius: var(--r-pill); }
/* Misma trampa, segunda vez (issue #274 T2, cazada conduciendo el tabulador): una tarjeta de
   acceso rapido —radio 12 px— se CUADRABA al tabular sobre ella con la regla generica anterior.
   Se le fija su radio; el anillo de foco lo sigue poniendo la regla generica. */
a.home-quick-card:focus-visible { border-radius: 14px; }

/* ---- Impresion: solo el contenido ---- */
@media print {
    .sidebar, .topbar, .skip-link, .support-banner { display: none !important; }
    .app-shell, .app-body { display: block; min-height: 0; }
    .app-main { max-width: none; padding: 0; }
}

/* ---- Iconos ilustrados de Docarga (issue #274 T1) ----------------------------
   Familia MULTITINTA del paquete aprobado por Jorge, pintada desde `Core\Iconos`. Su tamano
   viaja en los atributos width/height del propio <svg>, no aqui.

   Deliberadamente NO hay ninguna regla sobre sus descendientes: el issue pide expresamente que
   ninguna regla comun los vacie, los pase a una sola tinta ni les anada contorno, y cada dibujo
   trae sus rellenos y trazos. La unica excepcion la pone el propio fichero: `acciones/eliminar`
   viene con `fill="currentColor"` para heredar el rojo destructivo de su contexto (tramo 3).
   El caso 172 comprueba que esa ausencia de reglas sigue siendo cierta. */
.icono-docarga { display: block; flex: none; }

/* ---- Contenido ---- */
.page-header { margin-bottom: var(--sp-5); }
.page-title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: -.8px; color: var(--color-primary-700); margin: 0; }
.page-subtitle { color: var(--color-text-muted); font-size: 15px; line-height: 1.5; margin: 5px 0 0; }
/* Titulo de pagina de la maqueta: 29 px, 26 en el tramo del rail y 27 en movil. */
@media (max-width: 1000.98px) { .page-title { font-size: 26px; line-height: 1.25; } }
@media (max-width: 760.98px) { .page-title { font-size: 27px; } }

.card {
    background: var(--color-surface);
    border: var(--bw-1) solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.text-muted { color: var(--color-text-muted); }

/* ---- Barra de cuota ---- */
.quota-bar {
    height: 8px; border-radius: var(--r-pill);
    background: var(--color-surface-3); overflow: hidden;
}
.quota-bar__fill {
    display: block; height: 100%;
    background: var(--color-accent-600);
    transition: width var(--dur-base) var(--ease);
}
.quota-bar__fill.is-warn { background: var(--color-warning); }
.quota-bar__fill.is-full { background: var(--color-danger); }

/* Las pantallas de registro y acceso (antes «Autenticacion», aqui) viven desde el rediseno #339 (S-230) en la
   seccion «Registro y acceso», al final de la hoja. Lo que sigue son las piezas de formulario que comparten
   con el resto de la aplicacion. */
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--color-text); }
.form-hint { font-size: var(--fs-caption); color: var(--color-text-muted); }
/* issue #36 §3.7: aviso contextual NO bloqueante (recordatorio, no error). */
.form-warning { font-size: var(--fs-caption); color: var(--color-warning); background: var(--color-warning-bg); border: var(--bw-1) solid #f0dcae; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
/* Campo base del rediseno #339: 9 px de radio y 44 px de alto (11 + 20 + 11 + borde). */
.form-field input, .form-field select {
    font: inherit; color: var(--color-text);
    padding: 11px 13px;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field input:hover, .form-field select:hover, .input:hover { border-color: var(--color-border-hover); }
/* Campo deshabilitado: las maquetas no lo definen (auditoria §4). Se resuelve con su estilo:
   fondo de lienzo, borde tenue y texto secundario (4,62:1 o mas), sin bajar la opacidad para no
   perder contraste. */
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled, .input:disabled {
    background: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed;
}
.form-field input.is-error, .form-field textarea.is-error { border-color: var(--color-danger); }
.form-check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-label); color: var(--color-text-muted); }
/* issue #328: campo de contraseña con botón de ver/ocultar dentro del borde del input (44px de área táctil en móvil). */
.clave { position: relative; display: flex; }
.clave input { flex: 1; min-width: 0; padding-right: 48px; }
.clave__ver {
    position: absolute; top: 0; right: 0; bottom: 0; width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; border-radius: var(--r-md);
}
.clave__ver:hover { color: var(--color-text); }
.clave__ojo-tachado { display: none; }
.clave__ver[aria-pressed="true"] .clave__ojo { display: none; }
.clave__ver[aria-pressed="true"] .clave__ojo-tachado { display: block; }
.form-check input { margin-top: 2px; }

/* Cupón en la pantalla intermedia (issue #249 T2): separado del desglose de arriba y de la casilla de aceptación de
   abajo con un filete, para que «Aplicar cupón» no se lea como parte de la confirmación de pago. */
.confirmar-cupon {
    margin: var(--sp-4) 0; padding: var(--sp-4) 0;
    border-top: var(--bw-1) solid var(--color-border); border-bottom: var(--bw-1) solid var(--color-border);
}

/* ---- Banner (componente `Banner` del design system) ----------------------
   Icono por variante, cuerpo en texto atenuado, radio de tarjeta. El icono se
   pinta como mascara CSS posicionada en absoluto, no como <svg> en la
   plantilla: asi los 19 puntos de llamada no cambian y el contenido anidado
   (listas, botones) conserva su flujo de bloque. El resultado visual es el del
   componente. Adaptacion de codigo, no del diseno. */
.form-alert {
    position: relative;
    padding: var(--sp-3) var(--sp-4);
    padding-left: calc(var(--sp-4) + 18px + var(--sp-3));
    border-radius: var(--r-lg);
    font-size: var(--fs-label); line-height: var(--lh-body);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}
.form-alert::before {
    content: ""; position: absolute;
    left: var(--sp-4); top: calc(var(--sp-3) + 1px);
    width: 18px; height: 18px;
    background-color: var(--alert-icon-color);
    -webkit-mask: var(--alert-icon) center / 18px 18px no-repeat;
    mask: var(--alert-icon) center / 18px 18px no-repeat;
}

/* SPEC/interactions.md manda sobre el componente compilado (ver RE-ENTREGA §2): el banner
   de error va en `--color-danger-bg` / `--color-danger`, no con el cuerpo atenuado. */
.form-alert--error {
    background: var(--color-danger-bg);
    border: var(--bw-1) solid #f3c6bd;  /* literal del design system */
    /* #339: `--color-danger` sobre `--color-danger-bg` da 4,38:1; el tono de texto del estado
       anulado, de la misma familia, da 6,61:1. El icono conserva el rojo vivo. */
    color: var(--state-anulado-fg);
    --alert-icon-color: var(--color-danger);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* issue #36 §1.1/§1.2/§1.3: guarda global del atributo [hidden]. Sin ella, reglas de autor con
   display explicito (p. ej. .btn { display: inline-flex }) ganan a la regla [hidden]{display:none}
   del navegador, de modo que element.hidden=true (Atras/Siguiente/Emitir del wizard) NO oculta el
   boton. Con !important el atributo hidden vuelve a ocultar siempre. */
[hidden] { display: none !important; }

/* Boton base del rediseno #339: 9 px de radio, peso 650, 15 px. El alto minimo lo pone la familia
   de la pantalla (44 px en la A, 46 px en la B) con `--btn-min-h`. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font: inherit; font-size: 15px; line-height: 1.4; font-weight: var(--fw-btn); cursor: pointer;
    min-height: var(--btn-min-h);
    padding: 10px var(--sp-4); border-radius: var(--r-md); border: var(--bw-1) solid transparent;
    text-decoration: none; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
/* Primaria: degradado azul, texto blanco. Crear/Emitir/Guardar/Entrar. Las dos clases historicas
   (`--accent` del issue #20 y `--primary`) son el MISMO boton primario de la maqueta, que no
   dibuja ninguna primaria solida aparte. El degradado va un paso mas oscuro que el dibujado para
   que el rotulo llegue a 4,5:1 (ver `--grad-primary` en tokens.css). */
.btn--accent, .btn--primary { background: var(--grad-primary); color: var(--color-on-accent); box-shadow: 0 4px 9px #0d7ddd20; }
.btn--accent:hover, .btn--primary:hover { background: var(--color-primary-600); box-shadow: 0 5px 13px #0d7ddd32; }
/* Suave (maqueta `btn-soft`): accion secundaria con peso, sobre azul muy claro. */
.btn--soft { background: var(--color-primary-050); color: var(--color-primary-600); border-color: var(--color-primary-100); }
.btn--soft:hover { background: var(--color-surface-3); }
.btn--block { width: 100%; }

/* El cajon lateral de movil que vivia aqui (off-canvas + fondo oscurecido) desaparece con el
   rediseno #339: hasta 760 px el menu se pinta en el flujo. Ver el bloque de movil de la
   estructura, al principio de esta hoja. */

/* La disposicion de Maestros, su menu de categorias, sus filtros y su ficha (issues #3, #24, #84,
   #187 y #274) viven desde el rediseno #339 (S-226) en la seccion «Maestros», al final de la hoja. */

/* ---- Botones auxiliares ---- */
/* Secundaria: el contorno de la maqueta (`btn-outline`) — fondo blanco, borde gris azulado y
   texto azul pizarra. Ver planes, cancelar, etc. */
.btn--ghost { background: var(--color-surface); color: var(--btn-outline-fg); border-color: var(--color-border-strong); }
.btn--ghost:hover { background: var(--btn-outline-hover); border-color: var(--color-border-hover); }
.icon-btn--sm { width: 30px; height: 30px; }
.icon-btn--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.inline-form { display: inline; }

/* ---- Acciones de las tablas de Maestros (issue #274 T3, D-274-4) ---------------
   TODO va prefijado por `.maestros`, y no es cosmetica del selector: `.col-actions` la usan
   tambien el panel, Documentos, Cuenta > API, Cuenta > Usuarios y Soporte, y `.table-wrap` diez
   pantallas. Sin el prefijo, estas medidas y estos colores —incluido el rojo propio de la
   papelera, que alli sale de los tokens `--color-danger*`— se colaban en seis pantallas que el
   apartado 3 no menciona, y encima sobre iconos de contorno que no son de esta familia.
   Medidas aprobadas: dibujo de 20 en boton de 32 con radio 8 y separacion de 6.

   RONDA 2 (#274, Jorge 20/09/2026): el componente deja de estar atado a `.maestros` y pasa a
   llamarse `.col-actions--iconos`, porque el issue lo extiende a «Ultimos documentos emitidos» del
   Panel — «aplicar el mismo estilo de botones que ya se ha incorporado en las acciones de
   Maestros». Duplicar el bloque bajo `.home` habria sido el casi-duplicado de siempre, y la
   siguiente tabla que lo pidiera habria hecho la tercera copia. Con el cambio, el Panel hereda
   tambien la regla tactil de 44x44, que es otra de sus condiciones. */
.col-actions--iconos { white-space: nowrap; }
.col-actions--iconos .icon-btn {
    width: 32px; height: 32px; border-radius: 8px; background: #F0F5FC;
    border: var(--bw-1) solid transparent; margin-right: 6px; vertical-align: middle;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.col-actions--iconos .inline-form:last-child .icon-btn, .col-actions--iconos > .icon-btn:last-child { margin-right: 0; }
.col-actions--iconos .icon-btn:hover, .col-actions--iconos .icon-btn:focus-visible { background: #E0EEFF; border-color: #BFD8F9; }
/* Favorito: el dibujo es el MISMO marcado y sin marcar —lo entrega asi el paquete—, asi que el
   estado lo dice el BOTON, no la ilustracion: relleno y borde de seleccion. El nombre accesible
   («Marcar como favorito» / «Quitar de favoritos») ya distinguia los dos, y se conserva. */
.col-actions--iconos .icon-btn.is-fav { background: #DFEDFF; border-color: #86B7EE; }
/* La papelera hereda el color con `currentColor`: azul grisacea en reposo y roja al pasar el
   cursor o recibir el foco, sobre su fondo suave. Es el unico dibujo del paquete que lo hace. */
/* Disposicion compacta (escritorio estrecho): el apartado 3 baja el dibujo a 18 px sin tocar el
   boton, para que la fila de acciones siga cabiendo sin apilarse. */
@container tabla (max-width: 560px) {
    .col-actions--iconos .icon-btn svg { width: 18px; height: 18px; }
}
.col-actions--iconos .icon-btn--danger { color: #4D7099; }
.col-actions--iconos .icon-btn--danger:hover, .col-actions--iconos .icon-btn--danger:focus-visible {
    background: #FFF0F2; border-color: #F3C6CC; color: #BC4652;
}

/* ---- Tabla de datos ---- */
.table-wrap { padding: 0; overflow-x: auto; }
/* El contenedor de la consulta compacta del #274 T3 se establece SOLO en la tabla de Maestros:
   `.table-wrap` la usan diez pantallas, y hacerlas contenedor a todas cambiaria el alcance de
   cualquier `@container` futuro sin que nadie lo pidiera. */
.maestros .table-wrap, .table-wrap--tabla { container-type: inline-size; container-name: tabla; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.data-table th, .data-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-1) solid var(--color-border); }
/* Cabecera de tabla de la maqueta: 12 px, peso 600, versalitas con 0,7 px de espaciado sobre el
   lienzo. La maqueta pinta el rotulo en #73869d (3,5:1 sobre ese fondo): se usa el secundario. */
.data-table th {
    font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase;
    letter-spacing: .7px; color: var(--color-text-muted); background: var(--color-bg);
    position: sticky; top: 0;
}
.data-table tbody tr:hover { background: var(--color-primary-050); }
.data-table tr:last-child td { border-bottom: none; }
.col-actions { text-align: right; white-space: nowrap; }
.text-subtle { color: var(--color-text-muted); }

/* ============================================================================
   issue #187 — patrones reutilizables de responsive (Sprint 0)
   Se construyen aqui UNA vez y se aplican pantalla a pantalla en los sprints
   siguientes, en vez de resolver cada tabla/formulario de forma aislada.
   ============================================================================ */



/* ---- Estado vacio ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-9) var(--sp-5); color: var(--color-text-muted); }
.empty-state svg { color: var(--color-text-subtle); }
.empty-state__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); margin: 0; color: var(--color-text); }
.empty-state__text { margin: 0; max-width: 360px; }

/* ---- Mensaje que explica un estado (issue #48 F11, §16) ----
   Va DEBAJO del estado, en su misma celda, con el color secundario de texto (6,0:1 sobre blanco,
   por encima del 4,5:1 que exige WCAG 2.2 AA para texto normal — no se baja a `--color-text-subtle`
   precisamente porque este texto hay que poder leerlo, no adivinarlo). Es `block` para que caiga a
   su propia linea sin depender del ancho de la columna. `--fs-caption` no se usa aqui: a 12 px un
   mensaje de dos lineas se lee peor justo cuando el cliente mas lo necesita. */
.pay-txmsg {
    display: block; margin-top: var(--sp-1);
    font-size: var(--fs-label); line-height: var(--lh-body);
    color: var(--color-text-muted); max-width: 42ch;
}

/* ---- Piezas de formulario que Maestros comparte con Pagos y Cuenta ---- */
.maestros__form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.maestros__form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-2); }
.form-error { color: var(--color-danger); font-size: var(--fs-caption); margin: 0; }
.req { color: var(--color-danger); }
.form-field select.is-error { border-color: var(--color-danger); }
.form-check--toggle { align-items: center; }

/* ---- Toast (exito) ---- */
.toast {
    position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
    background: var(--color-primary-700); color: var(--color-text-invert);
    padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); box-shadow: var(--sh-lg);
    z-index: var(--z-toast); font-size: var(--fs-label); font-weight: var(--fw-label);
    animation: toast-in var(--dur-base) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================================
   DeCA: listado, form-deca y detalle (Slice 4)
   ============================================================================ */

/* ---- Badges de estado de documento (badge solido, texto blanco; AA) ---- */
/* #339: geometria del distintivo de la maqueta (7 px de radio, no pildora). Los COLORES de cada
   estado no se tocan aqui: los viste la slice de Documentos con su tabla. */
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 7px; font-size: var(--fs-caption); font-weight: 600; color: #fff; white-space: nowrap; }
.badge--borrador   { background: var(--state-borrador); }
.badge--emitido    { background: var(--state-emitido); }
.badge--modificado { background: var(--state-modificado); }
.badge--anulado    { background: var(--state-anulado); }
.badge--sustituido { background: var(--state-sustituido); }
.badge--expirado   { background: var(--state-expirado); }
.badge--muted      { background: var(--state-borrador); }

/* ---- Filtros del listado ---- */
.deca-filters { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; flex-wrap: wrap; }
.deca-filters select { height: 36px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); font: inherit; padding: 0 var(--sp-2); }
/* issue #338: período por fecha de emisión o del servicio. Etiquetas VISIBLES (no solo aria-label): «Desde» y «Hasta»
   sin rótulo serían dos fechas indistinguibles. */
.deca-filters__periodo { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0; }
.deca-filters__campo { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--color-text-muted); }
.deca-filters__campo input[type="date"] { min-height: 36px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); font: inherit; padding: 0 var(--sp-2); }
.deca-filters__periodo.is-error input[type="date"] { border-color: var(--color-danger); }
.deca-filters__periodo .form-error { flex-basis: 100%; margin: 0; }
/* issue #338 (S-196): selección para el ZIP. Sin JavaScript la columna y la barra no se muestran (app.js añade
   .is-sel a la tabla y quita el hidden de la barra): sin él no hay nada que hacer con una casilla. */
[data-sel-tabla]:not(.is-sel) .col-sel { display: none; }
.col-sel { width: 1%; white-space: nowrap; }
.col-sel input[type="checkbox"] { width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--color-primary-600); }
.col-sel input[type="checkbox"]:disabled { cursor: not-allowed; }
/* La barra de seleccion, su contador, sus acciones y su aviso se visten en la seccion de Documentos del rediseno
   (#339, S-223): el listado es su unica pantalla y las reglas que habia aqui ya no pintaban nada. */
/* issue #336 (S-187): bloque «Documentos adjuntos» de la ficha. */
.adjuntos-lista { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.adjuntos-lista__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: var(--bw-1) solid var(--color-border); }
.adjuntos-lista__item:last-child { border-bottom: none; }
.adjuntos-lista__nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.adjuntos-lista__tam { white-space: nowrap; font-size: var(--fs-caption); }
.adjuntos-lista__retirar { margin: 0; }
.adjuntos-lista__retirar .icon-btn { min-width: 44px; min-height: 44px; font-size: 20px; line-height: 1; }
.adjuntos-subir { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; margin-top: var(--sp-2); }
.adjuntos-subir input[type="file"] { max-width: 100%; }
.deca-sel__pagina-movil { display: none; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; }
.deca-sel__pagina-movil input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary-600); }
@media (max-width: 768px) {
    .deca-sel__pagina-movil { display: inline-flex; flex-basis: 100%; }
    /* En tarjeta la celda ocupa todo el ancho: fuera el 1 % de escritorio (partía el motivo letra a letra). */
    .data-table--cards td.col-sel { width: auto; align-items: center; min-height: 44px; }
    .data-table--cards .deca-sel__motivo { max-width: none; flex-basis: 100%; text-align: left; }
}
.deca-toolbar__new { display: flex; gap: var(--sp-2); }
.deca-count { color: var(--color-text-muted); font-size: var(--fs-label); margin: 0 0 var(--sp-3); }
.data-table--clickable tbody tr { cursor: pointer; }
/* issue #174.2: paginacion del listado de Documentos */
.deca-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.deca-pager__nav { display: flex; gap: var(--sp-2); }

.card-title { font-size: var(--fs-h3); font-weight: var(--fw-h3); margin: 0 0 var(--sp-4); }
.form-alert--info {
    background: linear-gradient(110deg, var(--color-info-bg), #f0f8fe);
    border: var(--bw-1) solid var(--color-primary-100);
    --alert-icon-color: var(--color-primary-500);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* issue #39 §8: aviso de consumo al 80 % (amarillo). Reutiliza el token de aviso. */
.form-alert--warning {
    background: var(--color-warning-bg, #fbf5e6);
    border: var(--bw-1) solid #ecd9b3;
    color: #8a5c07;
    --alert-icon-color: var(--color-warning, #8f5c00);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* issue #98 (ampliacion): aviso al cliente tipo "exito" (verde). Mismos tokens que el aviso de exito del Panel. */
.form-alert--success {
    background: var(--color-success-bg);
    border: var(--bw-1) solid #b9e6d9;
    /* #339: `--color-success` sobre `--color-success-bg` da 4,21:1; el tono de texto del estado
       emitido da 5,56:1. */
    color: var(--state-emitido-fg);
    --alert-icon-color: var(--color-success);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* issue #98 (ampliacion, feedback de Jorge 03/08): aviso tipo "mantenimiento" compartia color e
   icono con "advertencia" y no se distinguian de un vistazo. Reutiliza el morado de
   --state-sustituido (ya en el sistema, documento sustituido) en vez de inventar un tono nuevo;
   icono de llave inglesa en vez del triangulo de advertencia. */
.form-alert--maintenance {
    background: var(--state-sustituido-bg);
    border: var(--bw-1) solid #d9cceb;
    color: var(--state-sustituido-fg);
    --alert-icon-color: var(--state-sustituido);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}



/* ---- Partes diferenciadas (cargador vs transportista) ---- */
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.party { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.party--t { border-color: #d7e6df; }
.party--c { border-color: #d6e0ea; }
.party__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.party--t .party__head { color: var(--color-accent-700); }
.party--c .party__head { color: var(--color-primary-600); }
.party-name { font-weight: 600; }
.party-nif { color: var(--color-text-muted); font-size: var(--fs-label); }
.party-dom { color: var(--color-text-muted); font-size: var(--fs-label); }
.tag { width: 18px; height: 18px; border-radius: 4px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.tag--t { background: var(--color-accent-600); } .tag--c { background: var(--color-primary-600); }

/* ---- Filas/campos del formulario ---- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.deca-form .form-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.deca-form textarea, .deca-form input[type="text"], .deca-form input[type="date"], .deca-form select {
    font: inherit; color: var(--color-text); padding: var(--sp-2) var(--sp-3);
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface);
}
.deca-form textarea { resize: vertical; }

/* ---- Combobox (popup) ---- */
.combo { position: relative; }
.combo__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font: inherit; text-align: left; cursor: pointer; padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); }
.combo__value.is-placeholder { color: var(--color-text-muted); }
.combo__pop { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: var(--sp-2); }
.combo__search { width: 100%; font: inherit; padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.combo__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.combo-inline__list { list-style: none; margin: 2px 0 0; padding: var(--sp-1); position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-md); max-height: 200px; overflow-y: auto; }
.combo__opt { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; }
.combo__opt:hover, .combo__opt:focus { background: var(--color-surface-2); outline: none; }
/* El foco de una opcion se dibuja con el fondo, que los colores forzados quitan: contorno transparente por dentro. */
.combo__opt:focus { outline: 2px solid transparent; outline-offset: -2px; }
.combo__sub { font-size: var(--fs-caption); color: var(--color-text-muted); }
/* #339, ajustes 7 y 8 (maqueta `combo-option`): cada resultado, con el dibujo de su tipo delante y sus dos lineas al lado. */
.combo__opt:has(.combo__ico) { flex-direction: row; align-items: center; gap: 10px; }
.combo__ico { display: grid; place-items: center; flex: none; color: var(--crear-icono); }
.combo__txt { display: flex; flex-direction: column; min-width: 0; }
.combo__lbl { overflow-wrap: anywhere; }
.combo__txt .combo__sub { margin-top: 2px; overflow-wrap: anywhere; }
.combo__add { display: block; padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-label); border-top: var(--bw-1) solid var(--color-border); }
.combo-inline { position: relative; }
.combo-inline__input { width: 100%; font: inherit; color: var(--color-text); padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); }

/* ---- Lineas (repetidor) ---- */
.lines { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.line-row { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--color-surface-2); }
.line-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.line-row__num { width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--color-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; font-family: var(--font-mono); }
.line-row__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.form-field--wide { grid-column: 1 / -1; }

/* ---- Direccion estructurada origen/destino (issue #22 #3/#4/#5) ---- */
.addr-group { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.addr-group__title { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: 0 var(--sp-1); }
.addr-group__row { display: grid; grid-template-columns: minmax(90px, 0.5fr) minmax(120px, 1fr); gap: var(--sp-3); }
.deca-form .addr-group .form-field { margin-bottom: 0; }

/* ---- Peso valor + unidad (issue #22 #11) + bultos/unidad logistica (issue #36 §2.2) ---- */
/* #343 S-262 (ficha de DR-008 §2-§3): Cantidad y Unidad en dos columnas iguales, cada una con su etiqueta;
   una sola columna a movil. */
.peso-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start; }
.peso-group__col { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
/* «Elige la unidad» se ve atenuada tambien con el desplegable cerrado; las unidades reales, en su color. */
.peso-group__col select:has(option[value=""]:checked) { color: var(--color-text-subtle); }
.peso-group__col select option { color: var(--color-text); }
.peso-group__col select option[value=""] { color: var(--color-text-subtle); }
.peso-legacy { margin: var(--sp-2) 0 0; font-size: var(--fs-label); line-height: 18px; }
@media (max-width: 480px) {
    .peso-group { grid-template-columns: 1fr; }
    .peso-legacy { font-size: var(--fs-body); line-height: 20px; }
}
.deca-form .peso-field .js-peso-otra { margin-top: var(--sp-2); margin-bottom: 0; }
.deca-form .peso-field .peso-field__bultos { margin-top: var(--sp-2); margin-bottom: 0; }

/* ---- Paradas individualizadas (issue #22 #9) ---- */
.paradas__list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.parada-row { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--color-surface); }
.parada-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.parada-row__num { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--color-accent-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; font-family: var(--font-mono); }
.parada-row__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
.deca-form .parada-row .form-field { margin-bottom: 0; }

/* Overrides por linea (issue #22 #7/#8): fecha por envio y autobus/conductor por servicio.
   El checkbox "usar general" (marcado por defecto) oculta el cuerpo; al desmarcar se revela. */
.line-override { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--color-surface); }
.line-override__body { margin-top: var(--sp-3); }
.deca-form .line-override .form-field { margin-bottom: 0; }
.line-transporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
/* issue #36 §3.3: aviso informativo cuando se usan el autobus/conductor generales. */
.line-transporte__info { margin: var(--sp-2) 0 0; }
/* Sub-fila de override en las tablas de lineas (detalle/PDF-fallback): dato propio del envio/servicio. */
.line-sub td { background: var(--color-surface-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.line-sub__label { font-weight: 600; }
/* issue #187 (Jorge, 08/08/2026, punto 7.1): cada dato complementario del envio es su propio
   `item`, y el separador « · » lo pone el CSS en vez de venir cosido en el HTML. Asi en escritorio
   se siguen leyendo en una linea, y en movil cada uno puede convertirse en una fila etiquetada
   como el resto de la ficha — que es justo lo que Jorge pedia: «que carga y descarga se lean como
   dos datos mas del trayecto, no como un bloque anadido». Con el separador en el HTML eso era
   imposible sin duplicar el markup. */
.line-sub__item + .line-sub__item::before { content: '\00a0·\00a0'; color: var(--color-text-subtle); }

/* ---- Rail de validacion ---- */
.deca-rail { position: sticky; top: var(--sp-5); }
.deca-rail__hint { color: var(--color-text-muted); font-size: var(--fs-label); }
.deca-rail__note { color: var(--color-text-muted); font-size: var(--fs-caption); margin: var(--sp-3) 0 0; }
.checklist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.checklist__item { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-label); }
.checklist__item.is-error { color: var(--color-danger); }
.checklist__item.is-warn { color: var(--color-warning); }
.checklist__item.is-info { color: var(--color-info); }
.checklist__item svg { flex: none; margin-top: 1px; }
.deca-rail__hint.is-ready { color: var(--color-success); font-weight: var(--fw-label); }
/* issue #180: "se puede emitir, pero hay advertencias" — mismo tono que .checklist__item.is-warn */
.deca-rail__hint.is-warn { color: var(--color-warning); font-weight: var(--fw-label); }

/* ---- Asistente de 4 pasos (crear.md, issue #22) ---- */
.deca-wizard { max-width: 920px; }
/* Stepper: revelado solo con JS (sin JS lleva el atributo hidden). */
.wizard-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
/* #339: la caja, los colores y los estados de los pasos viven en la seccion «Crear DeCA» (`.deca-wizard …`, al final);
   aqui queda solo lo que esa seccion no declara. */
.wizard-steps__btn { font: inherit; cursor: pointer; }
.wizard-steps__num { flex: none; align-items: center; justify-content: center; }
/* issue #36 §1.8: ✓ (completo) / ✕ (pendiente) reemplazan el número cuando el JS evalúa el paso.
   El paso actual conserva su borde destacado (is-active); estos marcadores son un indicador extra. */
.wizard-steps__mark { flex: none; display: none; align-items: center; justify-content: center; border: var(--bw-1) solid transparent; }
.wizard-steps__item.is-complete .wizard-steps__num,
.wizard-steps__item.is-incomplete .wizard-steps__num { display: none; }
.wizard-steps__item.is-complete .wizard-steps__mark--ok { display: inline-flex; }
.wizard-steps__item.is-incomplete .wizard-steps__mark--bad { display: inline-flex; }
/* issue #36 §2.5/§3.6: tabla de resumen de envíos/servicios en la Revisión. */
.review-lines-wrap { overflow-x: auto; margin-top: var(--sp-4); }
.review-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.review-lines th, .review-lines td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-1) solid var(--color-border); vertical-align: top; }
.review-lines thead th { font-weight: var(--fw-label); color: var(--color-text-muted); white-space: nowrap; }
.review-lines tbody tr:last-child td { border-bottom: 0; }
/* En modo paginado (JS) solo se ve el paso activo; sin JS se apilan todos. */
.deca-wizard.is-wizard .wizard-step:not(.is-active) { display: none; }
/* Barra inferior de navegacion. */
.wizard-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--bw-1) solid var(--color-border); }
.wizard-nav__spacer { flex: 1 1 auto; }
/* Resumen del paso 4 (issue #18). */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.review-grid__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-grid__label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.review-grid__value { font-size: var(--fs-body); font-weight: var(--fw-label); overflow-wrap: anywhere; }

/* ---- Detalle ---- */
.deca-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.deca-detail-id { font-size: 22px; font-weight: 600; color: var(--color-primary-700); }
.deca-detail-meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); color: var(--color-text-muted); font-size: var(--fs-label); flex-wrap: wrap; }
.deca-detail-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* issue #187 punto 2 (tercera ronda, captura real de Jorge): el `display:contents` que saca a
   `.inline-form` (envuelve "Duplicar DeCA") de su propia caja de flex anidada estaba acotado a
   `@media (max-width:480px)`, pero `.deca-detail-actions` envuelve SIEMPRE (regla de arriba, sin
   media query) y la ecualizacion de alturas de la ronda anterior (`min-height:46px`,
   mas abajo) vive en `@media (max-width:768px)` — un rango mas ancho. Entre 481 y 768px el
   `.inline-form` seguia con su caja propia sin que nada lo corrigiera: exactamente lo que muestra
   la captura, "Duplicar DeCA" con una caja mas alta que sus hermanos. Sin media query: el
   formulario nunca debe competir como su propia caja, a ningun ancho. */
.deca-detail-actions .inline-form { display: contents; }
/* Deshabilitado (maqueta de la familia B): opacidad .46 y sin sombra. */
.btn[disabled], .btn[aria-disabled="true"] { opacity: .46; cursor: not-allowed; box-shadow: none; }
.btn--danger-ghost { color: var(--color-danger); border-color: var(--color-border-strong); background: var(--color-surface); }
.deca-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr; gap: var(--sp-5); align-items: start; }
.deca-detail-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.deca-qr { display: flex; gap: var(--sp-4); align-items: center; }
.deca-qr__code { width: 96px; height: 96px; flex: none; border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); }
.deca-qr__body { flex: 1; min-width: 0; }
.deca-qr__url { display: flex; gap: var(--sp-2); margin: var(--sp-1) 0; }
.deca-qr__url input { flex: 1; min-width: 0; font: inherit; padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface-2); }
.detail-facts { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw-1) solid var(--color-border); }
.detail-facts > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); }
.detail-obs { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw-1) solid var(--color-border); font-size: var(--fs-label); }
.detail-obs p { margin: 2px 0 0; line-height: var(--lh-body); }
.trace { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.trace li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); }

/* issue #310 T9 (§15): los datos técnicos de la aportación, DENTRO del suceso pero visiblemente
   aparte de su frase — la separación no es estética, es lo que hace evidente que son otra cosa.
   Y su aviso va pegado a ellos, no al pie del bloque: quien los lee tiene que leerlo ahí. */
.trace__tecnico {
    margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--color-border-strong); background: var(--color-surface-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    display: flex; flex-direction: column; gap: 2px;
}
.trace__dato { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.trace__etiqueta { font-size: var(--fs-caption); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .02em; }
.trace__dato code { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-text-muted); word-break: break-all; }
.trace__aviso { margin-top: var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-subtle); text-wrap: pretty; }
.deca-back { display: inline-block; margin-top: var(--sp-3); color: var(--color-primary-600); text-decoration: none; font-size: var(--fs-label); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .deca-detail-grid { grid-template-columns: 1fr; }
    .deca-rail { position: static; }
}
@media (max-width: 768px) {
    .party-grid { grid-template-columns: 1fr; }
    /* Stepper: las pildoras se apilan con etiqueta visible (crear.md). */
    .wizard-steps { flex-direction: column; }
    /* Botonera inferior con CTAs a ancho completo. */
    .wizard-nav { flex-direction: column; align-items: stretch; }
    .wizard-nav__spacer { display: none; }
    .wizard-nav .btn { width: 100%; }
}

/* ---- Vista publica de inspeccion (Slice 5): movil primero ---- */
.pub-body { background: var(--color-bg); min-height: 100vh; }
.pub-wrap { max-width: 420px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); min-height: 100vh; box-sizing: border-box; }
.pub-brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--color-primary-600); }
.pub-brand__name { font-weight: 600; font-size: var(--fs-h3); letter-spacing: .02em; }
/* issue #310 §6 (Jorge, 21/09): el logotipo OFICIAL sustituye al simbolo + «DeCA» en la cabecera
   del formulario externo y sus paginas de estado. El alto manda y el ancho se calcula, para que no
   se deforme; 26 px lo deja a la altura de lo que ocupaba el conjunto que sustituye, sin robarle
   sitio al formulario, que es a lo que se viene. */
.pub-brand__logo { height: 26px; width: auto; flex: none; }
.pub-card { background: var(--color-surface); border: var(--bw-1) solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: var(--sp-4); }
.pub-card--neutral { text-align: center; }
.pub-eyebrow { margin: 0; font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
/* S-231: el titulo de la pagina publica es un h1 (antes no habia ninguno): hereda la letra, sin los margenes ni
   el tamano de un encabezado; se ve igual que el parrafo que sustituye. */
h1.pub-state { margin: 0; font-size: inherit; font-weight: inherit; }
.pub-state { display: flex; justify-content: flex-start; }
.pub-card--neutral .pub-state { justify-content: center; }
.pub-state__badge { font-size: var(--fs-body); padding: 6px 16px; }
.pub-note { margin: 0; font-size: var(--fs-label); line-height: 1.5; }
.pub-note--warn { color: var(--color-warning); }
.pub-note--danger { color: var(--color-danger); }
.pub-note--muted { color: var(--color-text-muted); }
.pub-facts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pub-facts div { display: flex; flex-direction: column; gap: 2px; }
.pub-facts dt { font-size: var(--fs-caption); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.pub-facts dd { margin: 0; font-size: var(--fs-body-lg); color: var(--color-text); }
.pub-download { min-height: 52px; font-size: var(--fs-body-lg); }
.pub-legal { margin: 0; font-size: var(--fs-caption); color: var(--color-text-subtle); line-height: 1.5; }
.pub-foot { margin-top: auto; display: flex; justify-content: center; opacity: .8; }

/* ---- Modal de enviar al conductor (Slice 5) ---- */
.modal { width: min(440px, calc(100vw - var(--sp-6))); border: var(--bw-1) solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--sh-lg); color: var(--color-text); background: var(--color-surface); }
.modal::backdrop { background: rgba(20, 58, 82, .45); }
.modal__x { display: flex; justify-content: flex-end; margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0 0; }
.modal__x .btn { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-h2); line-height: 1; }
.modal__form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.field-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.input { font: inherit; padding: 11px 13px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); width: 100%; box-sizing: border-box; }
.input:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
.modal__divider { display: flex; align-items: center; text-align: center; gap: var(--sp-2); color: var(--color-text-subtle); font-size: var(--fs-caption); margin: var(--sp-4) 0 var(--sp-2); }
.modal__divider::before, .modal__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
/* Peligro de la maqueta (`btn-danger`): suave, no solido. La maqueta pinta el texto en #ba5a5e
   (4,25:1 sobre su fondo); se usa `--color-danger`, que da 4,85:1. */
.btn--danger { background: var(--btn-danger-bg); border-color: var(--btn-danger-border); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-bg); }

/* ---- Modificacion / anulacion (Slice 6) ---- */
.modify-methods { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.modify-methods legend { padding: 0 var(--sp-1); }
.radio-row { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) 0; cursor: pointer; }
.radio-row input { margin-top: 3px; }
.version-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.version-item { border-left: 2px solid var(--color-border-strong); padding-left: var(--sp-3); }
.version-item.is-current { border-left-color: var(--color-accent-600); }
.version-item__head { display: flex; align-items: center; gap: var(--sp-2); }
.version-item__meta { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: 2px; }
.version-item__reason { font-size: var(--fs-caption); color: var(--color-text); margin-top: var(--sp-1); }
.version-item__date { font-size: var(--fs-caption); color: var(--color-text-subtle); margin-top: 2px; }

/* ============================================================================
   Slice 7 — Suscripcion y pago Redsys (planes, pagos, retorno)
   ============================================================================ */
/* Pequeno de la maqueta (acciones de tabla y de tarjeta): 13 px y 40 px de alto. */
.btn--sm { min-height: 40px; padding: 8px var(--sp-3); font-size: 13px; }

/* Los planes, sus tarjetas y la comparativa de Maestros (issues #32 y #33) se visten en la seccion «Suscripcion y
   pagos» del rediseno #339, al final. */

/* Pago: retorno y redireccion (layout publico) */
.pub-card__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-h1, 600); color: var(--color-text); }
.pub-card__lead { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); line-height: 1.5; }
.pub-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.pub-badge { align-self: center; font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 14px; border-radius: 999px; }
.pub-badge--success { background: var(--color-primary-100); color: var(--color-primary-700); }
.pub-badge--warning { background: var(--color-info-bg); color: var(--color-info); }
.pub-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---- Banner de modo soporte (impersonacion Pretium, Slice 9b) ------------ */
.support-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 28px; background: #5b4f9e; color: #fff; font-size: 13px;
}
.support-banner__text { flex: 1; }
.support-banner__exit {
    height: 30px; padding: 0 13px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.support-banner__exit:hover { background: rgba(255,255,255,.12); }

/* ---- Movimiento reducido (a11y) ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Panel de control (issue #1; rediseno #339, S-222) ----------------------
   Maqueta `Docarga-panel-redisenado.html` (familia A). Los cortes son los suyos —1530, 1230,
   1000, 760 y 360 px, escritos con `.98` como los de la estructura— y son de VENTANA: la maqueta
   aprobada sustituye aqui al corte por contenedor que el #274 fijo para los accesos rapidos.
   Las clases `home-*` que ya existian conservan su nombre; las nuevas siguen el mismo patron.
   Los tamanos de texto van escritos: el contenido del resto de areas sigue en 14 px (D-339-6) y
   el Panel toma los de su maqueta (15/14/13 px en escritorio, 16 px en movil). */
.page-header--actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
/* Estas tres clases nacieron en el Panel y las usan tambien las pantallas de Cuenta (datos,
   seguridad, API, emision, suscripcion y soporte), que tienen su propia slice de rediseno: sus
   reglas genericas NO se tocan, y lo que el Panel cambia va acotado a sus contenedores. */
.home-section-title { font-size: var(--fs-h3); font-weight: var(--fw-h3); margin: 0 0 var(--sp-3); }
.home-quota-facts { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin: var(--sp-4) 0; }
.home-quota-facts dt { font-size: var(--fs-caption); color: var(--color-text-muted); margin: 0 0 2px; }
.home-quota-facts dd { margin: 0; font-weight: 600; }
.home-guide-list { margin: 0; padding-left: var(--sp-5); }
.home-guide-list li { margin-bottom: var(--sp-2); }
/* `.page-header.` a proposito: mas abajo hay un `.page-header--actions` de movil, posterior y con la
   misma especificidad que una clase sola. */
.page-header.home-heading { align-items: center; gap: 25px; margin-bottom: 23px; flex-wrap: nowrap; }
.home-heading .page-header__actions { flex: none; }

/* Enlace de texto con flecha (maqueta `text-link`). 36 px de alto para que no sea un objetivo de
   una linea de alto; en movil sube a 44. */
.home-link {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
    color: var(--color-primary-600); font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none;
}
.home-link:hover { color: var(--color-primary-700); }
.home-trazo { flex: none; }

/* Franja de avisos de Administracion: medidas de la maqueta sobre el componente de siempre. El
   color y el icono de cada tipo no se tocan: los pone `.form-alert--*`. */
.home-avisos .form-alert {
    padding: 17px 20px 17px 54px; margin-bottom: 20px;
    font-size: 15px; line-height: 1.65; overflow-wrap: anywhere;
}
.home-avisos .form-alert::before { left: 20px; top: 20px; width: 21px; height: 21px; -webkit-mask-size: 21px 21px; mask-size: 21px 21px; }

/* ---- Consumo y borradores ---- */
.home-overview { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(250px, 1fr); gap: 18px; margin-bottom: 25px; }
.home-overview--solo { grid-template-columns: minmax(0, 1fr); }

.home-consumo {
    position: relative; overflow: hidden; color: var(--consumo-text);
    background: var(--grad-consumo); border-radius: var(--r-xl);
    padding: 24px 26px 0; box-shadow: 0 8px 21px #07306616;
}
/* El aro decorativo de la esquina. No recibe el cursor ni tapa nada. */
.home-consumo::before {
    content: ""; position: absolute; width: 340px; height: 340px; right: -200px; top: -145px;
    border: 55px solid #ffffff04; border-radius: 50%; pointer-events: none;
}
/* Sin pie (ni fecha de renovacion ni permiso para ver los planes) la tarjeta no se queda sin aire abajo. */
.home-consumo > :last-child:not(.home-consumo__pie) { margin-bottom: 24px; }
/* Dentro de la tarjeta oscura el foco usa el anillo claro, como la barra lateral. */
.home-consumo :focus-visible { outline-color: var(--color-focus-ring-on-dark); outline-offset: 3px; }
.home-consumo__top { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.home-consumo__titulo { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.15px; }
.home-consumo__icono {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
    border: 1px solid #ffffff20; border-radius: 9px; background: #ffffff0e; color: var(--consumo-icon);
}
.home-consumo__plan {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--consumo-badge-fg);
    padding: 5px 9px; border-radius: 6px; background: #ffffff11; border: 1px solid #ffffff19;
}
.home-consumo__cifras { display: flex; gap: 27px; align-items: center; margin-top: 19px; }
.home-consumo__cifras > div { min-width: 0; }
.home-consumo__principal { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.home-consumo__principal strong { font-size: 49px; line-height: 1.05; letter-spacing: -1.7px; font-weight: 650; }
.home-consumo__principal span { color: var(--consumo-muted); font-size: 20px; font-weight: 400; }
.home-consumo__rotulo { margin: 7px 0 0; color: var(--consumo-label); font-size: 14px; line-height: 1.5; }
.home-consumo__divisor { flex: none; height: 48px; width: 1px; background: var(--consumo-line); margin-left: 12px; }
.home-consumo__libres { margin: 0; }
.home-consumo__libres strong { display: block; color: var(--consumo-accent); font-size: 31px; line-height: 1.25; letter-spacing: -.8px; font-weight: 650; }
.home-consumo__disponibles .home-consumo__rotulo { margin-top: 2px; }
.home-consumo__barra { margin-top: 19px; display: flex; align-items: center; gap: 12px; }
.home-consumo__barra .quota-bar { flex: 1; height: 6px; border-radius: 10px; background: var(--consumo-track); }
.home-consumo__barra .quota-bar__fill { border-radius: 10px; background: linear-gradient(90deg, var(--consumo-fill-from), var(--consumo-fill-to)); }
.home-consumo__barra .quota-bar__fill.is-warn { background: var(--consumo-fill-warn); }
.home-consumo__barra .quota-bar__fill.is-full { background: var(--consumo-fill-full); }
.home-consumo__pct { font-size: 13px; color: var(--consumo-muted); white-space: nowrap; }
/* Sin limite conocido (acceso gratuito o plan ilimitado): el total a la izquierda y los datos del
   periodo a la derecha, en vez de las dos cifras y la barra. */
.home-consumo__libre { display: flex; align-items: center; gap: 30px; padding: 25px 0 7px; }
.home-consumo__total { flex: none; min-width: 170px; border-right: 1px solid #ffffff20; padding-right: 30px; }
.home-consumo .home-quota-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 15px; line-height: 1.5; }
/* Cada pareja conserva su <div> (asi es valido dentro de <dl>) y se disuelve en la rejilla. */
.home-consumo .home-quota-facts > div { display: contents; }
.home-consumo .home-quota-facts dt { margin: 0; font-size: inherit; color: var(--consumo-muted); }
.home-consumo .home-quota-facts dd { margin: 0; font-weight: 400; color: var(--consumo-strong); }
.home-consumo__pie {
    margin-top: 19px; border-top: 1px solid #ffffff14; padding: 13px 0 14px;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
}
.home-consumo__renovacion { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; color: var(--consumo-muted); font-size: 13px; line-height: 1.55; }
.home-consumo__renovacion strong { color: var(--consumo-strong); font-weight: 500; }
/* A la derecha tambien cuando va solo, sin fecha de renovacion a su izquierda. */
.home-consumo__pie .home-link { margin-left: auto; color: var(--consumo-badge-fg); }
.home-consumo__pie .home-link:hover { color: var(--consumo-text); text-decoration: underline; }

.home-borradores {
    display: flex; flex-direction: column; position: relative;
    border: var(--bw-1) solid var(--color-border); background: var(--color-surface);
    border-radius: var(--r-xl); padding: 23px 24px; box-shadow: var(--sh-md);
}
.home-borradores__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-borradores__titulo { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.15px; }
.home-borradores__icono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--color-warning-bg); color: var(--color-warning); border-radius: 9px; }
.home-borradores__cifra { margin: 9px 0 3px; display: flex; align-items: baseline; gap: 10px; }
.home-borradores__cifra strong { font-size: 45px; font-weight: 650; line-height: 1.1; letter-spacing: -1.5px; color: var(--color-primary-700); }
.home-borradores__cifra span { font-size: 15px; color: var(--color-text-muted); }
.home-borradores__texto { color: var(--color-text-muted); font-size: 14px; margin: 4px 0 16px; line-height: 1.7; }
.home-borradores .btn { width: 100%; margin-top: auto; padding: 9px 12px; font-size: 14px; }

/* ---- Accesos rapidos (issue #274 T2, D-274-3; rediseno #339) ------------------
   Los DIBUJOS siguen siendo los cinco aprobados en el #274 (`Core\Iconos`), ahora a 48 px y sin
   base de color, como las ilustraciones de la maqueta. Cada tarjeta gana su linea de apoyo y una
   flecha, que es decorativa y se pinta desde aqui (mascara CSS): asi el bloque no mezcla un
   icono de contorno con los dibujos multitinta, que es lo que el caso 173 vigila.

   Al pasar el cursor o al enfocar, la tarjeta sube 2 px, toma el borde azul y una sombra, y su
   titulo pasa a azul («efecto de la grabacion de referencia» de la maqueta). Con movimiento
   reducido no se mueve ni hace transicion: se queda el cambio de borde, sombra y color. */
.home-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.home-section-head .home-section-title { font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.15px; margin: 0; }
.home-section-head__nota { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.home-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 25px; }
/* Sin permiso para crear quedan cuatro accesos: cuatro columnas, no cinco con un hueco. */
.home-quick-grid--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* `a.` a proposito: mas abajo hay un `.card { padding }` de movil con la misma especificidad que
   una clase sola y posterior en el fichero (medido conduciendo en el #274). */
a.home-quick-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    min-width: 0; margin-bottom: 0; padding: 14px 15px 15px; border-radius: 14px; text-align: left;
    text-decoration: none; color: var(--color-text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.home-quick-card::after {
    content: ""; position: absolute; top: 20px; right: 14px; width: 14px; height: 14px;
    background-color: var(--color-border-hover);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home-quick-card__base { display: grid; place-items: center; flex: none; width: 51px; height: 48px; }
.home-quick-card__texto { display: block; min-width: 0; width: 100%; }
/* `overflow-wrap`: «Gehitu bezeroa/kargatzailea» (euskera) no cabe en media pantalla de movil sin partirse. */
.home-quick-card__rotulo { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text); overflow-wrap: anywhere; transition: color .18s ease; }
.home-quick-card__nota { display: block; margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
/* «Crear DeCA» es la accion destacada: tarjeta azul muy clara con su borde. */
a.home-quick-card--destacada { border-color: var(--home-quick-borde); background: linear-gradient(130deg, var(--color-primary-050), var(--color-surface)); }
a.home-quick-card--destacada::after { background-color: var(--color-primary-500); }
@media (hover: hover) and (pointer: fine) {
    a.home-quick-card:hover { transform: translateY(-2px); border-color: var(--color-primary-500); box-shadow: 0 8px 18px #07306620, 0 1px 3px #07306610; }
    a.home-quick-card:hover .home-quick-card__rotulo { color: var(--color-primary-600); }
    a.home-quick-card:active { transform: translateY(0); }
}
a.home-quick-card:focus-visible { transform: translateY(-2px); border-color: var(--color-primary-500); box-shadow: 0 8px 18px #07306620, 0 1px 3px #07306610; }
a.home-quick-card:focus-visible .home-quick-card__rotulo { color: var(--color-primary-600); }
@media (prefers-reduced-motion: reduce) {
    a.home-quick-card, .home-quick-card__rotulo { transition: none !important; }
    a.home-quick-card:is(:hover, :focus-visible, :active) { transform: none !important; }
}

/* ---- Configuracion inicial ---- */
.home-setup {
    margin-bottom: 25px; scroll-margin-top: 90px; overflow: hidden;
    background: var(--color-surface); border: var(--bw-1) solid var(--color-primary-100);
    border-radius: var(--r-xl); box-shadow: var(--sh-md);
}
.home-setup__cabecera {
    display: flex; align-items: center; gap: 16px; padding: 25px 27px;
    background: linear-gradient(125deg, var(--color-primary-050), var(--color-surface) 85%);
    border-bottom: var(--bw-1) solid var(--color-border);
}
.home-setup__icono {
    flex: none; width: 50px; height: 50px; display: grid; place-items: center;
    border: 1px solid var(--color-primary-100); border-radius: 15px;
    background: var(--color-surface-3); color: var(--color-primary-600);
}
.home-setup__intro { flex: 1; min-width: 0; }
.home-setup__titulo { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 650; letter-spacing: -.15px; color: var(--color-primary-700); }
.home-setup__intro p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.home-setup__progreso { min-width: 190px; max-width: 240px; flex: none; }
.home-setup__progreso p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--color-primary-600); }
.home-setup__barra { height: 7px; background: var(--color-surface-3); border-radius: 8px; overflow: hidden; }
.home-setup__barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary-600), var(--color-primary-500)); border-radius: 8px; }
.home-setup-list { list-style: none; margin: 0; padding: 7px 27px; }
.home-setup-item { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 14px 0; border-bottom: var(--bw-1) solid var(--color-border); }
.home-setup-item:last-child { border-bottom: 0; }
.home-setup-item__icono {
    display: grid; place-items: center; flex: none; width: 37px; height: 37px;
    border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); color: var(--color-text-muted);
}
.home-setup-item__rotulo { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; color: var(--color-text); }
/* El distintivo de cada paso. Los tres pares de color son de la paleta de estados, medidos en el
   caso 181; el estado lo dicen ademas el texto y el icono. */
.home-setup-state {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none;
    font-size: 14px; line-height: 1.5; padding: 5px 10px; border-radius: 7px;
}
.home-setup-item--done .home-setup-state { background: var(--color-success-bg); color: var(--state-emitido-fg); }
.home-setup-item--pending .home-setup-state { background: var(--color-warning-bg); color: var(--color-warning); }
.home-setup-item--optional .home-setup-state { background: var(--state-borrador-bg); color: var(--state-borrador-fg); }
.home-setup__pie { padding: 19px 27px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.home-setup__pie p { margin: 0; max-width: 540px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.home-setup__pie .btn { flex: none; }

/* ---- Ultimos documentos emitidos ---- */
.home-docs {
    overflow: hidden; margin-bottom: 19px;
    border: var(--bw-1) solid var(--color-border); border-radius: var(--r-xl);
    background: var(--color-surface); box-shadow: var(--sh-md);
}
.home-docs__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; padding: 21px 23px 17px; }
.home-docs__titulo { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.15px; }
.home-docs__cabecera p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 14px; }
.home-docs__cabecera .home-link { white-space: nowrap; }
.home-docs__vacio { margin: 0; padding: 0 23px 21px; font-size: 14px; }
.home-docs .table-wrap { padding: 0 23px 16px; scrollbar-width: thin; }
/* La maqueta fija 950 px de ancho minimo y deja la tabla con desplazamiento propio a 1100 y a
   900 px. Aqui baja a 720: con el identificador partiendo en dos lineas y las direcciones
   recortadas con puntos suspensivos cabe entera a esos anchos, y el desplazamiento interior solo
   aparece en el tramo estrecho con la barra lateral expandida. */
.home-docs__tabla { table-layout: fixed; min-width: 720px; }
.home-docs .home-docs__tabla th, .home-docs .home-docs__tabla td { padding: 13px 10px; vertical-align: middle; }
.home-docs .home-docs__tabla th { padding-top: 10px; padding-bottom: 10px; border-top: var(--bw-1) solid var(--color-border); }
.home-docs .home-docs__tabla th:first-child { border-radius: 6px 0 0 6px; }
.home-docs .home-docs__tabla th:last-child { border-radius: 0 6px 6px 0; }
.home-docs__col-id { width: 27%; }
.home-docs__col-fecha { width: 104px; }
.home-docs__col-estado { width: 122px; }
.home-docs__col-acciones { width: 176px; }
/* Las cabeceras de columna repetidas dentro de cada celda solo hacen falta cuando el <thead> no se pinta. */
.home-docs__etq { display: none; }
.home-docs__marca {
    display: inline-grid; place-items: center; vertical-align: middle; margin-right: 10px;
    width: 31px; height: 36px; background: var(--color-primary-050); border: 1px solid var(--color-primary-100);
    border-radius: 8px; color: var(--color-primary-500);
}
.home-docs__id .row-id-link {
    display: inline-block; vertical-align: middle; max-width: calc(100% - 45px);
    font-size: 13px; font-weight: 600; letter-spacing: -.15px; line-height: 1.45; overflow-wrap: anywhere; color: var(--color-text);
}
.home-docs__fecha { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.home-docs__lugar .cell-clip { display: block; max-width: none; font-size: 13px; color: var(--color-text-muted); }
/* Distintivo de estado de la maqueta: suave, con punto, en vez del solido del resto de areas
   (D-339-6: cada area lo ajusta en su slice). Los colores son los tokens de estado de siempre. */
.home-docs .badge, .docs .badge {
    gap: 5px; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: var(--badge-bg); color: var(--badge-fg);
    border: 1px solid color-mix(in srgb, var(--badge-punto) 18%, transparent);
}
.home-docs .badge::before, .docs .badge::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--badge-punto); }
.home-docs .badge--borrador, .docs .badge--borrador   { --badge-bg: var(--state-borrador-bg);   --badge-fg: var(--state-borrador-fg);   --badge-punto: var(--state-borrador); }
.home-docs .badge--emitido, .docs .badge--emitido    { --badge-bg: var(--state-emitido-bg);    --badge-fg: var(--state-emitido-fg);    --badge-punto: var(--state-emitido); }
.home-docs .badge--modificado, .docs .badge--modificado { --badge-bg: var(--state-modificado-bg); --badge-fg: var(--state-modificado-fg); --badge-punto: var(--state-modificado); }
.home-docs .badge--anulado, .docs .badge--anulado    { --badge-bg: var(--state-anulado-bg);    --badge-fg: var(--state-anulado-fg);    --badge-punto: var(--state-anulado); }
.home-docs .badge--sustituido, .docs .badge--sustituido { --badge-bg: var(--state-sustituido-bg); --badge-fg: var(--state-sustituido-fg); --badge-punto: var(--state-sustituido); }
.home-docs .badge--expirado, .docs .badge--expirado   { --badge-bg: var(--state-expirado-bg);   --badge-fg: var(--state-expirado-fg);   --badge-punto: var(--state-expirado); }
.home-docs__tabla .col-actions { text-align: left; }

/* ---- Guia rapida y bloque configurable ---- */
.home-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.home-two-col--solo { grid-template-columns: minmax(0, 1fr); }
.home-two-col > .card { margin-bottom: 0; padding: 21px 23px; min-width: 0; }
.home-guide__cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--color-primary-500); }
.home-guide__cabecera .card-title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--color-text); }
.home-guide .home-guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.home-guide .home-guide-list li { display: flex; align-items: center; gap: 11px; margin-bottom: 0; }
.home-guide__n {
    display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 7px;
    background: var(--color-primary-050); color: var(--color-primary-600); font-size: 13px; font-weight: 600;
}
.home-guide__cuerpo { flex: 1; min-width: 0; }
.home-guide__cuerpo strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; }
.home-guide__cuerpo small { display: block; margin-top: 1px; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }
.home-guide__ir { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-md); color: var(--color-text-muted); }
.home-guide__ir:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
/* El texto y el boton de este bloque los escribe Administracion (ubicacion `panel_bloque`). */
.home-bloque {
    display: flex; flex-direction: column; align-items: flex-start; gap: 19px;
    background: linear-gradient(130deg, var(--color-primary-050), var(--color-surface)); border-color: var(--color-primary-100);
}
.home-bloque .card-title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; }
.home-bloque__texto { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-text-muted); overflow-wrap: anywhere; }
.home-bloque .btn { margin-top: auto; }
/* issue #353: video del aviso. Ocupa el ancho del bloque y conserva 16:9 a cualquier tamano; el marco llena su caja. */
.home-bloque__video { align-self: stretch; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--color-primary-900, #0b2a4a); }
.home-bloque__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Panel: cortes de la maqueta ---- */
@media (min-width: 1530px) {
    .home-docs .home-docs__tabla td { font-size: 15px; padding-top: 15px; padding-bottom: 15px; }
    .home-docs__id .row-id-link, .home-docs__fecha, .home-docs__lugar .cell-clip { font-size: 14px; }
    a.home-quick-card { padding: 15px 18px 17px; }
}
@media (max-width: 1230.98px) {
    .home-overview { grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); gap: 15px; }
    .home-overview--solo { grid-template-columns: minmax(0, 1fr); }
    .home-consumo { padding: 22px 22px 0; }
    .home-borradores { padding: 21px; }
    .home-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .home-quick-grid--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    a.home-quick-card { padding: 12px; }
    .home-quick-card__rotulo { font-size: 14px; }
    .home-quick-card__nota { font-size: 12px; }
    .home-docs .table-wrap { padding-left: 15px; padding-right: 15px; }
    .home-docs__marca { display: none; }
    .home-docs__id .row-id-link { max-width: 100%; }
    .home-docs .home-docs__tabla th, .home-docs .home-docs__tabla td { padding-left: 7px; padding-right: 7px; }
    /* Con la tabla mas estrecha, «DESTINATION» y «DESTINACIO» no cabian en su columna (medido conduciendo los
       cinco idiomas a 900 y 1100 px): la cabecera baja un punto y las columnas fijas se ajustan. */
    .home-docs .home-docs__tabla th { font-size: 11px; letter-spacing: .4px; }
    .home-docs__col-id { width: 23%; }
    .home-docs__col-fecha { width: 96px; }
    .home-docs__col-estado { width: 112px; }
    .home-docs__col-acciones { width: 158px; }
    .home-docs__tabla .col-actions--iconos .icon-btn { margin-right: 4px; }
    .home-two-col > .card { padding: 20px; }
}
@media (max-width: 1000.98px) {
    .home-heading .page-subtitle { max-width: 360px; }
    .home-overview { grid-template-columns: minmax(0, 1.8fr) minmax(215px, 1fr); }
    .home-overview--solo { grid-template-columns: minmax(0, 1fr); }
    .home-consumo__libre { align-items: flex-start; }
    .home-consumo .home-quota-facts { grid-template-columns: 1fr; gap: 3px; }
    .home-consumo .home-quota-facts dd { margin-bottom: 8px; }
    .home-setup__cabecera { flex-wrap: wrap; gap: 13px; }
    .home-setup__progreso { margin-left: 66px; flex: 1 1 100%; max-width: none; min-width: 0; }
    .home-setup__pie { flex-wrap: wrap; gap: 15px; }
    .home-two-col { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}
/* Movil. La maqueta prioriza la lectura: 16 px en contenido y acciones, 14 px en etiquetas
   auxiliares, y ningun control por debajo de 44 px. */
@media (max-width: 760.98px) {
    .page-header.home-heading { flex-direction: column; align-items: stretch; gap: 17px; margin-bottom: 18px; }
    .home-heading .page-subtitle { max-width: none; font-size: 16px; line-height: 1.6; }
    .home-heading .page-header__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .home-heading .page-header__actions .btn { width: 100%; min-height: 48px; font-size: 16px; }
    .home-link { min-height: 44px; }

    .home-avisos .form-alert { padding: 17px 17px 17px 49px; margin-bottom: 17px; font-size: 16px; line-height: 1.7; }
    .home-avisos .form-alert::before { left: 17px; }

    .home-overview { grid-template-columns: minmax(0, 1fr); gap: 13px; margin-bottom: 23px; }
    .home-consumo { padding: 21px 20px 0; }
    .home-consumo__top { gap: 13px; }
    .home-consumo__titulo { gap: 9px; }
    .home-consumo__icono { width: 31px; height: 31px; }
    .home-consumo__plan { font-size: 14px; padding: 6px 9px; }
    .home-consumo__cifras { gap: 18px; align-items: flex-start; margin-top: 18px; }
    .home-consumo__cifras > div { flex: 1; }
    .home-consumo__principal strong { font-size: 45px; }
    .home-consumo__principal span { font-size: 18px; }
    .home-consumo__libres strong { font-size: 34px; line-height: 1.4; }
    .home-consumo__rotulo { font-size: 15px; line-height: 1.45; }
    .home-consumo__divisor { margin: 0; align-self: stretch; height: auto; }
    .home-consumo__barra { margin-top: 18px; }
    .home-consumo__pct { font-size: 14px; }
    .home-consumo__libre { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 23px; }
    .home-consumo__total { border: 0; padding: 0; min-width: 0; }
    .home-consumo .home-quota-facts { font-size: 16px; }
    .home-consumo__pie { flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 15px; }
    .home-consumo__renovacion { font-size: 14px; gap: 6px; }
    .home-consumo__pie .home-link { margin-left: 0; font-size: 15px; }

    .home-borradores { padding: 20px; }
    .home-borradores__top { margin-bottom: 10px; }
    .home-borradores__cifra { margin: 0 0 8px; gap: 11px; }
    .home-borradores__cifra span { font-size: 16px; line-height: 1.5; }
    .home-borradores__texto { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
    .home-borradores .btn { min-height: 46px; padding: 12px; font-size: 16px; }

    .home-section-head__nota { display: none; }
    .home-quick-grid, .home-quick-grid--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
    a.home-quick-card { padding: 16px 14px; min-height: 142px; }
    /* «Crear DeCA» ocupa la fila entera, en horizontal; las otras cuatro, en dos columnas. */
    a.home-quick-card--destacada { grid-column: 1 / -1; min-height: 90px; flex-direction: row; align-items: center; gap: 14px; }
    a.home-quick-card--destacada .home-quick-card__texto { flex: 1; width: auto; }
    a.home-quick-card--destacada::after { position: static; flex: none; }
    .home-quick-card__rotulo { font-size: 16px; }
    .home-quick-card__nota { font-size: 14px; line-height: 1.5; margin-top: 5px; }

    .home-setup__cabecera { padding: 21px 19px; align-items: flex-start; gap: 11px; }
    .home-setup__icono { width: 40px; height: 40px; border-radius: 12px; }
    .home-setup__icono svg { width: 23px; height: 23px; }
    .home-setup__titulo { font-size: 20px; }
    .home-setup__intro p { margin-top: 7px; }
    .home-setup__progreso { margin: 6px 0 0; }
    .home-setup-list { padding: 5px 19px; }
    .home-setup-item { gap: 9px; padding: 15px 0; flex-wrap: wrap; }
    .home-setup-item__icono { width: 34px; height: 34px; border-radius: 9px; }
    .home-setup-item__rotulo { flex-basis: calc(100% - 43px); }
    .home-setup-state { margin-left: 43px; padding: 4px 9px; }
    .home-setup__pie { padding: 16px 19px 22px; flex-direction: column; align-items: stretch; gap: 17px; }
    .home-setup__pie .btn { width: 100%; min-height: 48px; font-size: 16px; }

    .home-docs__cabecera { flex-direction: column; align-items: flex-start; padding: 20px 18px 12px; gap: 5px; }
    .home-docs__cabecera p { display: none; }
    .home-docs__cabecera .home-link { font-size: 16px; }
    .home-docs__vacio { padding: 0 18px 20px; font-size: 16px; }
    .home-docs .table-wrap { padding: 0 17px 4px; overflow-x: visible; }
    /* Cada documento pasa de fila a ficha: identificador; fecha y estado; origen; destino; acciones.
       Los papeles ARIA estan escritos en el marcado, asi que sigue siendo una tabla para el lector. */
    .home-docs__tabla, .home-docs__tabla tbody { display: block; min-width: 0; width: 100%; }
    .home-docs__tabla thead { display: none; }
    .home-docs__tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 18px 0; border-top: var(--bw-1) solid var(--color-border); }
    /* `.home-docs .` a proposito: mas abajo hay un `.data-table td { padding }` de movil, posterior y con la
       misma especificidad que una clase y un elemento. */
    .home-docs .home-docs__tabla td { display: block; border: 0; padding: 0; min-width: 0; }
    .home-docs__tabla tbody tr:hover { background: transparent; }
    .home-docs__id { grid-column: 1 / -1; }
    .home-docs__id .row-id-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; font-size: 15px; line-height: 1.5; letter-spacing: 0; }
    .home-docs__fecha { grid-column: 1; grid-row: 2; align-self: center; font-size: 14px; }
    .home-docs__estado { grid-column: 2; grid-row: 2; text-align: right; }
    .home-docs .badge { font-size: 13px; padding: 4px 8px; }
    .home-docs__origen { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
    .home-docs__destino { grid-column: 1 / -1; grid-row: 4; }
    .home-docs .home-docs__tabla td.home-docs__lugar { display: flex; align-items: flex-start; gap: 10px; }
    /* Origen y destino llevan su etiqueta a la vista; las demas celdas se entienden solas y la
       llevan solo para el lector de pantalla. */
    .home-docs__etq {
        display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .home-docs__lugar .home-docs__etq {
        position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
        flex: none; min-width: 52px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted);
    }
    .home-docs__lugar .cell-clip { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; white-space: normal; overflow: visible; overflow-wrap: anywhere; color: var(--color-text); }
    .home-docs .home-docs__tabla td.col-actions { grid-column: 1 / -1; grid-row: 5; display: flex; justify-content: flex-end; gap: 9px; margin-top: 3px; position: relative; }
    /* Area tactil de 44 x 44 (2.5.8) con el dibujo en sus 20 px, como en el resto de tablas. */
    .home-docs__tabla .col-actions--iconos .icon-btn { width: 44px; height: 44px; margin-right: 0; }
    .home-docs__tabla .col-actions--iconos .icon-btn svg { width: 20px; height: 20px; }

    .home-two-col { gap: 13px; }
    .home-two-col > .card { padding: 21px; }
    .home-guide__cabecera { margin-bottom: 18px; }
    .home-guide__cabecera .card-title { font-size: 18px; }
    .home-guide .home-guide-list { gap: 20px; }
    .home-guide .home-guide-list li { align-items: flex-start; gap: 10px; }
    .home-guide__n { font-size: 14px; }
    .home-guide__cuerpo strong { font-size: 16px; }
    .home-guide__cuerpo small { font-size: 14px; line-height: 1.6; }
    .home-guide__ir { width: 44px; height: 44px; }
    .home-bloque__texto { font-size: 16px; line-height: 1.7; }
    .home-bloque .btn { min-height: 46px; font-size: 16px; }
}
@media (max-width: 360px) {
    .home-consumo { padding-left: 17px; padding-right: 17px; }
    .home-consumo__titulo { font-size: 17px; }
    .home-consumo__cifras { gap: 15px; }
    /* Una sola columna, cada acceso en horizontal. Ninguno se oculta y ningun rotulo se recorta. */
    .home-quick-grid, .home-quick-grid--cuatro { grid-template-columns: minmax(0, 1fr); }
    a.home-quick-card { min-height: 93px; flex-direction: row; align-items: center; gap: 12px; }
    a.home-quick-card .home-quick-card__texto { flex: 1; width: auto; }
    a.home-quick-card::after { display: none; }
    .home-avisos .form-alert { padding: 15px 15px 15px 47px; }
    .home-avisos .form-alert::before { left: 15px; top: 18px; }
}

/* ---- Tabla operativa del panel (issue #11) --------------------------------- */
.cell-clip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.row-id-link { color: inherit; text-decoration: none; }
.row-id-link:hover { text-decoration: underline; }

/* Las pestanas de Suscripcion y pagos (issue #11) se visten en su seccion del rediseno #339, al final. */

/* ---- Seccion Cuenta (issue #4): formulario del logo. El resto, en la seccion «Cuenta» del rediseno ---- */
.cuenta-logo-form { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* issue #187: un `input[type=file]` tiene ancho INTRINSECO (el del texto "Ningun archivo
   seleccionado" del navegador, ~365px) y no lo cede aunque su contenedor sea mas estrecho:
   desbordaba la pantalla de Cuenta por debajo de 390px. Medido a 320px: 394px de documento. */
.cuenta-logo-form input[type="file"] { max-width: 100%; }

/* ---- Crear desde plantilla (issue #3) ------------------------------------- */
.deca-from-template select { max-width: 320px; }

/* ============================================================================
   issue #22 Fase C — UX de campos/bloques del asistente de creacion
   ============================================================================ */

/* #2 Cabecera dinamica: icono de camion/autobus + badge persistente del modulo */
/* ---- Cabecera de creacion (issue #274 T4, D-274-5) ----------------------------
   Medidas aprobadas: base de 52 con radio 14 y dibujo de 28, a 16 px del texto; titulo de 24 px
   de peso medio y subtitulo de 14 a 7 px. Hasta 480: base 44, radio 12, dibujo 25, titulo 21 y
   separacion 12, dejando que el contenido ocupe varias lineas. */
.deca-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.deca-type-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; background: #E2EFFF;
}
.deca-header--viajeros .deca-type-icon { background: #D9F4EE; }
.deca-header__text { min-width: 0; }
.deca-header .page-title { font-size: 24px; font-weight: 500; }
/* La UNICA palabra coloreada es el tipo; la preposicion se queda con el color del titulo, que es
   lo que el apartado 4 subraya. */
.deca-header__tipo { color: #086AC6; }
.deca-header--viajeros .deca-header__tipo { color: #087E70; }
.deca-header .page-subtitle { margin-top: 7px; font-size: 14px; color: #536F8E; }

/* Ayuda contextual con la referencia normativa. Sin JavaScript: `<details>` se abre y se cierra
   con teclado (Intro/Espacio sobre el resumen) y con el dedo. */
.deca-norma { margin-top: var(--sp-2); }
.deca-norma > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13px; color: var(--color-primary-600);
    padding: 2px 8px; border-radius: var(--r-pill); background: #EDF5FF;
}
.deca-norma > summary:focus-visible { box-shadow: var(--sh-focus); outline: 2px solid transparent; }
.deca-norma__texto { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--color-text-muted); max-width: 72ch; line-height: 1.55; }
/* #274 r4 (S-115): la orden enlazada al BOE, subrayada para que se lea como enlace también sin color. */
.deca-norma__texto a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    /* #274 r4 (S-116, Jorge 21/09): en móvil el `flex-wrap` mandaba el bloque de texto a una fila propia
       DEBAJO del icono. Ahora es una rejilla: icono y título en la misma fila, el icono centrado con el
       título aunque este ocupe dos líneas, y la ayuda normativa y el subtítulo debajo, a todo el ancho
       para que el texto largo tenga sitio. `display: contents` deja que los hijos del bloque de texto
       entren en la rejilla sin tocar el marcado. */
    .deca-header { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; }
    .deca-header__text { display: contents; }
    .deca-type-icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 12px; }
    .deca-type-icon svg { width: 25px; height: 25px; }
    .deca-header .page-title { grid-column: 2; grid-row: 1; font-size: 21px; overflow-wrap: anywhere; }
    .deca-header__text > :not(.page-title) { grid-column: 1 / -1; }
}
.deca-badge { display: inline-block; vertical-align: middle; margin-left: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--color-primary-600); color: #fff; }
.deca-badge--viajeros { background: var(--color-accent-700); }

/* #1 Selector de tipo visual (tarjetas grandes con check de seleccion) */
.deca-typecards { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
.deca-typecards__legend { font-size: var(--fs-label); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--sp-3); padding: 0; }
.deca-typecards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* #339: medidas, filete y estados (elegida, raton) viven en la seccion «Crear DeCA» (`.deca-wizard …`, al final). */
.deca-typecard { position: relative; display: flex; background: var(--color-surface); text-decoration: none; color: var(--color-text); transition: border-color .12s, background .12s, box-shadow .12s; }
.deca-typecard__icon { flex: none; display: inline-flex; color: var(--color-text-muted); }
.deca-typecard__title { display: block; }
.deca-typecard__desc { display: block; }
.deca-typecard__check { position: absolute; }
/* issue #26 §13: marca «Principal» en la tarjeta del modulo principal cuando hay dos activos. */
.deca-typecard__flag { display: inline-block; margin-left: var(--sp-2); font-weight: 600; text-transform: uppercase; vertical-align: middle; }
/* issue #26 §14: acciones del dashboard (CTA principal + secundario del otro modulo). */
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* #15 Barra de plantilla integrada en el flujo */
.deca-template-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); font-size: var(--fs-label); }
.deca-template-bar__label { font-weight: var(--fw-label); color: var(--color-text); }
.deca-template-bar__tag { font-weight: 600; color: var(--color-text-muted); }
.deca-template-bar__msg { color: var(--color-accent-700); }
.deca-template-bar .deca-from-template select { max-width: 320px; }

/* #16 Tarjeta compacta de la propia empresa (datos reales, badge «Tu empresa») */
.party--own { border-color: #d7e6df; gap: var(--sp-2); }
.party__head--own { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.party__own-icon { display: inline-flex; color: var(--color-accent-700); }
.party__role { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-accent-700); }
.party__badge { margin-left: auto; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--color-accent-100, #e3f1ed); color: var(--color-accent-700); }
.party__company { margin: 0; font-weight: 600; }
.party__nif { margin: 0; color: var(--color-text-muted); font-size: var(--fs-label); }
.party__auto-ok { margin: var(--sp-1) 0 0; display: flex; align-items: center; gap: var(--sp-1); color: var(--color-accent-700); font-size: var(--fs-label); }
.party__view { align-self: flex-start; font-size: var(--fs-label); color: var(--color-primary-600); text-decoration: none; font-weight: 500; }
.party__view:hover { text-decoration: underline; }
.party__dom { margin: 0; color: var(--color-text-muted); font-size: var(--fs-label); }

/* issue #26 §5 «Tu papel en este transporte»: radio que decide que slot ocupa la empresa */
.deca-roleself { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.deca-roleself__legend { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-text); padding: 0 var(--sp-1); }
.deca-roleself__opts { display: flex; gap: var(--sp-4); }
.deca-roleself__link { margin-left: auto; font-size: var(--fs-label); color: var(--color-primary-600); text-decoration: none; font-weight: 500; }
.deca-roleself__link:hover { text-decoration: underline; }

/* issue #26 §4/§6: cada slot lleva dos vistas (empresa propia / entrada); solo cambia el badge */
.party--roleslot .party__own-view { display: flex; flex-direction: column; gap: var(--sp-2); }
.party--roleslot .party__input-view { display: flex; flex-direction: column; gap: var(--sp-3); }
/* la guarda global [hidden]{display:none !important} (issue #36) cubre estos slots */
.party--t.party--roleslot .party__own-view .party__own-icon,
.party--t.party--roleslot .party__own-view .party__role { color: var(--color-accent-700); }
.party--c.party--roleslot .party__own-view .party__own-icon,
.party--c.party--roleslot .party__own-view .party__role { color: var(--color-primary-600); }

/* #14 Acciones por linea (duplicar + eliminar) */
.line-row__actions { display: flex; align-items: center; gap: var(--sp-1); }

/* #5 Buscador de direccion guardada (rellena los campos estructurados) */
/* issue #36 §1.6: mismo estilo que el resto de inputs (altura, borde, radio, fondo) + icono de busqueda. */
.combo-addr { position: relative; margin-bottom: var(--sp-3); }
.combo-addr__icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; display: inline-flex; }
.combo-addr__input {
    width: 100%; box-sizing: border-box; font: inherit; color: var(--color-text);
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 2.25rem;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--color-surface);
}
.combo-addr__input::placeholder { color: var(--color-text-muted); }
.combo-addr__list { list-style: none; margin: 2px 0 0; padding: var(--sp-1); position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-md); max-height: 200px; overflow-y: auto; }

/* #4 Casilla «guardar esta direccion en Maestros» */
.addr-group__save { margin-top: var(--sp-1); }

/* #12 Autorizacion especial: No aplica / Si */
.autoriz-field__opts { display: flex; gap: var(--sp-4); margin: var(--sp-1) 0; }
.radio-inline { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-label); cursor: pointer; }
.autoriz-field__body { margin-top: var(--sp-1); }

/* #17 Validacion clicable: contador de pendientes + items-boton que saltan al campo */
.deca-rail__count { margin: 0 0 var(--sp-2); font-weight: 600; font-size: var(--fs-label); color: var(--color-danger, #b3261e); }
.checklist__link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.checklist__link:hover { text-decoration-style: solid; }

@media (max-width: 640px) {
    /* issue #187 (Jorge, 07/08/2026, punto 2): apiladas, las dos tarjetas de tipo quedaban con
       distinta ALTURA (102px vs 78px medidos) porque una lleva la insignia "Principal" y la otra
       no. Mismo ancho pero distinto alto se percibe como "una es mas grande que la otra". En una
       sola columna cada tarjeta ocupa su propia fila, asi que igualarlas exige filas iguales
       (`grid-auto-rows`), no `align-items`. */
    .deca-typecards__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* ---- Usabilidad de maestros (issue #3) ------------------------------------ */
/* issue #187 punto 3 (segunda ronda, captura real de Jorge — Samsung S22+/iPhone/Galaxy Fold):
   «Importar Excel» salia mas ANCHO que «Exportar CSV» en la misma fila: `.maestros__import-form`
   competia como su PROPIA caja de la rejilla, con una base de tamano distinta a la de un
   `<a class="btn">` suelto. `display:contents` saca el formulario de la caja: su `<label class="btn">`
   pasa a ser una celda MAS del grupo, con la misma regla que sus hermanos. */
.maestros__import-form { display: contents; }
.maestros__import-label { cursor: pointer; }
.maestros__import-errors { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.badge--incompleto { background: var(--color-warning-bg, #fdf1d9); color: var(--color-warning, #8f5c00); border: var(--bw-1) solid currentColor; margin-left: var(--sp-2); }
/* El dorado del favorito era del pictograma de contorno, que tomaba el color por
   `currentColor`. El dibujo nuevo del #274 trae sus propias tintas, asi que este color no
   pintaba ya nada: el estado lo marca el boton (ver `.col-actions .icon-btn.is-fav`). */
.maestros__more { margin: var(--sp-2) 0; }
.maestros__more > summary { cursor: pointer; font-size: var(--fs-label); color: var(--color-text-muted); margin-bottom: var(--sp-2); }

/* ---- 2FA del tenant (issue #4) --------------------------------------------- */
.cuenta-qr { width: 180px; margin: var(--sp-3) 0; }
.cuenta-qr svg { width: 100%; height: auto; }

/* ============================================================================
   Endurecimiento responsive (feedback del cliente, 02/07/2026): controles a
   16px en movil (iOS Safari hace zoom al enfocar fuentes menores y la pantalla
   queda "descuadrada"), topbar compacta, tarjetas y bloques a una columna.
   ============================================================================ */
@media (max-width: 768px) {
    /* Sin zoom automatico de iOS al enfocar campos. */
    input, select, textarea,
    .combo__trigger, .combo__search, .combo-inline__input { font-size: 16px; }

    /* El relleno de `.app-main` en movil lo fija la estructura (bloque de 760 px, arriba). */
    .card { padding: var(--sp-4); }
    .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); }

    /* Detalle: QR centrado arriba (spec detalle-deca, breakpoint <=768). */
    .deca-qr { flex-direction: column; text-align: center; }
    .deca-qr__body { width: 100%; }
    .detail-facts { gap: var(--sp-3) var(--sp-5); }
}

@media (max-width: 480px) {
    /* La cabecera y el relleno de `.app-main` a este ancho los fija la estructura del rediseno
       #339 (bloques de 760 y 360 px, al principio de la hoja). */

    /* Acciones del detalle apiladas y a ancho completo. El `display:contents` de
       `.deca-detail-actions .inline-form` (issue #187 punto 2) vive ahora SIN media query, junto
       a la regla base de `.deca-detail-actions` — ver el comentario de ahi arriba. */
    .deca-detail-actions { width: 100%; }
    .deca-detail-actions .btn { flex: 1 1 auto; }

    .deca-qr__url { flex-direction: column; }
    .deca-from-template select { max-width: none; width: 100%; }
    .home-quota-facts { gap: var(--sp-3) var(--sp-4); }

    /* Panel en movil (issue #11): cabecera sin desbordes. */
    /* issue #187 punto 1 (dos columnas en movil) sigue vigente, pero ya NO se decide aqui: el
       issue #274 T2 pide que el corte dependa del espacio REAL de la cuadricula —incluido el que
       deja la barra lateral—, asi que vive en el bloque `@container` de los accesos rapidos.
       El relleno exterior de 16 px que pide el apartado 2 ya lo pone `.app-main` aqui arriba. */
    .page-header--actions { flex-wrap: wrap; gap: var(--sp-3); }
    .cell-clip { max-width: 140px; }
}

/* ============================================================================
   REDISEÑO VISUAL — Fase 1 (issue #20)
   Sistema común: banners, foco de formularios, elevación de tarjetas clicables
   y micro-ajustes de acento. Se apoya en los tokens de la paleta nueva.
   ============================================================================ */

/* ---- Banner / aviso común (info · success · warning · error) ---- */
.banner {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: var(--bw-1) solid; border-radius: var(--r-xl);
    background: var(--color-surface);
    font-size: var(--fs-label); line-height: var(--lh-body);
    margin-bottom: var(--sp-4);
}
.banner__icon { flex: none; margin-top: 1px; display: inline-flex; }
.banner__body { flex: 1; min-width: 0; }
.banner__title { margin: 0 0 2px; font-weight: 600; color: var(--color-text); }
.banner__text { margin: 0; color: var(--color-text-muted); }
.banner__action { flex: none; align-self: center; text-decoration: none; }

/* issue #26 §1: tarjetas de perfil operativo en el registro (radio-cards seleccionables) */
.perfil-cards { border: 0; padding: 0; margin: 0 0 var(--sp-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.perfil-cards__legend { padding: 0; margin-bottom: var(--sp-2); font-weight: 600; color: var(--color-text); }
.perfil-cards.is-error { outline: var(--bw-1) solid var(--color-danger); outline-offset: var(--sp-2); border-radius: var(--r-md); }
.perfil-card { position: relative; display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); cursor: pointer; background: var(--color-surface); }
.perfil-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.perfil-card__icon { flex: none; display: inline-flex; color: var(--color-primary-600); }
.perfil-card__body { flex: 1; min-width: 0; }
.perfil-card__title { display: block; font-weight: 600; color: var(--color-text); }
.perfil-card__desc { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--color-text-muted); }
.perfil-card__check { flex: none; display: inline-flex; color: var(--color-primary-600); opacity: 0; }
.perfil-card:hover { border-color: var(--color-primary-300, #a9c4dd); }
.perfil-card__input:checked ~ .perfil-card__check { opacity: 1; }
.perfil-card:has(.perfil-card__input:checked) { border-color: var(--color-primary-600); background: var(--color-info-bg); box-shadow: var(--sh-focus, 0 0 0 3px rgba(20,58,82,.12)); }
.perfil-card__input:focus-visible ~ .perfil-card__check { opacity: 1; }
.perfil-card:focus-within { border-color: var(--color-primary-600); }
@media (max-width: 560px) { .perfil-cards { grid-template-columns: 1fr; } }




.banner--info    { background: var(--color-info-bg);    border-color: var(--color-primary-100); }
.banner--info    .banner__icon { color: var(--color-info); }
.banner--warning { background: var(--color-warning-bg); border-color: #f0dcae; }
.banner--warning .banner__icon { color: var(--color-warning); }

/* ---- Foco de formularios (issue #20): borde azul + halo suave, sin outline duro ----
   El contorno no se quita, se deja TRANSPARENTE: con colores forzados (`forced-colors: active`) el halo
   desaparece y el borde pasa al color del sistema, asi que sin contorno el foco no se veria; uno
   transparente lo pinta el sistema con su color. La misma regla vale para cada foco de esta hoja que se
   dibuja con sombra o con fondo. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.deca-form input:focus, .deca-form select:focus, .deca-form textarea:focus,
.input:focus, .combo__trigger:focus, .field-search input:focus {
    outline: 2px solid transparent; border-color: var(--color-primary-500); box-shadow: var(--sh-focus);
}

/* ---- Micro-ajustes de acento sobre la paleta nueva ---- */
.tag--t { background: var(--color-accent-700); }  /* AA con la etiqueta blanca */
.quota-bar__fill { background: var(--color-accent-600); }

/* ============================================================================
   Paginas legales (issue #25): ancho de lectura limitado, jerarquia clara,
   responsive sin scroll horizontal en movil. Identidad de Plataforma DeCA.
   ============================================================================ */
.legal-body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
}
.legal-top {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: var(--color-surface); border-bottom: var(--bw-1) solid var(--color-border);
}
.legal-top__brand { display: inline-flex; align-items: center; }
.legal-top__brand img { display: block; height: 28px; width: auto; }
.legal-top__lang select {
    font: inherit; font-size: var(--fs-label); color: var(--color-text);
    padding: var(--sp-1) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong);
    border-radius: var(--r-md); background: var(--color-surface);
}

.legal-wrap {
    width: 100%; max-width: 760px; margin: 0 auto; flex: 1 0 auto;
    padding: var(--sp-8) var(--sp-6) var(--sp-9);
    box-sizing: border-box;
}
.legal { color: var(--color-text); }
.legal__head { padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: var(--bw-1) solid var(--color-border); }
.legal__title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); color: var(--color-primary-700); margin: 0 0 var(--sp-2); }
.legal__subtitle { font-size: var(--fs-body-lg); color: var(--color-text-muted); margin: 0 0 var(--sp-3); }
.legal__meta { font-size: var(--fs-caption); color: var(--color-text-subtle); margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.legal__meta-sep { color: var(--color-border-strong); }

.legal__section { margin: 0 0 var(--sp-7); }
.legal__section h2 {
    font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1);
    color: var(--color-primary-700); margin: 0 0 var(--sp-3); scroll-margin-top: var(--sp-6);
}
.legal__section h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); color: var(--color-text); margin: var(--sp-4) 0 var(--sp-2); }
.legal__section p { margin: 0 0 var(--sp-3); }
.legal__section ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.legal__section li { margin: 0 0 var(--sp-2); }
.legal__section a { color: var(--color-primary-600); text-decoration: underline; word-break: break-word; }
.legal__section a:hover { color: var(--color-primary-700); }

.legal-callout {
    background: var(--color-primary-050); border: var(--bw-1) solid var(--color-primary-100);
    border-left: 3px solid var(--color-primary-500); border-radius: var(--r-lg);
    padding: var(--sp-4); margin: 0 0 var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-body);
}

.legal-table-scroll { overflow-x: auto; margin: 0 0 var(--sp-3); }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-body); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border); }
.legal-table th[scope="row"] { width: 34%; background: var(--color-surface-2); color: var(--color-text); font-weight: var(--fw-medium); }
.legal-table thead th { background: var(--color-surface-2); color: var(--color-primary-700); font-weight: var(--fw-semibold); }
.legal-table--cols td { width: auto; }

.legal-foot {
    margin-top: var(--sp-8); padding-top: var(--sp-5);
    border-top: var(--bw-1) solid var(--color-border); text-align: center;
}
.legal-foot__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-3); }
.legal-foot__links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-label); }
.legal-foot__links a:hover { color: var(--color-primary-600); text-decoration: underline; }
.legal-foot__sep { color: var(--color-border-strong); }
.legal-foot__copy { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--color-text-subtle); }

@media (max-width: 768px) {
    .legal-top { padding: var(--sp-3) var(--sp-4); }
    .legal-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
    .legal__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
    .legal__section h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
    .legal-table th[scope="row"] { width: 40%; }
}


/* --- Bloqueo preventivo sin plan activo (issue #39, feedback 16/07) --- */
.deca-blocked { max-width: 560px; }
.deca-blocked__msg { margin: 0 0 var(--sp-2); font-size: var(--fs-body-lg); font-weight: 600; }
.deca-blocked__hint { margin: 0 0 var(--sp-4); color: var(--color-text-muted); }
.deca-blocked__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.maestros__blocked-msg { margin: 0 0 var(--sp-2); font-weight: 600; }
.maestros__form--blocked .btn { margin-top: var(--sp-2); }

/* La tarjeta de suscripcion del cliente (issue #48 F9, `.sub-facts`) se viste en la seccion «Suscripcion y pagos»
   del rediseno #339, al final. Sigue siendo un `<dl>`: son pares campo-valor de UN registro, no filas comparables. */

/* ==========================================================================
   PATRONES RESPONSIVE (issue #187) — AL FINAL DEL FICHERO A PROPOSITO

   Estos tres patrones existen para PISAR el layout de escritorio de los
   componentes en movil. Una media query NO anade especificidad: `.deca-filters`
   y `.filters--stack` valen exactamente lo mismo, asi que gana quien se declara
   DESPUES. Escritos donde estaban (linea ~450, ANTES de los componentes),
   `.deca-toolbar { align-items: center }` y `.deca-filters { align-items: center }`
   los sobrescribian: al apilarse en columna ese `center` pasa a centrar en
   HORIZONTAL, y dejaba la barra de filtros de Documentos en 203px centrados
   dentro de 390px — exactamente el defecto que Jorge reporto (comentario del
   07/08/2026 en el #187, punto 3). `.filters--stack` y `.deca-toolbar` se retiraron
   en S-231, al quedar sin uso tras el rediseno; la leccion del orden sigue valiendo.

   Regla para patrones responsive nuevos: van AQUI, al final. No se arregla con
   `!important` ni inflando selectores; se arregla con el orden.
   ========================================================================== */

/* ---- Tabla -> tarjeta en movil (opt-in via `.data-table--cards`) ----
   Tecnica CSS pura sobre el MISMO <table>: no hay markup duplicado que pueda
   divergir del original (regla del proyecto contra casi-duplicados), ni doble
   verificacion i18n. Cada <td> necesita su `data-label="..."` (la misma cadena
   que ya lleva el <th> de su columna) para que `content: attr(data-label)`
   pinte la etiqueta — por eso es opt-in por tabla y no automatico para TODAS
   las `.data-table`: aplicarlo sin los atributos dejaria tarjetas con
   etiquetas vacias, peor que el scroll horizontal que sustituye. */
@media (max-width: 768px) {
    .data-table--cards, .data-table--cards tbody, .data-table--cards tr { display: block; }
    .data-table--cards thead { display: none; }
    .data-table--cards tr {
        margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-4);
        border: var(--bw-1) solid var(--color-border); border-radius: var(--r-lg);
        background: var(--color-surface);
    }
    .data-table--cards tr:last-child { margin-bottom: 0; }
    .data-table--cards td {
        display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
        padding: var(--sp-2) 0; border-bottom: var(--bw-1) solid var(--color-border);
        text-align: right; white-space: normal;
        /* Una celda con varias piezas (estado + badge "Datos incompletos", importe + aviso) no
           cabe en linea a 320px: envuelve en vez de rebasar el ancho de la tarjeta. */
        flex-wrap: wrap;
    }
    .data-table--cards td:last-child { border-bottom: none; }
    .data-table--cards td::before {
        content: attr(data-label); flex: none; font-weight: var(--fw-label);
        color: var(--color-text-muted); text-align: left; padding-right: var(--sp-3);
    }
    /* Celda sin dato util en movil (icono/columna redundante): se retira entera con
       `data-label=""` en vez de dejar una etiqueta vacia. */
    .data-table--cards td[data-label=""] { display: none; }
    /* Los iconos de accion se alinean a la izquierda junto a su etiqueta "Acciones:" (mockup
       del propio issue), no a la derecha como en la columna de una tabla de escritorio. */
    .data-table--cards .col-actions { text-align: left; }
    /* issue #274 T3: en tactil el area de interaccion de cada accion sube a 44 x 44 px (WCAG 2.2
       AA, 2.5.8) sin que el dibujo crezca — se queda en sus 20 px. El `gap` de 6 px se mantiene
       para que dos objetivos contiguos no se toquen. */
    .data-table--cards .col-actions--iconos .icon-btn { width: 44px; height: 44px; }
    /* issue #274 r3 (21/09, captura de Jorge): las cinco acciones no compartian centro vertical.
       La celda hereda `align-items: baseline` de `.data-table--cards td` — que esta pensado para
       una celda etiqueta+valor, donde alinear por la linea base del TEXTO es justo lo que se
       quiere—, pero aqui dos acciones son enlaces sueltos y las otras tres van envueltas en su
       formulario. Dos cajas de naturaleza distinta no comparten linea base, y el resultado eran
       6 px de desnivel que se veian contra el fondo de los botones. Se alinea por el CENTRO, que
       es lo que corresponde a una fila de objetivos tactiles iguales. Afecta tambien al Panel,
       que comparte esta clase desde S-084, y alli el defecto es el mismo. */
    .data-table--cards .col-actions--iconos { align-items: center; }
    /* Y el mismo defecto que el #187 ronda 2 diagnostico para `.cell-actions` y que a esta celda
       nunca se le aplico: `space-between` reparte los hijos por el ancho, asi que con cinco
       acciones el hueco entre dos botones contiguos llegaba a 226 px —medido— y la fila se leia
       como piezas sueltas en vez de como el grupo que es. Se agrupan a la izquierda, junto a su
       etiqueta «Acciones», con el espaciado en el `gap` para que dos objetivos tactiles no se
       toquen. El margen individual de cada boton se retira aqui: sumado al `gap` daria el doble
       de separacion, que es el segundo error que el #187 ya habia cometido una vez. */
    .data-table--cards .col-actions--iconos { justify-content: flex-start; gap: var(--sp-2); }
    .data-table--cards .col-actions--iconos .icon-btn { margin-right: 0; }
    /* Y el dibujo vuelve a 20 px: en tarjetas el envoltorio de la tabla es estrecho, asi que la
       consulta de contenedor de la disposicion compacta (18 px) tambien dispara aqui. Son dos
       situaciones distintas y el issue les da tamanos distintos — compacta 18, movil 20. */
    .data-table--cards .col-actions--iconos .icon-btn svg { width: 20px; height: 20px; }
    /* Fila de continuacion (`.line-sub` del detalle de DeCA: dato propio de una linea que la
       amplia, con `colspan`). Como tarjeta suelta se leeria como un registro mas, que es
       justo lo contrario de lo que significa: se pega a la tarjeta anterior sin separacion
       ni borde superior, para que se vea como parte de ella. */
    .data-table--cards tr.line-sub {
        margin-top: calc(var(--sp-3) * -1); border-top: none;
        border-top-left-radius: 0; border-top-right-radius: 0;
    }
    /* Su contenido SI se ve (amplia la linea de arriba), pero sin etiqueta propia: no es una
       columna, es una nota. Por eso `::before` fuera aqui y no `data-label=""`, que ocultaria
       la celda entera. */
    .data-table--cards tr.line-sub td { text-align: left; }
    .data-table--cards tr.line-sub td::before { display: none; }
}

/* ---- Grupo de dos botones equilibrados ----
   Generaliza el patron que ya usaba `.deca-detail-actions` en movil: mismo ancho,
   misma altura, en fila si caben, apilados si no. Caso explicito de Jorge: "Crear
   DeCA de mercancias"/"Crear DeCA de viajeros" en el Panel de control.

   Hallazgo del gate de revision del #187 (segunda ronda): antes de este ajuste, un
   `.inline-form` aqui dentro habria caido en la MISMA caja de flex anidada (`flex:1 1 200px` en
   el formulario + `width:100%` en el boton de dentro) que causo los puntos 2 y 3 del issue —
   hoy `.btn-group--split` solo envuelve `<a class="btn">` sueltos (`views/home.php`,
   `views/deca/index.php`), asi que la trampa estaba dormida, pero el propio comentario de arriba
   invita a reutilizar este patron en mas pantallas. Se aplica aqui el mismo `display:contents`
   por adelantado, para que la trampa no pueda activarse el dia que alguien envuelva un boton de
   este grupo en un formulario. */
/* issue #231 §1 (Jorge, 20/08/2026) — MEDIDO en Chrome sobre este mismo CSS y el marcado real
   (iframe a 1280/1440/1920px): con `flex: 1 1 200px` el contenedor se quedaba en 464.6px, asi que
   «Crear DeCA de mercancias» no cabia en una linea y salia a 66px de alto contra los 46px de
   «Crear DeCA de viajeros», con 10px de desfase vertical entre los dos (y=148 contra y=158) porque
   el grupo centra sus hijos. Ni la misma altura ni la misma linea: exactamente lo que reporta.

   El reparto pasa a rejilla de columnas iguales. `1fr` mide min-content, y con `nowrap` el
   min-content de cada boton es su texto entero: las dos columnas se igualan al mas ancho y ninguna
   parte el texto. Medido despues: 238.2px x 46px las dos, misma `y`, en las tres anchuras. */
.btn-group--split { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-3); }
.btn-group--split > .btn,
.btn-group--split .inline-form > .btn { white-space: nowrap; }
.btn-group--split > .inline-form { display: contents; }
@media (max-width: 480px) {
    /* Movil VUELVE al flex de siempre, y no es pereza: es lo MEDIDO. Con la rejilla en
       `grid-auto-flow: row` los botones salian a 238.2px en vez de ocupar el ancho, porque la
       columna hereda el ancho del contenedor y `.page-header__actions` se dimensiona a su
       contenido; el `flex-basis: 100%` del #187 si lo estiraba. Se restituye tal cual estaba,
       con el texto pudiendo partirse otra vez, que en vertical es lo correcto. */
    .btn-group--split { display: flex; flex-wrap: wrap; }
    .btn-group--split > .btn,
    .btn-group--split .inline-form > .btn { flex-basis: 100%; white-space: normal; }
}

/* issue #231 §2 — la barra de Documentos. Los dos botones de creacion median 200.3px x 66px (dos
   lineas otra vez) y empujaban «Filtrar» a una segunda fila: la barra entera media 90px de alto.
   Con el nowrap de arriba mas este padding mas ajustado bajan a 203.8px x 46px —la misma altura
   que «Filtrar»— y la barra vuelve a una sola fila de 46px.

   El icono se retira en la VISTA, no aqui, porque era una asimetria del marcado: con los dos
   modulos activos lo pintaba solo el boton de mercancias. Quitarlo iguala los dos y resta 24px. */
.deca-toolbar__new > .btn { padding-left: var(--sp-3); padding-right: var(--sp-3); }

/* ---- Tablas en fichas, en movil ---- */
@media (max-width: 768px) {
    /* Un identificador, email o URL larga no puede empujar el ancho de la tarjeta. */
    .data-table--cards td { overflow-wrap: anywhere; }
    /* Sin esto, un boton corto de la celda de acciones se reparte el ancho sobrante y acaba con
       una letra por linea. Conservan su tamano y envuelven. */
    .data-table--cards .col-actions > * { flex: none; max-width: 100%; }
    /* Una tabla ya convertida en tarjetas no necesita el scroll horizontal de su envoltorio: sin
       esto queda una barra de desplazamiento interna que no desplaza nada. Se apaga SOLO donde
       hay tarjetas (`:has`), para no tocar las tablas que aun lo necesitan. */
    .table-wrap:has(.data-table--cards) { overflow-x: visible; }
}

/* ---- Aire vertical antes de un boton en movil (issue #187, feedback de Jorge del 07/08/2026,
   punto 1) ----
   Jorge lo reporto en cinco pantallas distintas (Cuenta/Datos, Logo, Seguridad, Configuracion de
   emision, Panel de control) y pidio expresamente resolverlo "como patron global de espaciado en
   movil y no solo caso por caso". Medido: en Cuenta/Datos y en Seguridad el hueco entre el ultimo
   campo y su boton era de CERO pixeles.

   Por que solo en movil: en escritorio el boton queda a la derecha o en una fila propia y se lee
   como accion; apilado en columna, un boton pegado al campo de arriba parece parte de ese campo
   —y ademas se pulsa por error al ir a tocar el campo, que en una pantalla tactil no es un detalle
   estetico—.

   `* + .btn` (hermano ANTERIOR cualquiera) es deliberado: la regla es "un boton que viene DESPUES
   de algo necesita aire", no "este boton concreto de esta pantalla". Se acota a hijos directos de
   `form`/`.card` para no tocar los grupos de accion (`.btn-group--split`, celdas de acciones de
   las tarjetas, barras de herramientas), que ya reparten su propio `gap`.

   Todo va acotado a `main`: la primera version no lo estaba y empujo 20px hacia abajo el boton de
   buscar de la barra superior, el de cambiar idioma y el de cerrar sesion de la barra lateral, que
   son botones dentro de un `form` como cualquier otro. Un patron de espaciado de CONTENIDO no
   tiene nada que decir sobre la navegacion.

   CUARTA RONDA (09/08/2026) — el `:not(...)` de abajo es el arreglo de los puntos 2 y 3, y su causa
   raiz estaba AQUI, no en el flex ni en el grid de aquellos dos bloques. El parrafo de arriba dice
   que el patron "se acota a hijos directos de `form`/`.card` para no tocar los grupos de accion",
   pero esa exclusion nunca se escribio: `main form > * + .btn` alcanza a CUALQUIER boton dentro de
   CUALQUIER formulario de `main`, incluidos los formularios-envoltorio que existen solo para colgar
   el `method`/`action` de un boton que visualmente es un boton mas de su grupo. En esos, el hermano
   anterior del boton es el campo CSRF: `* + .btn` casa, y el boton se lleva 20px de margen superior
   que sus companeros de fila no tienen.
   Medido en Chrome sobre este mismo CSS (iframe a 390px): «Duplicar DeCA» a y=215 con Modificar y
   Anular a y=195 —20px exactos—, con el formulario en `display:contents` correcto y su caja medida
   a 0x0; el margen estaba en el BOTON (`margin: 20px 0px 0px`). Lo mismo en Maestros a 360px:
   «Importar Excel» a y=520 contra «Exportar CSV» —un `<a class="btn">` suelto, sin formulario que lo
   envuelva— a y=510.
   Por eso tres rondas de ajustes sobre el reparto HORIZONTAL no movieron nada: el reparto ya estaba
   bien y el desajuste era VERTICAL, heredado del punto 1 de este mismo issue.
   La exclusion se escribe por las dos clases que marcan esos envoltorios, que es lo que son
   estructuralmente: un formulario con una de esas clases nunca es contenido apilado, es el
   envoltorio de un boton de un grupo que ya reparte su propio `gap`. Un envoltorio nuevo debe
   llevar `.inline-form` para quedar cubierto — el caso 78 de la suite lo guarda. */
@media (max-width: 768px) {
    main form:not(.inline-form, .maestros__import-form) > * + .btn,
    main form:not(.inline-form, .maestros__import-form) > * + button[type="submit"],
    main .card > * + .btn,
    main .card > * + form,
    main .card > * + .inline-form { margin-top: var(--sp-5); }
    /* Dos botones consecutivos (el caso "Subir logo" / "Quitar logo"): sin esto el segundo se
       pega al primero y los dos se leen como un unico bloque pulsable. */
    main .card > .btn + .btn,
    main form:not(.inline-form, .maestros__import-form) > .btn + .btn,
    main .card > form + form { margin-top: var(--sp-3); }
}

/* ---- Tarjetas movil: contraste con el contenedor y titulo de la ficha ----
   (issue #187, feedback de Jorge del 07/08/2026, puntos 4 y 5) */
/* issue #248 punto 1: los dos extremos del trayecto, apilados, con la razon social encima de su
   direccion. El nombre se distingue por PESO y no por color ni tamano, para que siga leyendose en
   una impresion en blanco y negro; `overflow-wrap` porque una razon social larga no puede salirse
   de la celda ni superponerse. Los dos bloques se separan con una linea discontinua suave, que
   sustituye al «>» que la celda tenia cuando cabia en una sola linea.

   VA FUERA DE CUALQUIER `@media`, y no es un detalle de colocacion: la primera version de estas
   cuatro reglas se escribio DENTRO del bloque de movil, asi que en escritorio —donde esta tabla se
   ve casi siempre— los dos extremos habrian salido pegados y el nombre sin distinguir. Las pruebas
   no lo vieron porque miran el HTML, no en que ambito cae una regla. */
.route-end { display: block; }
.route-end + .route-end { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #dfe6eb; }
.route-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.route-addr { display: block; overflow-wrap: anywhere; }

@media (max-width: 768px) {
    /* PUNTO 4 — "blanco sobre blanco". Medido en Documentos, Maestros y el Panel de control: la
       tarjeta de cada registro es #ffffff y el contenedor que las agrupa TAMBIEN es #ffffff, con
       un borde de 1px como unica separacion y sin sombra. Jorge dio dos opciones; se toma la SUYA
       primera (A): un listado que ya se ha convertido en fichas no necesita ademas una ficha que
       lo envuelva. Al quitarle la superficie al contenedor, asoma el fondo de pagina (`--color-bg`) y
       cada registro se recorta contra el sin inventar ningun recurso visual nuevo — ni sombras ni
       bordes mas duros, que era su reparo explicito. Se conserva el padding para que las fichas no
       queden pegadas al borde de la pantalla.

       El gate de revision hizo notar que la regla, al ser generica, tambien alcanza a Cuenta →
       Usuarios, Suscripcion y pagos y Soporte, que Jorge no probo. Se comprobaron las tres en el
       playground con datos sembrados ANTES de darla por buena: en las tres el resultado es el
       mismo que en las que si reporto —el titulo y sus controles quedan sobre el fondo de pagina y
       cada registro se recorta limpiamente—, incluidas las dos que mezclan titulo, boton y listado
       en la misma tarjeta, que era el caso que preocupaba. */
    .card:has(.data-table--cards) {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
}

/* ---- Segunda ronda de ajustes de Jorge en movil (issue #187, comentario del 08/08/2026) ----
   Va al final del fichero por la misma razon que los patrones: pisa layout de componentes, y una
   media query no anade especificidad. */
@media (max-width: 768px) {
    /* PUNTO 6 (el selector de idioma se pisaba con el logotipo en las pantallas de acceso): desde el rediseno
       #339 los dos van en la cabecera `.acc-top`, cada uno en un extremo; ver «Registro y acceso». */

    /* PUNTO 2 — tarjetas de actividad del registro con distinta altura. Medido: iguales a 360-390px
       pero 108/108/108/88 a 320px y 88/88/88/68 a 414-430px, porque la descripcion de la ultima
       opcion ocupa menos lineas. Filas iguales, no `min-height` a ojo: asi se adaptan al idioma
       —en euskara o ingles los textos rompen en otros anchos— sin numeros magicos. */
    .perfil-cards { grid-auto-rows: 1fr; }

    /* PUNTO 3 — acciones del detalle de un DeCA con alturas desiguales. Medido: 46/46/66/66/46/46.
       Los de 66px son los que viven dentro de un `.inline-form` (Modificar, Anular): el formulario
       se estiraba a la altura de la fila y el boton con el. Se igualan por el contenedor, con los
       botones centrando su texto, en vez de fijar una altura que se rompa al traducir. */
    .deca-detail-actions .btn,
    .deca-detail-actions .inline-form .btn {
        display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
    }

    /* PUNTO 3 (continuacion) — no se estira: al forzar `stretch` + `height:100%` el desajuste
       simplemente se mudaba al boton que quedaba solo en su fila (medido: «Duplicar DeCA» pasaba de
       46 a 66px). Cada boton conserva su altura minima y el grupo no impone la de la fila. */
    .deca-detail-actions { align-items: flex-start; }

    /* PUNTO 7.2 — la tarjeta de trayecto se veia mas estrecha que Trazabilidad. Medido: la tabla
       quedaba en 332px arrancando en x=29, mientras las demas tarjetas son 366px en x=12. Lo causo
       el propio arreglo del punto 4 de la ronda anterior: al contenedor se le quito la superficie
       pero se le dejo el padding, asi que las fichas de dentro quedaban metidas hacia adentro. Sin
       superficie el padding ya no separa nada de nada — solo desalinea. */
    .card:has(.data-table--cards) { padding-left: 0; padding-right: 0; }

    /* PUNTO 7.1 — carga y descarga se leen como dos datos mas de la ficha, con su etiqueta a la
       izquierda y su valor a la derecha, igual que Naturaleza o Peso; ya no como un bloque cosido
       al final. El separador « · » de escritorio se apaga aqui: sobra cuando cada dato tiene su
       propia linea. */
    /* La celda con dato pasa a bloque para que cada complemento sea su propia fila; la celda VACIA
       (la del `data-label=""` que ocupa la columna «#») tiene que seguir oculta — sin el `:not` se
       colaba como una franja vacia arriba del bloque, porque esta regla va despues y gana. */
    .data-table--cards tr.line-sub td:not([data-label=""]) { display: block; padding: 0; }
    /* Fondo transparente: el `--color-surface-2` de la fila de continuacion tiene sentido en la
       tabla de escritorio (matiza que amplia la fila de arriba), pero dentro de una tarjeta lo que
       hace es partirla en dos con un bloque gris que parece un anadido, que es literalmente lo que
       Jorge describio. */
    .data-table--cards tr.line-sub td { background: transparent; font-size: inherit; }
    /* Y la fila de ARRIBA cierra su borde y su redondeo por abajo: sin esto quedaban dos tarjetas
       pegadas con una costura visible entre ellas, que es lo que hacia que el bloque siguiera
       leyendose como un anadido y no como el final de la ficha. */
    .data-table--cards tr:has(+ tr.line-sub) {
        margin-bottom: 0; border-bottom: none;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    .data-table--cards tr.line-sub .line-sub__item {
        display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
        padding: var(--sp-2) 0; border-top: var(--bw-1) solid var(--color-border);
    }
    .data-table--cards tr.line-sub .line-sub__item + .line-sub__item::before { content: none; }
    .data-table--cards tr.line-sub .line-sub__label { color: var(--color-text-muted); font-weight: var(--fw-label); }
}


/* issue #187 punto 4/punto 3 — «Exportar CSV» e «Importar Excel»/«Importar CSV» desalineados en
   el movil de Jorge, TRES rondas:
   1.ª: NO reproducido en Chrome de escritorio (320-430px). Se documenta la asimetria
   estructural como sospechosa, sin confirmar.
   2.ª: captura real del movil de Jorge (Samsung S22+, iPhone, Galaxy Fold): «Importar Excel»
   salia mas ancho que «Exportar CSV», e «Importar CSV» —que deberia compartir columna con
   «Importar Excel»— salia MAS ESTRECHO todavia: la prueba de que `.maestros__import-form` no
   actuaba como una celda de grid igual que su hermano `<a class="btn">`. Arreglo de esa ronda:
   `display:contents` en el formulario (linea de arriba, junto a `.maestros__import-form`) — el
   `<label class="btn">` pasa a ser un item de grid/flex MAS del grupo. Y para el rango >480px se
   probo IGUALAR por flex (`flex:1 1 0; min-width:140px` en los dos selectores).
   3.ª: Jorge vuelve a probar y «Importar Excel» SIGUE mas ancho que sus dos hermanos, aunque
   mejor que antes. Causa exacta SIN CONFIRMAR: por spec, `min-width:140px` explicito deberia
   sustituir por completo al minimo automatico de contenido de un item de flex (no combinarse con
   el), asi que `flex:1 1 0` + el mismo `min-width` en los dos selectores deberia repartir el
   espacio por igual — y en la practica, en el movil real de Jorge, no lo hizo (hallazgo del gate
   de revision: el comentario anterior de este bloque atribuia la causa a un mecanismo de la spec
   que no aplica con un `min-width` explicito; no se deja constancia de una causa que no se ha
   verificado). En vez de seguir ajustando flex a ciegas, se cambia a la rejilla CSS (`grid`), que
   ESTRUCTURALMENTE no tiene esta familia de problemas: sus columnas `1fr` son iguales por
   definicion, con independencia del contenido de cada celda — es EXACTAMENTE lo que ya funciona
   bien en el punto 1 (`.cell-actions`) y en el propio `display:grid` de abajo de 480px. Arreglo:
   el `display:grid` de mas arriba (junto a `.maestros__import-form`) pasa de acotarse a 480px a
   acotarse a 768px — un UNICO `display:grid` para todo el rango movil/tablet, en vez de partirlo
   en un grid de abajo
   480px y un flex aproximado de 481 a 768px que era el que arrastraba este defecto. */
.maestros__toolbar-actions .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---- issue #231 §3 y §4 (Jorge, 20/08/2026): Cuenta en ESCRITORIO ----
   §3 — el aire entre el ultimo campo y el boton de accion ya no es un margen suelto: desde el rediseno
   #339 (S-229) cada boton de guardar vive en el pie de su tarjeta (`.cta-acciones`, 18 px de relleno
   y su filete), y los formularios-envoltorio de una sola accion heredan el margen del parrafo que los
   precede. Lo mide `tools/conducir-issue339-cuenta.js`. */

/* §4 — el selector de archivo del logo. Se estila el boton NATIVO (`::file-selector-button`) en vez
   de esconder el input tras una etiqueta falsa: asi la subida, la validacion de tipo y tamano, el
   teclado y el lector de pantalla siguen siendo exactamente los del navegador —no hay nada que
   reimplementar y por tanto nada que se pueda romper— y el nombre del fichero elegido lo sigue
   pintando el, que es el criterio 4 de Jorge. Mismos tokens que `.btn--ghost`. */
.cuenta-logo-form input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: var(--sp-2) var(--sp-4); margin-right: var(--sp-3);
    border: var(--bw-1) solid var(--color-primary-600); border-radius: var(--r-md);
    background: var(--color-surface); color: var(--color-primary-600);
    transition: background var(--dur-fast) var(--ease);
}
.cuenta-logo-form input[type="file"]::file-selector-button:hover { background: var(--color-primary-050); }

/* ---- Visor del DeCA (issue #270; rediseno #339, S-223) --------------------------------------------
   Solo se redisena el MARCO (maqueta `deca-viewer`): contenedor de 1380 px con cabecera clara —dibujo,
   antetitulo e identificador—, grupo de zoom, descargar, imprimir y cerrar; el documento es el PDF
   real, que no se toca (D14). En movil, pantalla completa: «Volver» a la izquierda, identificador
   centrado, descargar como icono, sin «Imprimir» y con el zoom en una pildora flotante.
   El cambio a movil sigue en 767 px, no en los 760 de la maqueta: `app.js` decide con ese mismo
   corte que boton recibe el foco y si se ofrece imprimir, y los dos tienen que coincidir. */
/* El `display` va SOLO con `[open]`: un `display` incondicional pisa la regla del navegador que oculta un `<dialog>`
   cerrado, y el visor aparecía al final del Panel y de la ficha, y al cerrarlo en móvil dejaba su barra sobre una
   pantalla vacía (incidencias 1 y 3 de Jorge, 19/09/2026). */
.modal--visor:not([open]) { display: none; }
.modal--visor[open] {
    width: min(1380px, calc(100vw - 64px));
    max-width: none;
    height: calc(100dvh - 64px);
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--bw-1) solid var(--color-primary-100);
    border-radius: 22px;
    background: var(--color-surface-2);
    box-shadow: var(--docs-ventana-sombra);
    animation: ventana-entra .2s ease-out;
}
.modal--visor::backdrop { background: var(--docs-velo); backdrop-filter: blur(4px); }
.visor__barra {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto; padding: 21px 24px;
    border-bottom: var(--bw-1) solid var(--color-border);
    background: var(--docs-ventana-cab);
    box-shadow: 0 2px 10px #193c6205; z-index: 1;
}
.visor__titulo { display: flex; align-items: center; gap: 13px; flex: 1 1 auto; min-width: 0; }
.visor__tesela { display: grid; place-items: center; flex: none; width: 46px; height: 50px; border-radius: 13px; border: var(--bw-1) solid var(--docs-tesela-borde); background: var(--docs-tesela); color: var(--color-primary-500); }
.visor__icono { flex: 0 0 auto; }
.visor__titulo-texto { min-width: 0; }
.visor__antetitulo { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 1.15px; line-height: 1.6; text-transform: uppercase; color: var(--color-text-muted); }
.visor__id {
    margin: 0; min-width: 0;
    font-size: 15px; line-height: 1.55; font-weight: 700;
    color: var(--color-primary-700);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visor__zoom {
    display: flex; align-items: center; height: 46px;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: 11px;
    background: var(--color-surface); overflow: hidden; flex: 0 0 auto;
}
.visor__zoom .icon-btn { height: 44px; width: 44px; border-radius: 0; }
/* El grupo recorta el anillo exterior, así que dentro el foco va por dentro (ficha §5). */
.visor__zoom .icon-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary-500); outline: 2px solid transparent; outline-offset: -2px; }
.visor__zoom-valor {
    min-width: 63px; padding: 0 5px; text-align: center;
    font-family: var(--font-sans); font-size: 14px; font-weight: 650; color: var(--color-text);
    align-self: stretch; display: flex; align-items: center; justify-content: center;
}
.visor__divisor { width: 1px; height: 28px; background: var(--color-border); flex: 0 0 auto; }
.visor__barra .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--color-text-muted); }
.visor__barra .visor__ajustar { background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong); }
.visor__barra .visor__cerrar { background: var(--color-surface-2); border: var(--bw-1) solid var(--color-border); }
.visor__barra .btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 46px; height: 46px; padding: 10px 14px; font-size: 14px; border-radius: 11px; white-space: nowrap; }
.visor__barra .visor__volver, .visor__zoom-flotante, .visor__pagina-actual { display: none; }
.visor__barra [disabled] { opacity: .45; pointer-events: none; }
.visor__lienzo { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; background: var(--docs-visor-lienzo); padding: 28px 32px 34px; scrollbar-width: thin; }
/* `width: fit-content` + `min-width: 100%`: con el documento ampliado las páginas son más anchas que el lienzo y se
   recorren en horizontal sin que el centrado corte el borde izquierdo. */
.visor__paginas { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); width: fit-content; min-width: 100%; margin: 0 auto; }
/* Nada de `max-width`: encogía el ancho del canvas sin tocar su alto y el documento salía estirado (incidencia 2). */
.visor__pagina { background: var(--color-surface); box-shadow: 0 6px 26px #163c5e13, 0 1px 3px #163c5e17; max-width: none; height: auto; }
/* issue #276 ronda 2: la pagina es una HOJA (canvas + capa de enlaces encima). El canvas no tiene enlaces, asi que las
   anotaciones del PDF se rinden como `<a>` posicionados sobre el. `line-height: 0` evita el hueco de linea base bajo
   el canvas, que desalinearia la capa. */
.visor__hoja { position: relative; flex: 0 0 auto; line-height: 0; }
.visor__enlaces { position: absolute; inset: 0; pointer-events: none; }
/* `pointer-events` NO es cosmetico: sin el, la capa (que cubre la pagina entera) se traga los clics de todo lo que no
   sea un enlace. Lo cazo la conduccion, no la lectura del codigo. */
.visor__enlace { position: absolute; display: block; border-radius: 2px; pointer-events: auto; }
/* S-231: el anillo es el de la aplicacion. Antes pedia `--color-focus`, un token que no existe, y caia en el azul
   de la paleta anterior escrito a mano. */
.visor__enlace:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
/* Sobre el lienzo el secundario se queda en 4,35:1: el texto de carga usa el terciario (4,70:1). */
.visor__cargando {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    color: var(--color-text-subtle); font-size: 15px; text-align: center; padding: var(--sp-8) 0;
}
.visor__spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--color-border-strong); border-top-color: var(--color-primary-600);
    animation: visor-giro 800ms linear infinite;
}
@keyframes visor-giro { to { transform: rotate(360deg); } }
.visor__error { max-width: 420px; margin: var(--sp-8) auto; padding: 26px 24px; text-align: center; background: var(--color-surface); border: var(--bw-1) solid var(--color-border); border-radius: var(--r-xl); }
.visor__error-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-danger-bg); color: var(--color-danger);
}
.visor__error-titulo { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-h2); color: var(--color-primary-700); }
.visor__error-texto { margin: 0 0 var(--sp-4); color: var(--color-text-muted); }
.visor__error-acciones { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) {
    .visor__barra .icon-btn:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
}
/* Tramo intermedio de la maqueta: los controles bajan a una segunda fila. */
@media (min-width: 768px) and (max-width: 1180.98px) {
    .modal--visor[open] { width: calc(100vw - 40px); height: calc(100dvh - 40px); }
    .visor__barra { flex-wrap: wrap; padding: 19px 22px; row-gap: 14px; }
    .visor__titulo { order: 1; flex: 1 1 calc(100% - 60px); }
    .visor__barra .visor__cerrar { order: 2; }
    .visor__zoom, .visor__barra .visor__ajustar, .visor__barra .btn { order: 3; }
    .visor__barra .visor__divisor { display: none; }
    .visor__barra .visor__descargar { margin-left: auto; }
}
/* Móvil: pantalla completa, «Volver» a la izquierda, zoom flotante y sin «Imprimir» (ficha §3). */
@media (max-width: 767px) {
    .modal--visor[open] { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; margin: 0; animation: none; }
    .visor__barra { gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--color-surface); }
    .visor__lienzo { padding: 12px 10px calc(90px + env(safe-area-inset-bottom)); }
    .visor__paginas { gap: var(--sp-3); }
    /* Especificidad: `.visor__barra .icon-btn` fija `display`, así que aquí se iguala o se gana (medido: sin esto, en
       móvil salían «Ajustar» y «Cerrar» y faltaba «Volver»). */
    .visor__barra .visor__volver { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; }
    .visor__barra .visor__tesela,
    .visor__barra .visor__antetitulo,
    .visor__barra .visor__zoom,
    .visor__barra .visor__ajustar,
    .visor__barra .visor__divisor,
    .visor__barra .visor__cerrar { display: none; }
    .visor__titulo { display: block; text-align: center; }
    .visor__id { font-size: 13px; line-height: 1.45; }
    .visor__barra .btn.visor__descargar { width: 44px; min-height: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
    .visor__descargar [data-visor-descargar-texto] { display: none; }
    .visor__zoom-flotante {
        position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
        display: flex; gap: var(--sp-1); z-index: 3;
        background: #fffffff7; border: var(--bw-1) solid var(--color-border);
        border-radius: var(--r-pill); box-shadow: 0 8px 28px #14395724, 0 2px 6px #1439570b; padding: 6px 8px;
    }
    .visor__zoom-flotante .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text-muted); }
    .visor__pagina-actual {
        position: absolute; left: 14px; bottom: calc(26px + env(safe-area-inset-bottom)); margin: 0;
        display: block; padding: 4px 12px; border-radius: var(--r-pill);
        /* S-231: el azul marino de la paleta vigente (`--color-primary-700`) al 88 %; llevaba el de la anterior. */
        background: #073066e0; color: #fff; font-size: var(--fs-caption); pointer-events: none;
    }
    .visor__error-acciones .btn { width: 100%; min-height: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .visor__spinner { animation: none; }
    .modal--visor[open] { animation: none; }
}
/* issue #310 T3 (§4) — ventana «Solicitar matricula» y su QR imprimible. */

/* La lista de datos pendientes del §10, con su estructura «[Seccion]: [dato]». Hereda el color
   del aviso que la contiene: es parte del mismo mensaje, no una lista aparte. */
.solicitud-pendientes {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
}

.solicitud-pendientes li { margin-bottom: var(--sp-1); }

/* El mensaje de solicitud pendiente y su «Cancelar solicitud», en la ficha del borrador (§13). */
.solicitud-pendiente { margin-bottom: var(--sp-4); }

.solicitud-qr {
    margin: var(--sp-3) 0;
    text-align: center;
}

.solicitud-qr img {
    display: block;
    margin: 0 auto var(--sp-2);
    /* Fondo blanco explicito: un QR sobre un fondo de color no lo lee ningun movil, y el tema
       oscuro del sistema llegaria hasta aqui sin esto. */
    background: #fff;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
}

/* Impresion del QR (§4, «Imprimir QR»): se imprime la pagina con todo oculto menos el codigo, en
   vez de abrir una ventana nueva — un `window.open` lo come el bloqueador de emergentes justo
   cuando el conductor esta esperando en el muelle. */
@media print {
    /* #339: el QR va dentro del cuerpo de la ventana y de su seccion. Ocultarlo todo con `visibility` dejaba la
       pagina ENTERA maquetada —varias hojas en blanco, con el codigo repetido en cada una—: lo que no es el codigo,
       ni lo contiene, ni va dentro de el, se quita del todo con `display: none`, y la hoja mide lo que el codigo. */
    body.imprimiendo-qr *:not(:has(#solicitud-qr)):not(#solicitud-qr):not(#solicitud-qr *) { display: none !important; }
    /* Sus contenedores (del armazon a la ventana) se quedan en cajas desnudas: sin relleno, borde, fondo ni alto
       propio que empujen el codigo o alarguen la hoja. Una ventana modal vive en la capa superior, donde `static`
       se calcula como `absolute`: por eso lleva tambien su esquina. */
    body.imprimiendo-qr :has(#solicitud-qr) {
        display: block !important;
        position: static !important;
        top: 0; left: 0;
        overflow: visible !important;
        width: auto; max-width: none;
        height: auto; min-height: 0; max-height: none;
        margin: 0; padding: 0; border: 0;
        background: none; box-shadow: none; transform: none; animation: none;
    }
    body.imprimiendo-qr #solicitud-modal::backdrop { display: none; }
    body.imprimiendo-qr #solicitud-qr { margin: 0; border: 0; padding: 10mm 0 0; text-align: center; break-inside: avoid; }
    body.imprimiendo-qr #solicitud-qr img {
        width: 60mm;
        height: 60mm;
    }
}

/* ============================================================================
   issue #310 T4 — Formulario externo de solicitud de matricula (pagina PUBLICA)
   Ficha: design-handoff/SPEC/screens/solicitud-matricula-formulario.md
   Movil primero. La columna de 420 px del layout publico sirve tal cual; en
   escritorio sube a 560 para que los pares de campos entren en dos columnas y la
   linea de texto se quede en 44-66 caracteres (ficha §1).
   ============================================================================ */
.pub-wrap--form { max-width: 420px; }
@media (min-width: 600px) {
    .pub-wrap--form { max-width: 560px; }
}

/* Selector de idioma: dos opciones => conmutador, no desplegable (ficha §1). */
.pub-lang { margin-left: auto; display: flex; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-pill); overflow: hidden; background: var(--color-surface); }
.pub-lang__btn { min-width: 44px; padding: 7px 12px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-align: center; text-decoration: none; color: var(--color-text-muted); }
.pub-lang__btn.is-active { background: var(--color-primary-600); color: #fff; }
.pub-lang__btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }

/* Partes: dos papeles, dos pesos. El que pide manda la jerarquia (ficha §2). */
.sol-partes { gap: var(--sp-2); }
.sol-partes__rol { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.sol-partes__nombre { margin: 0; font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-primary-700); }
.sol-partes__nif { margin: 0; font-size: var(--fs-caption); color: var(--color-text-muted); }
.sol-partes__destinatario { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--color-text); }
.sol-div { border: 0; border-top: var(--bw-1) solid var(--color-border); margin: var(--sp-3) 0; width: 100%; }
.sol-glifo { flex: none; }

.sol-h1 { margin: 0; font-size: var(--fs-h2); line-height: 1.28; font-weight: 600; color: var(--color-primary-700); }
.sol-h2 { margin: 0; font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-primary-700); }
.sol-intro { margin: calc(var(--sp-3) * -1) 0 0; font-size: var(--fs-body); line-height: 1.45; color: var(--color-text-muted); }

/* Caducidad: linea DISCRETA, sin fondo, que no compite con los campos (ficha §2). */
.sol-caduca { margin: calc(var(--sp-4) * -1) 0 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.sol-caduca--urgente { color: var(--color-warning); }

.sol-transporte__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.sol-ref { font-size: var(--fs-caption); color: var(--color-text-muted); }
.sol-datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); font-size: var(--fs-label); }
.sol-datos dt { color: var(--color-text-subtle); }
.sol-datos dd { margin: 0; color: var(--color-text); }
.sol-envios__btn { width: 100%; min-height: 44px; background: none; border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); font: inherit; font-size: var(--fs-label); color: var(--color-primary-600); cursor: pointer; }
.sol-envios { list-style: none; margin: 0; padding: var(--sp-3); background: var(--color-bg); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-caption); }
.sol-envios__n { font-weight: 600; margin-right: 6px; }
.sol-bloqueo { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-caption); color: var(--color-text-subtle); }

/* La UNICA tarjeta con borde reforzado: lo que se lee es plano, lo que se rellena sobresale. */
.sol-campos { border-color: var(--color-border-strong); box-shadow: var(--sh-md); }
.sol-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.sol-campo { display: flex; flex-direction: column; gap: 6px; }
.sol-label { font-size: var(--fs-label); font-weight: 500; color: var(--color-text); }
/* La obligatoriedad se marca con la PALABRA: el asterisco lo lee «estrella» un lector de pantalla. */
.sol-req { font-weight: 400; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.sol-input { font: inherit; font-size: 16px; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); width: 100%; box-sizing: border-box; }
.sol-input:focus-visible { outline: none; border-color: var(--color-primary-600); box-shadow: var(--sh-focus); }
.sol-input:disabled { background: var(--color-surface-2); color: var(--color-text-muted); }
.sol-input.is-error { border-color: var(--color-danger); }
.sol-ayuda { margin: 0; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.sol-error { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-danger); }
@media (min-width: 600px) {
    .sol-input { min-height: 40px; }
}

/* Combobox de matricula (ficha §5.1). */
.sol-lista { list-style: none; margin: 0; padding: 0; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); box-shadow: var(--sh-md); max-height: 264px; overflow-y: auto; }
.sol-lista__op { min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-3); font-family: var(--font-mono, monospace); cursor: pointer; }
.sol-lista__op[aria-selected="true"] { background: var(--color-surface-2); }
.sol-lista__op--nueva { background: var(--color-bg); font-family: inherit; color: var(--color-primary-600); }
.sol-lista__cargando { min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-3); background: var(--color-surface-2); color: var(--color-text-subtle); font-size: var(--fs-caption); }
.sol-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bloques opcionales: BOTON con region, nunca una casilla que revela campos (ficha §4). */
.sol-opcional { display: flex; flex-direction: column; gap: var(--sp-3); }
.sol-plegable { min-height: 44px; background: none; border: var(--bw-1) dashed var(--color-border-strong); border-radius: var(--r-md); font: inherit; font-size: var(--fs-label); color: var(--color-primary-600); cursor: pointer; }
.sol-plegable:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.sol-region { display: flex; flex-direction: column; gap: var(--sp-3); }

.sol-cta { margin: 0; display: flex; justify-content: stretch; }
.sol-enviar, .sol-descargar { width: 100%; min-height: 52px; font-size: var(--fs-body-lg); }
@media (min-width: 600px) {
    .sol-cta { justify-content: flex-end; }
    .sol-enviar, .sol-descargar { width: auto; min-height: 44px; }
}

/* Resumen de errores: recibe el foco al enviar y lleva un enlace por error (ficha §5.3). */
.sol-resumen { display: flex; flex-direction: column; gap: 6px; }
.sol-resumen__titulo { margin: 0; font-weight: 600; }
.sol-resumen__lista { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: 4px; }

/* Estados y resultado: una sola plantilla para los seis, con su disco de 56 px. */
.sol-estado { align-items: center; text-align: center; min-height: 190px; justify-content: center; }
.sol-estado--borde { border-color: #f0dcae; }
.sol-estado__titulo { margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--color-primary-700); }
.sol-estado__cuerpo { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-muted); text-wrap: pretty; max-width: 44ch; }
.sol-disco { width: 56px; height: 56px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }
.sol-disco--neutro { background: var(--color-surface-2); color: var(--color-text-muted); }
.sol-disco--exito { background: var(--color-success-bg); color: var(--color-success); }
.sol-disco--aviso { background: var(--color-warning-bg); color: var(--color-warning); }
.sol-acuse { margin: 0; font-size: var(--fs-caption); color: var(--color-text-muted); }
/* issue #310 §6 (Jorge, 21/09): la firma es UNA pieza —logotipo y texto juntos, el logotipo
   delante—, no un texto con un dibujo suelto debajo. `inline-flex` y no `flex` para que el
   conjunto siga centrandose con el `text-align` del contenedor; `align-items: center` porque lo
   que tiene que casar es el centro del logotipo con el de la linea de texto, no su linea base.
   `flex-wrap` deja que en 320 px el texto baje sin que el logotipo se encoja ni se corte. */
/* issue #310 §7 (T5c): el bloque de conductor reconocido. Tres variantes que se distinguen por el
   filete de la izquierda y el fondo, no solo por el color del texto: el color por si solo no vale
   como unico portador de significado (WCAG 1.4.1), y ademas en un movil a contraluz no se ve. */
.sol-conductor {
    margin-top: var(--sp-3); padding: var(--sp-3);
    border-radius: var(--r-md); border-left: 3px solid var(--color-primary-600);
    background: var(--color-primary-050);
    display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
}
.sol-conductor--aviso { border-left-color: #D98A00; background: #FFF7E6; }
.sol-conductor--uso { border-left-color: #2E7D32; background: #F1F8F1; }
.sol-conductor__titulo { margin: 0; font-weight: 600; color: var(--color-text); }
.sol-conductor__cuerpo { margin: 0; font-size: var(--fs-body); color: var(--color-text); }
/* El dato enmascarado va en monoespaciada: es un dato, no prosa, y asi se distingue del resto. */
.sol-conductor__dato { margin: 0; font-family: var(--font-mono, monospace); font-size: var(--fs-caption); }
.sol-conductor .btn { align-self: stretch; }
@media (min-width: 560px) { .sol-conductor .btn { align-self: flex-start; } }

.sol-firma {
    margin: 0; text-align: center; font-size: var(--fs-caption); color: var(--color-text-subtle);
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-2);
}
/* El alto manda y el ancho se calcula: asi el logotipo NO se deforma pase lo que pase con la
   columna. 16 px es discreto al lado de un texto de tamano `caption`. */
.sol-firma__logo { height: 16px; width: auto; flex: none; }
.sol-firma__texto { display: inline; }

/* Barra indeterminada del «preparando». NI verde, NI marca de comprobado, NI «listo». */
.sol-progreso { width: 100%; height: 4px; border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.sol-progreso span { display: block; width: 40%; height: 100%; background: var(--color-primary-600); animation: sol-indeterminada 1.6s ease-in-out infinite; }
.sol-lento { margin: 0; font-size: var(--fs-caption); color: var(--color-text-subtle); }
@keyframes sol-indeterminada {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    /* La barra se queda quieta: la pantalla no pierde informacion, solo movimiento (ficha §7). */
    .sol-progreso span { animation: none; width: 100%; opacity: .5; }
}

/* issue #310 T5b (§8): el aviso de «sin capacidad» del formulario externo. Informa y no bloquea:
   la búsqueda de matrículas sigue ahí, porque el límite impide registrar nuevas y permite seguir
   usando las existentes. */
.sol-sincupo { margin: 0 0 var(--sp-2); font-size: var(--fs-caption); line-height: 1.5; }

/* ===========================================================================
   issue #310 T7 (§12) — la campana de avisos de la barra superior.
   Ficha de Design `campana-avisos.md`. La barra NO se rediseña: la campana se
   inserta en su grupo derecho con el `gap` que ya existe, sin divisor y sin
   mover el chip de idioma ni el avatar.
   =========================================================================== */
.avisos { position: relative; display: flex; align-items: center; }

.avisos__campana {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 37px; height: 37px; border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--color-text-muted); cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.avisos__campana:hover { background: var(--color-surface-2); color: var(--color-primary-500); }
.avisos__campana:focus-visible { outline: 2px solid transparent; box-shadow: var(--sh-focus); }
/* Con no leídos se queda con fondo permanente: se nota sin gritar, y el distintivo hace el resto. */
.avisos--con-pendientes .avisos__campana { background: var(--color-surface-2); color: var(--color-primary-700); }
.avisos--abierta .avisos__campana { background: var(--color-surface-3); color: var(--color-primary-700); }

.avisos__distintivo {
    position: absolute; top: 0; right: 0;
    min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill); border: var(--bw-2) solid var(--color-surface);
    background: var(--color-primary-600); color: var(--color-text-invert);
    font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); line-height: 1;
}
.avisos__distintivo[hidden] { display: none; }

/* ---- La ventana ---- */
.avisos__ventana {
    /* Rediseno #339: la ventana de la maqueta (`notifications-popover`) — 440 px, radio de 20 px,
       cuelga 14 px bajo la campana y nunca pasa del alto de la pantalla. `overflow: hidden` para
       que la cabecera con degradado y el pie respeten las esquinas. */
    position: absolute; top: calc(100% + 14px); right: -12px; z-index: var(--z-dropdown);
    width: 440px; max-width: calc(100vw - 32px);
    max-height: min(730px, calc(100vh - 100px)); max-height: min(730px, calc(100dvh - 100px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong);
    border-radius: 20px; box-shadow: var(--sh-lg);
    animation: avisos-entrada var(--dur-fast) var(--ease);
}
.avisos__ventana[hidden] { display: none; }
@keyframes avisos-entrada { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.avisos__cabecera {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
    padding: 22px 22px 18px; border-bottom: var(--bw-1) solid var(--color-border); flex: none;
    background: linear-gradient(135deg, var(--color-primary-050), var(--color-surface));
}
.avisos__titulo { margin: 0; font-size: 21px; line-height: 1.3; font-weight: var(--fw-semibold); color: var(--color-primary-700); }
.avisos__contador { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-subtle); }
.avisos__cerrar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -5px -7px 0 0; border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.avisos__cerrar:hover { background: var(--color-surface-2); color: var(--color-text); }
.avisos__cerrar:focus-visible { outline: 2px solid transparent; box-shadow: var(--sh-focus); }

/* La lista se desplaza DENTRO de la ventana, no en la página. */
/* issue #310 §12 (Jorge, 21/09): quien desplaza es el ENVOLTORIO, no la lista, para que el rotulo
   «No hay mas avisos» viaje dentro del desplazamiento sin meterse dentro del `role="list"`. */
.avisos__desplazable { overflow-y: auto; flex: 1 1 auto; }
.avisos__lista { display: block; }
/* issue #310 §12 (S-090): «Cargar mas» cierra la lista, asi que se centra igual que el rotulo del
   final al que sustituye. Comparten sitio y no pueden verse a la vez, de modo que el mismo aire
   arriba y abajo evita que la ventana «salte» al pasar de uno a otro. */
.avisos__mas { padding: var(--sp-3); text-align: center; }
.avisos__fin { margin: 0; padding: var(--sp-3); text-align: center; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.avisos__pie {
    margin: 0; padding: 13px 20px; border-top: var(--bw-1) solid var(--color-border); flex: none;
    background: var(--color-bg); text-align: center;
    font-size: 14px; color: var(--color-text-subtle);
}

/* Estados: vacía, error. Cargando va aparte porque imita la geometría real de la fila. */
.avisos__estado { padding: var(--sp-6) var(--sp-5); text-align: center; }
.avisos__estado-titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--color-primary-700); }
.avisos__estado-cuerpo { margin: 0 auto var(--sp-3); max-width: 250px; font-size: 13px; line-height: 19px; color: var(--color-text-muted); text-wrap: pretty; }

.avisos__cargando { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.avisos__fantasma { display: block; height: 44px; border-radius: var(--r-md); background: var(--color-surface-2); animation: avisos-pulso 1.2s ease-in-out infinite; }
@keyframes avisos-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- La fila ---- */
.aviso {
    display: grid; grid-template-columns: 8px 32px 1fr auto; align-items: start; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); min-height: 44px;
    border-bottom: var(--bw-1) solid var(--color-border);
    /* S-231: velo del azul primario vigente (`--color-primary-600`) al 4 %; llevaba el de la paleta anterior. */
    color: inherit; text-decoration: none; background: #086bc10a;
}
.aviso:last-child { border-bottom: 0; }
.aviso:hover { background: var(--color-surface-2); }
.aviso:focus-visible { outline: 2px solid transparent; outline-offset: -2px; box-shadow: var(--sh-focus); position: relative; z-index: 1; }
/* El no leído tiene TRES señales y no solo el color: el punto, el peso del título y la ausencia
   de «· leído». Quien no distinga el azul sigue viendo las otras dos. */
.aviso::before {
    content: ""; grid-column: 1; margin-top: 6px;
    width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--color-primary-600);
}
.aviso--leido { background: var(--color-surface); }
.aviso--leido::before { background: transparent; }
.aviso--leido .aviso__titulo { font-weight: var(--fw-medium); color: var(--color-text-muted); }
/* El «· leido» es texto REAL en el DOM, no `content` generado: un lector de pantalla no anuncia
   el contenido generado de forma fiable, y esta es una de las tres senales del estado leido. */
.aviso__leido { font-weight: var(--fw-regular); color: var(--color-text-subtle); }

.aviso__disco {
    grid-column: 2; width: 32px; height: 32px; border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
}
.aviso__disco::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.aviso__disco--info { background: var(--color-primary-100); color: var(--color-primary-600); }
.aviso__disco--exito { background: var(--color-success-bg); color: var(--color-success); }
.aviso__disco--aviso { background: var(--color-warning-bg); color: var(--color-warning); }
.aviso__disco--error { background: var(--color-danger-bg); color: var(--color-danger); }

/* Los glifos, de la familia de contorno 24x24. Van como máscara para que hereden el color del
   disco: así un tipo nuevo solo añade su dibujo, nunca una segunda paleta. */
.aviso__disco[data-glifo="file"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="check-circle"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="alert-triangle"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.8 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.8 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="card"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="refresh"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); }
/* issue #336: clip (adjuntos que no se pudieron incluir) e interrogación (no se sabe si el correo salió). */
.aviso__disco[data-glifo="paperclip"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="help-circle"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.aviso__disco[data-glifo="mail"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E"); }
/* issue #326: la factura (hoja con renglones), distinta de la hoja lisa del borrador de DeCA. */
.aviso__disco[data-glifo="factura"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }

.aviso__cuerpo { grid-column: 3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso__titulo { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--color-primary-700); }
.aviso__texto { font-size: 13px; line-height: 19px; color: var(--color-text-muted); text-wrap: pretty; }
.aviso__ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: 2px; font-size: var(--fs-caption); color: var(--color-text-subtle); }
.aviso__badge { border-radius: var(--r-sm); padding: 1px 6px; font-size: 11px; font-weight: var(--fw-medium); }
.aviso__badge--borrador { background: var(--state-borrador-bg); color: var(--state-borrador-fg); }
.aviso__badge--emitido { background: var(--state-emitido-bg); color: var(--state-emitido-fg); }
/* El mono SOLO aparece cuando hay número oficial: es lo que lo hace significar algo. */
.aviso__id { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--color-text-muted); word-break: break-all; }
.aviso__accion { margin-top: var(--sp-1); font-size: 13px; line-height: 19px; font-weight: var(--fw-semibold); color: var(--color-primary-600); }
.aviso__hora { grid-column: 4; font-size: 11px; line-height: 16px; color: var(--color-text-subtle); white-space: nowrap; }

/* Mismo corte que la cabecera de movil (760 px): alli se le quita el desenfoque, y con desenfoque la
   cabecera seria el bloque contenedor de esta ventana `fixed`, que se mediria contra ella. */
@media (max-width: 760.98px) {
    /* Sigue flotante, a ancho casi completo: mantiene el hilo con la campana y cerrarla devuelve
       exactamente donde estabas. A pantalla completa, una ojeada de tres segundos se convierte en
       una navegación con vuelta atrás. */
    .avisos__campana { width: 44px; height: 44px; }
    .avisos__distintivo { top: 2px; right: 2px; }
    .avisos__ventana {
        position: fixed; top: 74px; left: 12px; right: 12px; width: auto; max-width: none;
        max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); border-radius: 17px;
    }
    .avisos__cerrar { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    .avisos__ventana { animation: none; }
    .avisos__fantasma { animation: none; opacity: .7; }
}

/* issue #325 — Cuenta > Usuarios y permisos (diseño validado): cabecera, los tres perfiles a la vista, listado y el
   bloque del alcance del Operador. Identidad de Docarga (tokens de siempre), no los colores de la maqueta. */
.acceso-deca { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-caption); background: var(--color-surface-2, #eef2f6); color: var(--color-text); white-space: nowrap; }
.acceso-deca--propios { background: var(--color-info-bg); color: var(--color-primary-600); font-weight: 600; }
.perfil-cards--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alcance-deca { border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.alcance-deca.is-error { border-color: var(--color-danger); }
.alcance-deca .perfil-cards { margin-bottom: var(--sp-2); }
.alcance-deca__notas { margin: var(--sp-2) 0 0; padding-left: 1.1em; font-size: var(--fs-caption); line-height: 1.5; color: var(--color-text-muted); }
@media (max-width: 760px) {
    .perfil-cards--tres { grid-template-columns: 1fr; }
    /* El registro iguala la altura de sus tarjetas en móvil (`grid-auto-rows: 1fr`); aquí, en una columna, eso
       dejaba un hueco en blanco bajo cada tarjeta corta. Cada una mide lo que su texto. */
    .perfil-cards--tres, .alcance-deca .perfil-cards { grid-auto-rows: auto; }
}

/* ---- ADR por envio (#343 S-205; entrega de Design de DR-008, ficha §0-§1) ----
   Caja-etiqueta que envuelve la casilla y sus textos. Estados: marcado (borde primario + fondo info),
   hover (solo desmarcado), foco (anillo de la app, sin cambiar el borde), error (el borde rojo gana) y
   deshabilitado. La procedencia va debajo, a 4 px. */
.adr-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.adr-check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 44px; padding: var(--sp-3);
    border: 1px solid var(--color-border-strong); border-radius: 6px; background: #ffffff; box-sizing: border-box; cursor: pointer; }
.adr-check input[type="checkbox"] { margin: 1px 0 0; width: 18px; height: 18px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.adr-check__text { display: flex; flex-direction: column; }
.adr-check__title { font-size: var(--fs-body); line-height: 20px; font-weight: 600; color: var(--color-text); }
.adr-check__hint { font-size: var(--fs-caption); line-height: 16px; color: var(--color-text-muted); }
.adr-check:hover:not(:has(input:checked)):not(:has(input:disabled)) { background: var(--color-primary-050); }
.adr-check:has(input:checked) { border-color: var(--color-primary-600); background: var(--color-info-bg); }
.adr-check:has(input:focus-visible) { box-shadow: var(--sh-focus); outline: 2px solid transparent; }
.adr-check input[type="checkbox"]:focus-visible { outline: none; }
.adr-check.is-error, .adr-check:has(input[aria-invalid="true"]) { border-color: var(--color-danger); }
.adr-check:has(input:disabled) { border-color: var(--color-border); background: var(--color-surface-2); cursor: not-allowed; }
.adr-check:has(input:disabled) .adr-check__title,
.adr-check:has(input:disabled) .adr-check__hint { color: var(--color-text-subtle); }
.adr-src { margin: 0; display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-caption); line-height: 16px; color: var(--color-text-muted); }
.adr-src svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 480px) {
    .adr-check { min-height: 48px; }
    .adr-check input[type="checkbox"] { width: 20px; height: 20px; }
    .adr-check__title { font-size: 15px; line-height: 22px; }
    .adr-check__hint, .adr-src { font-size: 13px; line-height: 18px; }
}

/* #343 S-264: ADR de la ficha del documento (artefacto de DR-008 §5: «Si» a 600). Desde S-281 es un dato de la tarjeta
   de su envio, no una columna. */
.detail-facts .col-adr strong { font-weight: 600; }

/* #343 S-265: ficha de Maestros → Mercancias (ficha de DR-008 §7). Cantidad y Unidad en una fila (una
   columna a ≤768), el texto anterior en solo lectura y la columna «Cantidad / peso» del listado. */
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
@media (max-width: 768px) { .form-pair { grid-template-columns: minmax(0, 1fr); } }
.form-field input.input-legacy { background: var(--color-surface-2); border-color: var(--color-border); }
.form-hint--done { color: var(--color-success); }
.form-hint--done::before { content: "\2713"; margin-right: var(--sp-1); font-weight: 600; }
@media (min-width: 769px) { .data-table th.col-cantidad, .data-table td.col-cantidad { width: 216px; } }
.data-table td.col-cantidad .cell-note { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }


/* ============================================================================
   Documentos (issue #1; rediseno #339, S-223): listado, ficha, ventanas de envio
   ----------------------------------------------------------------------------
   Maqueta `Docarga-documentos-redisenado.html`, version corregida del 04/10 (familia A). Los
   cortes son los suyos —1300, 1270, 1100, 1000, 760, 600 y 360 px, escritos con `.98`— y son de
   ventana. Todo va acotado a `.docs` (el contenedor de las dos vistas) porque varias clases
   (`.card`, `.badge`, `.data-table`, `.modal`, `.party`) las comparten otras pantallas que tienen
   su propia slice. Los grises secundarios de la maqueta (#7590a5, #8195a8, #7090aa, #6688a7…)
   se quedan entre 2,9:1 y 3,7:1: aqui son siempre `--color-text-muted`, que da 4,5:1 o mas sobre
   cada fondo de esta seccion (caso 181).
   Las reglas antiguas de estas clases que siguen arriba en la hoja las fijan casos de prueba de
   issues anteriores (#187, #231): esta seccion las gana por especificidad, no por borrado.
   ============================================================================ */
.app-main:has(> .docs) { --content-max: 1580px; max-width: 1580px; padding-top: 30px; }
.docs { font-size: 15px; line-height: 1.6; }
.docs .card { margin-bottom: 0; }
/* Distintivo de estado de la maqueta (`doc-status`): suave, con su punto. Los colores, en la regla
   que comparte con «Ultimos documentos» del Panel. */
.docs .badge { font-size: 13px; line-height: 1.5; padding: 4px 8px; }
.docs .badge--muted { --badge-bg: var(--state-borrador-bg); --badge-fg: var(--state-borrador-fg); --badge-punto: var(--state-borrador); }

/* ---- Listado: cabecera ---- */
.docs .page-header.docs-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 23px; }
.docs-cabecera .page-title { font-size: 30px; }
.docs-cabecera .page-subtitle { margin-top: 7px; font-size: 16px; }
.docs-cabecera .deca-toolbar__new { flex: none; }

/* ---- Listado: filtros ---- */
.docs .docs-filtros {
    display: block; flex: none; padding: 22px 24px;
    background: var(--color-surface); border: var(--bw-1) solid var(--color-border);
    border-radius: 16px; box-shadow: var(--sh-md);
}
.docs-filtros__principal { display: grid; grid-template-columns: minmax(240px, 1fr) 165px 153px 145px; gap: 15px; align-items: end; }
.docs .docs-campo { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 14px; line-height: 1.5; font-weight: 550; color: var(--color-text-muted); }
.docs-campo__rotulo { display: block; }
/* La caja del campo: 47 px de alto y fondo azulado de la maqueta. En `select` y `date` la caja ES el
   control; en el buscador es el envoltorio, que lleva la lupa y el anillo de foco. */
.docs .docs-campo .docs-campo__caja {
    width: 100%; min-width: 0; height: 47px; min-height: 0; padding: 0 12px;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--docs-campo-bg); color: var(--color-text);
    font: inherit; font-size: 15px; font-weight: 400; color-scheme: light;
}
.docs .docs-campo select.docs-campo__caja {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7289' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
}
.docs .docs-campo .docs-campo__caja--buscar { display: flex; align-items: center; gap: 9px; color: var(--color-text-muted); }
.docs-campo__caja--buscar svg { flex: none; }
.docs-campo__caja--buscar input {
    flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none;
    font: inherit; font-size: 15px; color: var(--color-text);
}
.docs-campo__caja--buscar input::placeholder { color: var(--color-text-muted); opacity: 1; }
.docs .docs-campo .docs-campo__caja:focus-visible,
.docs .docs-campo .docs-campo__caja--buscar:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; border-color: var(--color-primary-500); box-shadow: none; }
.docs .docs-campo .docs-campo__caja[aria-invalid="true"] { border-color: var(--color-danger); background: var(--btn-danger-bg); }
.docs .deca-filters__periodo {
    display: grid; grid-template-columns: 42px minmax(190px, 1.2fr) minmax(155px, 1fr) minmax(155px, 1fr) auto;
    gap: 15px; align-items: end; margin: 20px 0 0; padding: 20px 0 0; border: 0;
    border-top: var(--bw-1) solid var(--color-border);
}
.docs-filtros__icono { width: 40px; height: 47px; display: grid; place-items: center; color: var(--color-primary-500); }
.docs-filtros__aplicar { min-height: 47px; padding-left: 24px; padding-right: 24px; }
.docs-filtros__ayuda { grid-column: 2 / -1; margin: -4px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.docs .deca-filters__periodo .form-error { grid-column: 2 / -1; margin: 0; font-size: 14px; color: var(--state-anulado-fg); }

/* ---- Listado: resultados y seleccion para el ZIP ---- */
.docs-resultados { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 20px 2px 12px; min-height: 36px; }
.docs .deca-count { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--color-text-muted); }
.docs .deca-count svg { flex: none; color: var(--color-primary-500); }
.docs-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; font-weight: 600; color: var(--color-primary-600); text-decoration: none; }
/* `display: contents`: la barra tiene que poder pegarse arriba mientras se recorre TODA la tabla, y un
   `position: sticky` no sale de su caja. El atributo `hidden` (sin JavaScript) sigue ganando: lo
   protege la guarda global `[hidden] { display: none !important }`. */
.docs .deca-sel { display: contents; }
.deca-sel__barra {
    position: sticky; top: calc(var(--topbar-h) + 12px); z-index: 12; scroll-margin-top: 88px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 15px 18px; background: var(--color-surface);
    border: var(--bw-1) solid var(--color-border); border-radius: 13px; box-shadow: 0 3px 14px #193b6408;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
/* Con algo seleccionado la barra se tine de azul. Lo decide el estado del boton de limpiar, que es
   el que mantiene app.js: no hace falta una clase nueva ni tocar el guion. */
.deca-sel__barra:has([data-sel-limpiar]:enabled) { background: var(--docs-sel-bg); border-color: var(--docs-sel-borde); box-shadow: 0 4px 20px #193b6410; }
.deca-sel__resumen { display: flex; align-items: center; gap: 12px; min-width: 0; }
.deca-sel__icono { display: grid; place-items: center; flex: none; width: 38px; height: 42px; color: var(--color-primary-500); background: var(--color-primary-050); border: var(--bw-1) solid var(--color-primary-100); border-radius: 10px; }
.docs .deca-sel__contador { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.5; color: var(--color-text); }
.deca-sel__nota { margin: 3px 0 0; font-size: 13px; color: var(--color-text-muted); }
.docs .deca-sel__acciones { display: flex; align-items: center; gap: 17px; flex: none; margin: 0; flex-wrap: nowrap; }
.deca-sel__limpiar, .deca-sel__todos { border: 0; background: none; font: inherit; cursor: pointer; }
.deca-sel__limpiar { min-height: 44px; padding: 8px 0; font-size: 13px; color: var(--color-text-muted); }
.deca-sel__limpiar:disabled { opacity: .5; cursor: not-allowed; }
/* El texto del boton lo reescribe app.js («Descargar ZIP (3)», «Preparando ZIP…»): el dibujo va en
   un pseudoelemento para que no se pierda al cambiarlo. */
.deca-sel__zip { min-width: 188px; min-height: 46px; font-size: 14px; }
.deca-sel__zip::before {
    content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--docs-ico-descarga) center / 18px 18px no-repeat; mask: var(--docs-ico-descarga) center / 18px 18px no-repeat;
}
.deca-sel__zip[aria-busy="true"]::before {
    background: none; -webkit-mask: none; mask: none; box-sizing: border-box;
    border: 2px solid #ffffff73; border-top-color: #fff; border-radius: 50%; animation: visor-giro .8s linear infinite;
}
.deca-sel__alcance { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 18px; padding: 12px 4px 15px; line-height: 1.65; }
.deca-sel__alcance p { margin: 0; font-size: 13px; color: var(--color-text-muted); }
/* Dos frases, una por disposicion: la de la tabla habla de la casilla de cabecera, que en tarjeta no existe. */
.deca-sel__alcance-tarjeta { display: none; }
.deca-sel__todos { min-height: 32px; padding: 0; text-align: left; font-size: 13px; font-weight: 550; line-height: 1.65; color: var(--color-primary-600); }
.docs .deca-sel__aviso {
    flex: none; margin: 0 0 14px; padding: 11px 14px; font-size: 14px; line-height: 1.6;
    color: var(--color-text); background: var(--docs-aviso-bg);
    border: var(--bw-1) solid var(--color-primary-100); border-radius: var(--r-md);
}
.docs .deca-sel__aviso.is-error { color: var(--state-anulado-fg); background: var(--color-danger-bg); border-color: #f3c6bd; }
.deca-sel__movil { display: none; }
.docs-zip-fallo { margin: 0 0 17px; }
/* Casilla de la maqueta (`document-check`): 18 px, dibujada. El objetivo de pulsacion es la etiqueta
   que la envuelve, de 44 px. */
.docs .deca-sel__pagina { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; vertical-align: middle; }
.docs input.docs-casilla {
    appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center;
    width: 18px; height: 18px; margin: 0; cursor: pointer;
    background: var(--color-surface); border: 1.5px solid var(--docs-casilla-borde); border-radius: 5px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.docs input.docs-casilla::before { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); }
.docs input.docs-casilla:checked, .docs input.docs-casilla:indeterminate { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.docs input.docs-casilla:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.docs input.docs-casilla:indeterminate::before { width: 8px; height: 0; border-left: 0; transform: none; }
.docs input.docs-casilla:disabled { background: var(--state-borrador-bg); border-color: var(--color-border); cursor: not-allowed; }
.docs input.docs-casilla:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
.docs .deca-sel__pagina:has(input:disabled) { cursor: not-allowed; }
/* Colores forzados (contraste alto de Windows): el sistema repinta fondos y bordes, y la marca blanca dibujada
   sobre azul desaparece — marcada y sin marcar se verian iguales. Ahi la casilla vuelve a ser la del sistema. */
@media (forced-colors: active) {
    .docs input.docs-casilla { appearance: auto; -webkit-appearance: auto; display: inline-block; border-radius: 0; }
    .docs input.docs-casilla::before { content: none; }
}
/* WCAG 2.2 · 2.4.11 (foco no tapado): la barra de seleccion va pegada bajo la barra superior, y un control de la
   tabla que recibe el foco al retroceder con el tabulador quedaba debajo de las dos. La pagina reserva arriba ese
   hueco al llevar un control a la vista: barra superior + separacion + alto de la barra de seleccion + aire.
   El alto es el MEDIDO (78 px en escritorio; en movil, 125 px en el idioma mas largo, con el contador en dos
   lineas); `conducir-issue339-documentos.js` lo comprueba con el foco real a 1440 y 390 px. */
:root:has(.deca-sel__barra) { --docs-sel-alto: 80px; scroll-padding-top: calc(var(--topbar-h) + 12px + var(--docs-sel-alto) + 12px); }

/* ---- Listado: tabla ---- */
/* Entre 761 y 1190 px la tabla no cabe: se recorre en horizontal DENTRO de su tarjeta, como en la maqueta. */
/* `position: relative`: los textos solo para lector de pantalla van en posicion absoluta; sin un ancestro
   posicionado se escapan del recorte de esta caja y ensanchan la pagina entera (medido a 1100 y 900 px). */
.docs .docs-tabla-caja { position: relative; padding: 0; border-radius: 17px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.docs .docs-tabla { width: 100%; min-width: 1150px; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.docs .docs-tabla th {
    position: static; padding: 15px 14px; background: var(--docs-th-bg); color: var(--color-text-muted);
    font-size: 12px; font-weight: 650; letter-spacing: .65px; text-transform: uppercase;
    border-bottom: var(--bw-1) solid var(--color-border);
}
.docs .docs-tabla td { padding: 17px 14px; vertical-align: middle; border-bottom: var(--bw-1) solid var(--color-border); color: var(--color-text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.docs .docs-tabla tbody tr:last-child td { border-bottom: 0; }
.docs .docs-tabla th.col-sel { width: 50px; padding: 7px 3px; text-align: center; }
.docs .docs-tabla td.col-sel { width: 50px; padding: 10px 3px; text-align: center; cursor: default; white-space: normal; }
.docs-tabla th:nth-child(2) { width: 19%; }
.docs-tabla th:nth-child(3) { width: 9%; }
.docs-tabla th:nth-child(4) { width: 10%; }
.docs-tabla th:nth-child(5) { width: 14%; }
.docs-tabla th:nth-child(7) { width: 10%; }
.docs-tabla th:nth-child(8) { width: 11%; }
.docs-tabla th:nth-child(9) { width: 48px; }
.docs .docs-tabla tbody tr:hover { background: var(--docs-fila-hover); }
/* Fila seleccionada: la marca la propia casilla (`:has`), sin clase que mantener desde el guion. */
.docs .docs-tabla tbody tr:has(.js-sel:checked) { background: var(--docs-fila-sel); }
.docs-tabla__doc-caja { display: flex; align-items: center; gap: 10px; }
.docs-tabla__doc-caja > div { min-width: 0; }
.docs-tabla__ficha { display: grid; place-items: center; flex: none; width: 32px; height: 39px; border-radius: var(--r-md); background: var(--color-primary-050); color: var(--color-primary-500); border: var(--bw-1) solid var(--color-primary-100); }
.docs-tabla__ficha--borrador { color: var(--state-borrador); background: var(--state-borrador-bg); border-color: var(--color-border); }
.docs-tabla__id { display: block; font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--color-primary-600); text-decoration: none; overflow-wrap: anywhere; }
.docs-tabla__id.mono { font-size: 13px; }
.docs-tabla__tipo-movil, .docs-tabla__rotulo { display: none; }
/* Rotulo de la fecha, solo para lector de pantalla y solo en tarjeta: en tabla lo dice la cabecera de columna. */
.docs-tabla__rotulo-lector { display: none; }
.docs .deca-sel__motivo { display: block; max-width: none; margin-top: 4px; font-size: 12px; line-height: 1.55; font-weight: 400; color: var(--color-text-muted); white-space: normal; }
.docs-tabla__fecha { white-space: nowrap; }
.docs-tabla__tipo > span { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.docs-tabla__tipo svg { flex: none; color: var(--color-text-muted); }
.docs .docs-tabla td.docs-tabla__parte { font-weight: 500; color: var(--color-text); }
.docs-ruta { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.55; }
.docs-ruta__punto { position: absolute; left: 0; top: 7px; width: 5px; height: 5px; box-sizing: content-box; border: 1.5px solid var(--docs-punto); border-radius: 50%; }
.docs-ruta--origen { padding-bottom: 7px; }
.docs-ruta--origen::before { content: ""; position: absolute; left: 3px; top: 16px; bottom: -3px; border-left: 1px dashed var(--color-border-strong); }
.docs-ruta--origen:last-child { padding-bottom: 0; }
.docs-ruta--origen:last-child::before { content: none; }
.docs-ruta--destino .docs-ruta__punto { background: var(--docs-punto-destino); border-color: var(--docs-punto-destino); }
.docs-matricula { display: inline-flex; padding: 4px 7px; border: var(--bw-1) solid var(--color-border); border-radius: var(--r-sm); background: var(--docs-suave-bg); color: var(--color-text); font-size: 13px; font-weight: 550; white-space: nowrap; }
.docs .docs-tabla td.docs-tabla__abrir { padding: 12px 8px; text-align: center; }
.docs-tabla__flecha { display: inline-grid; place-items: center; width: 32px; height: 38px; border-radius: 8px; color: var(--color-text-muted); }

/* ---- Listado: paginacion y estado vacio ---- */
.docs .deca-pager { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; flex-wrap: wrap; }
.deca-pager__cuenta { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.docs .deca-pager__nav { display: flex; gap: 9px; }
.docs .deca-pager .btn { font-size: 14px; }
.docs .docs-vacio { margin-top: 20px; padding: 50px 20px; gap: 0; }
.docs-vacio__icono { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 17px; background: var(--color-primary-050); color: var(--color-primary-500); }
.docs .docs-vacio svg { color: inherit; }
.docs-vacio .empty-state__title { font-size: 20px; color: var(--color-primary-700); }
.docs-vacio .empty-state__text { max-width: 420px; margin: 10px 0 20px; font-size: 16px; }
.docs-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---- Ficha: cabecera y acciones ---- */
.docs .deca-back { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: -8px 0 17px; font-size: 15px; color: var(--color-primary-600); text-decoration: none; }
.docs .deca-detail-head { display: block; margin: 0; }
.deca-detail-titulo { display: flex; align-items: center; gap: 17px; margin-bottom: 23px; }
.deca-detail-icono { display: grid; place-items: center; flex: none; width: 62px; height: 68px; border: var(--bw-1) solid var(--docs-tesela-borde); background: var(--docs-tesela); color: var(--color-primary-500); border-radius: 17px; }
.deca-detail-icono--borrador { background: var(--state-borrador-bg); border-color: var(--color-border); color: var(--state-borrador); }
.deca-detail-titulo__texto { min-width: 0; }
.docs .deca-detail-id { margin: 0; font-size: 28px; line-height: 1.35; font-weight: 680; letter-spacing: -.55px; color: var(--color-primary-700); overflow-wrap: anywhere; }
.docs .deca-detail-id.mono { font-size: 25px; letter-spacing: -.8px; }
.docs .deca-detail-meta { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: var(--color-text-muted); }
.deca-detail-meta > span:not(.badge) { display: inline-flex; align-items: center; gap: 6px; }
.docs .deca-detail-meta .badge { font-size: 14px; }
.docs .deca-detail-incidencia { margin: 0 0 16px; }
.docs .deca-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: auto; padding-bottom: 22px; margin-bottom: 22px; border-bottom: var(--bw-1) solid var(--color-border); }
.docs .deca-detail-actions .btn { flex: none; min-height: 46px; padding: 11px 15px; font-size: 15px; }
.docs .deca-detail-actions .btn svg { flex: none; }

/* ---- Ficha: rejilla y tarjetas ---- */
.docs .deca-detail-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(290px, 1fr); gap: 22px; align-items: start; }
.docs .deca-detail-main, .docs .deca-detail-side { display: grid; gap: 22px; min-width: 0; }
.docs .ficha-tarjeta { padding: 0; overflow: hidden; min-width: 0; }
.docs .ficha-tarjeta__titulo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 23px 24px 19px; font-size: 19px; line-height: 1.3; font-weight: 650; color: var(--color-primary-700); }
.ficha-tarjeta__dibujo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--color-primary-050); color: var(--color-primary-500); }
.docs .solicitud-pendiente { margin: 0; padding: 20px 24px; }
.docs .solicitud-pendiente .pub-note { margin-bottom: 12px; font-size: 15px; line-height: 1.65; }
.docs .solicitud-pendiente .form-hint { margin: 8px 0 0; font-size: 13px; }
/* Acceso al DeCA (maqueta `access-card`). */
.docs .deca-qr { display: flex; align-items: center; gap: 20px; padding: 25px; background: var(--docs-acceso); border-color: var(--color-primary-100); text-align: left; }
.docs .deca-qr__code { width: 86px; height: 91px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--color-surface); border: var(--bw-1) solid var(--color-primary-100); color: var(--btn-outline-fg); }
.docs .deca-qr__body { flex: 1; min-width: 0; width: auto; }
.deca-qr__titulo { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 650; color: var(--color-primary-700); }
.docs .deca-qr__body > .muted { margin: 5px 0 13px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.docs .deca-qr__url { display: flex; flex-direction: row; gap: 9px; align-items: stretch; margin: 0; }
.docs .deca-qr__url input { flex: 1; min-width: 0; width: 100%; min-height: 46px; padding: 11px 12px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface-2); color: var(--color-text); font-size: 13px; line-height: 1.5; text-overflow: ellipsis; }
.docs .deca-qr__url .btn { flex: none; font-size: 14px; }
.docs .deca-qr .form-hint { display: block; margin: 9px 0 0; font-size: 13px; line-height: 1.55; }
/* Partes y datos del transporte. Los colores de cada papel (T / C) son los del formulario de crear,
   que comparte estas clases y tiene su slice: aqui solo cambia la geometria. */
.docs .ficha-partes .party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0 24px 22px; }
.docs .ficha-partes .party { padding: 17px 18px; border-radius: 12px; }
.docs .ficha-partes .party__head { margin-bottom: 12px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.docs .ficha-partes .party-name { font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--color-text); overflow-wrap: anywhere; }
.docs .ficha-partes .party-nif { margin-top: 8px; font-size: 14px; color: var(--color-text-muted); }
.docs .ficha-partes .party-dom { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }
.docs .detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 18px; margin: 0 24px; padding: 21px 0 24px; border-top: var(--bw-1) solid var(--color-border); font-size: inherit; }
.docs .detail-facts > div { display: block; min-width: 0; font-size: inherit; }
.docs .detail-facts .detail-facts__ancho { grid-column: span 2; }
.detail-facts dt { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.detail-facts dt svg { flex: none; margin-top: 2px; }
.detail-facts dd { margin: 7px 0 0; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--color-text); overflow-wrap: anywhere; }
.detail-facts dd.mono { font-size: 14px; }
.ficha-hash { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; margin: 0; padding: 13px 24px; background: var(--docs-suave-bg); border-top: var(--bw-1) solid var(--color-border); color: var(--color-text-muted); font-size: 13px; }
.ficha-hash code { font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; }
.docs .detail-obs { margin: 0; padding: 18px 24px 22px; border-top: var(--bw-1) solid var(--color-border); font-size: 14px; }
.docs .detail-obs .muted { font-size: 13px; color: var(--color-text-muted); }
.docs .detail-obs p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
/* Envios / servicios (S-281, D-339-16): una tarjeta por envio, como la maqueta (`shipment-card`): franja de titulo,
   trayecto con sus dos extremos unidos por una linea discontinua y los datos del envio en una rejilla. */
.docs .ficha-envios { display: grid; gap: 20px; min-width: 0; }
.ficha-envios__titulo { display: flex; align-items: center; gap: 9px; margin: 0; padding: 16px 24px; background: var(--docs-franja-bg); border-bottom: var(--bw-1) solid var(--color-primary-100); font-size: 18px; line-height: 1.3; font-weight: 650; color: var(--color-primary-700); }
.ficha-envios__titulo svg { flex: none; color: var(--color-primary-500); }
.ficha-envios__modulo { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.ficha-envios__titulo h2 { margin: 0; font: inherit; color: inherit; overflow-wrap: anywhere; }
.ficha-envio__cuerpo { padding: 24px; }
.ficha-envio__trayecto { position: relative; display: grid; gap: 24px; margin: 0 0 25px; }
.ficha-envio__trayecto::before { content: ""; position: absolute; top: 13px; bottom: 25px; left: 6px; border-left: 1px dashed var(--color-border-strong); }
/* Con un solo extremo informado no hay nada que unir. */
.ficha-envio__trayecto:has(> .route-end:only-child)::before { display: none; }
.docs .ficha-envio__trayecto .route-end { position: relative; display: flex; gap: 14px; margin: 0; padding: 0; border: 0; }
.ficha-envio__trayecto .route-end > div { min-width: 0; }
.ficha-envio__punto { flex: none; display: block; box-sizing: border-box; width: 13px; height: 13px; margin-top: 4px; border: 3px solid var(--docs-punto); border-radius: 50%; background: var(--color-surface); }
.route-end--destino .ficha-envio__punto { border-color: var(--docs-punto-destino); background: var(--docs-punto-destino); }
.ficha-envio__extremo { margin: 0 0 6px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--color-text-muted); }
.docs .ficha-envio__trayecto .route-name { font-size: 15px; line-height: 1.5; color: var(--color-text); }
.docs .ficha-envio__trayecto .route-addr { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.docs .ficha-envio__trayecto .route-name + .route-addr { margin-top: 4px; }
.docs .detail-facts.ficha-envio__datos { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; margin: 0; padding: 19px 0 0; }
.ficha-envio__cuerpo > .ficha-envio__datos:first-child { padding-top: 0; border-top: 0; }
.ficha-envio__nota { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
/* Trazabilidad y actividad (maqueta `timeline`): punto, fecha y frase. */
.docs .trace { list-style: none; margin: 0; padding: 0 24px 8px; display: block; }
.docs .trace .trace__ev { position: relative; display: block; padding: 0 0 22px 37px; font-size: 15px; }
.trace__ev::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 25px; height: 25px; box-sizing: border-box; border-radius: 50%; border: var(--bw-1) solid var(--color-border); background: var(--docs-suave-bg) radial-gradient(circle, var(--trace-punto, var(--state-borrador)) 0 3px, transparent 3.6px); }
.trace__ev::after { content: ""; position: absolute; left: 12px; top: 27px; bottom: 0; width: 1px; background: var(--color-border); }
.trace__ev:last-child::after { content: none; }
.trace__ev--emitido { --trace-punto: var(--state-emitido); }
.trace__ev--emitido::before { background-color: var(--state-emitido-bg); border-color: var(--color-accent-100); }
.trace__ev--modificado { --trace-punto: var(--state-modificado); }
.trace__ev--modificado::before { background-color: var(--state-modificado-bg); }
.trace__ev--anulado { --trace-punto: var(--state-anulado); }
.trace__ev--anulado::before { background-color: var(--state-anulado-bg); }
.docs .trace .trace__ev > .muted { display: block; padding-top: 2px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.docs .trace .trace__ev > .muted + span { display: block; margin-top: 6px; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.docs .trace__tecnico { margin-top: 10px; }
.docs .ficha-tarjeta > .form-hint { margin: 0; padding: 0 24px 22px; font-size: 13px; line-height: 1.65; }
/* Versiones. */
.docs .version-timeline { padding: 0 24px 24px; gap: 16px; }
.docs .version-item { border-left: 2px solid var(--color-border-strong); padding-left: 13px; }
.docs .version-item.is-current { border-left-color: var(--color-accent-600); }
.docs .version-item__head { gap: 8px; }
.docs .version-item__head .mono { font-family: var(--font-sans); font-size: 15px; font-weight: 550; color: var(--color-text); }
.docs .version-item__head .badge { font-size: 12px; padding: 3px 7px; }
.docs .version-item__meta { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
.docs .version-item__reason { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--color-text); overflow-wrap: anywhere; }
.docs .version-item__date { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }

/* ---- Ficha: documentos adjuntos (issue #336) ---- */
.docs .deca-adjuntos { border-color: var(--color-primary-100); }
.docs .deca-adjuntos .ficha-tarjeta__titulo { padding: 21px 20px 17px; font-size: 18px; background: var(--docs-ventana-cab); border-bottom: var(--bw-1) solid var(--color-border); }
.deca-adjuntos__rotulo { flex: 1; min-width: 0; }
.deca-adjuntos__cuenta { position: relative; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: var(--bw-1) solid var(--color-primary-100); border-radius: 8px; background: var(--color-surface); color: var(--color-primary-600); font-size: 13px; font-weight: 650; }
.deca-adjuntos__cuerpo { padding: 19px 20px 20px; }
.deca-adjuntos__cuerpo > .form-alert { margin: 0 0 14px; }
.deca-adjuntos__leyenda { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.docs .adjuntos-uso { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.adjuntos-medidor { display: block; width: 100%; height: 6px; margin: 9px 0 17px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--state-borrador-bg); }
.adjuntos-medidor::-webkit-progress-bar { background: var(--state-borrador-bg); border-radius: 10px; }
.adjuntos-medidor::-webkit-progress-value { background: var(--color-primary-500); border-radius: 10px; }
.adjuntos-medidor::-moz-progress-bar { background: var(--color-primary-500); border-radius: 10px; }
.deca-adjuntos__vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 15px; padding: 18px 12px 16px; text-align: center; border: 1px dashed var(--color-border-strong); border-radius: 12px; background: var(--docs-suave-bg); font-size: 14px; }
.deca-adjuntos__vacio svg { color: var(--color-primary-500); }
.docs .adjuntos-lista { display: grid; gap: 10px; margin: 0 0 14px; }
.docs .adjuntos-lista__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px; border: var(--bw-1) solid var(--color-border); border-radius: 11px; background: var(--docs-suave-bg); }
.docs .adjuntos-lista__item:last-child { border-bottom: var(--bw-1) solid var(--color-border); }
.adjuntos-lista__dibujo { display: grid; place-items: center; width: 36px; height: 42px; border-radius: 8px; background: var(--color-primary-050); color: var(--color-primary-500); border: var(--bw-1) solid var(--color-primary-100); }
.adjuntos-lista__dibujo--imagen { color: var(--color-accent-700); background: var(--state-emitido-bg); border-color: var(--color-accent-100); }
.adjuntos-lista__texto { min-width: 0; }
.docs .adjuntos-lista__nombre { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--color-primary-600); overflow-wrap: anywhere; }
.docs .adjuntos-lista__tam { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.docs .adjuntos-lista__retirar .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 8px; color: var(--color-text-muted); }
.docs .adjuntos-subir { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 14px; border: 1px dashed var(--color-border-hover); border-radius: 11px; background: var(--docs-campo-bg); }
.docs .adjuntos-subir .form-label { font-size: 14px; }
.docs .adjuntos-subir input[type="file"] { max-width: 100%; min-height: 44px; font: inherit; font-size: 14px; color: var(--color-text-muted); }
.docs .adjuntos-subir .form-hint { margin: 0; font-size: 12px; line-height: 1.6; }
.docs .adjuntos-subir .btn { align-self: flex-start; }
/* #339, ajuste 2 (maqueta `attachment-add` y `attachment-dropzone`): con la mejora de `app.js` (`is-auto`) la etiqueta
   es el boton discontinuo, el campo nativo se recorta a la vista y la caja entera recibe los archivos que se sueltan. */
.docs .adjuntos-subir__mas { display: none; }
.docs .adjuntos-subir__arrastre { display: block; }
.docs .adjuntos-subir.is-auto { position: relative; padding: 0; border: 0; background: transparent; }
.docs .adjuntos-subir.is-auto input[type="file"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.docs .adjuntos-subir.is-auto .adjuntos-subir__elegir { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 0; padding: 8px 14px; border: 1px dashed var(--color-border-hover); border-radius: 10px; background: var(--docs-campo-bg); color: var(--color-primary-600); font-size: 15px; font-weight: 600; cursor: pointer; }
.docs .adjuntos-subir.is-auto .adjuntos-subir__mas { display: block; flex: none; }
.docs .adjuntos-subir.is-auto .form-hint { text-align: center; }
.docs .adjuntos-subir.is-auto:has(input[type="file"]:focus-visible) .adjuntos-subir__elegir { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.docs .adjuntos-subir.is-arrastrando { background: var(--color-primary-050); outline: 2px dashed var(--color-primary-500); outline-offset: 5px; }
.docs .adjuntos-subir.is-subiendo .adjuntos-subir__elegir { opacity: .6; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    .docs .adjuntos-subir.is-auto .adjuntos-subir__elegir:hover { background: var(--color-primary-050); border-color: var(--color-primary-500); }
}
@media (hover: none) {
    .docs .adjuntos-subir__arrastre { display: none; }
}
.deca-adjuntos__plan { margin: 0; padding: 12px; font-size: 14px; line-height: 1.65; background: var(--docs-suave-bg); border: var(--bw-1) solid var(--color-border); border-radius: 10px; }
.docs .deca-adjuntos__nota { display: flex; gap: 8px; margin: 17px 0 0; padding-top: 15px; border-top: var(--bw-1) solid var(--color-border); font-size: 13px; line-height: 1.65; }
.deca-adjuntos__nota svg { flex: none; margin-top: 3px; }

/* ---- Ventanas de la ficha (maqueta `delivery-dialog`) ----
   Enviar al conductor, solicitar matricula y, con la misma cabecera, anular, guardar como plantilla
   y eliminar borrador (la maqueta no las dibuja: heredan). `display` solo con `[open]`, como el
   visor: un `display` incondicional dejaria la ventana a la vista sin abrir. */
.modal--ventana {
    width: min(720px, calc(100% - 48px)); max-width: 720px; max-height: calc(100dvh - 48px);
    padding: 0; margin: auto; overflow: hidden; border: var(--bw-1) solid var(--color-primary-100);
    border-radius: 22px; box-shadow: var(--docs-ventana-sombra); font-size: 15px;
}
.modal--ventana-breve { width: min(520px, calc(100% - 48px)); }
.modal--ventana[open] { display: flex; flex-direction: column; animation: ventana-entra .18s ease-out; }
.modal--ventana::backdrop { background: var(--docs-velo); backdrop-filter: blur(3px); }
@keyframes ventana-entra { from { opacity: 0; transform: translateY(7px) scale(.992); } to { opacity: 1; transform: none; } }
.ventana__cabecera { flex: none; position: relative; display: flex; align-items: center; gap: 15px; padding: 25px 28px; border-bottom: var(--bw-1) solid var(--color-border); background: var(--docs-ventana-cab); }
.ventana__dibujo { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: var(--bw-1) solid var(--docs-tesela-borde); border-radius: 15px; background: var(--docs-tesela); color: var(--color-primary-500); }
.ventana__titulos { flex: 1; min-width: 0; padding-right: 34px; }
.ventana__antetitulo { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: 1.25px; line-height: 1.6; text-transform: uppercase; color: var(--color-text-muted); }
.ventana__titulo { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.45px; font-weight: 700; color: var(--color-primary-700); overflow-wrap: anywhere; }
.modal--ventana .modal__x { position: absolute; right: 16px; top: 17px; display: block; margin: 0; }
.ventana__cerrar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--bw-1) solid transparent; border-radius: 12px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.ventana__cuerpo { padding: 23px 28px 27px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.ventana__intro { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.ventana__documento { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 13px 15px; border: var(--bw-1) solid var(--color-border); border-radius: 12px; background: var(--docs-suave-bg); }
.ventana__documento-dibujo { display: grid; place-items: center; flex: none; width: 31px; height: 38px; border: var(--bw-1) solid var(--color-primary-100); border-radius: 8px; background: var(--color-primary-050); color: var(--color-primary-500); }
.ventana__documento > div { flex: 1; min-width: 0; }
.ventana__documento strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 650; color: var(--color-text); overflow-wrap: anywhere; }
.ventana__documento > div > span { display: block; margin-top: 3px; font-size: 13px; color: var(--color-text-muted); }
.ventana__documento > .badge { flex: none; font-size: 12px; }
.ventana__canales { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.modal--ventana .ventana__canal { min-width: 0; margin: 0; padding: 19px 17px 17px; gap: 12px; border: var(--bw-1) solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.modal--ventana .ventana__canal--email { border-color: var(--color-primary-100); background: var(--docs-acceso); }
.ventana__canal-titulo, .ventana__seccion-titulo { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--color-primary-700); }
.ventana__seccion-titulo { font-size: 15px; font-weight: 600; }
.ventana__seccion-titulo svg { flex: none; color: var(--color-text-muted); }
.ventana__canal-dibujo { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: var(--r-md); background: var(--color-primary-050); color: var(--color-primary-500); }
/* El verde es el de la marca y es decorativo: el canal lo nombra el texto que lleva al lado. */
.ventana__canal--whatsapp .ventana__canal-dibujo { color: var(--color-whatsapp); background: var(--color-whatsapp-bg); }
.ventana__canal--whatsapp .btn svg { flex: none; color: var(--color-whatsapp); }
.modal--ventana .field-label { font-size: 14px; font-weight: 550; color: var(--color-text-muted); }
.modal--ventana .input { min-height: 46px; padding: 11px 12px; border-color: var(--color-border-strong); border-radius: var(--r-md); font-size: 15px; line-height: 1.5; }
.modal--ventana .ventana__canal .btn { margin-top: auto; min-height: 48px; padding: 11px 9px; font-size: 14px; white-space: normal; line-height: 1.5; }
.ventana__adjuntos { padding: 12px; border: var(--bw-1) solid var(--color-primary-100); border-radius: 10px; background: var(--docs-campo-bg); }
.ventana__adjuntos:has(input:checked) { border-color: var(--docs-sel-borde); background: var(--docs-sel-bg); }
.modal--ventana .ventana__adjuntos .form-check { gap: 9px; font-size: 14px; font-weight: 550; line-height: 1.55; color: var(--color-text); cursor: pointer; }
.modal--ventana .ventana__adjuntos .form-check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-primary-600); }
.modal--ventana .form-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
.modal--ventana .ventana__canal .form-hint { margin: 0; }
.modal--ventana .modal__divider { gap: 13px; margin: 23px 0 19px; font-size: 13px; color: var(--color-text-muted); }
.modal--ventana .ventana__cuerpo > .form-hint { margin: 6px 0 12px; font-size: 14px; }
.modal--ventana .ventana__cuerpo > .modal__form { margin-top: 0; }
.modal--ventana .deca-qr__url { display: flex; flex-direction: row; align-items: stretch; gap: 10px; min-width: 0; margin: 0; }
.modal--ventana .deca-qr__url input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 12px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface-2); color: var(--color-text); font-size: 13px; text-overflow: ellipsis; }
.modal--ventana .deca-qr__url .btn { flex: none; font-size: 14px; min-height: 46px; }
/* Avisos de la solicitud (modalidad, validez, limite): las filas de la maqueta `request-info-row`. */
.modal--ventana .pub-note { margin: 0 0 12px; padding: 14px 17px; border: var(--bw-1) solid var(--color-border); border-radius: 13px; background: var(--docs-acceso); font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }
.modal--ventana .pub-note strong { display: block; font-weight: 650; color: var(--color-text); }
.modal--ventana .pub-note--warn { border-color: #f0dfb9; background: var(--color-warning-bg); color: var(--color-warning); }
.modal--ventana .pub-note--warn strong { color: inherit; }
.modal--ventana .pub-note--danger { border-color: #f3c6bd; background: var(--color-danger-bg); color: var(--state-anulado-fg); }
.modal--ventana .pub-note--info { border-color: var(--color-primary-100); background: var(--color-info-bg); color: var(--color-text); }
.modal--ventana .ventana__canales { margin-top: 20px; }
.ventana__documento + .ventana__canales { margin-top: 0; }
.ventana__qr { margin-top: 20px; padding: 17px 18px; border: var(--bw-1) solid var(--color-border); border-radius: 13px; background: var(--docs-suave-bg); }
.ventana__qr-cabecera { display: flex; align-items: center; gap: 12px; }
.ventana__qr-dibujo { display: grid; place-items: center; flex: none; width: 38px; height: 42px; border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text-muted); }
.ventana__qr-cabecera > div { flex: 1; min-width: 0; }
.modal--ventana .ventana__qr-cabecera .form-hint { margin: 4px 0 0; font-size: 14px; }
.modal--ventana .solicitud-qr { margin: 17px 0 13px; padding-top: 19px; border-top: var(--bw-1) solid var(--color-border); }
.modal--ventana .solicitud-qr img { width: 218px; max-width: 100%; height: auto; padding: 8px; border: var(--bw-1) solid var(--color-border-strong); border-radius: 14px; }
.modal--ventana .ventana__qr .modal__form { margin-top: 13px; }
.modal--ventana .ventana__qr .btn { min-height: 46px; }
.modal--ventana textarea.input { min-height: 96px; resize: vertical; }

/* ---- Bloqueo preventivo de Crear DeCA (issue #39): misma tarjeta, con las medidas de la maqueta ---- */
.deca-blocked { padding: 26px 28px; }
.deca-blocked__msg { font-size: 17px; line-height: 1.5; color: var(--color-primary-700); }
.deca-blocked__hint { font-size: 15px; line-height: 1.65; }
.deca-blocked__actions { gap: 10px; }

/* ---- Efectos al pasar el raton: solo donde hay raton ---- */
@media (hover: hover) and (pointer: fine) {
    .docs-tabla__id:hover, .docs-enlace:hover, .docs .deca-back:hover, .docs .adjuntos-lista__nombre:hover { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
    .docs-tabla tbody tr:hover .docs-tabla__flecha { background: var(--color-primary-050); color: var(--color-primary-600); }
    .deca-sel__limpiar:hover:enabled, .deca-sel__todos:hover:enabled { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
    .ventana__cerrar:hover { color: var(--color-primary-600); background: var(--color-primary-050); border-color: var(--color-primary-100); }
    .docs .adjuntos-lista__retirar .icon-btn:hover { color: var(--state-anulado-fg); background: var(--color-danger-bg); }
}

/* ---- Documentos: cortes de la maqueta ---- */
@media (max-width: 1300.98px) {
    .docs .deca-detail-grid { grid-template-columns: minmax(0, 1.8fr) minmax(265px, 1fr); gap: 18px; }
    .docs .deca-detail-main, .docs .deca-detail-side { gap: 18px; }
    .docs .deca-qr { padding: 21px; gap: 14px; }
    .docs .deca-qr__code { width: 63px; height: 72px; }
    .docs .deca-qr__code svg { width: 37px; height: 37px; }
    .docs .ficha-partes .party-grid { grid-template-columns: 1fr; gap: 12px; margin-left: 21px; margin-right: 21px; }
    .docs .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 21px; margin-right: 21px; }
    .docs .detail-facts .detail-facts__ancho { grid-column: auto; }
    .docs .ficha-tarjeta__titulo { padding-left: 21px; padding-right: 21px; }
    .docs .trace, .docs .version-timeline, .docs .ficha-tarjeta > .form-hint { padding-left: 21px; padding-right: 21px; }
}
@media (max-width: 1270.98px) {
    .docs-filtros__principal { grid-template-columns: minmax(200px, 1fr) 145px 140px 130px; gap: 12px; }
    .docs .deca-filters__periodo { grid-template-columns: minmax(172px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 12px; }
    .docs-filtros__icono { display: none; }
    .docs-filtros__ayuda, .docs .deca-filters__periodo .form-error { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1100.98px) {
    .docs-filtros__principal { grid-template-columns: 1fr 1fr 1fr; }
    .docs-filtros__principal .docs-campo--buscar { grid-column: 1 / -1; }
    .docs .deca-sel__acciones { gap: 12px; }
    .deca-sel__barra { padding: 14px; gap: 12px; }
    .deca-sel__icono { display: none; }
}
@media (min-width: 761px) and (max-width: 1000.98px) {
    .docs .deca-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .docs .deca-detail-side { grid-template-columns: 1fr 1fr; align-items: start; }
    .docs .ficha-partes .party-grid { grid-template-columns: 1fr 1fr; }
    .docs .detail-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .docs .detail-facts .detail-facts__ancho { grid-column: span 2; }
    .docs-tabla__ficha { display: none; }
}
@media (max-width: 760.98px) {
    .app-main:has(> .docs) { padding: 24px 17px 20px; }
    .docs { font-size: 16px; }
    .docs .page-header.docs-cabecera { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 20px; }
    .docs-cabecera .page-title { font-size: 28px; }
    .docs-cabecera .deca-toolbar__new .btn { min-height: 48px; font-size: 16px; }
    .docs-cabecera .deca-toolbar__new:not(.btn-group--split) { display: flex; }
    .docs-cabecera .deca-toolbar__new:not(.btn-group--split) .btn { flex: 1; }
    .docs .docs-filtros { padding: 18px 16px; }
    .docs-filtros__principal { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
    .docs-filtros__principal .docs-campo--buscar, .docs-filtros__principal > .docs-campo:last-child { grid-column: 1 / -1; }
    .docs .deca-filters__periodo { grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 18px; padding-top: 18px; }
    .docs .deca-filters__periodo > .docs-campo:first-of-type, .docs-filtros__aplicar { grid-column: 1 / -1; }
    .docs .docs-campo .docs-campo__caja { height: 48px; font-size: 16px; padding: 0 10px; }
    .docs .docs-campo select.docs-campo__caja { padding-right: 30px; }
    .docs-campo__caja--buscar input { font-size: 16px; }
    .docs-filtros__aplicar { min-height: 48px; font-size: 16px; }
    .docs-filtros__ayuda { font-size: 14px; }
    .docs-resultados { margin-top: 18px; gap: 10px; }
    .docs .deca-count { font-size: 16px; }
    .docs-enlace { min-height: 44px; }
    .deca-sel__barra { top: calc(var(--topbar-h) + 9px); display: grid; grid-template-columns: 1fr; gap: 9px; padding: 13px 14px; border-radius: 12px; }
    :root:has(.deca-sel__barra) { --docs-sel-alto: 128px; }
    .deca-sel__icono, .deca-sel__nota { display: none; }
    .docs .deca-sel__contador { font-size: 16px; }
    .docs .deca-sel__acciones { justify-content: space-between; gap: 10px; }
    .deca-sel__limpiar { font-size: 14px; text-align: left; line-height: 1.5; }
    .deca-sel__zip { flex: 1; min-width: 0; max-width: 230px; padding: 10px 13px; font-size: 15px; }
    .deca-sel__alcance { padding: 10px 2px 13px; gap: 4px; }
    .deca-sel__alcance p, .deca-sel__todos { font-size: 14px; }
    .deca-sel__alcance-tabla { display: none; }
    .deca-sel__alcance-tarjeta { display: inline; }
    .deca-sel__todos { min-height: 44px; }
    .deca-sel__movil { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 12px; color: var(--color-text-muted); }
    .docs .deca-sel__pagina-movil { display: inline-flex; align-items: center; gap: 10px; flex-basis: auto; min-height: 44px; font-size: 14px; font-weight: 550; cursor: pointer; }
    .deca-sel__movil small { max-width: 110px; text-align: right; font-size: 13px; line-height: 1.5; }
    .docs input.docs-casilla { width: 20px; height: 20px; }
    /* Tabla -> tarjetas: rejilla de la maqueta. Los papeles ARIA van escritos en la vista. */
    .docs .docs-tabla-caja { overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
    .docs .docs-tabla { display: block; min-width: 0; width: 100%; }
    .docs .docs-tabla thead { display: none; }
    .docs .docs-tabla tbody { display: grid; gap: 14px; }
    .docs .docs-tabla tbody tr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 11px 10px; padding: 19px 17px; background: var(--color-surface); border: var(--bw-1) solid var(--color-border); border-radius: 14px; box-shadow: var(--sh-md); }
    .docs .docs-tabla tbody tr:hover { background: var(--color-surface); }
    .docs .docs-tabla tbody tr:has(.js-sel:checked) { background: var(--docs-fila-sel); border-color: var(--docs-sel-borde); box-shadow: inset 3px 0 0 var(--color-primary-600); }
    .docs .docs-tabla td, .docs .docs-tabla td.docs-tabla__abrir { display: block; min-width: 0; padding: 0; border: 0; font-size: 16px; text-align: left; }
    .docs .docs-tabla td.col-sel { position: absolute; top: 9px; right: 7px; width: 44px; height: 44px; padding: 0; }
    .docs .docs-tabla .docs-tabla__doc { grid-column: 1 / -1; grid-row: 1; padding-right: 42px; }
    .docs-tabla__ficha { display: none; }
    .docs-tabla__id { font-size: 16px; line-height: 1.5; }
    .docs-tabla__id.mono { font-size: 14px; }
    .docs-tabla__tipo-movil { display: block; margin-top: 4px; font-size: 14px; color: var(--color-text-muted); }
    .docs .deca-sel__motivo { font-size: 13px; }
    .docs .docs-tabla .docs-tabla__fecha { grid-row: 2; grid-column: 1; align-self: center; font-size: 14px; }
    .docs .docs-tabla .docs-tabla__estado { grid-row: 2; grid-column: 2; }
    .docs .docs-tabla .docs-tabla__tipo { display: none; }
    .docs .docs-tabla .docs-tabla__parte { grid-column: 1 / -1; grid-row: 3; padding-top: 12px; border-top: var(--bw-1) solid var(--color-border); }
    .docs-tabla__rotulo { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
    .docs-tabla__rotulo-lector { display: block; }
    .docs .docs-tabla .docs-tabla__trayecto { grid-column: 1 / -1; grid-row: 4; margin: 1px 0 3px; }
    .docs-ruta { padding-left: 15px; font-size: 15px; line-height: 1.65; }
    .docs-ruta__punto { top: 9px; }
    .docs-ruta--origen { padding-bottom: 10px; }
    .docs .docs-tabla .docs-tabla__matricula { grid-column: 1; grid-row: 5; }
    .docs-matricula { font-size: 14px; }
    .docs .badge { font-size: 14px; }
    .docs .docs-tabla .docs-tabla__abrir { grid-column: 2; grid-row: 5; align-self: end; justify-self: end; }
    .docs-tabla__flecha { width: 44px; height: 44px; background: var(--color-primary-050); color: var(--color-primary-600); }
    .docs .deca-pager { align-items: flex-start; gap: 13px; }
    .deca-pager__cuenta, .docs .deca-pager__nav { width: 100%; }
    .docs .deca-pager .btn { flex: 1; font-size: 15px; }
    .docs .docs-vacio { padding: 35px 20px; }
    /* Ficha */
    .docs .deca-back { min-height: 44px; font-size: 16px; }
    .deca-detail-titulo { gap: 11px; align-items: flex-start; margin-bottom: 21px; }
    .deca-detail-icono { width: 40px; height: 46px; border-radius: 11px; }
    .deca-detail-icono svg { width: 23px; height: 23px; }
    .docs .deca-detail-id { font-size: 22px; letter-spacing: -.3px; line-height: 1.45; }
    .docs .deca-detail-id.mono { font-size: 19px; letter-spacing: -.6px; }
    .docs .deca-detail-meta { gap: 9px 12px; }
    .docs .deca-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-bottom: 20px; padding-bottom: 20px; }
    .docs .deca-detail-actions .btn, .docs .deca-detail-actions .inline-form .btn { min-height: 48px; padding: 11px 9px; font-size: 15px; line-height: 1.5; white-space: normal; }
    .docs .deca-detail-actions > .btn:first-child { grid-column: 1 / -1; font-size: 16px; }
    .docs .deca-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .docs .deca-detail-main, .docs .deca-detail-side { gap: 18px; }
    .docs .card { border-radius: 16px; }
    .docs .ficha-tarjeta__titulo { padding: 20px 18px 17px; }
    .docs .deca-qr { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 20px 18px; text-align: left; }
    .docs .deca-qr__code { width: 54px; height: 59px; border-radius: 11px; }
    .docs .deca-qr__code svg { width: 33px; height: 33px; }
    .docs .deca-qr__body { min-width: calc(100% - 67px); }
    .docs .deca-qr__url { flex-direction: column; margin-left: -66px; }
    .docs .deca-qr__url input { min-height: 48px; font-size: 16px; }
    .docs .deca-qr__url .btn { align-self: flex-start; min-height: 46px; font-size: 15px; }
    .docs .deca-qr .form-hint { margin-left: -66px; font-size: 14px; }
    .docs .ficha-partes .party-grid { grid-template-columns: 1fr; margin: 0 18px 20px; gap: 13px; }
    .docs .ficha-partes .party-name { font-size: 17px; }
    .docs .ficha-partes .party-nif { font-size: 15px; }
    .docs .ficha-partes .party-dom { font-size: 16px; line-height: 1.6; }
    .docs .detail-facts { grid-template-columns: 1fr 1fr; margin: 0 18px; gap: 20px 15px; padding: 20px 0 22px; }
    .docs .detail-facts .detail-facts__ancho { grid-column: 1 / -1; }
    .detail-facts dt { font-size: 14px; }
    .detail-facts dd { font-size: 16px; }
    .ficha-hash { padding: 14px 18px; font-size: 14px; }
    .docs .detail-obs { padding: 18px; }
    .ficha-envios__titulo { padding: 16px 18px; }
    .ficha-envios__modulo { font-size: 14px; }
    .ficha-envio__cuerpo { padding: 21px 18px; }
    .ficha-envio__extremo { font-size: 14px; }
    .docs .ficha-envio__trayecto .route-name, .docs .ficha-envio__trayecto .route-addr { font-size: 16px; }
    .docs .detail-facts.ficha-envio__datos { grid-template-columns: 1fr; gap: 19px; margin: 0; padding: 19px 0 0; }
    .docs .trace { padding: 0 18px 5px; }
    .docs .trace .trace__ev { font-size: 16px; }
    .docs .trace .trace__ev > .muted { font-size: 14px; }
    .docs .ficha-tarjeta > .form-hint { padding: 0 18px 22px; font-size: 14px; }
    .docs .version-timeline { padding: 0 18px 22px; }
    .docs .version-item__meta, .docs .version-item__date { font-size: 14px; }
    .docs .version-item__reason { font-size: 16px; }
    .docs .version-item__head .mono { font-size: 16px; }
    .docs .version-item__head .badge { font-size: 14px; }
    .docs .solicitud-pendiente { padding: 18px; }
    .docs .deca-adjuntos .ficha-tarjeta__titulo { padding: 19px 18px 17px; font-size: 19px; }
    .deca-adjuntos__cuerpo { padding: 18px; }
    .deca-adjuntos__leyenda, .docs .adjuntos-lista__nombre { font-size: 15px; }
    .docs .adjuntos-uso, .docs .adjuntos-lista__tam, .docs .deca-adjuntos__nota, .docs .adjuntos-subir .form-hint, .deca-adjuntos__plan { font-size: 14px; }
    .docs .adjuntos-subir input[type="file"] { font-size: 16px; }
    .docs .adjuntos-subir .btn { align-self: stretch; min-height: 48px; font-size: 16px; }
    .docs .adjuntos-subir.is-auto .adjuntos-subir__elegir { min-height: 48px; font-size: 16px; }
}
@media (max-width: 600.98px) {
    .modal--ventana { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; font-size: 16px; }
    .ventana__cabecera { padding: 19px 18px; gap: 11px; align-items: flex-start; }
    .ventana__dibujo { width: 41px; height: 45px; border-radius: 12px; }
    .ventana__dibujo svg { width: 23px; height: 23px; }
    .ventana__titulos { padding-right: 30px; }
    .ventana__antetitulo { margin-bottom: 4px; font-size: 11px; letter-spacing: .9px; }
    .ventana__titulo { font-size: 21px; letter-spacing: -.25px; }
    .modal--ventana .modal__x { right: 6px; top: 11px; }
    .ventana__cuerpo { padding: 19px 18px 22px; }
    .ventana__intro { margin-bottom: 18px; font-size: 16px; line-height: 1.65; }
    .ventana__documento { flex-wrap: wrap; gap: 10px; padding: 13px; margin-bottom: 19px; }
    .ventana__documento > div > span { font-size: 14px; }
    .ventana__documento > .badge { margin-left: 41px; font-size: 13px; }
    .ventana__canales { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .modal--ventana .ventana__canal { padding: 17px 15px 16px; }
    .ventana__canal-titulo { font-size: 17px; }
    .ventana__seccion-titulo { font-size: 16px; }
    .modal--ventana .field-label { font-size: 15px; }
    .modal--ventana .input, .modal--ventana .deca-qr__url input { min-height: 48px; font-size: 16px; }
    .modal--ventana .ventana__canal .btn, .modal--ventana .btn { min-height: 48px; font-size: 16px; }
    .modal--ventana .modal__divider { margin: 22px 0 18px; font-size: 14px; }
    .modal--ventana .form-hint, .modal--ventana .ventana__cuerpo > .form-hint, .modal--ventana .ventana__qr-cabecera .form-hint { font-size: 15px; }
    .modal--ventana .deca-qr__url { flex-direction: column; gap: 9px; margin-left: 0; }
    .modal--ventana .deca-qr__url input { flex: none; }
    .modal--ventana .pub-note { padding: 14px; font-size: 15px; }
    .modal--ventana .ventana__adjuntos .form-check { font-size: 15px; }
    .ventana__qr { margin-top: 17px; padding: 16px 14px; }
    .ventana__qr-cabecera { align-items: flex-start; gap: 10px; }
}
@media (max-width: 360.98px) {
    .app-main:has(> .docs) { padding-left: 13px; padding-right: 13px; }
    .docs .docs-filtros { padding: 18px 15px; }
    .docs-filtros__principal, .docs .deca-filters__periodo { grid-template-columns: 1fr; }
    .docs-resultados { align-items: flex-start; flex-wrap: wrap; }
    .deca-sel__movil { flex-wrap: wrap; gap: 0; }
    .deca-sel__movil small { max-width: none; margin-left: 30px; text-align: left; }
    .docs .deca-sel__acciones { align-items: stretch; }
    .deca-sel__zip { padding: 9px 10px; font-size: 14px; }
    .docs .docs-tabla tbody tr { padding-left: 15px; padding-right: 15px; }
    .docs-tabla__id { font-size: 15px; }
    .deca-detail-icono { display: none; }
    .docs .deca-detail-actions { grid-template-columns: 1fr; }
    .docs .deca-detail-actions > .btn:first-child { grid-column: auto; }
    .docs .detail-facts { grid-template-columns: 1fr; }
    .docs .detail-facts .detail-facts__ancho { grid-column: auto; }
    .docs .deca-qr__url, .docs .deca-qr .form-hint { margin-left: 0; }
    .docs .deca-qr__code { display: none; }
    .docs .deca-qr__body { min-width: 100%; }
    .ventana__cabecera { padding-left: 15px; padding-right: 15px; }
    .ventana__dibujo { display: none; }
    .ventana__titulos { padding-right: 36px; }
    .ventana__titulo { font-size: 20px; }
    .ventana__cuerpo { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .modal--ventana[open], .deca-sel__zip[aria-busy="true"]::before { animation: none; }
    .deca-sel__barra, .docs input.docs-casilla { transition: none; }
}
@media print {
    .docs .deca-sel, .deca-sel__barra, .deca-sel__alcance, .deca-sel__movil, .docs .deca-sel__aviso, .docs .docs-tabla .col-sel, .docs-filtros { display: none !important; }
    /* En pantalla la tabla no baja de 1150 px y se recorre dentro de su tarjeta; el papel no se recorre: en un A4
       se cortaban las ultimas columnas. Impresa se ajusta a la hoja y parte los textos largos. */
    .docs .docs-tabla-caja { overflow: visible; break-inside: auto; }
    /* Reparto automatico: con los porcentajes de pantalla sobre 190 mm la fecha y el tipo, que no se parten,
       invadian la columna de al lado. La flecha de «abrir» no dice nada en papel. */
    .docs .docs-tabla { min-width: 0; table-layout: auto; font-size: 12px; }
    .docs .docs-tabla th, .docs .docs-tabla td { width: auto; padding: 8px 6px; }
    .docs .docs-tabla th:last-child, .docs .docs-tabla td.docs-tabla__abrir { display: none; }
    .docs .docs-tabla tr { break-inside: avoid; }
    .docs-tabla__ficha { display: none; }
    .docs .deca-detail-grid { grid-template-columns: 1fr; }
    .docs .card { break-inside: avoid; box-shadow: none; }
}

/* ============================================================================
   Crear DeCA (issues #22 y #36; rediseno #339, S-224/S-225): mercancias y viajeros
   ----------------------------------------------------------------------------
   Maquetas `Docarga-crear-deca-mercancias.html` (version corregida del 04/10, con su bloque final
   «Actualizacion de diseno») y `Docarga-crear-deca-viajeros.html` (familia A). Es UNA vista
   (`views/deca/form.php`) para crear, editar un borrador y modificar un documento emitido. Los
   cortes son los de la maqueta —1400, 1270, 1000, 760, 560 y 360 px, escritos con `.98`— y son de
   ventana. Todo va acotado a `.deca-wizard` porque `.card`, `.party`, `.combo`, `.form-field`,
   `.addr-group`, `.line-row` y `.form-check` las comparten otras pantallas (Plantillas DeCA, la
   ficha, Maestros) que tienen su propia slice.
   Lo que NO cambia: el marcado que mueve `app.js` (pasos `.wizard-step`, barra `.wizard-steps`,
   `.wizard-nav`, `data-*`). La maqueta llama `wizard-step` al boton del paso; aqui ese nombre es
   el del PANEL del paso, asi que el aspecto de la maqueta se viste sobre las clases actuales.
   Los grises de texto de la maqueta (#73879a, #8293a5, #7b8fa2, #8a9cac…) no llegan a 4,5:1: el
   secundario es `--color-text-muted`, y `--color-text-subtle` dentro de la tarjeta de la empresa
   propia (caso 181). Las reglas anteriores de estas clases siguen arriba en la hoja, fijadas por
   casos de issues previos: esta seccion las gana por especificidad, no por borrado.
   ============================================================================ */
.app-main:has(> .deca-wizard) { --content-max: 1530px; max-width: 1530px; padding: 30px 32px 24px; }
/* La barra de acciones va pegada abajo y la cabecera, arriba: al enfocar un campo o saltar a el,
   la pagina reserva los dos huecos para que ninguna de las dos lo tape (WCAG 2.4.11). */
:root:has(.deca-wizard) { scroll-padding-top: calc(var(--topbar-h) + 20px); scroll-padding-bottom: 124px; }
.deca-wizard { max-width: 920px; font-size: 15px; line-height: 1.6; }
.deca-wizard .card-title[tabindex="-1"] { scroll-margin-top: calc(var(--topbar-h) + 24px); }

/* ---- Cabecera (maqueta `create-heading`) ----
   Una rejilla: baldosa del dibujo a la izquierda y, a su derecha, antetitulo, titulo y subtitulo.
   «Referencia normativa» sigue siendo un `<details>` (se abre sin JavaScript): su resumen se
   coloca arriba a la derecha, como el boton de la maqueta, y su texto se abre debajo, a todo el
   ancho. `display: contents` deja entrar en la rejilla a los hijos del bloque de texto. */
.deca-wizard .deca-header { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; margin-bottom: 26px; }
.deca-wizard .deca-header__text { display: contents; }
.deca-wizard .deca-type-icon { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 17px; background: var(--crear-mercancias-bg); border: 1px solid var(--crear-mercancias-borde); box-shadow: inset 0 1px 0 #fff, 0 5px 10px #1a67ad08; }
.deca-wizard .deca-header--viajeros .deca-type-icon { background: var(--crear-viajeros-bg); border-color: var(--crear-viajeros-borde); }
.deca-wizard .deca-header__kicker { grid-column: 2; grid-row: 1; margin: 0 0 4px; font-size: 11px; line-height: 1.5; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); }
.deca-wizard .deca-header .page-title { grid-column: 2; grid-row: 2; font-size: 29px; line-height: 1.25; font-weight: var(--fw-h1); letter-spacing: -.9px; }
.deca-wizard .deca-header .page-subtitle { grid-column: 2; grid-row: 3; margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
/* El titulo y el subtitulo dejan sitio al resumen de la referencia, que va encima a la derecha. */
.deca-wizard .deca-header:has(.deca-norma) :is(.deca-header__kicker, .page-title, .page-subtitle) { padding-right: 210px; }
/* El tipo, en el gris azulado de la maqueta y mas fino. La preposicion queda fuera del tramo, como
   pidio el cliente en el #274 (la maqueta la incluye: se mantiene lo acordado). */
.deca-wizard .deca-header__tipo, .deca-wizard .deca-header--viajeros .deca-header__tipo { color: var(--crear-titulo-tipo); font-weight: 450; }
.deca-wizard .deca-norma { grid-column: 1 / -1; grid-row: 4; margin: 0; }
.deca-wizard .deca-norma > summary {
    position: absolute; top: 4px; right: 0; display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 10px 4px; border-radius: 8px; background: none; list-style: none;
    font-size: 14px; line-height: 1.4; color: var(--color-text-muted); white-space: nowrap;
}
.deca-wizard .deca-norma > summary::-webkit-details-marker { display: none; }
/* Libro y flecha de la maqueta, como mascaras: toman el color del texto y no anaden un pictograma
   de contorno al marcado de la cabecera (lo vigila el caso 175). */
.deca-wizard .deca-norma > summary::before, .deca-wizard .deca-norma > summary::after { content: ""; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.deca-wizard .deca-norma > summary::before { width: 17px; height: 17px; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5C9 3 5 3 2 4v15c3-1 7-1 10 1 3-2 7-2 10-1V4c-3-1-7-1-10 1zM12 5v15'/%3E%3C/svg%3E"); }
.deca-wizard .deca-norma > summary::after { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); }
.deca-wizard .deca-norma[open] > summary { color: var(--color-primary-600); }
.deca-wizard .deca-norma[open] > summary::after { transform: rotate(180deg); }
.deca-wizard .deca-norma[open] { margin-top: 18px; padding: 20px 23px; background: var(--crear-plantilla); border: 1px solid var(--crear-plantilla-borde); border-radius: 13px; }
.deca-wizard .deca-norma__texto { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }
.deca-wizard .deca-norma__texto + .deca-norma__texto { margin-top: 10px; }
.deca-wizard .deca-norma__texto a { color: var(--color-primary-600); text-underline-offset: 3px; }
.deca-wizard > .form-alert { margin-bottom: 18px; }

/* ---- Pasos (maqueta `wizard-navigation`) ---- */
.deca-wizard .wizard-navigation { margin: 0 0 25px; }
/* Sin JavaScript la lista sigue oculta (los pasos se apilan): la region no deja su hueco. */
.deca-wizard .wizard-navigation:has(> .wizard-steps[hidden]) { display: none; }
.deca-wizard .wizard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 6px; border: 1px solid var(--color-border); border-radius: 15px; background: var(--color-surface); box-shadow: 0 2px 8px #193b6403; }
.deca-wizard .wizard-steps__item { min-width: 0; }
.deca-wizard .wizard-steps__btn { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; border-radius: 10px; background: none; color: var(--color-text-muted); text-align: left; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.deca-wizard .wizard-steps__num { display: inline-flex; width: 34px; height: 34px; border: 1px solid var(--crear-num-borde); border-radius: 10px; background: var(--crear-num-bg); color: var(--color-text-muted); font-family: inherit; font-size: 15px; font-weight: 650; }
.deca-wizard .wizard-steps__mark { width: 34px; height: 34px; border-radius: 10px; }
.deca-wizard .wizard-steps__copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.deca-wizard .wizard-steps__label { font-size: 15px; line-height: 1.4; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deca-wizard .wizard-steps__sub { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deca-wizard .wizard-steps__flecha { display: inline-flex; flex: none; color: var(--crear-cuenta); }
.deca-wizard .wizard-steps__item:last-child .wizard-steps__flecha { visibility: hidden; }
/* El paso en curso: fondo azulado, rotulo azul y numero sobre el degradado del boton principal (el
   de la maqueta, #168deb, deja el blanco en 3,47:1). */
.deca-wizard .wizard-steps__item.is-active .wizard-steps__btn { background: var(--crear-paso-actual); color: var(--color-primary-600); }
.deca-wizard .wizard-steps__item.is-active .wizard-steps__num,
.deca-wizard .wizard-steps__item.is-done.is-active .wizard-steps__num { background: var(--grad-primary); border-color: transparent; color: var(--color-on-accent); box-shadow: 0 3px 7px #0d7ddd21; }
.deca-wizard .wizard-steps__item.is-done .wizard-steps__num { background: var(--crear-num-bg); border-color: var(--crear-num-borde); color: var(--color-text-muted); }
/* Completo y pendiente (issue #36 §1.8): la marca sustituye al numero; se distinguen por su dibujo
   —aspa o visto— ademas de por el color. El paso en curso y completo conserva su numero azul,
   como en la maqueta (`.is-complete:not(.is-current)`); el pendiente manda tambien sobre el en curso. */
.deca-wizard .wizard-steps__item.is-complete .wizard-steps__mark--ok { background: var(--crear-ok-bg); border-color: var(--crear-ok-borde); color: var(--form-green); }
.deca-wizard .wizard-steps__item.is-incomplete .wizard-steps__mark--bad { background: var(--crear-mal-bg); border-color: var(--crear-mal-borde); color: var(--form-red); }
.deca-wizard .wizard-steps__item.is-active.is-complete .wizard-steps__num { display: inline-flex; }
.deca-wizard .wizard-steps__item.is-active.is-complete .wizard-steps__mark--ok { display: none; }
/* Colores forzados (WCAG 1.4.1): alli los fondos se pierden, y el paso en curso solo se distinguia por el suyo. Se le
   da un marco con el color de seleccion del sistema; el numero y las marcas de completo (visto) y pendiente (aspa)
   conservan su filete y su dibujo en el color de texto del sistema. */
@media (forced-colors: active) {
    .deca-wizard .wizard-steps__btn { border: 2px solid Canvas; }
    .deca-wizard .wizard-steps__item.is-active .wizard-steps__btn { border-color: Highlight; }
    .deca-wizard .wizard-steps__item.is-active .wizard-steps__label { text-decoration: underline; text-underline-offset: 3px; }
    /* El degradado del numero en curso es una imagen de fondo, y esas no se fuerzan: se retira para que el numero
       se lea sobre el fondo del sistema. Los colores de texto y de filete los pone el propio modo. */
    .deca-wizard .wizard-steps__item.is-active .wizard-steps__num,
    .deca-wizard .wizard-steps__item.is-done.is-active .wizard-steps__num { background: Canvas; box-shadow: none; }
}
.deca-wizard.is-wizard .wizard-step.is-active { animation: crear-aparece .2s var(--ease) both; }
@keyframes crear-aparece { from { opacity: .6; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Tarjeta de apartado (maqueta `form-card`) ---- */
.deca-wizard .form-card { padding: 0; margin-bottom: 18px; border-radius: 17px; min-width: 0; }
.deca-wizard .form-card-header { display: flex; align-items: center; gap: 12px; padding: 21px 25px; border-bottom: 1px solid var(--crear-filete); }
.deca-wizard .form-card-header > div { min-width: 0; flex: 1; }
.deca-wizard .card-title { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.35px; font-weight: 650; color: var(--color-primary-700); }
.deca-wizard .form-card-header p, .deca-wizard .lineas-cabecera p, .deca-wizard .revision-cabecera p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.deca-wizard .section-icon { display: grid; place-items: center; flex: none; width: 39px; height: 39px; background: var(--crear-icono-bg); color: var(--crear-icono); border: 1px solid var(--crear-icono-borde); border-radius: 11px; }
.deca-wizard .section-count { margin-left: auto; font-size: 24px; line-height: 1; font-weight: 450; letter-spacing: -1px; color: var(--crear-cuenta); }
.deca-wizard .form-card-body { padding: 25px; }

/* ---- Campos (maqueta `form-field`, `field-label`, `field-help`, `field-error`) ---- */
.deca-wizard .deca-form .form-field { gap: 7px; margin-bottom: 19px; min-width: 0; }
.deca-wizard .form-label { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--crear-rotulo); }
.deca-wizard .form-label .form-hint { margin-left: 4px; font-weight: 400; }
/* El asterisco de la maqueta (#d1626a) da 3,71:1 sobre blanco: se usa su rojo de formulario. */
.deca-wizard .req { margin-left: 2px; font-weight: 600; color: var(--form-red); }
.deca-wizard .form-hint { margin: 0; font-size: 12px; line-height: 1.65; font-weight: 400; color: var(--color-text-muted); }
.deca-wizard .form-error { font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--form-red); }
.deca-wizard .deca-form :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea),
.deca-wizard .combo__trigger {
    width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; font-size: 15px; line-height: 1.5;
    color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: 9px;
}
.deca-wizard .deca-form textarea { min-height: 110px; line-height: 1.6; }
.deca-wizard .deca-form :is(input, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
.deca-wizard .deca-form :is(input, select, textarea).is-error,
.deca-wizard .deca-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--form-red); }
.deca-wizard .form-check { align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--crear-rotulo); cursor: pointer; }
.deca-wizard .form-check input, .deca-wizard .radio-inline input, .deca-wizard .radio-row input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-primary-500); cursor: pointer; }
.deca-wizard .form-nota { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 19px; padding: 11px 14px; border: 1px solid var(--crear-nota-borde); border-radius: 10px; background: var(--crear-nota-bg); font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.deca-wizard .form-nota svg { flex: none; margin-top: 2px; }

/* Desplegables de Maestros: el mismo campo, con su lista flotante de la maqueta. */
.deca-wizard .combo__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.deca-wizard .combo__trigger svg { flex: none; color: var(--color-text-muted); }
.deca-wizard .combo__value { min-width: 0; overflow-wrap: anywhere; }
.deca-wizard .combo__value.is-placeholder { color: var(--color-text-muted); }
.deca-wizard .combo__pop, .deca-wizard .combo-inline__list, .deca-wizard .combo-addr__list { top: calc(100% + 6px); margin: 0; padding: 5px; border: 1px solid var(--color-border-strong); border-radius: 10px; box-shadow: 0 8px 28px #1738531a; }
.deca-wizard .combo__search { margin-bottom: 5px; }
.deca-wizard .combo__list, .deca-wizard .combo-inline__list, .deca-wizard .combo-addr__list { max-height: 245px; }
.deca-wizard .combo__opt { min-height: 46px; justify-content: center; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.4; color: var(--crear-rotulo); }
.deca-wizard .combo__opt:focus { background: var(--color-primary-050); color: var(--color-primary-600); }
.deca-wizard .combo__sub { font-size: 12px; color: var(--color-text-muted); }
.deca-wizard .combo__opt:has(.combo__ico) { justify-content: flex-start; }
.deca-wizard .combo__lbl { font-weight: 550; }
/* La lupa del campo (maqueta `combo-input > .icon`). Va dibujada desde la hoja, con mascara, para no tocar el marcado del
   desplegable ni del buscador en linea: su nombre accesible y sus ganchos son los de siempre. */
.deca-wizard .combo__trigger::before { content: ""; flex: none; width: 17px; height: 17px; background: var(--color-text-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.deca-wizard .combo__trigger .combo__value { flex: 1; min-width: 0; }
.deca-wizard .combo-inline::before { content: ""; position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); pointer-events: none; background: var(--color-text-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.deca-wizard .deca-form .combo-inline input.combo-inline__input { padding-left: 38px; }
@media (forced-colors: active) {
    .deca-wizard .combo__trigger::before, .deca-wizard .combo-inline::before { background: CanvasText; }
}
.deca-wizard .combo__add { display: flex; align-items: center; min-height: 44px; margin-top: 5px; padding: 8px 10px; font-size: 13px; color: var(--color-primary-600); }

/* ---- Tipo de documento (la aplicacion lo ofrece con los dos modulos activos; la maqueta no lo dibuja) ---- */
.deca-wizard .deca-typecards { margin: 0 0 18px; }
.deca-wizard .deca-typecards__legend { margin-bottom: 12px; font-size: 15px; font-weight: 650; color: var(--crear-rotulo); }
.deca-wizard .deca-typecards__grid { gap: 12px; }
.deca-wizard .deca-typecard { align-items: center; gap: 11px; min-height: 91px; padding: 16px 44px 16px 14px; border: 1px solid var(--color-border-strong); border-radius: 12px; }
.deca-wizard .deca-typecard__title { font-size: 15px; line-height: 1.5; font-weight: 650; color: var(--color-text); }
.deca-wizard .deca-typecard__desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.deca-wizard .deca-typecard__check { top: 50%; right: 14px; display: grid; place-items: center; width: 19px; height: 19px; margin-top: -10px; border: 1px solid var(--crear-control-borde); border-radius: 50%; background: var(--color-surface); color: transparent; opacity: 1; }
.deca-wizard .deca-typecard__check svg { width: 12px; height: 12px; }
.deca-wizard .deca-typecard.is-active, .deca-wizard .deca-typecard--viajeros.is-active { background: var(--crear-papel-sel); border-color: var(--crear-papel-borde); box-shadow: 0 0 0 1px #c0ddf333; }
.deca-wizard .deca-typecard.is-active .deca-typecard__icon { color: var(--color-primary-500); }
.deca-wizard .deca-typecard.is-active .deca-typecard__check { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-on-accent); }
.deca-wizard .deca-typecard__flag, .deca-wizard .deca-typecard--viajeros .deca-typecard__flag { padding: 2px 7px; border: 1px solid var(--color-primary-100); border-radius: 5px; background: var(--color-primary-050); color: var(--color-primary-600); font-size: 11px; letter-spacing: .4px; }

/* ---- Plantilla (maquetas `template-bar` y `template-applied`) ---- */
.deca-wizard .deca-template-bar { align-items: center; gap: 12px; flex-wrap: nowrap; margin-bottom: 18px; padding: 15px 18px; border: 1px solid var(--crear-plantilla-borde); border-radius: 13px; background: var(--crear-plantilla); font-size: 14px; }
.deca-wizard .deca-template-bar__icono { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--crear-icono-borde); border-radius: 10px; background: var(--color-surface); color: var(--crear-icono); }
.deca-wizard .deca-template-bar__rotulo { min-width: 0; flex: 1; }
.deca-wizard .deca-template-bar__label { display: block; font-size: 15px; font-weight: 650; color: var(--crear-rotulo); }
.deca-wizard .deca-template-bar__desc { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); }
.deca-wizard .deca-template-bar .deca-from-template { min-width: 190px; max-width: 44%; }
.deca-wizard .deca-template-bar .deca-from-template select { max-width: none; min-height: 44px; font-size: 14px; }
.deca-wizard .deca-template-bar--aplicada { border-color: var(--crear-aplicada-borde); background: var(--crear-aplicada-bg); color: var(--form-green); }
.deca-wizard .deca-template-bar--aplicada .deca-template-bar__icono { width: auto; height: auto; border: 0; background: none; color: var(--form-green); }
.deca-wizard .deca-template-bar__texto { flex: 1; min-width: 0; margin: 0; }
.deca-wizard .deca-template-bar__tag, .deca-wizard .deca-template-bar__msg { color: var(--form-green); }

/* ---- Tu papel (maquetas `role-selector` y `default-setting`) ----
   Cada radio es una tarjeta. El radio sigue en el marcado y recibe el foco; se dibuja su marca en
   la tarjeta. Con colores forzados la marca dibujada no se distinguiria: vuelve el radio del sistema. */
.deca-wizard .deca-roleself { display: block; margin: 0; padding: 0; border: 0; }
.deca-wizard .deca-roleself__legend { margin-bottom: 12px; padding: 0; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--crear-rotulo); }
.deca-wizard .deca-roleself__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deca-wizard .role-option { position: relative; display: flex; align-items: center; gap: 11px; min-height: 91px; padding: 16px 13px; border: 1px solid var(--color-border-strong); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
/* El campo ocupa la tarjeta entera, invisible: asi, al recibir el foco, el navegador desplaza la TARJETA fuera de la barra
   de acciones pegada (con un campo de 1 px la tarjeta podia quedar debajo; visto al ensanchar el formulario, S-328). */
.deca-wizard .role-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.deca-wizard .role-option:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
.deca-wizard .role-option:has(input:checked) { background: var(--crear-papel-sel); border-color: var(--crear-papel-borde); box-shadow: 0 0 0 1px #c0ddf333; }
.deca-wizard .role-option__icono { display: inline-flex; flex: none; color: var(--color-text-muted); }
.deca-wizard .role-option:has(input:checked) .role-option__icono { color: var(--color-primary-500); }
.deca-wizard .role-option__texto { min-width: 0; }
.deca-wizard .role-option__texto strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 650; color: var(--color-text); }
.deca-wizard .role-option__texto small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.deca-wizard .role-option__check { display: grid; place-items: center; flex: none; width: 19px; height: 19px; margin-left: auto; border: 1px solid var(--crear-control-borde); border-radius: 50%; background: var(--color-surface); color: transparent; }
.deca-wizard .role-option:has(input:checked) .role-option__check { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-on-accent); }
@media (forced-colors: active) {
    .deca-wizard .role-option input { position: static; width: 18px; height: 18px; opacity: 1; appearance: auto; }
    .deca-wizard .role-option__check { display: none; }
}
.deca-wizard .deca-roleself__link { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 34px; margin: 8px 0 19px auto; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }

/* ---- Partes (maquetas `own-company` y `external-party`) ----
   El orden de los dos bloques es el ESTABLE del #26 §4 (cargador, transportista): solo cambia cual
   lleva TU EMPRESA. La maqueta sube siempre el propio; hacerlo sin tocar `app.js` obligaria a
   reordenar con CSS y el tabulador dejaria de seguir a la vista. */
.deca-wizard .party-grid { display: flex; flex-direction: column; gap: 25px; }
.deca-wizard .party { gap: 0; padding: 0; border: 0; border-radius: 0; }
.deca-wizard .party.party--own, .deca-wizard .party.party--roleslot .party__own-view {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 13px; align-items: start;
    padding: 16px 18px; border: 1px solid var(--crear-propia-borde); border-left: 4px solid var(--crear-propia-filo);
    border-radius: 12px; background: var(--crear-propia); box-shadow: 0 3px 12px #0d5eac08;
}
.deca-wizard .party .party__own-icon, .deca-wizard .party.party--roleslot .party__own-view .party__own-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--crear-propia-borde); border-radius: 11px; background: var(--color-surface); color: var(--color-primary-600); }
.deca-wizard .party__own-datos { min-width: 0; }
.deca-wizard .party__head--own { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.deca-wizard .party .party__role, .deca-wizard .party.party--roleslot .party__own-view .party__role { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--crear-rotulo); }
.deca-wizard .own-tag { margin: 0; padding: 3px 8px; border-radius: 5px; background: var(--color-primary-600); color: var(--color-on-accent); font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; white-space: nowrap; }
.deca-wizard .party__company { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 650; color: var(--color-primary-700); overflow-wrap: anywhere; }
.deca-wizard .party__nif, .deca-wizard .party__dom { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-subtle); overflow-wrap: anywhere; }
.deca-wizard .party__view { display: inline-flex; align-items: center; min-height: 28px; margin-top: 5px; font-size: 13px; color: var(--color-primary-600); }
.deca-wizard .party__auto-ok { display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border: 1px solid var(--crear-ok-borde); border-radius: 50%; background: var(--crear-ok-bg); color: var(--form-green); }
.deca-wizard .party.party--roleslot .party__input-view { gap: 0; }
.deca-wizard .party .party__head:not(.party__head--own) { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; text-transform: none; letter-spacing: 0; color: var(--color-primary-700); }
.deca-wizard .party__icono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--crear-icono-bg); color: var(--crear-icono); }
.deca-wizard .party__icono svg { width: 17px; height: 17px; }
.deca-wizard .party__titulo { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 650; letter-spacing: -.1px; color: var(--color-primary-700); }
/* NIF e identificacion extranjera, lado a lado (maqueta `tax-row`). */
.deca-wizard .deca-form .party__fiscal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 18px; align-items: center; }
.deca-wizard .party__fiscal > .form-label { grid-column: 1 / -1; }
.deca-wizard .party__extranjero { align-items: center; min-height: 44px; }
.deca-wizard .party__extranjero input { margin-top: 0; }
/* Domicilio (maqueta `address-fieldset`): direccion a todo el ancho y, debajo, CP, localidad y pais. */
.deca-wizard .party .addr-group { display: grid; grid-template-columns: minmax(90px, .75fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 14px; margin: 3px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--crear-filete); border-radius: 0; }
.deca-wizard .party .addr-group__row { display: contents; }
.deca-wizard .party .addr-group > .form-field:first-of-type { grid-column: 1 / -1; }
.deca-wizard .deca-form .party .addr-group .form-field { margin-bottom: 19px; }
.deca-wizard .deca-form .party .addr-group__row .form-field, .deca-wizard .deca-form .party .addr-group > .form-field:last-child { margin-bottom: 0; }
.deca-wizard .addr-group__title { float: left; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; font-size: 14px; line-height: 1.5; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--crear-rotulo); }
.deca-wizard .party .addr-group__title { grid-column: 1 / -1; margin-bottom: 13px; }

/* ---- Transporte ---- */
.deca-wizard .wizard-step[data-step="2"] .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; margin: 0; }
.deca-wizard .deca-form .form-field--obs { margin: 5px 0 0; padding-top: 21px; border-top: 1px solid var(--crear-filete); }

/* ---- Envios y servicios (maquetas `shipment-card`, `address-block`, `cargo-section`, `service-specification`) ---- */
.deca-wizard .lineas-cabecera, .deca-wizard .revision-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.deca-wizard .lineas-cabecera > div, .deca-wizard .revision-cabecera > div { min-width: 0; flex: 1; }
/* #339, ajuste 10 (maqueta `review-status`): la cabecera de Revision es el aviso. Amarillo mientras faltan datos
   obligatorios, verde cuando el validador ha corrido y no hay nada pendiente; sin validar, la cabecera de siempre. */
.deca-wizard .revision-cabecera--pendiente { gap: 13px; padding: 19px 22px; border: 1px solid var(--crear-aviso-borde); border-radius: 13px; background: var(--crear-aviso-bg); }
.deca-wizard .revision-cabecera--listo { gap: 13px; padding: 19px 22px; border: 1px solid var(--crear-ok-borde); border-radius: 13px; background: var(--crear-ok-bg); }
.deca-wizard .revision-cabecera--pendiente .section-icon { border-color: var(--crear-aviso-borde); background: var(--color-surface); color: var(--form-amber); }
.deca-wizard .revision-cabecera--listo .section-icon { border-color: var(--crear-ok-borde); background: var(--color-surface); color: var(--form-green); }
.deca-wizard .revision-cabecera--pendiente .card-title { color: var(--form-amber); }
.deca-wizard .revision-cabecera--pendiente p { color: var(--crear-rotulo); }
.deca-wizard .revision-cabecera--listo .card-title { color: var(--form-green); }
.deca-wizard .revision-cabecera--listo p { color: var(--crear-rotulo); }
.deca-wizard .revision-cabecera__dibujo--hecho, .deca-wizard .revision-cabecera--listo .revision-cabecera__dibujo--aviso { display: none; }
.deca-wizard .revision-cabecera--listo .revision-cabecera__dibujo--hecho { display: block; }
.deca-wizard .revision-cabecera:not(.revision-cabecera--pendiente):not(.revision-cabecera--listo) .revision-cabecera__dibujo--aviso { display: none; }
.deca-wizard .revision-cabecera__cuenta { flex: none; padding: 5px 9px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.deca-wizard .revision-cabecera--pendiente .revision-cabecera__cuenta { border-color: var(--crear-aviso-borde); color: var(--form-amber); }
.deca-wizard .revision-cabecera--listo .revision-cabecera__cuenta { border-color: var(--crear-ok-borde); color: var(--form-green); }
/* El titulo del aviso es una frase: parte en dos lineas antes que recortarse. */
.deca-wizard .revision-cabecera--pendiente .card-title, .deca-wizard .revision-cabecera--listo .card-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 560.98px) {
    .deca-wizard .revision-cabecera--pendiente, .deca-wizard .revision-cabecera--listo { flex-wrap: wrap; padding: 16px; }
    /* El texto ocupa lo que deja el dibujo, asi que el contador baja a su propia linea, alineado con el. */
    .deca-wizard .revision-cabecera--pendiente > div, .deca-wizard .revision-cabecera--listo > div { flex: 1 1 calc(100% - 50px); }
    .deca-wizard .revision-cabecera__cuenta { margin-left: 47px; font-size: 13px; }
}
@media (forced-colors: active) {
    .deca-wizard .revision-cabecera--pendiente, .deca-wizard .revision-cabecera--listo { border-width: 2px; }
}
.deca-wizard .lines { counter-reset: linea; gap: 18px; margin-bottom: 18px; }
.deca-wizard .line-row { counter-increment: linea; padding: 0; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--sh-md); min-width: 0; scroll-margin-top: 90px; }
.deca-wizard .line-row__head { justify-content: flex-start; gap: 12px; margin: 0; padding: 16px 19px; border-bottom: 1px solid var(--crear-filete); border-radius: 16px 16px 0 0; background: var(--crear-linea-cab); }
/* El numero de la baldosa lo cuenta la hoja: es adorno. El que se lee va en el titulo. */
.deca-wizard .line-row__num { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border: 1px solid var(--crear-indice-borde); border-radius: 10px; background: var(--crear-indice-bg); color: var(--color-primary-600); font-family: inherit; font-size: 14px; font-weight: 650; }
.deca-wizard .line-row__num::before { content: counter(linea); }
.deca-wizard .line-row__titulo { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--crear-rotulo); }
.deca-wizard .line-row__actions { gap: 3px; padding-left: 10px; border-left: 1px solid var(--crear-filete); }
.deca-wizard .line-row__actions .icon-btn { width: 37px; height: 40px; border-radius: 8px; color: var(--color-text-muted); }
/* #339, ajuste 5 (maqueta `shipment-collapse`): el resumen de la tarjeta —numero, titulo y trayecto— es el boton que la
   pliega. El boton va superpuesto y transparente para que el titulo siga siendo un encabezado y el trayecto, un parrafo. */
.deca-wizard .line-row__resumen { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 42px; }
.deca-wizard .line-row__textos { flex: 1; min-width: 0; }
.deca-wizard .line-row__ruta { margin: 3px 0 0; overflow: hidden; font-size: 12px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-muted); }
.deca-wizard .line-row__plegar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 2px 0 0; border: 0; border-radius: 8px; background: none; color: var(--color-text-muted); cursor: pointer; }
.deca-wizard .line-row__plegar:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 3px; }
.deca-wizard .line-row__plegar svg { flex: none; transform: rotate(180deg); }
.deca-wizard .line-row.is-plegada .line-row__plegar svg { transform: none; }
.deca-wizard .line-row__resumen:has(.line-row__plegar:not([hidden])) .line-row__textos { padding-right: 26px; }
.deca-wizard .line-row.is-plegada .line-row__head { border-bottom: 0; border-radius: 16px; }
.deca-wizard .line-row__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 16px; padding: 22px; }
.deca-wizard .lines[data-tipo="viajeros"] .line-row__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.deca-wizard .lines[data-tipo="viajeros"] .line-row__grid > .form-field:has(> select) { grid-column: 1 / -1; }
.deca-wizard .line-ruta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 19px; margin-bottom: 22px; }
.deca-wizard .line-ruta > .addr-group { grid-column: auto; }
.deca-wizard .line-bloque__titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; padding-top: 21px; border-top: 1px solid var(--crear-filete); font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--crear-rotulo); }
.deca-wizard .line-bloque__titulo svg { flex: none; color: var(--crear-icono); }
/* Origen y destino. La leyenda flota para entrar en el relleno del bloque en vez de montarse en su borde. */
.deca-wizard .line-row .addr-group { gap: 14px; margin: 0; padding: 16px; border: 1px solid var(--crear-direccion-borde); border-radius: 11px; background: var(--crear-direccion-bg); }
.deca-wizard .addr-group__icono { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--crear-icono-bg); color: var(--crear-icono); }
/* El destino lleva otra tinta, y ademas lo dice su leyenda: el color no es el unico dato. */
.deca-wizard .addr-group[data-addr="destino"] .addr-group__icono { background: var(--crear-destino-bg); color: var(--crear-destino); }
.deca-wizard .line-row .addr-group .form-label { font-size: 13px; }
.deca-wizard .deca-form .line-row .addr-group .form-field { gap: 6px; margin-bottom: 0; }
.deca-wizard .combo-addr { margin-bottom: 0; }
.deca-wizard .deca-form input.combo-addr__input { min-height: 44px; padding-left: 2.25rem; background: var(--crear-buscar-bg); font-size: 14px; }
.deca-wizard .addr-group__row { grid-template-columns: minmax(70px, .65fr) minmax(0, 1fr); gap: 10px; }
.deca-wizard .addr-group__save { align-items: center; min-height: 30px; margin-top: 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.deca-wizard .addr-group__save input { width: 16px; height: 16px; margin: 0; }
/* ADR de cada envio (maqueta `shipment-adr`): la casilla, entre dos filetes. */
.deca-wizard .deca-form .adr-field { margin: 4px 0 19px; padding: 17px 0; border-top: 1px solid var(--crear-filete); border-bottom: 1px solid var(--crear-filete); }
.deca-wizard .adr-check, .deca-wizard .adr-check:has(input:checked) { min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; }
.deca-wizard .adr-check__title { font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--crear-rotulo); }
.deca-wizard .adr-check__hint { font-size: 12px; line-height: 1.6; }
/* Procedencia del dato (maqueta `goods-selection`): «tomado de la ficha de Maestros», editable aqui. */
.deca-wizard .adr-src { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
/* Cantidad y unidad a dos columnas (bloque «Actualizacion de diseno» del 04/10: `cargo-measure`). */
.deca-wizard .line-row__grid > .peso-field { grid-column: 1 / -1; }
.deca-wizard .peso-group { gap: 0 18px; }
.deca-wizard .peso-group__col { gap: 7px; margin-bottom: 19px; }
/* Texto anterior de la ficha (maqueta `goods-legacy-alert`). */
.deca-wizard .peso-legacy { display: block; margin: 0 0 19px; padding: 15px 16px; border: 1px solid var(--crear-aviso-borde); border-radius: 10px; background: var(--crear-aviso-bg); color: var(--form-amber); font-size: 13px; line-height: 1.65; }
/* Campos que aparecen (maquetas `custom-unit`, `permit-reference`, `service-reference`). */
.deca-wizard .deca-form .peso-field .js-peso-otra, .deca-wizard .autoriz-field__body, .deca-wizard .deca-form [data-servicio-referido] { margin: 0 0 19px; padding: 14px 16px; border-left: 3px solid var(--crear-condicional-filo); border-radius: 0 8px 8px 0; background: var(--crear-condicional-bg); }
.deca-wizard .deca-form .peso-field .js-peso-otra input, .deca-wizard .autoriz-field__body input { max-width: 400px; }
.deca-wizard .deca-form .peso-field .peso-field__bultos { margin: 0 0 19px; }
/* Autorizacion especial (maqueta `permit-fieldset`). */
.deca-wizard .deca-form .autoriz-field { margin-bottom: 0; padding-top: 18px; border-top: 1px solid var(--crear-filete); }
.deca-wizard .autoriz-field__opts { gap: 22px; margin: 5px 0 17px; }
.deca-wizard .radio-inline:not(.role-option) { gap: 8px; min-height: 36px; font-size: 14px; color: var(--crear-rotulo); }
.deca-wizard .radio-inline:not(.role-option) input { margin: 0; }
.deca-wizard .autoriz-field__body { display: flex; flex-direction: column; gap: 7px; }
/* Fecha propia del envio (maqueta `shipment-date-options`) y autobus o conductor del servicio (`service-assignment`). */
.deca-wizard .deca-form .line-override { margin-bottom: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--crear-filete); border-radius: 0; background: none; }
.deca-wizard .form-check--toggle { align-items: center; min-height: 28px; }
.deca-wizard .form-check--toggle input { margin: 0; }
.deca-wizard .line-override > .form-hint { margin: 6px 0 0 28px; }
.deca-wizard .line-override__body { margin: 15px 0 0 28px; }
.deca-wizard .line-override__body .form-row, .deca-wizard .line-transporte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0 0 14px; }
.deca-wizard .line-override__body .form-row:last-child, .deca-wizard .line-transporte { margin-bottom: 0; }
.deca-wizard .deca-form [data-line-transporte] { margin: 3px 0 23px; padding: 16px; border: 1px solid var(--crear-nota-borde); border-radius: 11px; background: var(--crear-condicional-bg); }
/* Paradas intermedias (maquetas `intermediate-stops`, `stop-card`, `add-stop`). */
.deca-wizard .deca-form .paradas { margin-bottom: 0; padding-top: 21px; border-top: 1px solid var(--crear-filete); }
.deca-wizard .paradas > .form-label { font-size: 15px; font-weight: 650; }
.deca-wizard .paradas__list { gap: 12px; margin: 8px 0 12px; }
.deca-wizard .parada-row { padding: 14px 16px 16px; border: 1px solid var(--crear-direccion-borde); border-radius: 10px; background: var(--crear-direccion-bg); scroll-margin-top: 100px; }
.deca-wizard .parada-row__head { margin-bottom: 11px; }
.deca-wizard .parada-row__num { width: 25px; height: 25px; border: 1px solid var(--crear-ok-borde); border-radius: 7px; background: var(--crear-ok-bg); color: var(--form-green); font-family: inherit; font-size: 12px; font-weight: 600; }
.deca-wizard .parada-row__grid { grid-template-columns: minmax(90px, .6fr) minmax(0, 1.5fr); gap: 13px; }
.deca-wizard .parada-row .icon-btn { width: 40px; height: 40px; }
.deca-wizard .js-add-parada, .deca-wizard .lineas-anadir { width: 100%; border: 1px dashed var(--crear-anadir-borde); background: var(--crear-anadir-bg); color: var(--color-primary-600); }
.deca-wizard .js-add-parada { min-height: 44px; border-radius: 8px; font-size: 13px; font-weight: 550; }
.deca-wizard .lineas-anadir { min-height: 52px; margin: 0 0 18px; padding: 15px; border-radius: 12px; font-size: 14px; font-weight: 600; }

/* ---- Revision (maquetas `review-card`, `review-parties`, `review-transport`, `review-adr`, `review-checks`) ---- */
.deca-wizard .review-card .form-card-header { padding: 17px 22px; }
.deca-wizard .review-card .section-icon, .deca-wizard .revision-validacion .section-icon { width: 34px; height: 34px; border-radius: 9px; }
.deca-wizard .review-card .card-title, .deca-wizard .revision-validacion .card-title { font-size: 16px; letter-spacing: -.1px; }
.deca-wizard .review-card__editar { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--color-primary-100); border-radius: 7px; background: var(--color-primary-050); color: var(--color-primary-600); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.deca-wizard .review-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; margin: 0; padding: 22px; }
.deca-wizard .review-grid__cell { gap: 5px; }
.deca-wizard .review-grid__label { font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); }
.deca-wizard .review-grid__value { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 550; color: var(--crear-rotulo); }
/* Partes: cada parte con su NIF debajo, lado a lado; el tipo y el papel propio cierran la tarjeta.
   El orden del marcado es el de lectura (razon social y NIF seguidos); la rejilla solo los coloca. */
.deca-wizard .review-grid--partes > :nth-child(1) { grid-area: 1 / 1; }
.deca-wizard .review-grid--partes > :nth-child(2) { grid-area: 2 / 1; margin-top: -12px; }
.deca-wizard .review-grid--partes > :nth-child(3) { grid-area: 1 / 2; padding-left: 24px; border-left: 1px solid var(--crear-filete); }
.deca-wizard .review-grid--partes > :nth-child(4) { grid-area: 2 / 2; margin-top: -12px; padding-left: 24px; border-left: 1px solid var(--crear-filete); }
.deca-wizard .review-grid--partes > :nth-child(n+5) { grid-row: 3; padding-top: 18px; border-top: 1px solid var(--crear-filete); }
/* N.º de envios y la UNICA linea de ADR (D-343-16), como la franja `review-adr` de la maqueta. */
.deca-wizard .review-grid--lineas { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 22px; }
.deca-wizard .review-grid--lineas .review-grid__cell { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--crear-filete); }
.deca-wizard .review-grid--lineas .review-grid__label { font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--crear-rotulo); }
.deca-wizard .review-grid--lineas .review-grid__value { line-height: 1.6; text-align: right; color: var(--color-primary-600); }
.deca-wizard .review-lines-wrap { margin: 0; padding: 6px 22px 16px; }
.deca-wizard .review-lines { font-size: 14px; }
.deca-wizard .review-lines th, .deca-wizard .review-lines td { padding: 12px 10px 12px 0; border-bottom-color: var(--crear-filete); color: var(--crear-rotulo); }
.deca-wizard .review-lines thead th { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.deca-wizard .review-lines .line-sub td { background: none; font-size: 12px; color: var(--color-text-muted); }
/* Validacion (maqueta `review-checks`): la tarjeta que `app.js` reconstruye entera. */
.deca-wizard .deca-rail__count { margin: 0 0 10px; font-size: 14px; color: var(--form-red); }
.deca-wizard .checklist { gap: 4px; margin: 0 0 14px; }
.deca-wizard .checklist__item { gap: 8px; font-size: 13px; line-height: 1.6; }
.deca-wizard .checklist__item svg { margin-top: 3px; }
.deca-wizard .checklist__item.is-error { color: var(--form-red); }
.deca-wizard .checklist__item.is-warn { color: var(--form-amber); }
.deca-wizard .checklist__item.is-info { color: var(--color-primary-600); }
.deca-wizard .checklist__link { min-height: 24px; }
.deca-wizard .deca-rail__hint { margin: 0; font-size: 13px; line-height: 1.6; }
.deca-wizard .deca-rail__hint.is-ready { color: var(--form-green); }
.deca-wizard .deca-rail__hint.is-warn { color: var(--form-amber); }
.deca-wizard .deca-rail__note { display: flex; align-items: flex-start; gap: 7px; margin: 17px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.deca-wizard .deca-rail__note svg { flex: none; margin-top: 1px; }
.deca-wizard .modify-methods { margin: 20px 0 19px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--crear-filete); }
.deca-wizard .modify-methods > legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.deca-wizard .radio-row { clear: both; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 14px; color: var(--crear-rotulo); cursor: pointer; }
.deca-wizard .emit-confirm__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---- Barra de acciones (maqueta `form-actions`): pegada abajo ---- */
.deca-wizard .wizard-nav { position: sticky; bottom: 15px; z-index: 10; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 9px; margin-top: 19px; padding: 14px 17px; border: 1px solid var(--crear-barra-borde); border-radius: 13px; background: var(--crear-barra-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 26px #17385e10; }
.deca-wizard .wizard-nav__cancel { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 3px; font-size: 14px; color: var(--color-text-muted); text-decoration: none; }
/* «Paso n de 4»: el servidor escribe las cuatro frases y se ve la del panel activo, que es hermano
   anterior de la barra. Sin JavaScript los pasos se apilan y no hay «paso en curso» que decir. */
.deca-wizard .wizard-nav__pos { display: none; margin: 0 0 0 5px; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); white-space: nowrap; }
.deca-wizard.is-wizard .wizard-nav__pos { display: block; }
.deca-wizard .wizard-nav__pos > span { display: none; }
.deca-wizard .wizard-step[data-step="1"].is-active ~ .wizard-nav [data-pos="1"],
.deca-wizard .wizard-step[data-step="2"].is-active ~ .wizard-nav [data-pos="2"],
.deca-wizard .wizard-step[data-step="3"].is-active ~ .wizard-nav [data-pos="3"],
.deca-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav [data-pos="4"] { display: inline; }
.deca-wizard .wizard-nav__spacer { display: block; flex: 1 1 auto; }
.deca-wizard .wizard-nav .btn { width: auto; min-height: 45px; padding: 11px 16px; font-size: 14px; white-space: nowrap; }
.deca-wizard .wizard-nav .btn svg { flex: none; }
.deca-wizard .wizard-nota-obligatorios { margin: 13px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--color-text-muted); }

/* ---- #339, ajustes 3 y 4 de Jorge (06/10/2026; D-339-31): area de trabajo y tarjeta lateral «Tu DeCA» ----
   Maqueta `create-workspace` y `creation-summary`. La rejilla de dos columnas solo existe con el asistente en marcha
   (`is-wizard`): sin JavaScript no hay tarjeta y el formulario conserva su ancho de lectura. `[data-wizard]` distingue
   Crear DeCA de la ficha de Plantilla DeCA, que reutiliza `.deca-wizard` y no cambia de ancho. */
.deca-wizard[data-wizard] { max-width: none; }
.deca-wizard .crear-area { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.deca-wizard .crear-area__principal { grid-column: 1; grid-row: 1; min-width: 0; }
.deca-wizard:not(.is-wizard) .crear-area__principal { max-width: 920px; }
.deca-wizard.is-wizard .crear-area { grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; }
/* La tarjeta va ANTES del formulario en el documento (orden de lectura y de foco en estrecho) y la rejilla la lleva a la
   segunda columna. Pegada, nunca mas alta que la ventana: con zoom o ventanas bajas se desplaza por dentro. */
.deca-wizard .crear-ficha { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar-h) + 20px); min-width: 0; max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; border-radius: 16px; }
.deca-wizard .crear-ficha__caja { overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--sh-md); }
.deca-wizard .crear-ficha__cab { position: relative; display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; background: var(--crear-ficha-cab); color: var(--color-text-invert); }
.deca-wizard .crear-ficha__icono { display: grid; place-items: center; flex: none; width: 34px; height: 38px; border: 1px solid var(--crear-ficha-cab-baldosa-borde); border-radius: 9px; background: var(--crear-ficha-cab-baldosa); color: var(--crear-ficha-cab-icono); }
.deca-wizard .crear-ficha__titulo { flex: 1; min-width: 0; }
.deca-wizard .crear-ficha__titulo strong { display: block; font-size: 17px; line-height: 1.3; font-weight: 650; }
.deca-wizard .crear-ficha__titulo small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--crear-ficha-cab-sub); }
.deca-wizard .crear-ficha__plegar { display: none; }
.deca-wizard .crear-ficha__cuerpo { padding: 19px 20px 0; }
.deca-wizard .crear-ficha__progreso { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 9px; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.deca-wizard .crear-ficha__progreso strong { font-weight: 600; }
.deca-wizard .crear-ficha__barra { display: block; width: 100%; height: 4px; border: 0; border-radius: 5px; overflow: hidden; background: var(--crear-ficha-pista); appearance: none; -webkit-appearance: none; }
.deca-wizard .crear-ficha__barra::-webkit-progress-bar { background: var(--crear-ficha-pista); }
.deca-wizard .crear-ficha__barra::-webkit-progress-value { border-radius: 5px; background: var(--crear-ficha-barra); }
.deca-wizard .crear-ficha__barra::-moz-progress-bar { border-radius: 5px; background: var(--crear-ficha-barra); }
.deca-wizard .crear-ficha__datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; margin: 19px 0 20px; }
.deca-wizard .crear-ficha__dato { grid-column: 1 / -1; min-width: 0; }
.deca-wizard .crear-ficha__dato--medio { grid-column: auto; }
.deca-wizard .crear-ficha__dato dt { margin: 0 0 4px; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.deca-wizard .crear-ficha__dato dd { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 550; color: var(--crear-rotulo); overflow-wrap: anywhere; }
.deca-wizard .crear-ficha__dato dd.is-vacio { font-weight: 400; color: var(--color-text-muted); }
.deca-wizard .crear-ficha__pasos { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--crear-filete); }
.deca-wizard .crear-ficha__paso { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.deca-wizard .crear-ficha__marca { display: grid; place-items: center; flex: none; width: 17px; height: 17px; border: 1px solid var(--crear-control-borde); border-radius: 50%; }
.deca-wizard .crear-ficha__marca svg { visibility: hidden; }
.deca-wizard .crear-ficha__paso.is-complete { color: var(--form-green); }
.deca-wizard .crear-ficha__paso.is-complete .crear-ficha__marca { border-color: var(--form-green); background: var(--crear-ok-bg); }
.deca-wizard .crear-ficha__paso.is-complete .crear-ficha__marca svg { visibility: visible; }
.deca-wizard .crear-ficha__nota { display: flex; gap: 7px; margin: 0 -20px; padding: 13px 20px; font-size: 12px; line-height: 1.6; background: var(--crear-ficha-nota-bg); color: var(--color-text-muted); }
.deca-wizard .crear-ficha__nota svg { flex: none; margin-top: 2px; }
@media (min-width: 1400px) {
    .deca-wizard.is-wizard .crear-area { grid-template-columns: minmax(0, 1fr) 286px; gap: 27px; }
}
@media (max-width: 1270.98px) {
    .deca-wizard.is-wizard .crear-area { grid-template-columns: minmax(0, 1fr) 235px; gap: 18px; }
}
/* Por debajo de 1150 px la tarjeta pasa arriba y se pliega (la abre y la cierra su cabecera, que vuelve a ser un control). */
@media (max-width: 1150.98px) {
    .deca-wizard.is-wizard .crear-area { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .crear-ficha { position: static; grid-row: 1; }
    .deca-wizard .crear-ficha, .deca-wizard .crear-area__principal { grid-column: 1; }
    .deca-wizard .crear-area__principal { grid-row: 2; }
    .deca-wizard .crear-ficha { max-height: none; overflow: visible; }
    .deca-wizard .crear-ficha__cab { min-height: 70px; padding: 13px 18px; }
    .deca-wizard .crear-ficha__plegar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 18px; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; }
    .deca-wizard .crear-ficha__plegar:focus-visible { outline: 3px solid var(--crear-ficha-cab-icono); outline-offset: -4px; }
    .deca-wizard .crear-ficha__plegar[aria-expanded="true"] svg { transform: rotate(180deg); }
    .deca-wizard .crear-ficha__titulo strong { font-size: 16px; }
    .deca-wizard .crear-ficha__titulo small { font-size: 13px; }
    .deca-wizard .crear-ficha__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
    .deca-wizard .crear-ficha__dato, .deca-wizard .crear-ficha__dato--medio { grid-column: auto; }
    .deca-wizard .crear-ficha__dato dt, .deca-wizard .crear-ficha__paso, .deca-wizard .crear-ficha__nota, .deca-wizard .crear-ficha__progreso { font-size: 13px; }
    .deca-wizard .crear-ficha__dato dd { font-size: 14px; }
    .deca-wizard .crear-ficha__pasos { display: flex; flex-wrap: wrap; gap: 10px 22px; }
}
@media (max-width: 760.98px) {
    .deca-wizard .crear-ficha__cab { min-height: 69px; padding: 12px 15px; }
    .deca-wizard .crear-ficha__cuerpo { padding: 18px 16px 0; }
    .deca-wizard .crear-ficha__datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 20px 0; }
    .deca-wizard .crear-ficha__dato { grid-column: 1 / -1; }
    .deca-wizard .crear-ficha__dato--medio { grid-column: auto; }
    .deca-wizard .crear-ficha__pasos { display: grid; gap: 11px; }
    .deca-wizard .crear-ficha__nota { margin: 0 -16px; padding: 14px 16px; }
}
@media (forced-colors: active) {
    .deca-wizard .crear-ficha__paso.is-complete .crear-ficha__marca { border-width: 2px; }
    /* Con colores forzados los fondos se sustituyen: la barra vuelve a ser la del sistema, o no se veria. */
    .deca-wizard .crear-ficha__barra { height: 8px; appearance: auto; -webkit-appearance: auto; }
}
@media print {
    .deca-wizard .crear-area { display: block; }
    .deca-wizard .crear-ficha { display: none; }
}

/* ---- Efectos al pasar el raton: solo donde hay raton ---- */
@media (hover: hover) and (pointer: fine) {
    .deca-wizard .wizard-steps__btn:hover { background: var(--crear-paso-bg); }
    .deca-wizard .wizard-steps__item.is-active .wizard-steps__btn:hover { background: var(--crear-paso-actual); }
    .deca-wizard .role-option:hover, .deca-wizard .deca-typecard:hover { border-color: var(--color-border-hover); }
    .deca-wizard .deca-roleself__link:hover, .deca-wizard .wizard-nav__cancel:hover { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
    .deca-wizard .deca-norma > summary:hover { color: var(--color-primary-600); }
    .deca-wizard .combo__opt:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
    .deca-wizard .line-row__actions .icon-btn:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
    .deca-wizard .line-row__actions .icon-btn--danger:hover, .deca-wizard .parada-row .icon-btn--danger:hover { background: var(--crear-mal-bg); color: var(--form-red); }
    .deca-wizard .js-add-parada:hover, .deca-wizard .lineas-anadir:hover { background: var(--color-primary-050); border-color: var(--color-primary-500); }
    .deca-wizard .review-card__editar:hover { background: var(--color-surface-3); }
    .deca-wizard .adr-check:hover:not(:has(input:checked)):not(:has(input:disabled)) { background: none; }
}

/* ---- Crear DeCA: cortes de la maqueta ---- */
@media (min-width: 1400px) {
    .deca-wizard .form-card-body { padding: 27px 29px; }
    .deca-wizard .line-row__grid { padding: 25px; }
}
@media (max-width: 1270.98px) {
    .app-main:has(> .deca-wizard) { padding: 25px 25px 20px; }
    .deca-wizard .wizard-steps__btn { gap: 9px; padding: 12px 9px; }
    .deca-wizard .wizard-steps__label { font-size: 14px; }
    .deca-wizard .wizard-steps__sub { font-size: 12px; }
    .deca-wizard .wizard-steps__flecha { display: none; }
    .deca-wizard .form-card-body { padding: 21px; }
    .deca-wizard .line-row__grid { padding: 18px; }
    .deca-wizard .wizard-nav { padding: 12px; }
    .deca-wizard .wizard-nav .btn { padding: 10px 12px; }
}
@media (max-width: 1000.98px) {
    /* Con el menu en su rail de iconos: «Referencia normativa» se queda en su libro, como en la maqueta.
       El rotulo sigue en el marcado: es el nombre del control. */
    .deca-wizard .deca-norma > summary { justify-content: center; gap: 0; width: 44px; font-size: 0; }
    .deca-wizard .deca-norma > summary::before { width: 22px; height: 22px; }
    .deca-wizard .deca-norma > summary::after { display: none; }
    .deca-wizard .deca-header:has(.deca-norma) :is(.deca-header__kicker, .page-title, .page-subtitle) { padding-right: 52px; }
}
@media (max-width: 760.98px) {
    .app-main:has(> .deca-wizard) { padding: 22px 18px 20px; }
    :root:has(.deca-wizard) { scroll-padding-bottom: 150px; }
    .deca-wizard .deca-header { column-gap: 12px; margin-bottom: 21px; }
    .deca-wizard .deca-type-icon { width: 49px; height: 49px; border-radius: 14px; }
    .deca-wizard .deca-type-icon svg { width: 25px; height: 25px; }
    .deca-wizard .deca-header__kicker { font-size: 10px; }
    .deca-wizard .deca-header .page-title { font-size: 26px; }
    .deca-wizard .deca-header .page-subtitle { font-size: 14px; }
    .deca-wizard .deca-norma[open] { margin-top: 14px; padding: 17px; }
    .deca-wizard .deca-norma__texto { font-size: 16px; line-height: 1.7; }
    .deca-wizard .wizard-navigation { margin-bottom: 18px; }
    .deca-wizard .wizard-steps__btn { gap: 7px; padding: 11px 7px; }
    .deca-wizard .wizard-steps__num, .deca-wizard .wizard-steps__mark { width: 29px; height: 29px; border-radius: 9px; font-size: 13px; }
    .deca-wizard .wizard-steps__label { font-size: 13px; }
    .deca-wizard .wizard-steps__sub { display: none; }
    .deca-wizard .form-card-header { padding: 20px; }
    .deca-wizard .form-card-header p, .deca-wizard .lineas-cabecera p, .deca-wizard .revision-cabecera p { font-size: 14px; }
    /* Movil: 16 px en los campos (sin zoom al enfocar) y 15 px en los rotulos, como la maqueta. */
    .deca-wizard .form-label, .deca-wizard .line-row .addr-group .form-label { font-size: 15px; }
    .deca-wizard .deca-form :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea),
    .deca-wizard .combo__trigger, .deca-wizard .deca-form input.combo-addr__input { min-height: 46px; font-size: 16px; }
    .deca-wizard .form-hint, .deca-wizard .form-error, .deca-wizard .form-nota, .deca-wizard .adr-check__hint, .deca-wizard .adr-src, .deca-wizard .peso-legacy { font-size: 14px; }
    .deca-wizard .form-check, .deca-wizard .adr-check__title { font-size: 15px; }
    .deca-wizard .combo__opt { font-size: 15px; }
    .deca-wizard .combo__sub, .deca-wizard .combo__add { font-size: 14px; }
    .deca-wizard .deca-typecard__title, .deca-wizard .role-option__texto strong { font-size: 16px; }
    .deca-wizard .deca-typecard__desc, .deca-wizard .role-option__texto small { font-size: 14px; }
    .deca-wizard .deca-roleself__link { min-height: 44px; }
    .deca-wizard .party__nif, .deca-wizard .party__dom, .deca-wizard .party__view { font-size: 14px; }
    .deca-wizard .party__view { min-height: 44px; margin-top: 0; }
    .deca-wizard .deca-template-bar__desc { font-size: 14px; }
    .deca-wizard .deca-template-bar .deca-from-template select { min-height: 46px; font-size: 16px; }
    .deca-wizard .line-row__titulo { font-size: 16px; }
    .deca-wizard .line-row__actions .icon-btn, .deca-wizard .parada-row .icon-btn { width: 44px; height: 44px; }
    .deca-wizard .line-ruta { grid-template-columns: minmax(0, 1fr); gap: 19px; }
    .deca-wizard .line-row__grid, .deca-wizard .lines[data-tipo="viajeros"] .line-row__grid { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .line-bloque__titulo, .deca-wizard .paradas > .form-label { font-size: 16px; }
    .deca-wizard .addr-group__title { font-size: 16px; }
    .deca-wizard .addr-group__save { min-height: 44px; font-size: 14px; }
    .deca-wizard .addr-group__save input { width: 18px; height: 18px; }
    .deca-wizard .peso-group { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .radio-inline:not(.role-option) { min-height: 44px; font-size: 15px; }
    .deca-wizard .form-check--toggle { min-height: 44px; }
    .deca-wizard .js-add-parada { min-height: 46px; font-size: 15px; }
    .deca-wizard .lineas-anadir { font-size: 16px; }
    .deca-wizard .review-card .card-title, .deca-wizard .revision-validacion .card-title { font-size: 17px; }
    .deca-wizard .review-card__editar { min-height: 44px; font-size: 14px; }
    .deca-wizard .review-grid__label { font-size: 14px; }
    .deca-wizard .review-grid__value { font-size: 16px; }
    .deca-wizard .review-grid--lineas .review-grid__cell { flex-direction: column; gap: 4px; }
    .deca-wizard .review-grid--lineas .review-grid__value { text-align: left; }
    .deca-wizard .review-lines-wrap { padding: 14px 17px 17px; overflow: visible; }
    .deca-wizard .review-lines td { padding: 8px 0; }
    .deca-wizard .deca-rail__count, .deca-wizard .checklist__item, .deca-wizard .deca-rail__hint, .deca-wizard .deca-rail__note { font-size: 14px; }
    .deca-wizard .checklist__item { align-items: center; }
    .deca-wizard .checklist__link { min-height: 44px; }
    .deca-wizard .wizard-nav { bottom: 10px; }
    .deca-wizard .wizard-nav .btn, .deca-wizard .wizard-nav__cancel { min-height: 46px; font-size: 15px; }
    .deca-wizard .wizard-nav__pos, .deca-wizard .wizard-nota-obligatorios { font-size: 13px; }
}
@media (max-width: 560.98px) {
    .app-main:has(> .deca-wizard) { padding: 20px 13px 20px; }
    .deca-wizard .deca-header .page-title { font-size: 24px; }
    /* La maqueta retira aqui el subtitulo de la cabecera de CREACION. En editar y modificar ese parrafo es la
       referencia normativa del documento (issue #274) y se conserva. */
    .deca-wizard .deca-header:has(.deca-norma) .page-subtitle { display: none; }
    .deca-wizard .deca-norma > summary { top: 0; }
    .deca-wizard .deca-norma[open] { padding: 16px; }
    /* Pasos apilados: numero arriba, rotulo debajo. */
    .deca-wizard .wizard-steps { gap: 2px; padding: 5px; border-radius: 12px; }
    .deca-wizard .wizard-steps__btn { flex-direction: column; justify-content: center; gap: 7px; min-height: 76px; padding: 10px 2px; text-align: center; }
    .deca-wizard .wizard-steps__num, .deca-wizard .wizard-steps__mark { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
    .deca-wizard .wizard-steps__copy { flex: none; max-width: 100%; }
    .deca-wizard .wizard-steps__label { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
    .deca-wizard .form-card { border-radius: 14px; }
    .deca-wizard .form-card-header { gap: 10px; padding: 17px 16px; }
    .deca-wizard .card-title { font-size: 19px; }
    .deca-wizard .section-icon { width: 34px; height: 34px; border-radius: 10px; }
    .deca-wizard .section-count { display: none; }
    .deca-wizard .form-card-body { padding: 19px 16px; }
    .deca-wizard .deca-typecards__grid, .deca-wizard .deca-roleself__opts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .deca-wizard .role-option { min-height: 82px; padding: 14px; gap: 12px; }
    .deca-wizard .deca-roleself__link { margin: 7px 0 16px; }
    .deca-wizard .deca-template-bar { flex-wrap: wrap; gap: 10px; padding: 14px; border-radius: 12px; }
    .deca-wizard .deca-template-bar .deca-from-template { width: 100%; max-width: none; }
    .deca-wizard .deca-template-bar--aplicada .btn { margin-left: 29px; }
    .deca-wizard .party.party--own, .deca-wizard .party.party--roleslot .party__own-view { column-gap: 10px; padding: 15px 13px; }
    .deca-wizard .party .party__own-icon, .deca-wizard .party.party--roleslot .party__own-view .party__own-icon { width: 36px; height: 38px; border-radius: 9px; }
    .deca-wizard .party__company { font-size: 16px; }
    .deca-wizard .party__auto-ok { display: none; }
    .deca-wizard .deca-form .party__fiscal { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .party .addr-group { grid-template-columns: minmax(83px, .65fr) minmax(0, 1fr); gap: 0 12px; }
    .deca-wizard .deca-form .party .addr-group__row .form-field { margin-bottom: 19px; }
    .deca-wizard .party .addr-group > .form-field:last-child { grid-column: 1 / -1; }
    .deca-wizard .wizard-step[data-step="2"] .form-row { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .line-row__head { gap: 8px; padding: 13px; }
    .deca-wizard .line-row__num { width: 28px; height: 30px; border-radius: 8px; font-size: 13px; }
    .deca-wizard .line-row__actions { gap: 0; padding-left: 4px; }
    .deca-wizard .line-row__grid { padding: 16px 13px; }
    .deca-wizard .line-row .addr-group { padding: 15px 12px; }
    .deca-wizard .line-override > .form-hint, .deca-wizard .line-override__body { margin-left: 0; }
    .deca-wizard .line-override__body .form-row, .deca-wizard .line-transporte { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .deca-wizard .deca-form [data-line-transporte] { padding: 14px 12px; }
    .deca-wizard .parada-row { padding: 12px; }
    .deca-wizard .parada-row__grid { grid-template-columns: minmax(80px, .6fr) minmax(0, 1fr); gap: 11px; }
    .deca-wizard .review-card .form-card-header { gap: 8px; padding: 16px 14px; }
    .deca-wizard .review-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
    .deca-wizard .review-grid--partes > :nth-child(n) { grid-area: auto; margin-top: 0; padding: 0; border: 0; }
    .deca-wizard .review-grid--partes > :nth-child(3), .deca-wizard .review-grid--partes > :nth-child(5) { padding-top: 16px; border-top: 1px solid var(--crear-filete); }
    .deca-wizard .review-grid--lineas { gap: 0; padding: 0 18px; }
    /* Barra de acciones. En Revision caben tres botones: «Atrás» se queda en su flecha (el rotulo sigue siendo
       su nombre) y «Cancelar» sube a una fila propia: la maqueta lo retira ahi, y en movil no se pierde ninguna accion. */
    .deca-wizard .wizard-nav { bottom: 8px; gap: 7px; padding: 11px; border-radius: 12px; }
    .deca-wizard.is-wizard .wizard-nav__pos { display: none; }
    .deca-wizard .wizard-nav .btn { padding: 10px 12px; font-size: 14px; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav { display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr); gap: 0 7px; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav .wizard-nav__cancel { grid-column: 1 / -1; min-height: 44px; padding: 0 3px 4px; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav .wizard-nav__spacer { display: none; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav .js-step-back { gap: 0; padding: 10px; font-size: 0; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav .wizard-nav__final { padding: 10px 8px; font-size: 13px; white-space: normal; }
}
@media (max-width: 360.98px) {
    .app-main:has(> .deca-wizard) { padding-left: 11px; padding-right: 11px; }
    .deca-wizard .form-card-header { padding: 15px 13px; }
    .deca-wizard .form-card-body { padding: 17px 13px; }
    .deca-wizard .wizard-nav .btn svg { display: none; }
    .deca-wizard.is-wizard .wizard-step[data-step="4"].is-active ~ .wizard-nav .js-step-back svg { display: block; }
}

/* ---- issue #354: modalidad de direcciones de los envios y bloque de la direccion comun (maqueta de Crear DeCA,
   version 10: `route-setup`, `common-address`, `inherited-address`). Todo con los tokens `--crear-*`. ---- */
.deca-wizard .dir-modo { margin: 0 0 20px; }
.deca-wizard .dir-modo__control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr); gap: 16px; align-items: start; }
.deca-wizard .dir-modo__label { display: block; margin: 15px 0 0; font-size: 16px; line-height: 1.45; font-weight: 650; color: var(--crear-rotulo); }
.deca-wizard .dir-modo__campo { min-width: 0; }
.deca-wizard .dir-modo__ancla { position: relative; min-width: 0; }
/* Con la lista abierta, la seccion pasa por encima de las tarjetas de envio que tiene debajo. */
.deca-wizard .dir-modo.is-abierta { position: relative; z-index: 20; }
.deca-wizard .dir-modo__nativo { width: 100%; min-height: 52px; }
.deca-wizard .dir-modo__boton { display: flex; align-items: center; gap: 11px; width: 100%; max-width: 100%; min-height: 52px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--crear-propia-borde); border-radius: 10px; background: var(--crear-anadir-bg); color: var(--crear-rotulo); font: inherit; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; }
.deca-wizard .dir-modo__boton:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-primary-600); }
.deca-wizard .dir-modo__boton[aria-expanded="true"] { border-color: var(--color-primary-600); }
.deca-wizard .dir-modo__glifo { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 32px; color: var(--crear-icono); }
.deca-wizard .dir-modo__dibujo { display: block; width: 46px; height: 27px; }
.deca-wizard .dir-modo__valor { flex: 1; min-width: 0; line-height: 1.4; }
.deca-wizard .dir-modo__cheuron { display: flex; flex: none; color: var(--crear-icono); transition: transform .15s; }
.deca-wizard .dir-modo__boton[aria-expanded="true"] .dir-modo__cheuron { transform: rotate(180deg); }
.deca-wizard .dir-modo__ayuda { margin: 7px 1px 0; font-size: 12px; line-height: 1.55; color: var(--color-text-muted); }
/* La lista se ancla a los dos bordes del boton: no hay coordenadas calculadas que puedan descolocarla. `app.js`
   solo decide si abre hacia arriba o hacia abajo y su altura maxima. */
.deca-wizard .dir-modo__opciones { position: absolute; left: 0; right: 0; top: calc(100% + 7px); bottom: auto; z-index: var(--z-dropdown); box-sizing: border-box; margin: 0; padding: 7px; border: 1px solid var(--crear-direccion-borde); border-radius: 13px; background: var(--color-surface); box-shadow: 0 8px 28px #1738531a; overflow-y: auto; overscroll-behavior: contain; }
.deca-wizard .dir-modo__opciones[data-colocacion="arriba"] { top: auto; bottom: calc(100% + 7px); }
.deca-wizard .dir-modo__opcion { display: flex; align-items: center; gap: 12px; min-height: 78px; box-sizing: border-box; padding: 12px 11px; border: 1px solid transparent; border-radius: 9px; color: var(--crear-rotulo); cursor: pointer; }
.deca-wizard .dir-modo__opcion + .dir-modo__opcion { margin-top: 3px; }
.deca-wizard .dir-modo__opcion[aria-selected="true"] { border-color: var(--crear-papel-borde); background: var(--crear-icono-bg); }
/* La opcion activa (teclado o puntero) se distingue por un contorno, no solo por el fondo. */
.deca-wizard .dir-modo__opcion.is-active { outline: 2px solid var(--color-primary-600); outline-offset: -2px; background: var(--crear-paso-bg); }
.deca-wizard .dir-modo__op-icono { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 40px; border-radius: 8px; background: var(--crear-num-bg); color: var(--color-text-muted); }
.deca-wizard .dir-modo__opcion[aria-selected="true"] .dir-modo__op-icono { background: var(--crear-indice-bg); color: var(--color-primary-600); }
.deca-wizard .dir-modo__op-texto { flex: 1; min-width: 0; }
.deca-wizard .dir-modo__op-texto strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; }
.deca-wizard .dir-modo__op-texto small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.deca-wizard .dir-modo__op-check { display: flex; flex: none; color: var(--color-primary-600); opacity: 0; }
.deca-wizard .dir-modo__opcion[aria-selected="true"] .dir-modo__op-check { opacity: 1; }
.deca-wizard .dir-modo__estado { margin: 13px 0 0; font-size: 12px; line-height: 1.55; color: var(--color-text-muted); }
.deca-wizard .dir-modo__estado:empty { display: none; }
/* Bloque de la direccion comun */
.deca-wizard .dir-comun { margin-top: 18px; border: 1px solid var(--crear-propia-borde); border-radius: 11px; background: var(--crear-direccion-bg); scroll-margin-top: 95px; }
.deca-wizard .dir-comun--destino { border-color: var(--crear-aplicada-borde); }
.deca-wizard .dir-comun:focus-within { border-color: var(--crear-papel-borde); }
.deca-wizard .dir-comun__resumen { display: flex; align-items: center; gap: 12px; min-height: 90px; box-sizing: border-box; padding: 16px; list-style: none; cursor: pointer; border-radius: 11px; }
.deca-wizard .dir-comun__resumen::-webkit-details-marker { display: none; }
.deca-wizard .dir-comun__resumen:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.deca-wizard .dir-comun[open] > .dir-comun__resumen { border-bottom: 1px solid var(--crear-filete); border-radius: 11px 11px 0 0; }
.deca-wizard .dir-comun__icono { display: grid; place-items: center; flex: none; width: 37px; height: 40px; border-radius: 10px; background: var(--crear-icono-bg); color: var(--crear-icono); }
.deca-wizard .dir-comun--destino .dir-comun__icono { background: var(--crear-destino-bg); color: var(--crear-destino); }
.deca-wizard .dir-comun__icono > span { display: flex; }
.deca-wizard .dir-comun__texto { flex: 1; min-width: 0; }
.deca-wizard .dir-comun__rotulo { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 650; color: var(--color-text-muted); }
.deca-wizard .dir-comun__nombre { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--crear-rotulo); overflow-wrap: anywhere; }
.deca-wizard .dir-comun__dir { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--color-text-muted); overflow-wrap: anywhere; }
.deca-wizard .dir-comun__editar { display: flex; align-items: center; gap: 5px; flex: none; font-size: 12px; font-weight: 600; color: var(--color-primary-600); }
.deca-wizard .dir-comun[open] .dir-comun__editar svg { transform: rotate(180deg); }
.deca-wizard .deca-form .dir-comun__form { gap: 14px; margin: 0; padding: 19px 17px 16px; border: 0; min-width: 0; }
.deca-wizard .dir-comun__campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
.deca-wizard .dir-comun__campos > .addr-group__row { grid-column: 1 / -1; grid-template-columns: minmax(90px, .55fr) minmax(0, 1.45fr); gap: 16px; }
.deca-wizard .deca-form .dir-comun__campos .form-field { gap: 6px; margin-bottom: 0; }
.deca-wizard .dir-comun__campos .form-label { font-size: 13px; }
.deca-wizard .dir-comun__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 13px; border-top: 1px solid var(--crear-filete); }
.deca-wizard .dir-comun__pie .btn { min-height: 40px; gap: 6px; }
.deca-wizard .dir-comun__nota { display: flex; align-items: flex-start; gap: 7px; margin: 11px 2px 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.deca-wizard .dir-comun__nota svg { flex: none; margin-top: 2px; }
/* En la tarjeta de cada envio: el lado comun no se pide, se dice cual es. */
.deca-wizard .line-ruta:has(> .dir-heredada:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.deca-wizard .dir-heredada { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px 15px; border: 1px solid var(--crear-nota-borde); border-radius: 10px; background: var(--crear-nota-bg); }
.deca-wizard .dir-heredada--destino { border-color: var(--crear-aplicada-borde); background: var(--crear-aplicada-bg); }
.deca-wizard .dir-heredada > svg { flex: none; color: var(--crear-icono); }
.deca-wizard .dir-heredada--destino > svg { color: var(--crear-destino); }
.deca-wizard .dir-heredada > div { flex: 1; min-width: 0; }
.deca-wizard .dir-heredada small { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.deca-wizard .dir-heredada p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--crear-rotulo); overflow-wrap: anywhere; }
.deca-wizard .dir-heredada__editar { display: flex; align-items: center; gap: 5px; flex: none; min-height: 36px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--color-primary-600); font: inherit; font-size: 12px; cursor: pointer; }
.deca-wizard .dir-heredada__editar:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .deca-wizard .dir-modo__boton:hover { background: var(--crear-nota-bg); }
    .deca-wizard .dir-heredada__editar:hover { background: var(--crear-indice-bg); }
}
/* En la revision */
/* #339, ajuste 9: sangra como sus hermanas de la tarjeta (`review-grid--lineas`); sin margen horizontal el icono tocaba el borde. */
.deca-wizard .rev-dir-comun { display: flex; align-items: center; gap: 9px; margin: 0 22px; padding: 12px 0; border-bottom: 1px solid var(--crear-filete); font-size: 13px; line-height: 1.5; color: var(--crear-rotulo); overflow-wrap: anywhere; }
.deca-wizard .rev-dir-comun svg { flex: none; color: var(--crear-icono); }
@media (max-width: 560.98px) {
    .deca-wizard .rev-dir-comun { margin: 0 18px; }
}
@media (max-width: 760.98px) {
    .deca-wizard .dir-modo__control { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .deca-wizard .dir-modo__label { margin: 0; }
    .deca-wizard .dir-modo__boton { padding: 8px 11px; gap: 9px; font-size: 15px; }
    .deca-wizard .dir-modo__ayuda { font-size: 13px; }
    .deca-wizard .dir-modo__opcion { min-height: 82px; padding: 11px 9px; gap: 10px; }
    .deca-wizard .dir-comun__resumen { flex-wrap: wrap; gap: 9px; padding: 14px 12px; }
    .deca-wizard .dir-comun__icono { width: 30px; height: 34px; }
    .deca-wizard .dir-comun__texto { flex-basis: calc(100% - 45px); }
    .deca-wizard .dir-comun__editar { min-height: 30px; margin-left: 39px; }
    .deca-wizard .deca-form .dir-comun__form { padding: 16px 12px; }
    .deca-wizard .dir-comun__campos { grid-template-columns: minmax(0, 1fr); }
    .deca-wizard .dir-comun__campos > .addr-group__row { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 12px; }
    .deca-wizard .dir-comun__pie { flex-wrap: wrap; }
    .deca-wizard .dir-comun__pie .btn { width: 100%; min-height: 44px; }
    .deca-wizard .dir-heredada { flex-wrap: wrap; }
    .deca-wizard .dir-heredada__editar { min-height: 44px; }
}

/* ============================================================================
   Maestros (issues #3, #24, #84, #187 y #274; rediseno #339, S-226)
   ----------------------------------------------------------------------------
   Maqueta `Docarga-maestros-redisenado.html`, version corregida del 04/10 (familia B). Sus cortes
   son 1450, 1230, 1000, 760 y 370 px, de ventana (los dos menores, escritos con `.98`).
   Una sola vista pinta los nueve maestros, asi que nada de aqui depende de la categoria.
   Estructura: menu de categorias a la izquierda y, a su derecha, UNA de dos vistas — el listado
   (`.maestros__lista`) o la ficha (`.maestros__editor`), que lo sustituye. La pantalla propia de
   Plantilla DeCA (issue #84) reutiliza la ficha fuera de `.maestros` (`.maestros__editor--pagina`).
   Lo que NO sale de la maqueta y se conserva (D-339-4): los dibujos aprobados del #274 en el menu
   y en las acciones de fila, la flecha nativa de los desplegables, el distintivo «Datos
   incompletos» y los avisos de cupo, de plan y de importacion.
   Los grises secundarios de la maqueta no llegan a 4,5:1: aqui son siempre `--color-text-muted`
   (caso 181).
   ============================================================================ */
.app-main:has(> .maestros), .app-main:has(> .maestros__editor) { --content-max: 1660px; max-width: 1660px; padding-top: 30px; padding-bottom: 22px; }

/* ---- Cabecera con antetitulo y emblema (familia B: `masters-heading`) ----
   Componente de pagina, no de Maestros: lo llevaran tambien Suscripcion y Cuenta en su slice. */
.page-header--emblema { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-header__texto { min-width: 0; }
.page-eyebrow { margin: 0 0 7px; font-size: 11px; line-height: 1.5; font-weight: 750; letter-spacing: 1.65px; text-transform: uppercase; color: var(--color-text-muted); }
.page-header--emblema .page-title { font-size: 32px; line-height: 1.2; margin: 0 0 7px; }
.page-header--emblema .page-subtitle { margin: 0; font-size: 16px; }
.page-emblema {
    display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 17px;
    background: var(--maes-emblema); border: var(--bw-1) solid var(--maes-emblema-borde); color: var(--maes-emblema-trazo);
}

/* ---- Disposicion ---- */
.maestros { display: grid; grid-template-columns: 219px minmax(0, 1fr); gap: 23px; align-items: start; font-size: 15px; line-height: 1.5; }
.maestros__main { min-width: 0; scroll-margin-top: 88px; }
.maestros__main > .form-alert { margin: 0 0 16px; }

/* ---- Menu de categorias (issue #274 T3, D-274-4; maqueta `category-nav`) ----
   Los dibujos son los aprobados en el #274 (26 px sobre base de 32) y conservan todas sus tintas:
   la maqueta dibuja pictogramas de trazo, pero D-339-7 mantuvo los aprobados y aqui tambien. */
.maestros__nav { position: sticky; top: 90px; min-width: 0; }
.maestros__nav-rotulo { margin: 5px 12px 12px; font-size: 11px; line-height: 1.5; font-weight: 750; letter-spacing: 1.25px; text-transform: uppercase; color: var(--color-text-muted); }
.maestros__entities ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.entity-tab {
    display: flex; align-items: center; gap: 11px; min-height: 55px; padding: 10px 11px;
    border-radius: 12px; border: var(--bw-1) solid transparent;
    color: var(--maes-nav-texto); text-decoration: none; font-size: 14px; font-weight: 550; line-height: 1.4;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.entity-tab__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--maes-nav-icono-bg); }
/* «Clientes / Cargadores / Contratantes» parte en dos lineas: se alinean entre si, y las columnas
   del icono y del contador se quedan donde estaban. */
.entity-tab__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* El contador usa el color del nombre: el #7489a0 de la maqueta da 3,35:1 sobre el lienzo. */
.entity-tab__count { flex: none; min-width: 24px; text-align: center; font-size: 12px; font-weight: 650; }
/* La categoria actual: fondo, filete y una marca azul a la izquierda. Ademas del color, la dice
   `aria-current` y, con colores forzados, un marco (ver el final de la seccion). */
.entity-tab[aria-current="page"] {
    background: var(--maes-nav-actual); border-color: var(--maes-nav-actual-borde);
    color: var(--maes-nav-actual-texto); box-shadow: inset 3px 0 0 var(--maes-nav-actual-filo);
}
.entity-tab[aria-current="page"] .entity-tab__icon { background: var(--color-surface); box-shadow: 0 2px 5px #2166a40b; }
.entity-tab[aria-current="page"] .entity-tab__count { padding: 2px 0; border-radius: 6px; background: var(--maes-nav-cuenta-bg); }
.maestros__nav-nota { display: flex; gap: 8px; margin: 24px 10px 0; padding-top: 18px; border-top: var(--bw-1) solid var(--color-border); font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.maestros__nav-nota svg { flex: none; margin-top: 2px; }
/* El desplegable de categorias solo existe en movil (ver el corte de 760 px). */
.maestros__ir { display: none; }

/* ---- Campos (maqueta `m-field`): 46 px, 9 px de radio, 15 px ----
   Valen para el listado y para la ficha, tambien la de Plantilla DeCA. La etiqueta sigue fuera
   del control y unida a el por `for`/`id` (la maqueta lo envuelve; el resultado es el mismo). */
:is(.maestros, .maestros__editor) .form-field { gap: 7px; min-width: 0; }
:is(.maestros, .maestros__editor) .form-label { font-size: 14px; line-height: 1.5; font-weight: var(--fw-semibold); color: var(--maes-rotulo); }
:is(.maestros, .maestros__editor) .form-field input,
:is(.maestros, .maestros__editor) .form-field select,
:is(.maestros, .maestros__editor) .form-field textarea {
    width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: 11px 12px;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: 15px; line-height: 1.5; font-weight: var(--fw-regular);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
:is(.maestros, .maestros__editor) .form-field textarea { min-height: 98px; resize: vertical; }
:is(.maestros, .maestros__editor) .form-field input.mono { font-family: var(--font-mono); }
:is(.maestros, .maestros__editor) .form-field input::placeholder { color: var(--color-text-muted); opacity: 1; }
:is(.maestros, .maestros__editor) .form-field [aria-invalid="true"] { border-color: var(--form-red); }
:is(.maestros, .maestros__editor) .form-error { font-size: 13px; line-height: 1.5; font-weight: var(--fw-medium); color: var(--form-red); }
:is(.maestros, .maestros__editor) .req { color: var(--form-red); }
:is(.maestros, .maestros__editor) .form-hint { font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }

/* ---- Listado: tarjeta ---- */
.maestros__lista { background: var(--color-surface); border: var(--bw-1) solid var(--color-border); border-radius: 20px; box-shadow: var(--sh-md); overflow: hidden; }
.maestros__lista-cab { display: flex; align-items: center; gap: 16px; padding: 24px; background: var(--maes-cab); border-bottom: var(--bw-1) solid var(--maes-cab-borde); }
.maestros__dibujo { display: grid; place-items: center; flex: none; width: 57px; height: 57px; border-radius: 16px; background: var(--maes-dibujo-bg); border: var(--bw-1) solid var(--maes-dibujo-borde); }
.maestros__lista-titulos { flex: 1; min-width: 0; }
.maestros__lista-titulo, .maestros__form-title { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -.4px; color: var(--color-primary-700); overflow-wrap: anywhere; }
.maestros__lista-sub, .maestros__form-sub { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.maestros__nuevo { flex: none; }

/* ---- Listado: filtros (maqueta `master-filters`) ---- */
.maestros__filters { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(137px, auto) minmax(166px, auto) auto; gap: 12px; align-items: end; padding: 23px 24px 20px; }
.maestros__filters--sin-extra { grid-template-columns: minmax(180px, 1fr) minmax(155px, auto) auto; }
.maestros__filtro select { cursor: pointer; }
/* El margen que el patron de movil del #187 da a un boton tras otro control (hasta 768 px) no
   aplica en una rejilla que ya reparte su propio `gap`. */
.maestros .maestros__filters > .maestros__filtrar { margin-top: 0; }
/* La lupa va DENTRO del campo, a la izquierda; el campo conserva su borde y su anillo de foco. */
.field-search { position: relative; display: block; }
.field-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.maestros .field-search input { padding-left: 40px; }

/* ---- Listado: cupo y ficheros (maqueta `list-tools`) ---- */
.maestros__herramientas { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 0 24px 22px; }
.maestros__cupo { min-width: 135px; max-width: 100%; }
/* Cupo del plan (issue #58 F4): solo se tine de aviso cuando el cupo esta agotado o el plan no
   incluye la entidad — los mismos dos estados en los que el servidor bloquea el alta. */
.maestros__quota { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.maestros__quota-count { font-weight: 700; color: var(--maes-rotulo); }
.maestros__quota--reached, .maestros__quota--none { color: var(--color-warning); }
.maestros__quota--reached .maestros__quota-count { color: inherit; }
/* La barra acompana a la frase. El relleno de la maqueta (#2a96df) da 2,77:1 contra su pista y un
   grafico pide 3:1 (1.4.11): se usa el azul vivo (3,62:1). */
.maestros__cupo-barra { display: block; width: 116px; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--maes-cupo-pista); overflow: hidden; }
.maestros__cupo-barra > span { display: block; height: 100%; max-width: 100%; border-radius: 4px; background: var(--color-primary-500); }
/* Excel y CSV. En escritorio las cuatro acciones de vehiculos y remolques van en UNA fila (M03):
   por eso la rejilla, cuyas columnas se ajustan a su contenido. `.maestros__import-form` no es
   una celda (`display: contents`): la celda es su boton. */
.maestros__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maestros__toolbar-actions--excel { display: grid; grid-template-columns: repeat(4, max-content); }
.maestros__toolbar-actions .btn { min-height: 40px; padding: 9px 12px; font-size: 13px; }
.maestros__csv-locked { flex-basis: 100%; margin: 0; }

/* ---- Listado: barra de resultados (maqueta `results-bar`) ---- */
.maestros__resultados { display: flex; align-items: center; gap: 15px; padding: 14px 24px; background: var(--maes-franja-bg); border-top: var(--bw-1) solid var(--maes-filete); border-bottom: var(--bw-1) solid var(--maes-filete); }
.maestros__limpiar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-primary-600); text-decoration: none; }
.maestros__por-pagina { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* El tamano de pagina se aplica al elegir, como en Documentos (issue #332; `app.js`). Su boton «Aplicar»
   es el envio de quien recorre el desplegable con el teclado (WCAG 3.2.2) y de quien no tiene JavaScript.
   La maqueta no lo dibuja: va recortado (`.visually-hidden`) y sale junto al desplegable, a su altura,
   solo cuando recibe el foco... */
.maestros__por-pagina-boton:focus-visible { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
/* ...o siempre, si no hay scripts: entonces es la unica forma de aplicar el tamano elegido. */
@media (scripting: none) {
    .maestros__por-pagina .maestros__por-pagina-boton {
        position: static; display: inline-flex; align-items: center; width: auto; height: auto; min-height: 36px; margin: 0; padding: 6px 12px;
        overflow: visible; clip: auto; border-radius: var(--r-sm); background: var(--color-primary-600); color: var(--color-text-invert);
        font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer;
    }
}
@media (scripting: none) and (max-width: 760.98px) {
    .maestros__por-pagina .maestros__por-pagina-boton { min-height: 44px; font-size: 14px; }
}
.maestros__por-pagina select {
    min-height: 36px; padding: 6px 10px; border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer;
}

/* ---- Listado: tabla (maqueta `master-table`) ---- */
.maestros__tabla-caja { width: 100%; }
.maestros .maestros__tabla { table-layout: auto; font-size: 14px; }
.maestros .maestros__tabla th {
    position: static; padding: 13px 16px; background: var(--maes-th-bg); border-bottom: var(--bw-1) solid var(--color-border);
    font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .6px; white-space: normal; color: var(--color-text-muted);
}
.maestros .maestros__tabla td { padding: 16px; border-bottom: var(--bw-1) solid var(--maes-filete); color: var(--maes-celda); line-height: 1.55; vertical-align: middle; overflow-wrap: break-word; }
.maestros .maestros__tabla th:first-child, .maestros .maestros__tabla td:first-child { padding-left: 24px; }
.maestros .maestros__tabla th:last-child, .maestros .maestros__tabla td:last-child { padding-right: 24px; }
.maestros .maestros__tabla tbody tr:last-child td { border-bottom: none; }
.maestros__celda-principal { min-width: 160px; }
/* #339, ajuste 11 (maqueta `record-main` y `record-avatar`): dibujo de la categoria junto al nombre de cada registro. */
.maestros__registro { display: flex; align-items: center; gap: 10px; min-width: 0; }
.maestros__avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--color-primary-050); color: var(--color-primary-500); }
.maestros__ficha-enlace, .maestros__ficha-nombre { font-family: var(--font-sans); font-size: 14px; font-weight: 650; line-height: 1.55; color: var(--maes-nombre); text-decoration: none; }
/* Matricula: placa con su filo azul, como en la maqueta. */
.maestros__placa {
    display: inline-block; padding: 3px 8px; white-space: nowrap;
    background: var(--maes-placa-bg); border: var(--bw-1) solid var(--maes-placa-borde); border-left: 4px solid var(--maes-placa-filo); border-radius: 5px;
    font-family: var(--font-sans); font-size: 14px; line-height: 1.35; font-weight: 650; letter-spacing: .6px; color: var(--maes-placa-texto);
}
.maestros__chip { display: inline-block; padding: 4px 7px; border-radius: 6px; background: var(--maes-chip-bg); color: var(--maes-chip-texto); font-size: 12px; line-height: 1.45; }
/* Estado: el texto lo dice («Activo» / «Inactivo»); el color y el punto solo lo acompanan. El gris
   de «Inactivo» de la maqueta (#6c7c8f) da 3,80:1 sobre su fondo: se usa el del estado borrador. */
.maestros__estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--maes-activo-bg); color: var(--maes-activo-texto); font-size: 12px; line-height: 1.5; font-weight: 550; white-space: nowrap; }
.maestros__estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.maestros__estado.is-inactivo { background: var(--state-borrador-bg); color: var(--state-borrador-fg); }
.maestros .badge--incompleto { margin: 4px 0 0 6px; }
/* Las acciones de fila conservan el dibujo y el boton aprobados en el #274 (`.col-actions--iconos`);
   la separacion es la de la maqueta (3 px), para que las cinco quepan sin recorrer la tabla. */
.maestros .maestros__tabla .col-actions { text-align: left; }
.maestros .col-actions--iconos .icon-btn { margin-right: 3px; }

/* ---- Listado: sin registros (maqueta `empty-records`) ---- */
.maestros__vacio { padding: 44px 24px; text-align: center; }
.maestros__vacio-dibujo { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 15px; border-radius: 17px; background: var(--color-primary-050); color: var(--color-primary-500); }
.maestros__vacio-titulo { margin: 0 0 6px; font-size: 18px; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--maes-rotulo); }
.maestros__vacio-texto { margin: 0 0 17px; font-size: 15px; color: var(--color-text-muted); }

/* ---- Listado: pie y paginador (maqueta `list-footer` / `pagination`) ---- */
.maestros__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 24px; border-top: var(--bw-1) solid var(--maes-filete); }
.maestros__pie-cuenta { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.maestros__pag { display: flex; align-items: center; gap: 7px; margin: 0; flex-wrap: nowrap; }
.maestros__pag-boton { display: grid; place-items: center; width: 35px; height: 35px; border: var(--bw-1) solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--btn-outline-fg); }
.maestros__pag-boton.is-apagado { opacity: .4; }
.maestros__pag-numero { display: grid; place-items: center; width: 32px; height: 34px; border-radius: 8px; background: var(--maes-pag-bg); color: var(--color-primary-600); font-size: 13px; font-weight: 700; }
.maestros__nota { display: flex; align-items: flex-start; gap: 8px; margin: 17px 5px 0; font-size: 12px; line-height: 1.65; color: var(--color-text-muted); }
.maestros__nota svg { flex: none; margin-top: 2px; }

/* ---- Ficha (maqueta `editor-*`) ---- */
.maestros__editor { min-width: 0; font-size: 15px; line-height: 1.5; }
.maestros__editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 17px; }
.maestros__volver { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--color-primary-600); text-decoration: none; }
/* «Ficha de Maestros»: el secundario baja aqui a 4,47:1; el terciario da 4,73:1. */
.maestros__editor-marca { margin: 0; padding: 5px 9px; border-radius: 7px; background: var(--maes-marca-bg); border: var(--bw-1) solid var(--maes-marca-borde); color: var(--color-text-subtle); font-size: 12px; line-height: 1.5; }
.maestros__editor .maestros__form-body { display: block; }
.maestros__editor .maestros__form { background: var(--color-surface); border: var(--bw-1) solid var(--color-border); border-radius: 20px; box-shadow: var(--sh-md); overflow: hidden; }
.maestros__editor .maestros__form-head { justify-content: flex-start; gap: 16px; margin: 0; padding: 24px 27px; background: var(--maes-ficha-cab); border-bottom: var(--bw-1) solid var(--maes-cab-borde); }
.maestros__form-titulos { flex: 1; min-width: 0; }
.maestros__editor .maestros__form-head > .icon-btn { align-self: flex-start; width: 38px; height: 38px; }
.maestros__editor .maestros__resumen-error { margin: 19px 27px 0; }
/* El resumen nombra cada campo por revisar con un enlace a el. Los enlaces heredan el color del aviso
   (el par ya medido de `.form-alert--error`) y se distinguen por el subrayado, no por otro color. Al
   cargar recibe el foco por guion, y un elemento con `tabindex="-1"` no siempre cumple `:focus-visible`:
   el contorno se pinta con `:focus`. */
.maestros__resumen-error:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.maestros__resumen-titulo { margin: 0; }
.maestros__resumen-lista { margin: 6px 0 0; padding-left: 20px; }
.maestros__resumen-lista li { margin: 2px 0; }
.maestros__resumen-lista a { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.maestros__seccion { padding: 25px 27px; border-bottom: var(--bw-1) solid var(--crear-filete); }
.maestros__seccion-titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--maes-seccion); }
.maestros__seccion-titulo svg { flex: none; color: var(--color-primary-500); }
.maestros__seccion > .form-alert { margin: 0 0 20px; }
.maestros__editor .maestros__intro { margin: 0 0 22px; font-size: 14px; line-height: 1.65; }
.maestros__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 20px; align-items: start; }
.maestros__rejilla--una { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.maestros__rejilla--tras { margin-top: 20px; }
.maestros__rejilla > .form-field--ancho, .maestros__rejilla > .form-pair, .maestros__rejilla > .form-hint, .maestros__rejilla > .form-alert { grid-column: 1 / -1; }
/* La ayuda de un campo va pegada a el: la rejilla separa 19 px y la ayuda sube 12. */
.maestros__rejilla > .form-hint { margin: -12px 0 0; }
.maestros__rejilla > .form-alert { margin: 0; }
.maestros__rejilla .form-pair { gap: 19px 20px; }
/* Casilla (maqueta `check-field`): la nativa, con el azul de la plataforma. */
.maestros__editor .form-check { align-items: flex-start; gap: 10px; min-height: 26px; font-size: 14px; line-height: 1.6; color: var(--maes-casilla); cursor: pointer; }
.maestros__editor .form-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-primary-500); }
/* Campo que aparece segun otro (Tipo de magnitud con «Otra magnitud»): maqueta `goods-magnitude`. */
.maestros__condicional { padding: 16px; border-left: 3px solid var(--crear-condicional-filo); border-radius: 0 9px 9px 0; background: var(--crear-condicional-bg); }
/* Texto anterior en solo lectura (#343): maqueta `goods-legacy`. */
.maestros__legado { padding: 17px 19px; border: var(--bw-1) solid var(--crear-aviso-borde); border-radius: 11px; background: var(--crear-aviso-bg); }
.maestros__editor .maestros__legado .form-label { color: var(--maes-legado-rotulo); }
.maestros__editor .maestros__legado input.input-legacy { background: var(--maes-legado-campo); border-color: var(--maes-legado-campo-borde); color: var(--maes-legado-texto); }
.maestros__editor .maestros__legado .form-hint { margin: 3px 0 0; line-height: 1.75; color: var(--maes-legado-rotulo); }
/* Origen y destino, lado a lado (maqueta `route-columns` / `route-panel`). */
.maestros__recorrido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.maestros__extremo { min-width: 0; padding: 20px; border: var(--bw-1) solid var(--maes-extremo-borde); border-radius: 13px; background: var(--maes-extremo-bg); }
.maestros__extremo-titulo { margin: 0 0 19px; font-size: 15px; line-height: 1.5; font-weight: 650; color: var(--maes-extremo-titulo); }
.maestros__extremo--destino { background: var(--maes-destino-bg); border-color: var(--maes-destino-borde); }
.maestros__extremo--destino .maestros__extremo-titulo { color: var(--maes-destino-titulo); }
/* Partes de la Plantilla DeCA (issue #123): la propia empresa, en vivo desde Cuenta (`own-company`). */
/* #339, ajuste 12 (maqueta `role-options` y `role-choice`): el papel de la empresa en una Plantilla DeCA, en dos tarjetas.
   El boton de opcion se ve (no se sustituye por el color de la tarjeta) y el foco se dibuja en la tarjeta entera. */
.maestros__papel { min-width: 0; margin: 0; padding: 0; border: 0; }
.maestros__papel > legend { padding: 0; }
.maestros__papel-opciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; margin-top: 9px; }
.maestros__papel-opcion { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--color-border-strong); border-radius: 12px; background: var(--color-surface); cursor: pointer; }
.maestros__papel-opcion:has(input:checked) { border-color: var(--crear-papel-borde); background: var(--color-primary-050); }
.maestros__papel-opcion:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
.maestros__papel.is-error .maestros__papel-opcion { border-color: var(--form-red); }
.maestros__papel-dibujo { display: grid; place-items: center; flex: none; color: var(--color-primary-500); }
.maestros__papel-texto { display: grid; gap: 3px; flex: 1; min-width: 0; }
.maestros__papel-texto strong { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--crear-rotulo); }
.maestros__papel-texto small { font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
/* El boton de opcion ocupa la tarjeta entera, invisible: toda ella es el objetivo (44 px o mas) y, al enfocarla, el navegador
   la desplaza entera. Lleva el peso de las reglas de campo de la ficha, que dan forma de caja a todo `input`. La eleccion se
   ve en la marca redonda de la derecha, no solo en el color de la tarjeta. */
.maestros__form .maestros__papel .maestros__papel-opcion input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.maestros__papel-marca { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--crear-control-borde); border-radius: 50%; background: var(--color-surface); }
.maestros__papel-marca::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-600); transform: scale(0); }
.maestros__papel-opcion:has(input:checked) .maestros__papel-marca { border-color: var(--color-primary-600); }
.maestros__papel-opcion:has(input:checked) .maestros__papel-marca::after { transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
    .maestros__papel-opcion:hover { border-color: var(--color-border-hover); }
}
@media (max-width: 760.98px) {
    .maestros__papel-opciones { grid-template-columns: minmax(0, 1fr); }
    .maestros__papel-texto strong { font-size: 16px; }
    .maestros__papel-texto small { font-size: 13px; }
    .maestros__papel-marca { width: 20px; height: 20px; }
}
@media (forced-colors: active) {
    .maestros__papel-opcion:has(input:checked) { border: 2px solid Highlight; }
    /* Con colores forzados la marca dibujada pierde su relleno: vuelve el boton de opcion del sistema. */
    .maestros__form .maestros__papel .maestros__papel-opcion input[type="radio"] { position: static; width: 20px; height: 20px; opacity: 1; appearance: auto; order: 3; }
    .maestros__papel-marca { display: none; }
}
.maestros__rol-block { min-width: 0; margin: 0 0 20px; padding: 20px; border: var(--bw-1) solid var(--maes-extremo-borde); border-radius: 13px; background: var(--maes-extremo-bg); }
.maestros__rol-block:last-child { margin-bottom: 0; }
.maestros__rol-block legend { padding: 0 8px; font-size: 15px; font-weight: 650; color: var(--maes-extremo-titulo); }
.maestros__rol-block--propio { background: var(--crear-propia); border-color: var(--crear-propia-borde); }
.maestros__mi-empresa p { margin: 0 0 4px; font-size: 13px; color: var(--color-text-subtle); }
.maestros__mi-empresa p:first-child { font-size: 16px; color: var(--color-text); }
.maestros__editor .maestros__rol-block--propio .form-hint { margin: 12px 0 0; color: var(--color-text-subtle); }
/* «Más detalles» (maqueta `more-details`). */
.maestros__editor .maestros__more { margin: 24px 27px; border: var(--bw-1) solid var(--maes-extremo-borde); border-radius: 12px; background: var(--maes-franja-bg); }
.maestros__editor .maestros__more > summary { display: flex; align-items: center; gap: 9px; margin: 0; padding: 16px 18px; list-style: none; font-size: 14px; font-weight: 650; color: var(--maes-mas); cursor: pointer; border-radius: 12px; }
.maestros__editor .maestros__more > summary::-webkit-details-marker { display: none; }
/* La regla general de foco no alcanza a <summary>. */
.maestros__editor .maestros__more > summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.maestros__editor .maestros__more > summary svg { flex: none; }
.maestros__editor .maestros__more > summary svg:last-child { margin-left: auto; transition: transform var(--dur-slow) var(--ease); }
.maestros__editor .maestros__more[open] > summary svg:last-child { transform: rotate(180deg); }
.maestros__editor .maestros__more > .maestros__rejilla { padding: 7px 18px 21px; }
.maestros__editor .maestros__form-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 22px 27px 24px; font-size: 13px; line-height: 1.65; }
.maestros__editor .maestros__form-note svg { flex: none; margin-top: 2px; }
.maestros__editor .maestros__form--blocked .maestros__seccion { border-bottom: none; }
/* Barra de acciones pegada abajo (maqueta `editor-actions`). Un campo enfocado nunca queda debajo:
   la pagina reserva su alto al desplazarse hasta el foco (`scroll-padding`), como en Crear DeCA. */
:root:has(.maestros__form-actions--pegada) { scroll-padding-top: calc(var(--topbar-h) + 20px); scroll-padding-bottom: 116px; }
.maestros__form-actions--pegada {
    position: sticky; bottom: 12px; z-index: 12;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 15px; padding: 17px 25px;
    background: var(--crear-barra-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: var(--bw-1) solid var(--crear-barra-borde); border-radius: 13px; box-shadow: 0 6px 24px #1536520b;
}
.maestros__form-leyenda { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.maestros__form-botones { display: flex; gap: 9px; }
/* Pasos de la Plantilla DeCA (maqueta `template-steps`): informan, no navegan. */
.maestros__pasos { display: flex; align-items: center; gap: 17px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--color-text-muted); }
.maestros__paso { display: flex; align-items: center; gap: 7px; }
.maestros__paso-n { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--color-surface); border: var(--bw-1) solid var(--color-border-strong); font-size: 11px; font-weight: 700; }
.maestros__paso.is-actual { color: var(--color-primary-600); font-weight: var(--fw-semibold); }
.maestros__paso.is-actual .maestros__paso-n { background: var(--grad-primary); border-color: transparent; color: var(--color-on-accent); }
/* La pantalla propia de la plantilla no tiene menu a su lado: se centra con un ancho legible. */
.maestros__editor--pagina { max-width: 1040px; margin: 0 auto; }
.maestros__editor--pagina > .form-alert { margin: 0 0 16px; }

/* Los efectos al pasar el cursor, solo donde hay cursor de verdad: en una pantalla tactil el
   `:hover` se queda pegado tras tocar. Ninguno mueve ni levanta nada. */
@media (hover: hover) and (pointer: fine) {
    .entity-tab:not([aria-current="page"]):hover { background: var(--maes-nav-hover); }
    .maestros .maestros__tabla tbody tr:hover { background: var(--maes-fila-hover); }
    :is(.maestros, .maestros__editor) .form-field textarea:hover, .maestros__por-pagina select:hover { border-color: var(--color-border-hover); }
    .maestros__limpiar:hover, .maestros__volver:hover { text-decoration: underline; text-underline-offset: 3px; }
    .maestros__ficha-enlace:hover { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 3px; }
    a.maestros__pag-boton:hover { background: var(--btn-outline-hover); border-color: var(--color-border-hover); }
}

/* ---- Cortes de la maqueta ---- */
@media (max-width: 1450px) {
    .app-main:has(> .maestros), .app-main:has(> .maestros__editor) { padding-left: 26px; padding-right: 26px; }
    .maestros { grid-template-columns: 196px minmax(0, 1fr); gap: 18px; }
    .maestros__lista-cab { gap: 12px; }
    .maestros__filters { grid-template-columns: minmax(150px, 1fr) minmax(120px, auto) minmax(148px, auto); }
    .maestros__filters .maestros__filtrar { grid-column: 3; justify-self: end; }
    .maestros__filters--sin-extra { grid-template-columns: minmax(150px, 1fr) minmax(135px, auto) auto; }
    .maestros__filters--sin-extra .maestros__filtrar { grid-column: auto; }
    .maestros .maestros__tabla th, .maestros .maestros__tabla td { padding-left: 12px; padding-right: 12px; }
    /* Cuatro botones en una fila no caben junto al cupo a este ancho: la rejilla baja a su propia fila. */
    .maestros__toolbar-actions--excel { grid-template-columns: repeat(4, auto); }
}
@media (max-width: 1230px) {
    /* El menu pasa arriba, en tres columnas, y deja de ser pegajoso. */
    .maestros { grid-template-columns: minmax(0, 1fr); }
    .maestros__nav { position: static; }
    .maestros__nav-rotulo, .maestros__nav-nota { display: none; }
    .maestros__entities ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .entity-tab { min-height: 51px; background: var(--maes-nav-caja); border-color: var(--color-border); font-size: 13px; }
    .maestros__filters { grid-template-columns: minmax(150px, 1fr) minmax(120px, auto) minmax(157px, auto) auto; }
    .maestros__filters .maestros__filtrar { grid-column: auto; }
}
@media (max-width: 1000.98px) {
    .maestros__lista-cab { flex-wrap: wrap; }
    .maestros__nuevo { margin-left: auto; }
    .maestros__filters { grid-template-columns: minmax(150px, 1fr) minmax(120px, auto) minmax(155px, auto); }
    .maestros__filters .maestros__filtrar { grid-column: 3; justify-self: end; }
    .maestros__filters--sin-extra { grid-template-columns: minmax(150px, 1fr) minmax(135px, auto) auto; }
    .maestros__filters--sin-extra .maestros__filtrar { grid-column: auto; }
    .maestros__toolbar-actions--excel { grid-template-columns: repeat(2, minmax(0, max-content)); }
    /* Con el rail de iconos la tarjeta se queda en unos 780 px: las celdas se aprietan para que la
       tabla quepa sin barra interior. */
    .maestros .maestros__tabla th, .maestros .maestros__tabla td { padding-left: 8px; padding-right: 8px; }
    .maestros .maestros__tabla th:first-child, .maestros .maestros__tabla td:first-child { padding-left: 18px; }
    .maestros .maestros__tabla th:last-child, .maestros .maestros__tabla td:last-child { padding-right: 18px; }
    .maestros__celda-principal { min-width: 0; }
    /* Entre 761 y 1000 px la tabla va justa: el icono del registro se encoge para no quitar sitio a las cabeceras. */
    .maestros__registro { gap: 7px; }
    .maestros__avatar { width: 24px; height: 24px; border-radius: 7px; }
    .maestros__avatar svg { width: 15px; height: 15px; }
    .maestros .badge--incompleto { margin-left: 0; white-space: normal; }
}
@media (max-width: 760.98px) {
    .app-main:has(> .maestros), .app-main:has(> .maestros__editor) { padding: 23px 16px 22px; }
    .page-header--emblema { align-items: flex-start; gap: 10px; margin-bottom: 20px; }
    .page-eyebrow { font-size: 10px; letter-spacing: 1.3px; }
    .page-header--emblema .page-title { font-size: 29px; }
    .page-header--emblema .page-subtitle { line-height: 1.6; }
    .page-emblema { width: 43px; height: 43px; margin-top: 17px; border-radius: 12px; }
    .page-emblema svg { width: 24px; height: 24px; }
    .maestros { gap: 17px; font-size: 16px; line-height: 1.6; }
    .maestros__entities ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Campos a 16 px (por debajo, iOS Safari amplia la pagina al enfocar) y 48 px de alto. */
    :is(.maestros, .maestros__editor) .form-field { gap: 8px; }
    :is(.maestros, .maestros__editor) .form-label { font-size: 15px; }
    :is(.maestros, .maestros__editor) .form-field input,
    :is(.maestros, .maestros__editor) .form-field select,
    :is(.maestros, .maestros__editor) .form-field textarea { min-height: 48px; font-size: 16px; }
    :is(.maestros, .maestros__editor) .form-hint { font-size: 13px; }

    /* Listado. */
    .maestros__lista-cab { padding: 20px 18px; gap: 12px; }
    .maestros__dibujo { width: 48px; height: 48px; border-radius: 13px; }
    .maestros__dibujo svg { width: 38px; height: 38px; }
    .maestros__nuevo { flex: 1 1 100%; width: 100%; min-height: 48px; margin: 5px 0 0; font-size: 16px; }
    .maestros__filters, .maestros__filters--sin-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px 11px; padding: 20px 18px; }
    .maestros__filtro--buscar { grid-column: 1 / -1; }
    .maestros__filters--sin-extra .maestros__filtro:not(.maestros__filtro--buscar) { grid-column: 1 / -1; }
    .maestros .maestros__filters > .maestros__filtrar, .maestros .maestros__filters--sin-extra > .maestros__filtrar { grid-column: 1 / -1; justify-self: stretch; min-height: 48px; }
    .maestros__herramientas { align-items: flex-start; gap: 16px; padding: 0 18px 20px; }
    .maestros__quota { font-size: 14px; }
    /* Excel y CSV en movil (M03, issue #187): las dos de Excel a todo el ancho, las dos de CSV a medias. */
    .maestros__toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
    .maestros__toolbar-actions .btn { min-height: 44px; font-size: 14px; white-space: normal; text-align: center; }
    .maestros__toolbar-actions--excel > .btn--soft, .maestros__toolbar-actions--excel > .maestros__import-form > .btn--soft { grid-column: 1 / -1; }
    .maestros__resultados { flex-wrap: wrap; gap: 10px; padding: 13px 18px; }
    .maestros__limpiar { min-height: 44px; }
    .maestros__por-pagina select { min-height: 44px; font-size: 16px; }
    .maestros__por-pagina-boton:focus-visible { min-height: 44px; font-size: 14px; }
    .maestros__resumen-lista a { display: inline-block; padding: 6px 0; }

}
/* La tabla pasa a tarjetas (maqueta): una rejilla de dos columnas por fila, con la etiqueta de cada
   dato encima. Los papeles ARIA van escritos en el marcado porque aqui cambia `display`.
   Solo en PANTALLA: una hoja A4 con margenes mide menos de 760 px, y con tarjetas un listado de 25
   filas se iba a diez hojas; impreso sigue siendo una tabla. */
@media screen and (max-width: 760.98px) {
    .maestros .maestros__tabla-caja { overflow: visible; }
    .maestros .maestros__tabla, .maestros .maestros__tabla tbody { display: block; width: 100%; }
    .maestros .maestros__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .maestros .maestros__tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 20px 18px; border-bottom: var(--bw-1) solid var(--maes-filete); }
    .maestros .maestros__tabla tbody tr:last-child { border-bottom: none; }
    .maestros .maestros__tabla td, .maestros .maestros__tabla td:first-child, .maestros .maestros__tabla td:last-child { display: block; width: auto; min-width: 0; padding: 0; border: none; font-size: 15px; }
    .maestros .maestros__tabla td:not(.maestros__celda-principal):not(.maestros__celda-estado):not(.col-actions)::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-medium); color: var(--color-text-muted); }
    .maestros__celda-principal, .maestros__celda-estado, .maestros .maestros__tabla td.col-actions { grid-column: 1 / -1; }
    .maestros__ficha-enlace, .maestros__ficha-nombre { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
    .maestros__registro { gap: 10px; }
    .maestros__avatar { width: 37px; height: 37px; }
    .maestros__avatar svg { width: 21px; height: 21px; }
    .maestros__placa { padding: 5px 10px; font-size: 16px; }
    .maestros__chip { font-size: 14px; }
    .maestros__estado { padding: 5px 9px; font-size: 13px; }
    /* Acciones de fila: 44 px al dedo, en una linea propia separada por un filete. */
    .maestros .maestros__tabla td.col-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 1px; padding-top: 10px; border-top: 1px dashed var(--color-border); white-space: normal; }
    .maestros .col-actions--iconos .icon-btn { width: 44px; height: 44px; margin-right: 0; border-radius: 10px; }
    /* El dibujo vuelve a sus 20 px: la consulta `@container tabla` del #274 lo bajaba a 18 px en una
       tabla estrecha —la de escritorio con el panel al lado, que ya no existe— y aqui, con la tabla
       hecha tarjetas, lo dejaba pequeno dentro de un boton de 44 px. */
    .maestros .col-actions--iconos .icon-btn svg { width: 20px; height: 20px; }
    .maestros .col-actions--iconos .inline-form { display: inline-flex; }
}
@media (max-width: 760.98px) {
    .maestros__vacio { padding: 36px 18px; }
    .maestros__pie { padding: 16px 18px; }
    .maestros__pag-boton { width: 44px; height: 44px; }
    .maestros__nota { margin: 16px 2px 0; font-size: 13px; line-height: 1.7; }

    /* Ficha. */
    .maestros__editor { font-size: 16px; line-height: 1.6; }
    .maestros__editor-top { flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
    .maestros__volver { font-size: 15px; }
    .maestros__editor .maestros__form-head { gap: 11px; padding: 20px 18px; }
    .maestros__editor .maestros__form-head > .icon-btn { width: 44px; height: 44px; }
    .maestros__editor .maestros__resumen-error { margin: 18px 18px 0; }
    .maestros__seccion { padding: 22px 18px; }
    .maestros__seccion-titulo { font-size: 17px; }
    .maestros__editor .maestros__intro { font-size: 15px; line-height: 1.7; }
    .maestros__rejilla, .maestros__rejilla .form-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .maestros__editor .form-check { min-height: 44px; align-items: center; font-size: 15px; line-height: 1.7; }
    .maestros__editor .form-check input { width: 21px; height: 21px; margin: 0; }
    .maestros__legado { padding: 16px; }
    .maestros__recorrido { grid-template-columns: minmax(0, 1fr); gap: 17px; }
    .maestros__extremo, .maestros__rol-block { padding: 18px 15px; }
    .maestros__extremo-titulo { font-size: 16px; }
    .maestros__mi-empresa p { font-size: 14px; }
    .maestros__mi-empresa p:first-child { font-size: 17px; }
    .maestros__editor .maestros__more { margin: 22px 18px; }
    .maestros__editor .maestros__more > summary { min-height: 48px; padding: 15px; font-size: 15px; }
    .maestros__editor .maestros__more > .maestros__rejilla { padding: 8px 15px 19px; }
    .maestros__editor .maestros__form-note { padding: 20px 18px 22px; font-size: 14px; }
    :root:has(.maestros__form-actions--pegada) { scroll-padding-bottom: 104px; }
    .maestros__form-actions--pegada { bottom: 8px; gap: 9px; padding: 13px 12px; }
    .maestros__form-leyenda { display: none; }
    .maestros__form-botones { width: 100%; justify-content: space-between; gap: 8px; }
    .maestros__form-botones .btn { min-height: 48px; padding: 11px 13px; }
    .maestros__form-botones .btn--accent { flex: 1; }
    .maestros__pasos { flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
}
/* En movil el menu de categorias se cambia por el desplegable de la maqueta, con su boton «Ir»: es un
   formulario GET que resuelve el servidor, asi que sirve igual sin JavaScript y no hace falta dejar el
   menu de enlaces como reserva. */
@media (max-width: 760.98px) {
    .maestros__nav { display: none; }
    .maestros__ir { display: flex; flex-direction: column; gap: 7px; }
    .maestros__ir-fila { display: flex; align-items: stretch; gap: 8px; }
    .maestros__ir-boton { flex: none; min-width: 56px; min-height: 51px; font-size: 16px; }
    .maestros__ir-rotulo { font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
    .maestros__ir select {
        flex: 1; width: 100%; min-width: 0; min-height: 51px; padding: 11px 12px;
        border: var(--bw-1) solid var(--maes-ir-borde); border-radius: var(--r-md); background: var(--maes-ir-bg);
        color: var(--color-text); font: inherit; font-size: 16px; font-weight: var(--fw-semibold); cursor: pointer;
        /* Un desplegable cerrado no parte su texto en dos lineas: el nombre mas largo («Clientes /
           Cargadores / Contratantes») se acorta con puntos suspensivos en vez de cortarse a secas. El
           nombre entero se lee al abrirlo y en el titulo de la tarjeta, justo debajo. */
        text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
    }
}
@media (max-width: 370px) {
    .maestros__lista-cab, .maestros__filters, .maestros__filters--sin-extra { padding-left: 15px; padding-right: 15px; }
    .maestros__lista-titulo, .maestros__form-title { font-size: 20px; }
    .maestros__dibujo { width: 42px; height: 42px; }
    .maestros__dibujo svg { width: 32px; height: 32px; }
    .maestros__toolbar-actions .btn { font-size: 13px; }
    .maestros__por-pagina { margin-left: 0; }
    .maestros__editor .maestros__form-head, .maestros__seccion { padding-left: 15px; padding-right: 15px; }
    /* A 320 px «Cancelar» y «Guardar» con su dibujo no caben en una linea: el dibujo se retira. */
    .maestros__form-botones .btn svg { display: none; }
}
@media screen and (max-width: 370px) {
    .maestros .maestros__tabla tbody tr { padding: 18px 15px; }
}
/* Movimiento reducido: las transiciones de esta seccion las apaga la regla global de la hoja. */
/* Colores forzados (Windows «Contraste alto»): los fondos desaparecen, asi que lo que solo se
   distinguia por su fondo recibe un marco. La categoria actual, ademas, se subraya. */
@media (forced-colors: active) {
    .entity-tab[aria-current="page"] { border: 2px solid Highlight; }
    .entity-tab[aria-current="page"] .entity-tab__label { text-decoration: underline; }
    .entity-tab[aria-current="page"] .entity-tab__count, .maestros__estado, .maestros__chip, .maestros__pag-numero, .maestros__editor-marca { border: 1px solid CanvasText; }
    .maestros__estado.is-inactivo { border-style: dashed; }
    .maestros__cupo-barra { border: 1px solid CanvasText; height: 6px; }
    .maestros__cupo-barra > span { background: Highlight; forced-color-adjust: none; }
    .maestros__paso.is-actual .maestros__paso-n { border: 2px solid Highlight; }
    .maestros__paso.is-actual { text-decoration: underline; }
    .maestros__condicional, .maestros__legado { border: 1px solid CanvasText; }
    .maestros__form-actions--pegada { border: 1px solid CanvasText; background: Canvas; }
}
/* Impresion: sale el listado como tabla y nada de lo que solo sirve en pantalla (el menu de
   categorias, su desplegable, los filtros, los botones de fichero, las acciones de fila y la barra
   de acciones de la ficha). */
@media print {
    .maestros { display: block; }
    .maestros__nav, .maestros__ir, .maestros__nuevo, .maestros__filters, .maestros__toolbar-actions, .maestros__resultados,
    .maestros__pag, .maestros__form-actions--pegada, .maestros .maestros__tabla .col-actions { display: none; }
    .maestros__lista, .maestros__editor .maestros__form { box-shadow: none; }
    .maestros .maestros__tabla tbody tr { break-inside: avoid; }
}

/* ============================================================================
 * issue #354 (S-302): envios de una Plantilla DeCA. Las tarjetas, el desplegable
 * de modalidad y el bloque comun son los de Crear DeCA (`.deca-wizard .deca-form`);
 * aqui solo va lo que cambia al estar dentro de la ficha de Maestros.
 * Colores: los tokens del rediseno; ninguno nuevo.
 * ========================================================================== */
.plantilla-envios__cuerpo.deca-wizard { max-width: none; margin-top: 18px; }
/* Las casillas y los botones de opcion de la tarjeta no son campos de texto: la regla de los campos de la ficha de
   Maestros (ancho completo, 46 px de alto, relleno) no les toca. */
.maestros__editor .plantilla-envios .form-field input[type="checkbox"],
.maestros__editor .plantilla-envios .form-field input[type="radio"] { flex: none; width: 18px; min-width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 0; }
.plantilla-envios__deshacer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--crear-nota-borde); border-radius: 10px; background: var(--crear-nota-bg); font-size: 14px; }
.plantilla-envios__deshacer[hidden] { display: none; }
.plantilla-envios .peso-antiguo { display: block; margin: 0 0 19px; }
.plantilla-envios .peso-antiguo p { margin: 0; }
.plantilla-envios .peso-antiguo p + p { margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }
.plantilla-parte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.plantilla-parte .form-hint { flex: 1 1 260px; margin: 0; }
.plantilla-parte__buscador .js-combo-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.plantilla-parte__buscador .combo__pop { right: auto; width: min(360px, calc(100vw - 64px)); }
@media (max-width: 767px) {
    .plantilla-parte__buscador .js-combo-trigger { min-height: 44px; }
    .plantilla-envios__deshacer .btn { min-height: 44px; }
}

/* ============================================================================
   Suscripcion y pagos (issues #11, #32, #33, #39, #48, #229 y #247; rediseno #339, S-227)
   ----------------------------------------------------------------------------
   Maqueta `Docarga-suscripcion-pagos-redisenado.html` (familia B). Sus cortes son 1380, 1230,
   1100, 1000, 760 y 370 px, de ventana (escritos con `.98`, como los de la estructura).
   Tres pantallas dentro de `.susc`: los planes (`.susc--planes`), los pagos y las tarjetas
   (`.susc--pagos`) y la confirmacion de contratacion (`.susc--confirmar`). Todo va acotado a
   `.susc`, asi que Cuenta > Suscripcion —que tiene su propia slice— no cambia.
   Es solo aspecto: precios, prorrateo, impuestos, limites, cupones y tarjetas se pintan como
   llegan del servidor, y los formularios conservan sus campos y destinos (caso 280).
   Lo que NO sale de la maqueta y se conserva (D-339-4): la ficha del contrato Enterprise, el
   cupo gratuito, el cupon, los avisos de reintento y de solo lectura, los motivos de cada
   accion de tarjeta y varias tarjetas guardadas a la vez.
   Los grises secundarios de la maqueta no llegan a 4,5:1: aqui son siempre
   `--color-text-muted`, o `--color-text-subtle` sobre los fondos azulados (caso 181).
   ============================================================================ */
.app-main:has(> .susc) { --content-max: 1660px; max-width: 1660px; padding-top: 30px; padding-bottom: 22px; }
.susc { font-size: 15px; line-height: 1.5; }
.susc h2 { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -.4px; color: var(--color-primary-700); }
.susc h3 { margin: 0; }
.susc > .form-alert { margin: 0 0 20px; padding-top: 15px; padding-bottom: 15px; font-size: 14px; line-height: 1.65; }
.susc > .form-alert::before { top: 17px; }
/* Dentro de una tarjeta que recorta (`overflow: hidden`) el anillo de foco va pegado, para verse entero. */
.susc .card :focus-visible { outline-offset: 2px; }
.susc .btn svg { flex: none; }

/* ---- Pestanas (maqueta `subscription-tabs`): dos enlaces en una pastilla ---- */
.subnav-tabs { display: inline-flex; gap: 5px; padding: 5px; margin-bottom: 24px; border: var(--bw-1) solid var(--susc-pestanas-borde); border-radius: 13px; background: var(--susc-pestanas-bg); }
.subnav-tab {
    display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 18px;
    border-radius: var(--r-md); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; color: var(--color-text-subtle);
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.subnav-tab svg { flex: none; }
.subnav-tab.is-active { color: var(--color-primary-600); background: var(--color-surface); box-shadow: 0 2px 5px #173e6310; }
.subnav-tab:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .subnav-tab:not(.is-active):hover { color: var(--color-primary-600); background: var(--susc-fila-hover); }
}
/* La pestana actual no se distingue solo por su fondo: con colores forzados lleva un filete. */
@media (forced-colors: active) {
    .subnav-tab.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---- Piezas comunes de las tres pantallas ---- */
.susc .card { margin-bottom: 22px; padding: 0; min-width: 0; }
.susc .card-heading { display: flex; align-items: center; gap: 13px; padding: 24px 25px 21px; }
.susc .card-heading > div { min-width: 0; flex: 1; }
.susc .card-heading p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); max-width: none; }
.susc .card-heading > form, .susc .card-heading > .btn { margin-left: auto; flex: none; }
.susc-icono { display: grid; place-items: center; flex: none; width: 41px; height: 41px; border-radius: 12px; border: var(--bw-1) solid var(--susc-icono-borde); background: var(--susc-icono-bg); color: var(--susc-icono-trazo); }
.susc-rotulo { display: block; margin: 0 0 5px; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-text-subtle); }
.susc h2.susc-rotulo { font-size: 11px; line-height: 1.5; letter-spacing: 1.1px; color: var(--color-text-subtle); }
.susc-nota { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.susc-nota svg { flex: none; margin-top: 2px; }
/* Rejilla de datos rotulados (ficha del contrato, cupo gratuito y resumen del pedido). */
.susc-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px 18px; margin: 0; padding: 3px 25px 24px; }
.susc-datos dt { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.susc-datos dt svg { flex: none; color: var(--susc-icono-trazo); }
.susc-datos dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--susc-fuerte); overflow-wrap: anywhere; }
.susc-ficha > .form-alert { margin: 0 25px 20px; }
.susc-ficha__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 25px; padding: 16px 0 22px; border-top: var(--bw-1) solid var(--susc-filete); }
/* Distintivo de estado (maqueta `status-badge`): suave, con su texto. El color acompana, no informa solo.
   Los pares son los de la paleta de estados, ya medidos (la maqueta pinta #25816b sobre #ebf8f3, 4,35:1). */
.susc-distintivo { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: var(--bw-1) solid transparent; border-radius: 7px; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.susc-distintivo svg { flex: none; }
.susc-distintivo--ok { color: var(--state-emitido-fg); background: var(--state-emitido-bg); }
.susc-distintivo--aviso { color: var(--state-modificado-fg); background: var(--state-modificado-bg); }
.susc-distintivo--peligro { color: var(--state-anulado-fg); background: var(--state-anulado-bg); }
.susc-distintivo--neutro { color: var(--state-borrador-fg); background: var(--state-borrador-bg); }
.susc-distintivo--info { color: var(--color-primary-600); background: var(--susc-actual-bg); }
@media (forced-colors: active) { .susc-distintivo { border-color: CanvasText; } }

/* ---- Planes: consumo del periodo (maqueta `usage-overview`) ---- */
.susc-uso { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-bottom: 32px; }
.susc-uso__tarjeta { position: relative; overflow: hidden; padding: 25px 28px 0; border-radius: var(--r-xl); background: var(--grad-consumo); color: var(--consumo-text); box-shadow: 0 8px 21px #07306616; }
.susc-uso__tarjeta::before { content: ""; position: absolute; width: 340px; height: 340px; right: -160px; top: -205px; border: 55px solid #ffffff04; border-radius: 50%; pointer-events: none; }
.susc-uso__tarjeta :focus-visible { outline-color: var(--color-focus-ring-on-dark); }
.susc-uso__cab { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.susc .susc-uso__cab h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.2px; color: var(--consumo-text); }
.susc-uso__cab h2 svg { flex: none; color: var(--consumo-icon); }
.susc-uso__plan { margin: 0; padding: 5px 10px; border: 1px solid #ffffff26; border-radius: 7px; background: var(--susc-velo); font-size: 13px; font-weight: 550; color: var(--consumo-badge-fg); }
.susc-uso__cifras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 34px; margin: 23px 0 20px; }
.susc-uso__cifra { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.susc-uso__cifra dt { font-size: 14px; line-height: 1.5; color: var(--consumo-label); }
.susc-uso__cifra dd { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 650; letter-spacing: -.8px; color: var(--consumo-text); }
.susc-uso__cifra--emitidos dd { font-size: 55px; line-height: 1.05; letter-spacing: -1.9px; }
.susc-uso__cifra--incluidos dd { color: var(--consumo-muted); font-weight: 500; }
.susc-uso__cifra--restantes { padding-left: 34px; border-left: 1px solid var(--consumo-line); }
.susc-uso__cifra--restantes dd { color: var(--consumo-accent); }
.susc-uso__barra { display: flex; align-items: center; gap: 13px; }
.susc-uso__barra .quota-bar { flex: 1; height: 7px; border-radius: 8px; background: var(--consumo-track); }
.susc-uso__barra .quota-bar__fill { border-radius: 8px; background: linear-gradient(90deg, var(--consumo-fill-from), var(--consumo-fill-to)); }
.susc-uso__pct { font-size: 13px; white-space: nowrap; color: var(--consumo-muted); }
/* Colores forzados: la barra solo se pintaba con fondos, que ese modo retira. Su pista recibe un filete y su
   relleno el color de resalte del sistema, como la barra de cupo de Maestros. */
@media (forced-colors: active) {
    .susc-uso__barra .quota-bar { height: 9px; border: 1px solid CanvasText; }
    .susc-uso__barra .quota-bar__fill { background: Highlight; forced-color-adjust: none; }
}
.susc-uso__pie { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 16px 0 18px; border-top: 1px solid var(--consumo-line); font-size: 13px; line-height: 1.6; color: var(--consumo-muted); }
.susc-uso__pie svg { flex: none; }
.susc-uso__pie strong { margin-left: 5px; font-weight: 500; color: var(--consumo-strong); }
.susc .susc-uso__detalle { display: flex; flex-direction: column; margin: 0; padding: 23px 25px; }
.susc-uso__extra { display: grid; gap: 16px; margin: 0; }
.susc-uso__extra > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.susc-uso__extra dt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text-muted); }
.susc-uso__extra dt svg { flex: none; color: var(--susc-icono-trazo); }
.susc-uso__extra dd { margin: 0; font-size: 18px; font-weight: 650; color: var(--susc-fuerte); white-space: nowrap; }
.susc-uso__renovacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: var(--bw-1) solid var(--susc-filete); }
.susc-uso__extra + .susc-uso__renovacion { margin-top: 20px; }
.susc-uso__renovacion .susc-nota { flex: 1 1 220px; }

/* ---- Planes: titulo de seccion y tarjetas (maqueta `plans-grid` y `plan-card`) ---- */
.susc-seccion { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; }
.susc-seccion > div { min-width: 0; }
.susc-seccion p { margin: 5px 0 0; font-size: 14px; color: var(--color-text-muted); }
.susc-seccion .susc-seccion__nota { margin: 0; font-size: 13px; white-space: nowrap; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 17px; align-items: stretch; margin-bottom: 30px; padding-top: 13px; }
.plan-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 23px 23px;
    border: var(--bw-1) solid var(--susc-plan-borde); border-radius: var(--r-xl); background: var(--color-surface); box-shadow: var(--sh-md);
    transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .plan-card:hover { border-color: var(--color-border-hover); box-shadow: 0 7px 28px #17426c0a; }
}
/* El plan de la empresa: borde mas marcado y lavado azul (maqueta `plan-current`). Lo dice ademas su
   rotulo «Plan actual», que es lo que informa. El destacado lleva la cinta; los dos pueden coincidir. */
.plan-card--current { border: 1.5px solid var(--susc-actual-borde); background: var(--susc-actual); box-shadow: 0 6px 25px #1762a50a; }
.plan-card--featured { border-color: var(--susc-actual-borde); }
.plan-card__ribbon {
    position: absolute; top: -14px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 27px; margin: 0; padding: 3px 10px; border-radius: 7px; background: var(--color-primary-600); color: var(--color-on-accent);
    font-size: 11px; line-height: 1.4; font-weight: 750; letter-spacing: .9px; text-transform: uppercase; text-align: center; box-shadow: 0 3px 8px #116abc13;
}
.plan-card__ribbon svg { flex: none; }
.plan-card__cab { display: flex; align-items: center; gap: 11px; margin-bottom: 23px; }
.plan-card__cab > div { min-width: 0; }
.plan-card__icono { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; border: var(--bw-1) solid var(--susc-icono-borde); background: var(--susc-icono-bg); color: var(--susc-icono-trazo); }
.plan-card h3 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.4px; color: var(--color-primary-700); overflow-wrap: anywhere; }
.plan-card__subtitle { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.plan-card__price { display: grid; gap: 4px; align-content: start; min-height: 78px; margin: 0; }
/* El importe va en una linea mientras quepa. Uno de cinco cifras en una tarjeta estrecha no se sale de ella: baja
   su moneda a la linea siguiente y, si ni asi cabe, se parte. */
.plan-card__price strong { min-width: 0; font-size: 35px; line-height: 1.2; font-weight: 720; letter-spacing: -1.3px; color: var(--color-primary-700); overflow-wrap: anywhere; }
.plan-card__price--medida { margin-bottom: 18px; }
.plan-card__price--medida strong { font-size: 32px; }
.plan-card__period { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.plan-card__cupo { list-style: none; margin: 12px 0 20px; padding: 17px 0 19px; border-top: var(--bw-1) solid var(--susc-filete); border-bottom: var(--bw-1) solid var(--susc-filete); }
.plan-card__cupo li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--susc-texto); }
.plan-card__cupo li svg { flex: none; color: var(--susc-icono-trazo); }
.plan-card__cupo li span { font-weight: 650; color: var(--susc-fuerte); }
.plan-card__cupo .plan-card__usuarios { margin-top: 9px; }
.plan-card__cupo .plan-card__adicional { display: block; margin-top: 13px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.plan-card__feats { list-style: none; display: grid; gap: 13px; margin: 0 0 23px; padding: 0; }
.plan-card__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.6; color: var(--susc-texto); }
.plan-card__feats li svg { flex: none; margin-top: 4px; stroke-width: 2; color: var(--susc-icono-trazo); }
.plan-card__feats li span { min-width: 0; overflow-wrap: anywhere; }
.plan-card__pie { display: grid; gap: 16px; margin-top: auto; }
.plan-card__pie form { margin: 0; }
.plan-card__pie .btn { width: 100%; min-height: 47px; padding: 12px 9px; font-size: 14px; white-space: normal; text-align: center; }
.plan-card__maestros-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 30px; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; color: var(--color-primary-600); }
.plan-card__maestros-link:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .plan-card__maestros-link:hover { color: var(--color-primary-700); text-decoration: underline; }
}
.plan-card__actual { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 47px; margin: 0; padding: 12px 9px; border: var(--bw-1) solid var(--susc-actual-linde); border-radius: var(--r-md); background: var(--susc-actual-bg); color: var(--color-primary-600); font-size: 14px; font-weight: 650; }
.plan-card__actual svg { flex: none; }
@media (forced-colors: active) {
    .plan-card--current { border: 3px solid Highlight; }
    .plan-card__ribbon, .plan-card__actual { border: 1px solid CanvasText; }
}

/* ---- Planes: comparativa de Maestros (maqueta `comparison-card`) ---- */
.susc-cmp { overflow: hidden; scroll-margin-top: 90px; }
.susc-cmp__intro { max-width: 1050px; margin: 0 25px 12px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }
.susc-cmp__intro + .susc-cmp__desliza, .susc-cmp__intro + .susc-cmp__scroll { margin-top: 22px; }
.susc-cmp__desliza { display: none; color: var(--color-text-muted); }
.susc-cmp__scroll { width: 100%; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
/* El contenedor ocupa la tarjeta de lado a lado: su anillo va por dentro, o la tarjeta lo recortaria. */
.susc .card .susc-cmp__scroll:focus-visible { outline-offset: -3px; }
/* Cada plan tiene asegurada una columna de 140 px, en la que su nombre cabe sin partirse por dentro de una
   palabra: con muchos planes o poco ancho la tabla no se encoge mas, se desliza dentro de su region (que recibe
   el foco y tiene nombre) con la primera columna fija. `--susc-cmp-planes` es el numero de columnas de plan, que
   la hoja cuenta en la cabecera (hasta ocho; sin `:has()` se suponen cuatro). Aqui la primera columna mide el
   34 %, asi que a cada plan le toca 0,66 / n: 140 / 0,66 = 212. */
.susc-cmp__tabla { --susc-cmp-planes: 4; width: 100%; min-width: calc(var(--susc-cmp-planes) * 212px); border-collapse: collapse; table-layout: fixed; }
.susc-cmp__tabla:not(:has(thead th:nth-child(5))) { --susc-cmp-planes: 3; }
.susc-cmp__tabla:not(:has(thead th:nth-child(4))) { --susc-cmp-planes: 2; }
.susc-cmp__tabla:has(thead th:nth-child(6)) { --susc-cmp-planes: 5; }
.susc-cmp__tabla:has(thead th:nth-child(7)) { --susc-cmp-planes: 6; }
.susc-cmp__tabla:has(thead th:nth-child(8)) { --susc-cmp-planes: 7; }
.susc-cmp__tabla:has(thead th:nth-child(9)) { --susc-cmp-planes: 8; }
.susc-cmp__tabla th:first-child { width: 34%; position: sticky; left: 0; z-index: 2; }
.susc-cmp__tabla th, .susc-cmp__tabla td { padding: 15px 17px; border-top: var(--bw-1) solid var(--susc-filete); text-align: center; font-size: 14px; color: var(--susc-texto); background: var(--color-surface); }
.susc-cmp__tabla thead th { height: 74px; vertical-align: middle; font-weight: 650; color: var(--susc-fuerte); background: var(--susc-th-bg); overflow-wrap: break-word; }
.susc-cmp__tabla thead th:first-child { padding-left: 25px; text-align: left; font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.susc-cmp__tabla thead th span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
.susc-cmp__tabla tbody th { padding-left: 25px; text-align: left; font-weight: 500; }
.susc-cmp__tabla tbody th > span { display: flex; align-items: center; gap: 12px; }
.susc-cmp__tabla tbody th svg { flex: none; color: var(--susc-icono-trazo); }
.susc-cmp__tabla td.is-actual { background: var(--susc-col-actual); }
.susc-cmp__tabla thead th.is-actual { color: var(--color-primary-600); background: var(--susc-col-actual-cab); }
/* #339, ajuste 13: columna del plan cuyo «Ver límites de Maestros» se acaba de pulsar (maqueta `comparison-highlight`).
   La pone y la quita `app.js`; va despues de la columna del plan actual para ganarle. */
.susc-cmp__tabla .is-resaltada { background: var(--susc-resalte-bg); color: var(--susc-resalte-texto); box-shadow: inset 3px 0 0 var(--susc-resalte-filo), inset -3px 0 0 var(--susc-resalte-filo); }
@media (forced-colors: active) {
    .susc-cmp__tabla .is-resaltada { outline: 2px solid Highlight; outline-offset: -2px; }
}
.susc-cmp__si { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--state-emitido-fg); }
@media (forced-colors: active) {
    .susc-cmp__tabla .is-actual { border-left: 2px solid Highlight; border-right: 2px solid Highlight; }
}
.susc-pasarela { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.susc-pasarela svg { flex: none; }

/* ---- Pagos: la suscripcion (maqueta `subscription-summary`) ---- */
.susc .susc-resumen { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.8fr); overflow: hidden; }
.susc-resumen__principal { display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 13px; padding: 26px; border-right: var(--bw-1) solid var(--color-border); background: var(--susc-resumen); }
.susc-resumen__plan { flex: 1; min-width: 0; }
.susc .susc-resumen__plan h2 { font-size: 25px; overflow-wrap: anywhere; }
.susc-resumen__sin { margin: 0; font-size: 18px; line-height: 1.4; color: var(--color-primary-700); }
.susc-resumen__estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0 0 0 auto; }
.susc-resumen__estado .form-hint { max-width: 22ch; text-align: right; color: var(--color-text-subtle); }
.susc-resumen__precio { flex: 1 1 100%; margin: 12px 0 0; }
.susc-resumen__precio strong { display: block; font-size: 34px; line-height: 1.25; font-weight: 700; letter-spacing: -1px; color: var(--color-primary-700); }
.susc-resumen__precio .form-hint { display: block; margin-top: 7px; font-size: 13px; color: var(--color-text-subtle); }
.susc-resumen__detalle { min-width: 0; padding: 25px 28px; }
.susc-resumen__detalle > p { margin: 0 0 12px; }
.susc-resumen__renueva { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--susc-fuerte); }
.susc-resumen__renueva svg { flex: none; color: var(--susc-icono-trazo); }
.sub-facts { display: grid; gap: 16px; margin: 0; }
.sub-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 15px; }
.sub-facts dt { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-text-muted); }
.sub-facts dt svg { flex: none; color: var(--susc-icono-trazo); }
.sub-facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--susc-fuerte); }
.susc-resumen__consumo { display: flex; align-items: center; gap: 20px; margin-top: 20px; padding-top: 19px; border-top: var(--bw-1) solid var(--susc-filete); }
.susc-resumen__detalle > :first-child.susc-resumen__consumo { margin-top: 0; padding-top: 0; border-top: 0; }
.susc-resumen__consumo .form-hint { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.susc-resumen__barra { flex: 1; min-width: 75px; height: 5px; overflow: hidden; border-radius: 6px; background: var(--susc-pista); }
.susc-resumen__barra > span { display: block; height: 100%; max-width: 100%; border-radius: 6px; background: var(--color-primary-600); }
/* Colores forzados: lo mismo que la barra de consumo de Planes — filete en la pista y resalte en el relleno. */
@media (forced-colors: active) {
    .susc-resumen__barra { height: 7px; border: 1px solid CanvasText; }
    .susc-resumen__barra > span { background: Highlight; forced-color-adjust: none; }
}
.susc-resumen__detalle > .form-alert { margin: 18px 0 0; }

/* ---- Pagos: tarjetas guardadas (maqueta `payment-methods`) ---- */
.susc-tarjetas__avisos { padding: 0 25px; }
.susc-tarjetas__avisos:empty { display: none; }
.susc-tarjetas__avisos > .form-alert, .susc-tarjetas__avisos > .form-hint { margin: 0 0 16px; }
.susc-tarjetas__avisos > .form-hint { font-size: 13px; line-height: 1.6; }
.susc-tarjetas__lista { list-style: none; display: grid; gap: 26px; margin: 0; padding: 3px 25px 27px; }
.susc-tarjeta { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 30px; align-items: center; }
.susc-tarjeta + .susc-tarjeta { padding-top: 26px; border-top: var(--bw-1) solid var(--susc-filete); }
/* El dibujo de la tarjeta. Mismo degradado y mismos tonos que la tarjeta de consumo, ya medidos. */
/* Sin el alto minimo de la maqueta (180 px): con la proporcion fija, ensancharia el dibujo por encima de su columna. */
.susc-plastico { position: relative; overflow: hidden; aspect-ratio: 1.64; min-width: 0; padding: 21px 23px; border-radius: 15px; background: var(--grad-consumo); color: var(--consumo-text); box-shadow: 0 7px 15px #143b6d15; }
.susc-plastico::before, .susc-plastico::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; border: 24px solid #ffffff04; width: 235px; height: 235px; right: -105px; top: -80px; transform: rotate(25deg); }
.susc-plastico::after { width: 180px; height: 180px; right: -25px; top: 97px; border-width: 1px; border-color: #ffffff0b; }
.susc-plastico__arriba { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 35px; }
.susc-plastico__chip { display: block; width: 31px; height: 24px; }
.susc-plastico__chip svg { width: 100%; height: 100%; fill: var(--susc-chip); stroke: var(--susc-chip-trazo); stroke-width: .85; }
.susc-plastico__marca { font-size: 22px; line-height: 1.2; font-weight: 700; font-style: italic; letter-spacing: -.6px; color: var(--consumo-strong); }
.susc-plastico__marca--neutra { display: flex; color: var(--consumo-muted); }
.susc-plastico__marca--mastercard { display: flex; align-items: center; }
.susc-plastico__marca--mastercard svg { display: block; width: 58px; height: 35px; }
.susc-mc-a { fill: var(--susc-mc-rojo); }
.susc-mc-b { fill: var(--susc-mc-ambar); }
.susc-mc-c { fill: var(--susc-mc-naranja); }
.susc-plastico__numero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 23px 0 20px; font-size: 20px; line-height: 1; letter-spacing: 2px; }
.susc-plastico__numero span { color: var(--consumo-muted); }
.susc-plastico__numero strong { font-weight: 550; letter-spacing: 1.6px; }
.susc-plastico__abajo { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.susc-plastico__caducidad { font-size: 10px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; color: var(--consumo-label); }
.susc-plastico__caducidad strong { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .8px; color: var(--consumo-strong); }
.susc-plastico__principal { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid #ffffff1e; border-radius: 5px; background: var(--susc-velo); font-size: 10px; line-height: 1.4; color: var(--consumo-badge-fg); }
.susc-tarjeta__info { min-width: 0; }
.susc-tarjeta__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.susc-tarjeta__titulo h3 { font-size: 18px; line-height: 1.35; font-weight: 650; letter-spacing: -.25px; color: var(--susc-fuerte); overflow-wrap: anywhere; }
.susc-tarjeta__caducidad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 7px 0 17px; font-size: 14px; color: var(--color-text-muted); }
.susc-tarjeta__caducidad strong { font-weight: 600; color: var(--susc-fuerte); }
.susc-tarjeta__acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.susc-tarjeta__acciones .inline-form { display: block; margin: 0; }
.susc-tarjeta__acciones .btn { min-height: 42px; padding: 10px 13px; font-size: 13px; }
.susc-tarjeta__motivos { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: var(--bw-1) solid var(--susc-nota-borde); border-radius: var(--r-md); background: var(--susc-nota-bg); color: var(--color-text-muted); }
.susc-tarjeta__motivos > svg { flex: none; margin-top: 2px; color: var(--susc-icono-trazo); }
.susc-tarjeta__motivos .form-hint { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.susc-tarjeta__motivos .form-hint + .form-hint { margin-top: 6px; }
.susc .empty-state { padding: 28px 25px 34px; }

/* ---- Pagos: historial y facturas (maqueta `data-table`) ---- */
.susc-tabla-caja { padding: 0 25px; overflow-x: auto; }
/* No llevan `.data-table`: su fondo de fila y su paso a tarjetas en movil son los de la maqueta de esta pantalla. */
.susc .susc-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.susc .susc-tabla th { padding: 13px 15px; text-align: left; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .7px; border-top: var(--bw-1) solid var(--susc-nota-borde); border-bottom: var(--bw-1) solid var(--susc-filete); font-size: 11px; color: var(--color-text-muted); background: var(--susc-th-bg); }
.susc .susc-tabla th:first-child { border-radius: 7px 0 0 7px; }
.susc .susc-tabla th:last-child { border-radius: 0 7px 7px 0; }
.susc .susc-tabla td { padding: 17px 15px; text-align: left; vertical-align: middle; border-bottom: var(--bw-1) solid var(--susc-filete); color: var(--susc-texto); background: var(--color-surface); }
.susc .susc-tabla tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
    .susc .susc-tabla tbody tr:hover td { background: var(--susc-fila-hover); }
}
.susc-tabla__concepto svg { margin-right: 9px; vertical-align: middle; color: var(--susc-icono-trazo); }
.susc-tabla__concepto strong { font-weight: 500; color: var(--susc-fuerte); }
.susc-tabla .susc-tabla__importe { font-weight: 600; white-space: nowrap; color: var(--susc-fuerte); }
.susc-tabla__factura strong { font-size: 15px; font-weight: 650; vertical-align: middle; color: var(--susc-fuerte); overflow-wrap: anywhere; }
.susc-tabla__marca { display: inline-grid; place-items: center; width: 34px; height: 39px; margin-right: 10px; vertical-align: middle; border: var(--bw-1) solid var(--susc-icono-borde); border-radius: var(--r-md); background: var(--susc-icono-bg); color: var(--susc-icono-trazo); }
.susc-tabla .btn { min-height: 40px; padding: 9px 12px; font-size: 13px; }
.susc .susc-tabla .pay-txmsg { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.susc-historial .empty-state, .susc-facturas .empty-state { padding-top: 6px; }
.susc-facturas { padding-bottom: 9px; }
.susc-facturas > .pay-txmsg { max-width: none; margin: 4px 25px 16px; }
/* «Ver otros movimientos» (maqueta `table-footer`): un plegable nativo, sin JavaScript. */
.susc-otros { border-top: var(--bw-1) solid var(--susc-filete); }
.susc-otros > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 8px 25px 10px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-primary-600); border-radius: var(--r-sm); }
.susc-otros > summary::-webkit-details-marker { display: none; }
.susc-otros > summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.susc-otros > summary svg { flex: none; transition: transform var(--dur-slow) var(--ease); }
.susc-otros[open] > summary svg { transform: rotate(180deg); }
.susc-otros[open] { padding-bottom: 12px; }

/* ---- Confirmacion: pasos y resumen del pedido (maqueta `checkout-navigation` y `selected-plan`) ---- */
.susc-pasos-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 23px; }
.susc-volver { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--color-primary-600); }
.susc-volver svg { flex: none; }
.susc-volver:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .susc-volver:hover { color: var(--color-primary-700); text-decoration: underline; }
}
.susc-volver--pie { margin-top: 3px; }
.susc-pasos { list-style: none; display: flex; align-items: center; gap: 25px; margin: 0; padding: 0; color: var(--color-text-muted); }
.susc-pasos li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.4; font-weight: 550; }
.susc-pasos__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; color: var(--color-text-subtle); background: var(--susc-paso-bg); }
.susc-pasos .is-hecho .susc-pasos__n { color: var(--color-primary-600); background: var(--susc-paso-hecho); }
.susc-pasos .is-actual { color: var(--color-primary-600); font-weight: 650; }
.susc-pasos .is-actual .susc-pasos__n { color: var(--color-on-accent); background: var(--grad-primary); }
@media (forced-colors: active) {
    .susc-pasos__n { border: 1px solid CanvasText; }
    .susc-pasos .is-actual .susc-pasos__n { border: 3px solid Highlight; }
}
.susc .susc-pedido { overflow: hidden; }
.susc-pedido__cab { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: var(--bw-1) solid var(--color-border); background: var(--susc-resumen); }
.susc-pedido__cab .plan-card__icono { width: 49px; height: 49px; background: var(--color-surface); }
.susc-pedido__plan { flex: 1; min-width: 0; }
.susc-pedido__nombre { margin: 0; font-size: 25px; line-height: 1.3; letter-spacing: -.4px; color: var(--color-primary-700); overflow-wrap: anywhere; }
.susc-pedido__nombre strong { font-weight: 700; }
.susc-pedido__descripcion { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-subtle); }
.susc-pedido__precio { display: grid; gap: 2px; margin: 0 0 0 auto; text-align: right; }
.susc-pedido__precio dd { margin: 0; font-size: 13px; color: var(--color-text-subtle); }
.susc-pedido__precio dd strong { font-size: 24px; line-height: 1.3; font-weight: 650; letter-spacing: -.5px; white-space: nowrap; color: var(--color-primary-700); }
.susc-datos--pedido { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; padding: 24px 26px; }
.susc-datos--pedido dt { margin-bottom: 8px; font-size: 12px; }
.susc-datos--pedido dd { font-size: 14px; }

/* ---- Confirmacion: datos de facturacion, cambio de plan y desglose (maqueta `checkout-layout`) ---- */
.susc-pago { display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: 22px; align-items: start; margin: 0; }
.susc-pago__datos { display: grid; gap: 22px; min-width: 0; }
.susc-pago__datos:only-child { grid-column: 1 / -1; }
.susc .susc-pago .card { margin: 0; }
.susc-fiscal__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 25px; }
.susc-fiscal__campos [data-campo="fiscal_razon_social"] { grid-column: 1 / -1; }
.susc .form-field { gap: 8px; min-width: 0; }
.susc .form-label { font-size: 14px; font-weight: 550; color: var(--susc-texto); }
.susc .form-label small { margin-left: 5px; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.susc .form-field input { width: 100%; min-width: 0; min-height: 47px; font-size: 15px; line-height: 1.5; }
.susc .form-field input[aria-invalid="true"] { border-color: var(--color-danger); }
.susc .form-error { font-size: 13px; line-height: 1.5; }
.susc-fiscal__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 21px 25px 24px; }
.susc-resumen-error:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.susc-resumen-error p { margin: 0; }
.susc-resumen-error ul { margin: 6px 0 0; padding-left: 20px; }
.susc-resumen-error a { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.susc-cambio__cuerpo { padding: 0 25px 23px; }
.susc-cambio__cuerpo > p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--susc-texto); }
.susc-cambio__cuerpo > .susc-cambio__ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-bottom: 18px; font-size: 13px; color: var(--color-text-muted); }
.susc-cambio__ruta span { padding: 5px 10px; border: var(--bw-1) solid var(--color-border); border-radius: 7px; background: var(--susc-th-bg); color: var(--color-text-muted); }
.susc-cambio__ruta strong { padding: 5px 10px; border: var(--bw-1) solid var(--susc-actual-linde); border-radius: 7px; background: var(--susc-actual-bg); font-weight: 600; color: var(--color-primary-600); }
.susc-cambio__ruta svg { flex: none; }
.susc-cambio__cuerpo .susc-importes { margin: 4px 0 18px; padding: 16px 0; border-top: var(--bw-1) solid var(--susc-filete); border-bottom: var(--bw-1) solid var(--susc-filete); }
.susc-cambio__lista { list-style: none; display: grid; gap: 19px; margin: 8px 0 22px; padding: 0; }
.susc-cambio__lista li { display: flex; align-items: flex-start; gap: 12px; }
.susc-cambio__lista p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--susc-texto); }
.susc-cambio__dibujo { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border-radius: var(--r-md); background: var(--susc-icono-bg); color: var(--susc-icono-trazo); }
.susc-cambio__cuerpo > .susc-cambio__nota { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 17px; border-top: var(--bw-1) solid var(--susc-filete); font-size: 13px; color: var(--color-text-muted); }
.susc-cambio__nota svg { flex: none; margin-top: 3px; }
/* El desglose acompana a la pantalla en escritorio (dos columnas, desde 1101 px), pero SOLO cuando cabe entero
   en la ventana: pegado y mas alto que ella, su final —la casilla y el boton de pagar— quedaria fuera hasta
   acabar la pagina (una ventana baja, o el 200 % de zoom). Los tres umbrales salen de su altura maxima medida
   en los cinco idiomas, mas los 90 px de arriba: 671 px sin cupon, 814 px con un aviso de cupon o un cupon
   aplicado, 1151 px con el aviso del cupon del 100 %. Por debajo de su umbral va con la pagina, sin barra propia.
   Un navegador sin `:has()` descarta las dos primeras reglas: se queda sin pegar, que es el lado seguro. */
@media (min-width: 1101px) and (min-height: 780px) { .susc-desglose:not(:has(.confirmar-cupon > p)):not(:has(.form-alert)) { position: sticky; top: 90px; } }
@media (min-width: 1101px) and (min-height: 920px) { .susc-desglose:not(:has(.form-alert--info)) { position: sticky; top: 90px; } }
@media (min-width: 1101px) and (min-height: 1260px) { .susc-desglose { position: sticky; top: 90px; } }
.susc .susc-desglose .card-heading { padding: 24px 23px 20px; }
.susc .susc-desglose .card-heading h2 { font-size: 19px; }
.susc-desglose__cuerpo { padding: 0 23px 22px; }
.susc-importes { display: grid; gap: 17px; margin: 0; }
.susc-importes > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.susc-importes dt { font-size: 14px; line-height: 1.5; color: var(--susc-texto); }
.susc-importes dd { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--susc-fuerte); }
.susc-importes__descuento dt { color: var(--state-emitido-fg); }
.susc-importes__descuento dd { color: var(--state-emitido-fg); }
.susc-importes > .susc-importes__base { padding-top: 18px; border-top: var(--bw-1) solid var(--susc-filete); }
.susc-importes > :first-child.susc-importes__base { padding-top: 0; border-top: 0; }
/* El total (maqueta `pay-now`): la cifra que se va a cobrar, sobre el azul de la tarjeta de consumo. */
.susc-importes > .susc-importes__total { align-items: center; margin-top: 5px; padding: 18px 17px; border-radius: 12px; background: var(--grad-consumo); }
.susc-importes__total dt { font-size: 14px; font-weight: 550; color: var(--consumo-text); }
.susc-importes__total dd { font-size: 29px; line-height: 1.1; font-weight: 650; letter-spacing: -1px; color: var(--consumo-text); }
@media (forced-colors: active) { .susc-importes > .susc-importes__total { border: 1px solid CanvasText; } }
.susc .confirmar-cupon { margin: 20px 0; padding: 18px 0; }
.susc .confirmar-cupon > .form-alert { margin: 0 0 14px; font-size: 13px; }
.susc .confirmar-cupon > p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--susc-texto); }
.susc .confirmar-cupon .form-alert p { margin: 0 0 8px; }
.susc .confirmar-cupon .form-alert p:last-child { margin-bottom: 0; }
.susc-cupon__pie { margin-top: 12px; }
.susc-cupon__pie .btn { width: 100%; font-size: 14px; }
.susc-acepto { gap: 10px; margin: 20px 0 19px; font-size: 13px; line-height: 1.7; cursor: pointer; color: var(--susc-texto); }
.susc-acepto input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-primary-600); }
.susc-pagar { width: 100%; min-height: 50px; padding: 12px 13px; gap: 8px; font-size: 14px; white-space: normal; }
.susc-pagar svg:last-child { margin-left: auto; }
.susc-desglose__seguro { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 13px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); }
.susc-desglose__seguro svg { flex: none; margin-top: 2px; }

/* ---- Cortes de la maqueta ---- */
@media (max-width: 1380.98px) {
    .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .plan-card { padding: 27px; }
    .susc-datos--pedido { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
    .susc .susc-resumen { grid-template-columns: minmax(280px, .9fr) minmax(0, 1.7fr); }
    .sub-facts > div { grid-template-columns: 145px minmax(0, 1fr); }
    .susc-resumen__consumo { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 1230.98px) {
    .app-main:has(> .susc) { padding: 26px 24px 22px; }
    /* Comparativa: la primera columna deja de ser un porcentaje. Con la tabla mas ancha que la tarjeta se llevaria
       el sitio de los planes, y asi cuatro planes siguen cabiendo sin deslizar en cuanto hay menu lateral. */
    .susc-cmp__tabla { min-width: calc(200px + var(--susc-cmp-planes) * 140px); }
    .susc-cmp__tabla th:first-child { width: 200px; }
    .susc-pago { grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
    .susc .susc-desglose .card-heading { padding: 23px 20px 20px; gap: 9px; }
    .susc-desglose__cuerpo { padding: 0 20px 22px; }
    .susc-importes__total dd { font-size: 26px; }
    .susc-tarjeta { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
    .susc-plastico { padding: 18px 20px; }
    .susc-plastico__numero { margin: 23px 0 18px; font-size: 18px; }
    .susc .susc-resumen { grid-template-columns: minmax(250px, .9fr) minmax(0, 1.5fr); }
    .susc-resumen__principal { padding: 23px; }
    /* La columna del plan se estrecha: el estado baja a su propia linea para no apretar el nombre del plan. */
    .susc-resumen__estado { flex: 1 1 100%; align-items: flex-start; margin-left: 0; }
    .susc-resumen__estado .form-hint { max-width: none; text-align: left; }
    .sub-facts { gap: 13px; }
    .sub-facts > div { grid-template-columns: 1fr; gap: 5px; }
    .susc-uso__cifras { gap: 16px 24px; }
    .susc-uso__cifra--restantes { padding-left: 24px; }
}
@media (max-width: 1100.98px) {
    .susc-pago { grid-template-columns: 1fr; }
    .susc .susc-desglose .card-heading { padding: 24px 25px 21px; }
    .susc-desglose__cuerpo { padding: 0 25px 25px; }
    .susc-uso { gap: 16px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .susc-uso__tarjeta { padding: 23px 23px 0; }
    .susc .susc-uso__detalle { padding: 23px; }
    .susc-uso__extra > div { align-items: flex-start; }
    .susc-uso__extra dt { font-size: 13px; gap: 7px; }
    .susc-uso__extra dd { font-size: 16px; }
}
@media (max-width: 1000.98px) {
    .susc-tarjeta { grid-template-columns: 270px minmax(0, 1fr); gap: 23px; }
    .susc-tarjeta__titulo h3 { font-size: 17px; }
    .susc-cmp__tabla th, .susc-cmp__tabla td { padding: 15px 12px; }
    .susc-cmp__tabla tbody th { padding-left: 23px; }
    .susc-cmp__tabla tbody th svg { display: none; }
}
/* Movil. La maqueta prioriza la lectura: 16 px en contenido y acciones, campos de 16 px y 44 px o mas en
   cada objetivo tactil. */
@media (max-width: 760.98px) {
    .app-main:has(> .susc) { padding: 23px 16px 22px; }
    .susc { font-size: 16px; line-height: 1.6; }
    .subnav-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px; margin-bottom: 21px; }
    .subnav-tab { min-height: 56px; padding: 10px 8px; gap: 7px; font-size: 14px; text-align: left; }
    .susc > .form-alert { margin-bottom: 18px; font-size: 15px; line-height: 1.75; }
    .susc .card { margin-bottom: 19px; }
    .susc .card-heading { flex-wrap: wrap; align-items: flex-start; gap: 11px; padding: 22px 19px 20px; }
    .susc h2 { font-size: 22px; }
    .susc .card-heading p { font-size: 15px; line-height: 1.65; }
    .susc-icono { width: 38px; height: 38px; border-radius: 11px; }
    .susc .card-heading > form { flex: 1 1 100%; margin: 8px 0 0; }
    .susc .card-heading > form .btn { width: 100%; min-height: 48px; font-size: 16px; }
    .susc-datos { grid-template-columns: 1fr 1fr; gap: 22px 17px; padding: 3px 19px 22px; }
    .susc-datos dd { font-size: 16px; line-height: 1.6; }
    .susc-ficha > .form-alert { margin: 0 19px 18px; }
    .susc-ficha__pie { margin: 0 19px; }
    .susc-ficha__pie .btn { width: 100%; min-height: 47px; font-size: 15px; }
    .susc-nota { font-size: 14px; }
    .susc-distintivo { font-size: 13px; }

    .susc-uso { grid-template-columns: 1fr; gap: 16px; margin-bottom: 29px; }
    .susc-uso__tarjeta { padding: 22px 21px 0; }
    .susc .susc-uso__cab h2 { font-size: 18px; gap: 8px; }
    .susc-uso__plan { font-size: 12px; padding: 5px 8px; }
    .susc-uso__cifras { gap: 16px 24px; margin: 24px 0 22px; }
    .susc-uso__cifra dd { font-size: 34px; }
    .susc-uso__cifra--emitidos dd { font-size: 54px; }
    /* Las tres cifras no caben en una linea: la tercera baja, y su filete lateral ya no separa nada. */
    .susc-uso__cifra--restantes { padding-left: 0; border-left: 0; }
    .susc-uso__pie { align-items: flex-start; line-height: 1.7; }
    .susc-uso__pie svg { margin-top: 3px; }
    .susc .susc-uso__detalle { padding: 21px; }
    .susc-uso__extra { gap: 17px; }
    .susc-uso__extra dt { font-size: 15px; gap: 9px; }
    .susc-uso__extra dd { font-size: 18px; }
    .susc-uso__renovacion { margin-top: 22px; padding-top: 19px; }
    .susc-uso__renovacion form, .susc-uso__renovacion .btn { width: 100%; }
    .susc-uso__renovacion .btn { min-height: 47px; font-size: 15px; }

    .susc-seccion p { font-size: 15px; line-height: 1.65; }
    .plan-grid { grid-template-columns: 1fr; gap: 29px; margin-bottom: 26px; padding-top: 3px; }
    .plan-card { padding: 25px 23px; }
    .plan-card h3 { font-size: 24px; }
    .plan-card__cab { gap: 13px; margin-bottom: 21px; }
    .plan-card__subtitle { font-size: 14px; }
    .plan-card__icono { width: 46px; height: 46px; border-radius: 13px; }
    /* Crece con la pantalla hasta los 40 px de la maqueta: a 320 px un importe largo no cabria a ese cuerpo. */
    .plan-card__price strong { font-size: clamp(30px, 10.5vw, 40px); }
    .plan-card__period { font-size: 14px; }
    .plan-card__cupo li { font-size: 16px; gap: 11px; }
    .plan-card__cupo .plan-card__adicional { font-size: 14px; }
    .plan-card__feats li { font-size: 16px; gap: 10px; line-height: 1.7; }
    .plan-card__feats li svg { margin-top: 6px; }
    .plan-card__pie { gap: 17px; }
    .plan-card__maestros-link { min-height: 44px; font-size: 15px; }
    .plan-card__pie .btn, .plan-card__actual { min-height: 49px; font-size: 16px; }
    .plan-card__ribbon { min-height: 29px; }

    .susc-cmp__intro { margin: 0 19px 12px; font-size: 15px; }
    .susc-cmp__desliza { display: flex; align-items: center; gap: 7px; margin: 0 19px 14px; font-size: 13px; }
    .susc-cmp__tabla { min-width: max(640px, calc(184px + var(--susc-cmp-planes) * 130px)); }
    .susc-cmp__tabla th:first-child { width: 184px; }
    .susc-cmp__tabla th, .susc-cmp__tabla td { padding: 15px 12px; font-size: 15px; }
    .susc-cmp__tabla thead th { height: 75px; font-size: 13px; }
    .susc-cmp__tabla thead th:first-child { padding-left: 18px; }
    /* La primera columna, fija mientras se deslizan los planes, proyecta una sombra sobre ellos. */
    .susc-cmp__tabla th:first-child { box-shadow: 4px 0 8px #0c315307; }
    .susc-cmp__tabla tbody th { padding-left: 18px; font-size: 14px; }
    .susc-pasarela { align-items: flex-start; justify-content: flex-start; gap: 9px; margin: 21px 4px 0; }
    .susc-pasarela svg { margin-top: 4px; }

    .susc .susc-resumen { grid-template-columns: 1fr; }
    .susc-resumen__principal { padding: 24px 21px; border-right: 0; border-bottom: var(--bw-1) solid var(--color-border); }
    .susc .susc-resumen__plan h2 { font-size: 24px; }
    .susc-resumen__precio strong { font-size: 37px; }
    .susc-resumen__precio .form-hint { font-size: 14px; }
    .susc-resumen__detalle { padding: 22px 21px; }
    .sub-facts { gap: 19px; }
    .sub-facts dd { font-size: 16px; line-height: 1.7; }
    .susc-resumen__consumo { display: block; }
    .susc-resumen__consumo .form-hint { font-size: 14px; }
    .susc-resumen__barra { margin-top: 11px; }

    .susc-tarjetas__avisos { padding: 0 19px; }
    .susc-tarjetas__lista { padding: 0 19px 22px; }
    .susc-tarjeta { grid-template-columns: 1fr; gap: 23px; }
    .susc-plastico { width: 100%; max-width: 370px; justify-self: start; padding: 22px 24px; }
    .susc-plastico__numero { margin: 25px 0 22px; font-size: 21px; }
    .susc-plastico__caducidad strong { font-size: 13px; }
    .susc-plastico__principal { font-size: 11px; padding: 5px 8px; }
    .susc-tarjeta__caducidad { margin: 9px 0 19px; font-size: 15px; }
    .susc-tarjeta__acciones { gap: 8px; }
    .susc-tarjeta__acciones .btn { min-height: 44px; padding: 10px 11px; font-size: 14px; }
    .susc-tarjeta__motivos { padding: 14px 13px; }
    .susc-tarjeta__motivos .form-hint { font-size: 14px; }
    .susc .empty-state { padding: 20px 19px 28px; }

    /* Cada fila pasa a ser una ficha de dos columnas; el rotulo de cada dato sale de `data-label`. La tabla sigue
       siendolo para el lector de pantalla: sus papeles van escritos en el marcado. */
    .susc-tabla-caja { padding: 0; overflow-x: visible; }
    .susc .susc-tabla, .susc .susc-tabla tbody { display: block; width: 100%; }
    .susc .susc-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .susc .susc-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; padding: 20px 19px; border-top: var(--bw-1) solid var(--susc-filete); }
    .susc .susc-tabla td { display: block; min-width: 0; padding: 0; border: 0; font-size: 15px; }
    .susc .susc-tabla td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
    .susc-tabla .susc-tabla__concepto, .susc-tabla .susc-tabla__factura { grid-column: 1 / -1; grid-row: 1; }
    .susc-tabla .susc-tabla__concepto::before, .susc-tabla .susc-tabla__factura::before, .susc-tabla .susc-tabla__accion::before {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .susc-tabla__concepto strong { font-size: 16px; font-weight: 600; }
    .susc-tabla--cobros td:last-child { grid-column: 1 / -1; }
    .susc-tabla__factura strong { font-size: 17px; }
    .susc-tabla .susc-tabla__accion { grid-column: 1 / -1; margin-top: 6px; }
    .susc-tabla .btn { width: 100%; min-height: 46px; font-size: 15px; }
    .susc .susc-tabla .pay-txmsg { max-width: none; font-size: 14px; }
    .susc-otros > summary { margin: 6px 19px 8px; font-size: 14px; }
    .susc-facturas > .pay-txmsg { margin: 4px 19px 16px; }

    .susc-pasos-barra { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
    .susc-volver { font-size: 15px; }
    .susc-pasos { justify-content: space-between; gap: 13px; padding: 13px 11px; border: var(--bw-1) solid var(--color-border); border-radius: 11px; background: var(--susc-pasos-caja); }
    .susc-pasos li { gap: 5px; }
    .susc-pasos__n { width: 22px; height: 22px; }
    .susc-pedido__cab { flex-wrap: wrap; gap: 12px; padding: 21px 19px; }
    .susc-pedido__nombre { font-size: 26px; }
    .susc-pedido__precio { flex: 1 1 100%; display: flex; align-items: baseline; gap: 9px; margin: 5px 0 0; padding-top: 15px; border-top: var(--bw-1) solid var(--color-border); text-align: left; }
    .susc-pedido__precio dd strong { font-size: 25px; }
    .susc-datos--pedido { grid-template-columns: 1fr 1fr; gap: 24px 17px; padding: 23px 19px; }
    .susc-datos--pedido dd { font-size: 16px; line-height: 1.6; }
    .susc-pago, .susc-pago__datos { gap: 19px; }
    .susc-fiscal__campos { grid-template-columns: 1fr; gap: 22px; padding: 0 19px; }
    .susc .form-label { font-size: 15px; }
    .susc .form-field input { min-height: 49px; font-size: 16px; }
    .susc .form-error { font-size: 14px; }
    .susc-fiscal__pie { padding: 22px 19px 23px; }
    .susc-fiscal__pie .btn { width: 100%; min-height: 48px; font-size: 15px; }
    .susc-cambio__cuerpo { padding: 0 19px 23px; }
    .susc-cambio__cuerpo > p, .susc-cambio__lista p { font-size: 15px; }
    .susc-cambio__cuerpo > .susc-cambio__ruta, .susc-cambio__cuerpo > .susc-cambio__nota { font-size: 14px; }
    .susc-cambio__lista { gap: 22px; }
    .susc .susc-desglose .card-heading { padding: 23px 19px 21px; }
    .susc .susc-desglose .card-heading h2 { font-size: 22px; }
    .susc-desglose__cuerpo { padding: 0 19px 24px; }
    .susc-importes { gap: 18px; }
    .susc-importes dt, .susc-importes dd { font-size: 16px; }
    .susc-importes > .susc-importes__total { padding: 20px 17px; }
    .susc-importes__total dt { font-size: 15px; }
    .susc-importes__total dd { font-size: 30px; }
    .susc .confirmar-cupon > p, .susc .confirmar-cupon > .form-alert { font-size: 14px; }
    .susc-cupon__pie .btn { min-height: 48px; font-size: 15px; }
    .susc-acepto { gap: 11px; margin-bottom: 23px; font-size: 15px; line-height: 1.75; }
    .susc-acepto input { width: 22px; height: 22px; margin-top: 3px; }
    .susc-pagar { min-height: 54px; padding: 13px; font-size: 15px; }
    .susc-desglose__seguro { font-size: 13px; }
}
@media (max-width: 370.98px) {
    .app-main:has(> .susc) { padding-left: 12px; padding-right: 12px; }
    .susc-uso__tarjeta { padding: 22px 18px 0; }
    .susc-uso__cifras { gap: 14px 18px; }
    .susc-uso__cifra--emitidos dd { font-size: 48px; }
    .susc-uso__cifra dd { font-size: 31px; }
    .susc-plastico { padding: 20px; }
    .susc-plastico__numero { gap: 6px; font-size: 16px; letter-spacing: 1px; }
    .susc-plastico__numero strong { letter-spacing: 1px; }
    .plan-card { padding: 24px 21px; }
    .susc-pasos { padding: 12px 9px; gap: 9px; }
    .susc-pasos li { font-size: 11px; }
    .susc-importes__total dd { font-size: 27px; }
    .susc-datos, .susc-datos--pedido { grid-template-columns: 1fr; }
}
@media (max-width: 370.98px) {
    /* Como en la maqueta, a este ancho el emblema de la cabecera cede su sitio al titulo. */
    .susc .page-emblema { display: none; }
}

/* ============================================================================
   Soporte (issues #50 y #260; rediseno #339, S-228)
   ----------------------------------------------------------------------------
   Maqueta `Docarga-soporte-redisenado.html` (familia B, sin emblema en la cabecera). Sus cortes son
   1250, 1080, 760 y 370 px, de ventana (escritos con `.98`, como los de la estructura).
   Tres pantallas dentro de `.sop`: el listado (`.sop--lista`), el alta (`.sop--nuevo`) y la
   conversacion de un ticket (`.sop--ticket`). Todo va acotado a `.sop`, asi que Cuenta > Soporte
   —que tiene su propia slice— no cambia.
   Es solo aspecto: que tickets se ven, quien puede escribir, que adjuntos se aceptan y que mensajes
   llegan al cliente lo decide el servidor (D-50-1..3); los formularios conservan sus campos y destinos
   (caso 281).
   Lo que NO sale de la maqueta y se conserva (D-339-4): el estado vacio del listado, los cuatro
   estados en curso de un ticket, «Cerrar ticket» y los avisos de exito y de error.
   Los grises secundarios de la maqueta no llegan a 4,5:1: aqui son siempre `--color-text-muted`
   (caso 181). El selector de ficheros es el control nativo vestido, no el boton con guion de la
   maqueta: funciona sin JavaScript.
   ============================================================================ */
.app-main:has(> .sop) { --content-max: 1660px; max-width: 1660px; padding-top: 30px; padding-bottom: 24px; }
.sop { font-size: 15px; line-height: 1.5; }
.sop h2 { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -.4px; color: var(--color-primary-700); }
.sop .card { margin-bottom: 0; padding: 0; min-width: 0; }
.sop .btn svg { flex: none; }
/* Dentro de una tarjeta que recorta (`overflow: hidden`) el anillo de foco va pegado, para verse entero. */
.sop-lista :focus-visible, .sop-conversacion :focus-visible { outline-offset: 2px; }

/* ---- Cabecera, enlace de vuelta y avisos (maqueta `support-heading`, `back-link`) ---- */
.sop-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.sop-cabecera__texto { min-width: 0; }
.sop-cabecera .page-eyebrow { margin-bottom: 8px; letter-spacing: 1.7px; }
.sop-cabecera .page-title { margin: 0 0 8px; font-size: 32px; line-height: 1.3; overflow-wrap: anywhere; }
.sop-cabecera .page-subtitle { margin: 0; font-size: 16px; line-height: 1.65; }
.sop-cabecera__accion { flex: none; }
.sop--ticket .sop-cabecera .page-title { margin-bottom: 0; }
.sop-volver { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: -5px 0 17px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--color-text-muted); }
.sop-volver svg { flex: none; }
.sop .sop-aviso { margin: 0 0 22px; font-size: 14px; line-height: 1.65; }
/* El resumen de errores y el aviso de exito reciben el foco por guion al cargar, y un elemento con
   `tabindex="-1"` no siempre cumple `:focus-visible`: el contorno se pinta con `:focus`. */
.sop .sop-aviso:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.sop-aviso__titulo { margin: 0 0 4px; font-weight: 600; }
.sop-aviso__lista { margin: 0; padding: 0; list-style: none; }
.sop-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Estado y datos del ticket bajo su asunto (maqueta `ticket-meta`). */
.sop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin: 15px 0 0; font-size: 14px; color: var(--color-text-muted); }
.sop-meta svg { flex: none; }
.sop-meta .sop-distintivo { padding: 6px 10px; font-size: 13px; }
.sop-meta__tipo { display: inline-flex; align-items: center; gap: 7px; }
.sop-meta__fecha { display: inline-flex; align-items: center; gap: 7px; padding-left: 14px; border-left: var(--bw-1) solid var(--color-border-strong); font-size: 13px; }

/* ---- Piezas comunes: cabecera de tarjeta, caja de dibujo y distintivo de estado ---- */
.sop .card-heading { display: flex; align-items: center; gap: 12px; padding: 24px 26px 22px; }
.sop .card-heading > div { min-width: 0; flex: 1; }
.sop .card-heading > div > p { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }
.sop-icono { display: grid; place-items: center; flex: none; width: 41px; height: 41px; border: var(--bw-1) solid var(--sop-icono-borde); border-radius: 12px; background: var(--sop-icono-bg); color: var(--sop-icono-trazo); }
.sop-icono--grande { width: 48px; height: 48px; border-radius: 14px; }
/* Distintivo de estado (maqueta `ticket-badge`): suave, con su texto y su dibujo. El color acompana, no
   informa solo. Los pares son los de la paleta de estados, ya medidos: la maqueta pinta #1c836b sobre
   #eef9f4 (4,32:1) y #6a7e91 sobre #f3f6fa (3,87:1). El texto puede partirse: «Esperando respuesta del
   cliente» no cabe en una linea en la columna ni en el movil. */
.sop-distintivo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: var(--bw-1) solid transparent; border-radius: 7px; font-size: 12px; line-height: 1.4; font-weight: 600; text-align: left; }
.sop-distintivo svg { flex: none; }
.sop-distintivo--resuelta { color: var(--state-emitido-fg); background: var(--state-emitido-bg); }
.sop-distintivo--cerrada { color: var(--state-borrador-fg); background: var(--state-borrador-bg); }
.sop-distintivo--abierta { color: var(--color-primary-600); background: var(--sop-abierta-bg); }
@media (forced-colors: active) { .sop-distintivo { border-color: CanvasText; } }

/* ---- Listado (maqueta `tickets-card` y `tickets-table`) ---- */
.sop-lista { overflow: hidden; }
.sop .sop-lista__cab { padding: 26px 27px 25px; border-bottom: var(--bw-1) solid var(--sop-filete); background: var(--sop-cab); }
.sop-lista__total { flex: none; margin: 0 0 0 auto; padding: 6px 11px; border: var(--bw-1) solid var(--sop-contador-borde); border-radius: 8px; background: var(--sop-contador-bg); font-size: 13px; white-space: nowrap; color: var(--color-text-muted); }
.sop-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* La columna del estado es mas ancha que en la maqueta (14 %): alli solo hay «Resuelta» y «Cerrada». */
.sop-tabla th.sop-tabla__asunto { width: 38%; }
.sop-tabla th.sop-tabla__tipo { width: 18%; }
.sop-tabla th.sop-tabla__estado { width: 19%; }
.sop-tabla th.sop-tabla__fecha { width: 17%; }
.sop-tabla th.sop-tabla__accion { width: 8%; }
.sop-tabla thead { background: var(--sop-th-bg); }
.sop-tabla th { padding: 16px 15px; border-bottom: var(--bw-1) solid var(--sop-filete); text-align: left; font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: .85px; text-transform: uppercase; color: var(--color-text-muted); }
.sop-tabla td { padding: 23px 15px; border-bottom: var(--bw-1) solid var(--sop-filete); vertical-align: middle; font-size: 14px; overflow-wrap: anywhere; color: var(--sop-texto); background: var(--color-surface); }
.sop-tabla th:first-child, .sop-tabla td:first-child { padding-left: 27px; }
.sop-tabla th:last-child { padding-right: 27px; }
.sop-tabla td:last-child { padding-right: 25px; text-align: right; }
.sop-tabla__nombre { display: flex; align-items: center; gap: 13px; }
.sop-tabla__marca { display: grid; place-items: center; flex: none; width: 41px; height: 41px; border: var(--bw-1) solid var(--sop-icono-borde); border-radius: 12px; background: var(--sop-icono-bg); color: var(--sop-icono-trazo); }
.sop-tabla__enlace { min-width: 0; font-size: 16px; line-height: 1.55; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; color: var(--sop-fuerte); }
.sop-tabla__fecha time { display: flex; align-items: center; flex-wrap: wrap; gap: 0 9px; font-size: 14px; line-height: 1.45; }
.sop-tabla__fecha time > span:last-child { font-size: 13px; color: var(--color-text-muted); }
.sop-ver { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 0; font-size: 14px; font-weight: 650; text-decoration: none; color: var(--color-primary-600); }
.sop-ver svg { flex: none; transition: transform var(--dur-base) var(--ease); }
.sop-lista__pie { display: flex; align-items: center; gap: 9px; margin: 0; padding: 18px 27px; background: var(--sop-pie-bg); font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.sop-lista__pie svg { flex: none; color: var(--sop-icono-trazo); }
/* Sin tickets: la maqueta no lo dibuja; se conserva el estado vacio, con la caja de dibujo del listado. */
.sop .sop-vacio { padding: 56px 24px; }
.sop-vacio .sop-icono { margin-bottom: 4px; }

/* ---- Ticket: dos columnas (maqueta `ticket-layout`) ---- */
.sop-ticket { display: grid; grid-template-columns: minmax(260px, .4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sop-ticket__original { display: grid; gap: 18px; min-width: 0; }
.sop-ticket__hilo { display: grid; gap: 20px; min-width: 0; }
/* La maqueta deja fija la consulta original al desplazar. Se hace con las dos columnas (desde 1081 px) y
   de modo que no pueda esconder nada, mida lo que mida la consulta: la columna tiene como tope el alto
   libre de la ventana y, si el texto o sus adjuntos no caben, se desplaza por dentro. Un enlace que
   recibe el foco queda asi siempre a la vista, y la columna misma es enfocable (`tabindex="0"` en la
   vista) para recorrerla con el teclado. Los 6 px de relleno, compensados con margen, dejan sitio al
   anillo de foco y a la sombra de las tarjetas, que un bloque con desplazamiento recortaria.
   En una ventana muy baja no se fija: un recuadro de pocas lineas con desplazamiento propio estorba. */
@media (min-width: 1081px) and (min-height: 560px) {
    .sop-ticket__original {
        position: sticky; top: calc(var(--topbar-h) + 17px);
        max-height: calc(100vh - var(--topbar-h) - 29px); max-height: calc(100dvh - var(--topbar-h) - 29px);
        margin: -6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 10px;
    }
}
.sop-original { border-color: var(--sop-original-borde); background: var(--sop-original-bg); }
.sop .sop-original .card-heading { padding: 23px 23px 19px; }
.sop .sop-original h2 { font-size: 19px; }
.sop .sop-original .card-heading > div > p { margin-top: 2px; font-size: 13px; }
.sop-original .sop-icono { width: 36px; height: 36px; border-radius: 10px; }
.sop-original__cuerpo { padding: 0 23px 26px; }
.sop-original__cuerpo p { margin: 0; font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; color: var(--sop-original); }
.sop .sop-original-adjuntos .card-heading { align-items: flex-start; gap: 10px; padding: 23px 22px 18px; }
.sop .sop-original-adjuntos h2 { font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.sop-original-adjuntos .sop-icono { width: 32px; height: 32px; border-radius: 9px; }
.sop-original-adjuntos .sop-adjuntos { padding: 0 20px 22px; }

/* ---- Ticket: conversacion (maqueta `message-list`) ----
   Lista ORDENADA: los mensajes van en el orden en que se escribieron. Quien escribe y cuando van en la
   cabecera de cada `article`, que se nombra con ella; el lado y el tono del globo solo acompanan. */
.sop-conversacion { overflow: hidden; }
.sop .sop-conversacion .card-heading { border-bottom: var(--bw-1) solid var(--sop-filete); }
.sop-conversacion__vacia { margin: 0; padding: 26px; font-size: 15px; color: var(--color-text-muted); }
.sop-mensajes { display: grid; gap: 26px; margin: 0; padding: 28px 26px 29px; list-style: none; background: var(--sop-hilo); }
.sop-mensaje { display: flex; align-items: flex-start; gap: 12px; }
.sop-mensaje__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-top: 2px; border: var(--bw-1) solid var(--sop-avatar-borde); border-radius: 11px; background: var(--sop-avatar-bg); color: var(--sop-icono-trazo); }
.sop-mensaje__contenido { width: calc(100% - 48px); max-width: calc(100% - 78px); min-width: 0; }
.sop-mensaje__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.sop-mensaje__meta strong { font-size: 14px; font-weight: 650; color: var(--sop-autor); }
.sop-mensaje__meta time { white-space: nowrap; }
.sop-mensaje__globo { padding: 18px 20px; border: var(--bw-1) solid var(--sop-globo-borde); border-radius: 3px 14px 14px 14px; background: var(--color-surface); }
.sop-mensaje__globo > p { margin: 0; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; color: var(--sop-cuerpo); }
.sop-mensaje--cliente { flex-direction: row-reverse; }
.sop-mensaje--cliente .sop-mensaje__avatar { border-color: var(--sop-avatar-empresa-borde); background: var(--sop-avatar-empresa-bg); }
.sop-mensaje--cliente .sop-mensaje__meta strong { color: var(--sop-autor-empresa); }
.sop-mensaje--cliente .sop-mensaje__globo { border-color: var(--sop-globo-empresa-borde); border-radius: 14px 3px 14px 14px; background: var(--sop-globo-empresa); }
.sop-mensaje__adjuntos { margin-top: 17px; padding-top: 14px; border-top: var(--bw-1) solid var(--sop-globo-empresa-borde); }
.sop-mensaje__adjuntos h3 { margin: 0 0 10px; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--color-text-muted); }

/* ---- Adjuntos (maqueta `attachment-tile`): un enlace de descarga por fichero ---- */
.sop-adjuntos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sop-adjunto { display: flex; align-items: center; gap: 10px; min-height: 61px; padding: 12px; border: var(--bw-1) solid var(--sop-adjunto-borde); border-radius: 10px; background: var(--color-surface); text-decoration: none; color: var(--sop-adjunto); }
.sop-adjunto__dibujo { display: grid; place-items: center; flex: none; width: 32px; height: 38px; border-radius: 7px; background: var(--sop-fichero-bg); color: var(--sop-icono-trazo); }
.sop-adjunto__nombre { flex: 1; min-width: 0; font-size: 13px; line-height: 1.65; font-weight: 550; overflow-wrap: anywhere; }
.sop-adjunto__nombre small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.sop-adjunto > svg { flex: none; color: var(--sop-icono-trazo); }

/* ---- Campos (maqueta `field`): 51 px, 10 px de radio, 16 px ----
   El foco conserva el anillo de la aplicacion: el de la maqueta (#69b1e5 con halo al 9 %) da 2,3:1
   sobre blanco y no llega al 3:1 que pide el indicador de foco. */
.sop .form-field { gap: 0; min-width: 0; }
.sop .form-label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; color: var(--sop-rotulo); }
.sop .form-field input:not([type="file"]) { width: 100%; min-width: 0; min-height: 51px; padding: 12px 14px; border: var(--bw-1) solid var(--sop-campo-borde); border-radius: 10px; background: var(--color-surface); font-size: 16px; line-height: 1.6; color: var(--sop-campo); }
.sop .form-field select { width: 100%; min-width: 0; min-height: 51px; padding: 12px 38px 12px 14px; border: var(--bw-1) solid var(--sop-campo-borde); border-radius: 10px; background: var(--color-surface); font-size: 16px; line-height: 1.6; appearance: none; cursor: pointer; color: var(--sop-campo); }
.sop .form-field textarea { display: block; width: 100%; min-width: 0; min-height: 128px; padding: 12px 14px; border: var(--bw-1) solid var(--sop-campo-borde); border-radius: 10px; background: var(--color-surface); font: inherit; font-size: 16px; line-height: 1.6; resize: vertical; color: var(--sop-campo); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.sop .sop-campo--detalle textarea { min-height: 178px; }
.sop .form-field :is(input, textarea)::placeholder { opacity: 1; color: var(--color-text-muted); }
/* Contorno transparente, no `none`: con colores forzados el halo no se pinta y el contorno es el foco. */
.sop .form-field :is(input:not([type="file"]), select, textarea):focus { outline: 2px solid transparent; border-color: var(--color-primary-500); box-shadow: var(--sh-focus); }
.sop .form-field :is(input, textarea).is-error { border-color: var(--color-danger); }
.sop-select { position: relative; }
.sop-select > svg { position: absolute; top: 17px; right: 14px; pointer-events: none; color: var(--sop-icono-trazo); }
.sop .req { margin-left: 2px; font-weight: 650; }
.sop .form-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.65; color: var(--color-text-muted); }
.sop .form-error { margin: 8px 0 0; font-size: 13px; line-height: 1.65; }
/* Caja de adjuntar (maqueta `attachment-picker`). Dentro va el `input[type=file]` NATIVO con su boton
   vestido de contorno: el navegador dice que ficheros hay elegidos, sin guion. */
.sop-subir { display: flex; align-items: center; gap: 14px; padding: 19px; border: var(--bw-1) dashed var(--sop-subir-borde); border-radius: 12px; background: var(--sop-subir); }
.sop-subir.is-error { border-color: var(--color-danger); }
.sop-subir__marca { display: grid; place-items: center; flex: none; width: 40px; height: 43px; border: var(--bw-1) solid var(--sop-icono-borde); border-radius: 11px; background: var(--color-surface); color: var(--sop-icono-trazo); }
.sop-subir__texto { flex: 1; min-width: 0; }
.sop-subir__texto p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--color-text-muted); }
/* El campo base de la aplicacion le pondria caja: aqui la caja es la de adjuntar. */
.sop-subir input[type="file"] { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; font: inherit; font-size: 13px; color: var(--color-text-muted); }
.sop-subir input[type="file"]::file-selector-button {
    min-height: 42px; margin-right: 12px; padding: 10px 13px;
    border: var(--bw-1) solid var(--color-border-strong); border-radius: var(--r-md);
    background: var(--color-surface); color: var(--btn-outline-fg);
    font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.sop-subir--compacta { gap: 11px; padding: 14px; }
.sop-subir--compacta .sop-subir__marca { width: 34px; height: 37px; }
.sop-subir--compacta .sop-subir__texto p { font-size: 13px; }

/* ---- Ticket: responder y cerrar o reabrir (maqueta `reply-card` y `reopen-area`) ---- */
.sop .sop-responder .card-heading { padding-bottom: 20px; }
.sop-responder__form { padding: 0 26px 25px; }
.sop-responder__form .sop-campo--adjuntos { margin-top: 22px; }
/* La separacion entre el cuadro de texto y el boton la pidio Jorge (D-50-3): se conserva. */
.sop-responder__acciones { display: flex; justify-content: flex-end; margin-top: 22px; }
.sop-responder__acciones .btn { padding-left: 18px; padding-right: 18px; }
.sop-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.sop-cierre .btn { font-size: 14px; }

/* ---- Alta de ticket (maqueta `new-ticket-layout`) ---- */
.sop-nuevo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.sop .sop-form .card-heading { padding: 25px 27px 24px; border-bottom: var(--bw-1) solid var(--sop-filete); }
.sop-campos { display: grid; grid-template-columns: minmax(205px, .6fr) minmax(0, 1fr); gap: 23px 21px; padding: 26px 27px 0; }
.sop-campos .sop-campo--detalle, .sop-campos .sop-campo--adjuntos { grid-column: 1 / -1; }
.sop-acciones { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 27px; padding: 20px 27px; border-top: var(--bw-1) solid var(--sop-filete); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--sop-pie-bg); }
.sop-acciones > .btn { min-width: 105px; }
/* La guia va sobre el lienzo, sin tarjeta. */
.sop-guia { padding: 11px 10px 0; }
.sop-guia__arte { width: 235px; max-width: 100%; margin: 0 auto 13px; }
.sop-guia__arte svg { display: block; width: 100%; height: auto; }
.sop .sop-guia h2 { margin: 0 0 16px; font-size: 21px; line-height: 1.6; font-weight: 650; letter-spacing: -.3px; color: var(--sop-guia); }
.sop-guia p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--color-text-muted); }
.sop-guia .sop-guia__respuesta { display: flex; align-items: flex-start; gap: 10px; margin-top: 23px; padding-top: 23px; border-top: var(--bw-1) solid var(--color-border-strong); }
.sop-guia__respuesta svg { flex: none; margin-top: 3px; color: var(--sop-icono-trazo); }
/* El dibujo de la guia (decorativo): sus tintas van por clase para salir de los tokens. */
.sop-arte__a { stop-color: var(--sop-arte-a); }
.sop-arte__b { stop-color: var(--sop-arte-b); }
.sop-arte__blanco { stop-color: var(--color-surface); }
.sop-arte__claro { stop-color: var(--sop-arte-claro); }
.sop-arte__suelo { fill: var(--sop-arte-b); opacity: .07; }
.sop-arte__fondo { fill: var(--sop-arte-fondo); }
.sop-arte__linde { stroke: var(--sop-arte-linde); }
.sop-arte__sombra { fill: var(--sop-arte-sombra); }
.sop-arte__linea { stroke: var(--sop-arte-linea); }
.sop-arte__globo { fill: var(--sop-arte-globo); opacity: .6; }
.sop-arte__frente { stroke: var(--sop-arte-borde); }
.sop-arte__p1 { fill: var(--sop-arte-p1); }
.sop-arte__p2 { fill: var(--sop-arte-p2); }
.sop-arte__p3 { fill: var(--sop-arte-p3); }
.sop-arte__chispa { stroke: var(--sop-arte-chispa); }
.sop-arte__punto { fill: var(--sop-arte-chispa); }

/* ---- Efectos al pasar el raton: solo donde hay raton ---- */
@media (hover: hover) and (pointer: fine) {
    .sop-volver:hover { color: var(--color-primary-600); }
    .sop-tabla tbody tr:hover td { background: var(--sop-fila-hover); }
    .sop-tabla__enlace:hover { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 4px; }
    .sop-ver:hover svg { transform: translateX(3px); }
    .sop-adjunto:hover { border-color: var(--sop-adjunto-hover); }
    .sop .form-field textarea:hover { border-color: var(--color-border-hover); }
    .sop-subir input[type="file"]::file-selector-button:hover { background: var(--btn-outline-hover); border-color: var(--color-border-hover); }
}

/* ---- Cortes de la maqueta ---- */
@media (max-width: 1250.98px) {
    .app-main:has(> .sop) { padding: 26px 24px 24px; }
    .sop-tabla th.sop-tabla__asunto { width: 34%; }
    .sop-tabla th.sop-tabla__estado { width: 21%; }
    .sop-tabla th.sop-tabla__fecha { width: 19%; }
    .sop-tabla th, .sop-tabla td { padding-left: 12px; padding-right: 12px; }
    .sop-tabla__nombre { gap: 10px; }
    .sop-tabla__marca { display: none; }
    .sop-nuevo { grid-template-columns: minmax(0, 1fr) 245px; gap: 22px; }
    .sop-campos { grid-template-columns: 1fr; gap: 22px; }
    .sop-ticket { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
    .sop-mensajes { padding: 23px 22px; }
    .sop-mensaje__contenido { max-width: calc(100% - 48px); }
    .sop-mensaje__meta { flex-wrap: wrap; gap: 3px 10px; }
}
@media (max-width: 1080.98px) {
    .sop-ticket { grid-template-columns: 1fr; }
    .sop-original__cuerpo { padding-bottom: 23px; }
    .sop-nuevo { grid-template-columns: 1fr; gap: 20px; }
    .sop-campos { grid-template-columns: minmax(220px, .6fr) minmax(0, 1fr); }
    /* Como en la maqueta, la guia cede su sitio al formulario. */
    .sop-guia { display: none; }
    .sop-mensaje__contenido { max-width: calc(100% - 88px); }
}
@media (max-width: 760.98px) {
    .app-main:has(> .sop) { padding: 23px 16px 22px; }
    .sop-cabecera { flex-wrap: wrap; align-items: flex-start; gap: 19px; margin-bottom: 22px; }
    .sop-cabecera .page-eyebrow { letter-spacing: 1.4px; }
    .sop-cabecera .page-title { font-size: 29px; line-height: 1.4; letter-spacing: -.6px; }
    .sop-cabecera .page-subtitle { line-height: 1.7; }
    .sop-cabecera__accion { width: 100%; min-height: 49px; font-size: 16px; }
    .sop-volver { min-height: 44px; margin: -8px 0 15px; font-size: 15px; }
    .sop-meta { gap: 11px; margin-top: 17px; }
    .sop-meta__fecha { flex-basis: 100%; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 0; border: 0; }
    .sop-meta__fecha svg { margin-top: 2px; }
    .sop .card-heading { gap: 11px; padding: 22px 19px 20px; }
    .sop .card-heading > div > p { line-height: 1.7; }
    .sop-icono { width: 39px; height: 39px; border-radius: 11px; }
    .sop .sop-lista__cab { flex-wrap: wrap; gap: 10px; padding: 21px 19px; }
    .sop-icono--grande { width: 41px; height: 41px; border-radius: 12px; }
    .sop .sop-lista__cab h2 { font-size: 20px; }
    .sop .sop-lista__cab > div > p { display: none; }
    .sop-lista__total { padding: 4px 7px; border-radius: 6px; font-size: 12px; }
    /* La tabla pasa a fichas de dos columnas (maqueta). Sus papeles van escritos en la vista, porque al
       cambiar el `display` el navegador deja de tratarla como tabla. La cabecera se recorta, no se
       quita: sigue nombrando las columnas a un lector de pantalla. */
    .sop-tabla, .sop-tabla tbody { display: block; width: 100%; }
    .sop-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sop-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 12px; padding: 23px 19px 20px; border-bottom: var(--bw-1) solid var(--sop-filete); }
    .sop-tabla td, .sop-tabla td:first-child, .sop-tabla td:last-child { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 15px; }
    .sop-tabla td.sop-tabla__asunto { grid-column: 1 / -1; }
    .sop-tabla__nombre { gap: 0; }
    .sop-tabla__enlace { display: inline-block; padding: 9px 0; font-size: 17px; line-height: 1.6; font-weight: 650; }
    .sop-tabla td.sop-tabla__tipo { grid-column: 1; align-self: start; font-size: 14px; }
    .sop-tabla td.sop-tabla__tipo::before, .sop-tabla td.sop-tabla__fecha::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; color: var(--color-text-muted); }
    .sop-tabla td.sop-tabla__estado { grid-column: 2; align-self: end; max-width: 168px; }
    .sop-distintivo { padding: 6px 9px; }
    .sop-tabla td.sop-tabla__fecha { grid-column: 1; padding-top: 13px; border-top: var(--bw-1) solid var(--sop-filete); }
    .sop-tabla__fecha time { gap: 0 8px; }
    .sop-tabla td.sop-tabla__accion { display: flex; align-items: flex-end; justify-content: flex-end; padding-top: 13px; border-top: var(--bw-1) solid var(--sop-filete); }
    .sop-ver { min-width: 57px; min-height: 44px; gap: 9px; font-size: 15px; }
    .sop-lista__pie { align-items: flex-start; gap: 10px; padding: 19px; font-size: 14px; line-height: 1.75; }
    .sop-lista__pie svg { margin-top: 3px; }
    .sop-ticket, .sop-ticket__original, .sop-ticket__hilo { gap: 18px; }
    .sop .sop-original .card-heading { padding: 21px 19px 15px; }
    .sop .sop-original h2 { font-size: 20px; }
    .sop .sop-original .card-heading > div > p { font-size: 14px; }
    .sop-original__cuerpo { padding: 0 19px 23px; }
    .sop .sop-original-adjuntos .card-heading { align-items: center; padding: 21px 19px 16px; }
    .sop .sop-original-adjuntos h2 { font-size: 17px; }
    .sop-original-adjuntos .sop-adjuntos { padding: 0 19px 21px; }
    .sop-conversacion__vacia { padding: 22px 19px; }
    .sop-mensajes { gap: 26px; padding: 23px 16px 25px; }
    .sop-mensaje { gap: 8px; }
    .sop-mensaje__avatar { width: 29px; height: 29px; border-radius: 9px; }
    .sop-mensaje__avatar svg { width: 18px; height: 18px; }
    .sop-mensaje__contenido { width: calc(100% - 37px); max-width: calc(100% - 37px); }
    .sop-mensaje__meta { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; }
    .sop-mensaje__meta time { white-space: normal; }
    .sop-mensaje--cliente .sop-mensaje__meta { align-items: flex-end; }
    .sop-mensaje__globo { padding: 16px 14px; }
    .sop-mensaje__adjuntos h3 { font-size: 13px; line-height: 1.65; }
    .sop-adjunto { gap: 8px; padding: 10px; }
    .sop-adjunto__dibujo { width: 26px; height: 33px; border-radius: 6px; }
    .sop-adjunto__nombre { line-height: 1.75; }
    .sop-adjunto__nombre small { font-size: 12px; }
    .sop-responder__form { padding: 0 19px 23px; }
    .sop .sop-responder textarea { min-height: 154px; }
    .sop .form-label { font-size: 15px; }
    .sop-responder__form .sop-campo--adjuntos { margin-top: 23px; }
    .sop-subir, .sop-subir--compacta { align-items: flex-start; gap: 11px; padding: 15px; }
    .sop-subir__marca, .sop-subir--compacta .sop-subir__marca { width: 34px; height: 39px; border-radius: 9px; }
    .sop-subir__texto p, .sop-subir--compacta .sop-subir__texto p { font-size: 14px; line-height: 1.6; }
    .sop-subir input[type="file"] { font-size: 16px; }
    .sop-subir input[type="file"]::file-selector-button { min-height: 44px; font-size: 14px; }
    .sop-responder__acciones { margin-top: 23px; }
    .sop-responder__acciones .btn { width: 100%; min-height: 49px; font-size: 16px; }
    .sop-cierre { display: block; }
    .sop-cierre .btn { width: 100%; min-height: 46px; font-size: 15px; }
    .sop .sop-form .card-heading { align-items: flex-start; padding: 22px 19px; }
    .sop-campos { grid-template-columns: 1fr; gap: 23px; padding: 23px 19px 0; }
    .sop .sop-campo--detalle textarea { min-height: 191px; }
    .sop .form-hint { margin-top: 12px; font-size: 13px; line-height: 1.8; }
    .sop .form-error { font-size: 14px; }
    .sop-acciones { gap: 13px; margin-top: 25px; padding: 20px 19px; }
    .sop-acciones > .btn { flex: 1; min-width: 0; min-height: 49px; font-size: 16px; }
}
@media (max-width: 370.98px) {
    .app-main:has(> .sop) { padding-left: 12px; padding-right: 12px; }
    .sop .sop-lista__cab { gap: 9px; padding: 21px 16px; }
    .sop .sop-lista__cab h2 { font-size: 19px; }
    .sop-icono--grande { width: 35px; height: 35px; border-radius: 10px; }
    .sop-lista__total { padding: 4px 6px; font-size: 11px; }
    .sop-tabla tbody tr { padding-left: 16px; padding-right: 16px; }
    .sop-mensajes { padding-left: 13px; padding-right: 13px; }
    /* Como en la maqueta, a este ancho el dibujo del autor cede su sitio al mensaje: quien escribe sigue
       escrito en la cabecera de cada mensaje. */
    .sop-mensaje__avatar { display: none; }
    .sop-mensaje__contenido { width: 100%; max-width: 100%; }
    .sop-mensaje__globo { padding: 15px 13px; }
}

/* ============================================================================
   Cuenta (issues #4, #25, #183, #231, #325 y #336; rediseno #339, S-229)
   ----------------------------------------------------------------------------
   Maqueta `Docarga-cuenta-redisenada.html`, version corregida del 04/10 (familia B). Sus cortes son
   1460, 1320, 1230, 1000, 760 y 370 px, de ventana (los dos menores, escritos con `.98`).
   Diez apartados dentro de `.cta`: menu a la izquierda (`.cta-lateral`) y, a su derecha, las
   tarjetas del apartado (`.cta-contenido`). Todo va acotado a `.cta`.
   Es solo aspecto: que apartados ve cada rol, que se guarda y como se valida lo decide el servidor;
   los formularios conservan sus campos y destinos (caso 282).
   Lo que NO sale de la maqueta y se conserva (D-339-4): la flecha nativa de los desplegables, el
   selector de archivo nativo del logo (issue #231 §4), «Reenviar invitacion», los datos por
   defecto de Emision, el aviso de actividad heredada y los avisos de exito y de error.
   Los grises secundarios de la maqueta no llegan a 4,5:1: aqui son siempre `--color-text-muted`
   (caso 181).
   ============================================================================ */
.app-main:has(> .cta) { --content-max: 1660px; max-width: 1660px; padding-top: 30px; padding-bottom: 25px; }
.cta { font-size: 15px; line-height: 1.5; }
.cta-cabecera { margin-bottom: 28px; }
.cta-cabecera .page-eyebrow { margin-bottom: 8px; letter-spacing: 1.7px; }
.cta-cabecera .page-title { margin: 0 0 8px; line-height: 1.3; }
.cta-cabecera .page-subtitle { line-height: 1.65; }
.cta h2 { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700; letter-spacing: -.35px; color: var(--color-primary-700); }
.cta .btn svg { flex: none; }
/* Boton discreto (maqueta `btn-quiet`): accion secundaria de fila o de tarjeta, sin caja en reposo. */
.cta .btn--quiet { padding-left: 10px; padding-right: 10px; background: transparent; color: var(--color-text-muted); box-shadow: none; }

/* ---- Disposicion y menu de apartados (maqueta `account-layout` y `account-nav`) ----
   El menu es el de Maestros (mismos tonos). Solo se queda fijo al desplazar en una ventana donde cabe
   entero con la letra normal (diez enlaces, su rotulo y su nota: unos 690 px bajo la cabecera): en una
   pantalla baja (1366 x 650) no se fija y se desplaza con la pagina.
   La consulta de medios solo sabe de pixeles de ventana, no del tamaño de la letra: con el texto ampliado
   (ajuste de letra del navegador o del sistema) el menu crece y deja de caber aunque la ventana sea alta.
   Por eso, cuando se fija, lleva el mismo tope que la consulta original de Soporte: el alto libre de la
   ventana y, si no cabe, desplazamiento propio. Un enlace que recibe el foco queda asi siempre a la
   vista. Los 6 px de relleno, compensados con margen (y con `top`: 85 + 6 = los 91 px de siempre), dejan
   sitio al anillo de foco, que un bloque con desplazamiento recortaria. */
.cta-disposicion { display: grid; grid-template-columns: 221px minmax(0, 1fr); gap: 24px; align-items: start; }
.cta-contenido { min-width: 0; scroll-margin-top: 92px; }
.cta-lateral { min-width: 0; }
@media (min-width: 1321px) and (min-height: 800px) {
    .cta-lateral {
        position: sticky; top: 85px;
        max-height: calc(100vh - 97px); max-height: calc(100dvh - 97px);
        margin: -6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 10px;
    }
}
.cta-nav__rotulo { margin: 0 0 13px; padding: 0 12px; font-size: 10px; line-height: 1.5; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-muted); }
.cta-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cta-nav__enlace {
    display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 9px 10px;
    border: var(--bw-1) solid transparent; border-radius: 11px;
    color: var(--maes-nav-texto); text-decoration: none; font-size: 14px; font-weight: 550; line-height: 1.4;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.cta-nav__icono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 9px; background: var(--maes-nav-icono-bg); color: var(--cta-icono-trazo); }
.cta-nav__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cta-nav__enlace > svg { flex: none; opacity: 0; }
/* El apartado actual: fondo, filete y una marca azul a la izquierda. Ademas del color lo dice
   `aria-current` y, con colores forzados, un marco (ver el final de la seccion). */
.cta-nav__enlace[aria-current="page"] {
    background: var(--maes-nav-actual); border-color: var(--maes-nav-actual-borde);
    color: var(--maes-nav-actual-texto); box-shadow: inset 3px 0 0 var(--maes-nav-actual-filo);
}
.cta-nav__enlace[aria-current="page"] .cta-nav__icono { background: var(--color-surface); }
.cta-nav__enlace[aria-current="page"] > svg { opacity: 1; }
.cta-nav__nota { display: flex; gap: 8px; margin: 22px 10px 0; padding-top: 17px; border-top: var(--bw-1) solid var(--color-border); font-size: 12px; line-height: 1.7; color: var(--color-text-muted); }
.cta-nav__nota svg { flex: none; margin-top: 2px; }
/* El desplegable de apartados solo existe en movil y con JavaScript (ver el corte de 760 px). */
.cta-ir { display: none; }

/* ---- Avisos (exito tras guardar, rechazo, resumen de errores) ---- */
.cta .cta-aviso { margin: 0 0 22px; font-size: 14px; line-height: 1.65; }
/* Reciben el foco por guion al cargar, y un elemento con `tabindex="-1"` no siempre cumple
   `:focus-visible`: el contorno se pinta con `:focus`. */
.cta .cta-aviso:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.cta-aviso__titulo { margin: 0 0 4px; font-weight: 600; }
.cta-aviso__lista { margin: 0; padding: 0; list-style: none; }
.cta-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cta-contenido > .form-alert:not(.cta-aviso) { margin: 0 0 22px; }

/* ---- Tarjeta (maqueta `account-card`, `card-heading`, `card-body`, `form-actions`) ---- */
.cta .cta-tarjeta { margin: 0; padding: 0; min-width: 0; border-radius: 18px; }
.cta .cta-tarjeta + .cta-tarjeta { margin-top: 22px; }
.cta .card-heading { display: flex; align-items: center; gap: 13px; padding: 24px 27px; border-bottom: var(--bw-1) solid var(--cta-filete); border-radius: 18px 18px 0 0; background: var(--cta-cab); }
.cta .card-heading > div { min-width: 0; flex: 1; }
.cta .card-heading > div > p { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }
.cta .card-heading > .btn, .cta .card-heading > .cta-crear { flex: none; margin-left: auto; }
.cta-icono { display: grid; place-items: center; flex: none; width: 41px; height: 41px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 12px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta .card-body { padding: 26px 27px; }
.cta-acciones { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 27px; border-top: var(--bw-1) solid var(--cta-filete); border-radius: 0 0 18px 18px; background: var(--cta-pie-bg); }
.cta-acciones .btn--accent { padding-left: 23px; padding-right: 23px; }
.cta-texto { margin: 0 0 23px; font-size: 15px; line-height: 1.85; color: var(--cta-texto); }
.cta-texto:last-child { margin-bottom: 0; }
.cta-entradilla { clear: both; margin: 0 0 21px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }
.cta-botones { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 0; }
.cta-volver { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 0 17px; font-size: 14px; text-decoration: none; color: var(--color-text-muted); }
.cta-volver svg { flex: none; }

/* ---- Grupos y campos (maqueta `field-group`, `form-grid`, `field`): 49 px, 10 px de radio, 16 px ----
   Las reglas de campo de TEXTO excluyen casillas y radios (comprobacion C02): si las heredaran, cada
   casilla tomaria su alto, su relleno y, al enfocarla, un halo rectangular que se sale de su caja.
   El foco conserva el anillo de la aplicacion: el de la maqueta (#409bde con halo al 7 %) no llega
   al 3:1 que pide el indicador de foco. */
.cta-grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.cta-grupo + .cta-grupo, .cta-rejilla + .cta-grupo { margin-top: 30px; padding-top: 27px; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-grupo > legend { float: left; display: flex; align-items: center; gap: 9px; width: 100%; margin: 0 0 19px; padding: 0; font-size: 15px; line-height: 1.6; font-weight: 650; color: var(--cta-leyenda); }
/* La leyenda flota (asi admite `display: flex`), y TODO lo que la sigue baja de ella, no solo su vecino
   inmediato: si ese vecino esta oculto (`hidden`: la ayuda del alcance cuando ya se ha elegido uno) no
   genera caja y no despeja nada, y el bloque siguiente se quedaba al lado de la leyenda, con ancho cero. */
.cta-grupo > legend ~ * { clear: both; }
.cta-grupo > legend svg { flex: none; color: var(--cta-icono-trazo); }
.cta-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.cta-ancho { grid-column: 1 / -1; }
.cta .form-field { gap: 0; min-width: 0; margin: 0; }
.cta .form-label { display: block; margin: 0 0 9px; font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--cta-rotulo); }
.cta .form-field input:not(:where([type="checkbox"], [type="radio"], [type="file"])) { width: 100%; min-width: 0; min-height: 49px; padding: 11px 13px; border: var(--bw-1) solid var(--cta-campo-borde); border-radius: 10px; background: var(--color-surface); font-size: 16px; line-height: 1.6; color: var(--cta-campo); }
.cta .form-field select { width: 100%; min-width: 0; min-height: 49px; padding: 11px 13px; border: var(--bw-1) solid var(--cta-campo-borde); border-radius: 10px; background: var(--color-surface); font-size: 16px; line-height: 1.6; cursor: pointer; color: var(--cta-campo); }
.cta .form-field input.mono { font-family: var(--font-mono); }
.cta .form-field input[readonly] { background: var(--color-bg); }
.cta .form-field input::placeholder { opacity: 1; color: var(--color-text-muted); }
/* Contorno transparente, no `none`: con colores forzados el halo no se pinta y el contorno es el foco. */
.cta .form-field :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"])), select):focus { outline: 2px solid transparent; border-color: var(--color-primary-500); box-shadow: var(--sh-focus); }
.cta .form-field [aria-invalid="true"], .cta .form-field :is(input, select).is-error { border-color: var(--form-red); }
.cta .form-hint { display: block; margin: 9px 0 0; font-size: 13px; line-height: 1.75; color: var(--color-text-muted); }
.cta .form-error { display: block; margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--form-red); }
.cta .req { margin-left: 2px; color: var(--form-red); }
/* Casillas y radios (maqueta `check-row`): el control nativo, de 18 px, sin nada de lo que viste a
   un campo de texto. El foco es el contorno comun de la aplicacion, pegado al control. */
.cta .form-check { align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.65; color: var(--cta-casilla); cursor: pointer; }
.cta .form-check > span { min-width: 0; }
.cta .form-check small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.cta :is(input[type="checkbox"], input[type="radio"]) { flex: none; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; border-radius: 0; box-shadow: none; accent-color: var(--color-primary-500); }
.cta :is(input[type="checkbox"], input[type="radio"]):focus { box-shadow: none; }
.cta :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
/* La pareja «identificacion extranjera» + pais la pinta un parcial que comparte con el registro. */
.cta-rejilla--idext > .form-field--idext { grid-column: 1 / -1; }

/* ---- Nota informativa (maqueta `note`) ---- */
.cta-nota { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border: var(--bw-1) solid var(--cta-nota-borde); border-radius: 11px; background: var(--cta-nota-bg); font-size: 13px; line-height: 1.75; color: var(--color-text-muted); }
.cta-nota > svg { flex: none; margin-top: 3px; color: var(--cta-icono-trazo); }
.cta-nota p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card-body > .cta-nota:first-child { margin-bottom: 25px; }
.cta-nota + .cta-nota { margin-top: 10px; }
.cta-nota--banda { padding: 15px 27px; border-width: 0 0 1px; border-color: var(--cta-filete); border-radius: 0; background: var(--cta-caja-bg); font-size: 12px; }
.cta-nota--invitacion, .cta-nota--motivo { margin-top: 23px; }
.cta-modos + .cta-nota { margin-top: 16px; }

/* ---- Banda de identidad (maqueta `identity-band`): datos que no se editan ---- */
.cta-banda { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; margin: 0; padding: 24px 27px; border-bottom: var(--bw-1) solid var(--cta-banda-borde); background: var(--cta-banda); }
.cta-banda > div { min-width: 0; }
.cta-banda dt { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.cta-banda dd { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 650; color: var(--cta-fuerte); overflow-wrap: anywhere; }
.cta-banda__codigo { letter-spacing: .8px; }
.cta-banda--seguridad { grid-template-columns: 1fr 2fr 1fr; border-bottom: 0; border-radius: 0 0 18px 18px; background: var(--cta-caja-bg); }

/* ---- Distintivos: perfil, solo lectura y estado (maqueta `profile-pill`, `readonly-tag`, `status-tag`) ----
   El estado lleva siempre su texto; el color y el punto acompanan. Pares ya medidos de la paleta de
   estados: la maqueta pinta #388775 sobre #f0f9f5 (4,04:1) y #8191a1 sobre #f3f5f8 (2,9:1). */
.cta-pastilla { display: inline-flex; padding: 4px 8px; border: var(--bw-1) solid var(--cta-etiqueta-borde); border-radius: 6px; background: var(--cta-etiqueta-bg); font-size: 11px; line-height: 1.5; font-weight: 600; color: var(--cta-etiqueta); }
.readonly-tag { flex: none; margin-left: auto; padding: 4px 8px; border: var(--bw-1) solid var(--cta-etiqueta-borde); border-radius: 6px; background: var(--cta-etiqueta-bg); font-size: 11px; line-height: 1.5; color: var(--cta-etiqueta); }
.cta-estado { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: var(--bw-1) solid transparent; border-radius: 6px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.cta-estado > i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cta-estado.is-on { color: var(--state-emitido-fg); background: var(--state-emitido-bg); }
.cta-estado.is-off { color: var(--state-borrador-fg); background: var(--state-borrador-bg); }
/* issue #237: la invitacion pendiente es un tercer estado, distinto tambien sin leer el texto. */
.cta-estado.is-pending { color: var(--color-warning); background: var(--color-warning-bg); }

/* ---- Datos generales: logo (maqueta `logo-layout`) ---- */
.cta-logo { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 27px; align-items: center; }
.cta-logo__vista { display: grid; place-items: center; min-height: 147px; padding: 16px; border: var(--bw-1) dashed var(--cta-campo-borde); border-radius: 13px; overflow: hidden; color: var(--color-text-subtle); }
.cta-logo__vista img { width: 100%; height: auto; max-width: 216px; max-height: 115px; object-fit: contain; }
.cta-logo__opciones > p { margin: 0 0 9px; font-size: 14px; line-height: 1.75; color: var(--cta-texto); }
.cta-logo__opciones > .form-hint { margin: 0; font-size: 12px; }
.cta .cuenta-logo-form { gap: 11px; margin-top: 18px; }
.cta .cuenta-logo-form input[type="file"] { flex: 1 1 220px; min-width: 0; min-height: 44px; font-size: 13px; color: var(--color-text-muted); }
.cta .cuenta-logo-form .btn { min-height: 42px; font-size: 13px; }
.cta-logo__quitar { margin-top: 8px; }
.cta-logo__quitar .btn { min-height: 41px; font-size: 13px; }

/* ---- Actividad: modulos y rol (maqueta `module-options` y `default-role`) ----
   Cada modulo es una caja con su casilla a la derecha. La caja marcada cambia de fondo Y de filete. */
.cta-campo { min-width: 0; }
.cta-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cta-modulos .form-check { align-items: center; padding: 17px; border: var(--bw-1) solid var(--cta-caja-borde); border-radius: 11px; background: var(--cta-caja-bg); }
.cta-modulos .form-check:has(input:checked) { border-color: var(--cta-marcada-borde); background: var(--cta-marcada); }
.cta-modulos .form-check input { order: 2; margin: 0 0 0 auto; }
.cta-modulos .form-check > span { display: flex; align-items: center; gap: 11px; font-weight: 550; }
.cta-modulos .form-check svg { flex: none; color: var(--cta-icono-trazo); }
.cta-rol-fijo { padding: 18px 19px; border: var(--bw-1) solid var(--cta-neutro-borde); border-radius: 11px; background: var(--cta-neutro-bg); }
.cta-rol-fijo > div { display: flex; align-items: center; gap: 11px; color: var(--cta-icono-trazo); }
.cta-rol-fijo svg { flex: none; }
.cta-rol-fijo p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--cta-texto); }

/* ---- Emision DeCA (maqueta `numbering`, `retention`, `option-list`, `choice-card` y, del 04/10,
        `auto-attachments-settings` y `request-duration-settings`) ---- */
.cta .cta-tarjeta--numeracion .card-heading { padding-bottom: 0; border: 0; background: none; }
.cta-numeracion { display: flex; align-items: center; gap: 22px; }
.cta-numeracion > code { flex: none; padding: 15px 17px; border: var(--bw-1) solid var(--cta-codigo-borde); border-radius: 10px; background: var(--cta-codigo-bg); font-family: var(--font-mono); font-size: 16px; white-space: nowrap; color: var(--cta-codigo); }
.cta-numeracion > p { margin: 0; font-size: 12px; line-height: 1.75; color: var(--color-text-muted); }
.cta-conservacion { padding: 18px 20px; border: var(--bw-1) solid var(--cta-neutro-borde); border-radius: 12px; background: var(--cta-neutro-bg); }
.cta-conservacion__dato { display: flex; align-items: center; gap: 12px; color: var(--cta-icono-trazo); }
.cta-conservacion__dato > svg { flex: none; }
.cta-conservacion__dato > p { margin: 0; min-width: 0; }
.cta-conservacion__dato .form-label { margin: 0 0 4px; font-size: 13px; }
.cta-conservacion__dato strong { display: block; font-size: 23px; line-height: 1.4; font-weight: 650; color: var(--cta-cifra); }
.cta-conservacion__nota { margin: 13px 0 0; font-size: 13px; line-height: 1.75; color: var(--color-text-muted); }
.cta-opciones { display: grid; gap: 21px; padding-top: 5px; }
.cta-envio-auto { min-width: 0; }
.cta-adjuntos { margin: 15px 0 0 29px; padding: 17px 19px; border-left: 3px solid var(--cta-adjuntos-filo); border-radius: 0 10px 10px 0; background: var(--cta-adjuntos-bg); }
.cta-adjuntos .form-field { max-width: 330px; }
.cta-adjuntos .form-hint { max-width: 660px; }
.cta-pregunta { clear: both; margin: 0 0 16px; font-size: 15px; font-weight: 550; color: var(--cta-casilla); }
.cta-modos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cta-eleccion { position: relative; display: grid; grid-template-columns: 35px minmax(0, 1fr) 17px; align-content: start; gap: 11px; padding: 19px; border: var(--bw-1) solid var(--cta-caja-borde); border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.cta-eleccion > input { grid-column: 3; grid-row: 1; width: 17px; height: 17px; margin: 5px 0 0; }
.cta-eleccion__icono { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 35px; height: 35px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 9px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta-eleccion__texto { display: contents; }
.cta-eleccion strong { grid-column: 2; grid-row: 1; padding-top: 3px; font-size: 15px; line-height: 1.6; color: var(--cta-leyenda); }
.cta-eleccion small { grid-column: 1 / -1; margin-top: 2px; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.cta-eleccion:has(input:checked) { border-color: var(--cta-marcada-borde); background: var(--cta-marcada); }
.cta-eleccion:has(input:checked) .cta-eleccion__icono { background: var(--color-surface); }
.cta-duracion { display: grid; grid-template-columns: minmax(235px, .85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; margin-top: 24px; padding-top: 24px; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-duracion .form-field input { max-width: 160px; }
.cta-duracion > .form-hint { margin-top: 0; padding-top: 2px; }

/* ---- Usuarios: perfiles, tabla y ficha (maqueta `role-summaries`, `users-table`, `role-choice`) ---- */
.cta-perfiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.cta-perfil { padding: 19px; border: var(--bw-1) solid var(--cta-neutro-borde); border-radius: 13px; background: var(--cta-caja-bg); }
.cta-perfil--admin { border-color: var(--cta-perfil-borde); background: var(--cta-perfil-admin); }
.cta-perfil__icono { display: grid; place-items: center; width: 37px; height: 37px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 10px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta-perfil h3 { margin: 13px 0 9px; font-size: 16px; line-height: 1.4; font-weight: 650; color: var(--cta-subtitulo); }
.cta-perfil p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--color-text-muted); }
.cta .table-wrap { border-radius: 0 0 18px 18px; }
.cta-tabla { width: 100%; border-collapse: collapse; text-align: left; }
.cta-tabla th { padding: 14px; border-top: var(--bw-1) solid var(--cta-filete); border-bottom: var(--bw-1) solid var(--cta-filete); background: var(--cta-th-bg); font-size: 10px; line-height: 1.5; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; color: var(--color-text-muted); }
.cta-tabla td { padding: 22px 14px; border-bottom: var(--bw-1) solid var(--cta-filete); vertical-align: middle; font-size: 13px; color: var(--color-text-muted); }
.cta-tabla th:first-child, .cta-tabla td:first-child { padding-left: 27px; }
.cta-tabla th:last-child, .cta-tabla td:last-child { padding-right: 23px; }
.cta-tabla tbody tr:last-child td { border-bottom: 0; }
.cta-tabla--usuarios .cta-usuario { min-width: 236px; }
.cta-usuario__inicial { display: inline-grid; place-items: center; vertical-align: middle; width: 37px; height: 37px; margin-right: 12px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 11px; background: var(--cta-icono-bg); font-size: 14px; font-weight: 600; color: var(--color-primary-600); }
.cta-usuario__datos { display: inline-block; vertical-align: middle; max-width: calc(100% - 54px); }
.cta-usuario__nombre { display: block; font-size: 15px; font-weight: 650; color: var(--cta-nombre); }
.cta-usuario__correo { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.cta .acceso-deca { padding: 0; border-radius: 0; background: none; font-size: 13px; white-space: normal; color: var(--color-text-muted); }
.cta .acceso-deca--propios { font-weight: 600; color: var(--cta-nombre); }
/* Acciones de fila (comprobacion C03): una columna alineada a la derecha, cada accion en su linea y
   todas con la misma caja, sea enlace («Editar») o boton de formulario («Desactivar»). */
.cta-tabla .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.cta-tabla td.col-actions > form { display: block; margin: 2px 0 0; }
.cta-tabla td.col-actions .btn { display: inline-flex; min-height: 36px; padding: 7px 8px; font-size: 12px; }
.cta-tabla--api td { padding-top: 19px; padding-bottom: 19px; font-size: 12px; }
.cta-tabla code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; color: var(--cta-codigo); }
.cta-tabla__segundo { display: block; margin-top: 4px; font-size: 11px; }
.cta-usuario-identidad { margin-bottom: 28px; }
/* Tarjetas con radio de la ficha (`perfil-card`, compartidas con el registro) con el aspecto de la
   maqueta: dibujo arriba, radio visible a la derecha, titulo y explicacion debajo. */
.cta .perfil-cards { margin: 0; gap: 15px; }
.cta fieldset.perfil-cards { margin-bottom: 27px; }
.cta .perfil-cards__legend { grid-column: 1 / -1; margin-bottom: 4px; }
/* El mensaje de un perfil rechazado ocupa todo el ancho, bajo las tres tarjetas. */
.cta fieldset.perfil-cards > .form-error { grid-column: 1 / -1; margin-top: 0; }
.cta .alcance-deca { margin: 0 0 27px; padding: 27px 0 0; border: 0; border-top: var(--bw-1) solid var(--cta-filete); border-radius: 0; }
.cta .alcance-deca.is-error { border-color: var(--form-red); }
.cta .alcance-deca .perfil-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 0 16px; }
.cta .alcance-deca > .form-hint { margin: 0 0 16px; font-size: 14px; }
.cta .alcance-deca__notas { list-style: none; margin: 0; padding: 0; }
.cta .perfil-card { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-content: start; gap: 12px; padding: 19px; border: var(--bw-1) solid var(--cta-caja-borde); border-radius: 13px; background: var(--color-surface); box-shadow: none; cursor: pointer; }
.cta .perfil-card__input { position: static; grid-column: 2; grid-row: 1; width: 18px; height: 18px; margin: 7px 0 0; opacity: 1; }
.cta .perfil-card__icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 37px; height: 37px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 10px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta .perfil-card__body { grid-column: 1 / -1; }
.cta .perfil-card__title { font-size: 15px; font-weight: 650; color: var(--cta-leyenda); }
.cta .perfil-card__desc { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--color-text-muted); }
.cta .perfil-card__check { display: none; }
.cta .perfil-card:has(.perfil-card__input:checked) { border-color: var(--cta-marcada-borde); background: var(--cta-marcada); box-shadow: none; }
.cta .perfil-card:has(.perfil-card__input:checked) .perfil-card__icon { background: var(--color-surface); }

/* ---- Seguridad (maqueta `password-fields` y `two-factor-layout`) ---- */
.cta-claves { display: grid; gap: 22px; max-width: 614px; }
.cta-2fa { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 29px; align-items: start; }
.cta .cuenta-qr { width: auto; margin: 0; padding: 8px; border: var(--bw-1) solid var(--cta-caja-borde); border-radius: 13px; background: var(--color-surface); }
.cta .cuenta-qr svg { display: block; }
.cta-2fa__clave code { display: block; margin-top: 6px; font-size: 16px; letter-spacing: 1px; overflow-wrap: anywhere; user-select: all; }
.cta-2fa__confirmar .form-field { margin-bottom: 21px; }
.cta-2fa__confirmar #s-2fa { max-width: 225px; font-size: 23px; letter-spacing: 6px; }
.cta-2fa__confirmar form + form { margin-top: 5px; }

/* ---- Suscripcion (maqueta `subscription-summary`): resumen de solo lectura ---- */
.cta-plan { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6px 25px; margin: 0; }
.cta-nota + .cta-plan { margin-top: 23px; }
.cta-plan > div { min-width: 0; }
.cta-plan dt { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--cta-rotulo); }
.cta-plan dd { margin: 0; }
.cta-plan__plan { grid-row: 1 / span 2; position: relative; padding: 25px; border: var(--bw-1) solid var(--cta-plan-borde); border-radius: 14px; background: var(--cta-plan); overflow: hidden; }
.cta-plan__plan dt { margin-bottom: 8px; font-size: 12px; font-weight: 550; color: var(--color-text-muted); }
.cta-plan__plan dd { padding-right: 58px; font-size: 31px; line-height: 1.25; font-weight: 700; letter-spacing: -.7px; overflow-wrap: anywhere; color: var(--cta-plan-nombre); }
.cta-plan__icono { position: absolute; right: 19px; bottom: 21px; display: grid; place-items: center; width: 46px; height: 46px; border: var(--bw-1) solid var(--cta-plan-borde); border-radius: 12px; background: var(--color-surface); color: var(--cta-icono-trazo); }
.cta-plan__uso { padding-top: 6px; }
.cta-plan__uso dd { margin-top: 8px; font-size: 35px; line-height: 1.2; font-weight: 700; color: var(--cta-cifra); }
.cta-plan__limite { display: flex; align-items: baseline; gap: 8px; }
.cta-plan__limite dt { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.cta-plan__limite dd { font-size: 13px; font-weight: 600; color: var(--cta-texto); }
.cta-plan__renovacion { grid-column: 1 / -1; display: flex; align-items: center; gap: 15px; margin-top: 21px; padding: 23px 0 0; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-plan__renovacion dt { display: flex; align-items: center; gap: 13px; font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.cta-plan__renovacion dt svg { flex: none; color: var(--cta-icono-trazo); }
.cta-plan__renovacion dd { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--cta-texto); }
.cta-plan__acciones { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 23px; padding-top: 23px; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-plan__pagos { margin-left: auto; }

/* ---- API (maqueta `api-identity`, `api-docs`, `api-table`, `history-entry`, `empty-state`) ----
   La clave recien creada conserva su caja de aviso: se pinta una sola vez (issue #183). */
.cta-api { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; margin: 0; }
.cta-api > div { min-width: 0; }
.cta-api dt { margin: 0 0 9px; font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--cta-rotulo); }
.cta-api dd { margin: 0; font-size: 14px; color: var(--cta-texto); }
.cta-api__id { grid-column: 1 / -1; }
.cta-api__id dd { display: flex; align-items: center; gap: 12px; padding: 8px 11px 8px 15px; border: var(--bw-1) solid var(--cta-codigo-borde); border-radius: 10px; background: var(--cta-codigo-bg); }
.cta-api__id code { min-width: 0; font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; color: var(--cta-codigo); }
.cta-api__id .btn { flex: none; min-height: 36px; margin-left: auto; font-size: 12px; }
.cta-api-docs { display: flex; align-items: center; gap: 16px; margin-top: 27px; padding: 21px; border: var(--bw-1) solid var(--cta-plan-borde); border-radius: 12px; background: var(--cta-perfil-admin); }
.cta-api-docs__icono { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 12px; background: var(--color-surface); color: var(--cta-icono-trazo); }
.cta-api-docs a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--color-primary-600); }
.cta-api-docs p { margin: 6px 0 0; font-size: 13px; line-height: 1.75; color: var(--color-text-muted); }
.cta-api-sin { text-align: center; }
.cta-api-sin__dibujo { display: grid; place-items: center; width: 77px; height: 77px; margin: 2px auto 22px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 22px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta-api-sin .cta-texto { max-width: 620px; margin: 0 auto 24px; }
.cta-api-sin .cta-botones { justify-content: center; }
.cta-clave-nueva .card-body > p { margin: 0 0 14px; color: var(--cta-texto); }
.cta-clave-nueva code { display: block; padding: 13px 15px; border: var(--bw-1) solid var(--cta-codigo-borde); border-radius: 10px; background: var(--cta-codigo-bg); font-family: var(--font-mono); font-size: 14px; word-break: break-all; color: var(--cta-codigo); }
.cta-crear { display: block; }
.cta-limite { margin: 0; padding: 14px 27px 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.cta-vacio { padding: 35px 25px; text-align: center; }
.cta-vacio > span { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 13px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta-vacio p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }
.cta-pie-nota { padding: 0 27px 22px; }
.cta .table-wrap + .cta-pie-nota { padding-top: 18px; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-pie-nota .cta-nota { font-size: 12px; }
.cta-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.cta-historial li { display: flex; align-items: flex-start; gap: 15px; }
.cta-historial__punto { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--cta-punto); box-shadow: 0 0 0 5px var(--cta-punto-halo); }
.cta-historial time { font-size: 12px; color: var(--color-text-muted); }
.cta-historial p { margin: 5px 0 0; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; color: var(--cta-texto); }

/* ---- Legal (maqueta `legal-list`) ---- */
.cta-legal { list-style: none; margin: 0; padding: 0; border-top: var(--bw-1) solid var(--cta-filete); }
.cta-legal__fila { display: flex; align-items: center; gap: 16px; padding: 22px 27px; border-bottom: var(--bw-1) solid var(--cta-filete); }
.cta-legal__fila:last-child { border-bottom: 0; }
.cta-legal__icono { display: grid; place-items: center; flex: none; width: 39px; height: 44px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 10px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.cta-legal__texto { flex: 1; min-width: 0; }
.cta-legal__texto h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.65; font-weight: 600; color: var(--cta-subtitulo); }
.cta-legal__texto p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.cta-legal__fila .btn { flex: none; min-height: 40px; font-size: 12px; white-space: nowrap; }

/* ---- Soporte (maqueta `help-card` y `quick-guide`) ---- */
.cta .cta-tarjeta--ayuda { background: var(--cta-ayuda); }
.cta .cta-tarjeta--ayuda .card-heading { background: none; }
.cta-correo { margin: 0 0 28px; }
.cta-correo a { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; font-size: 19px; font-weight: 550; overflow-wrap: anywhere; color: var(--color-primary-600); }
.cta-correo svg { flex: none; }
.cta-guia { list-style: none; margin: 0; padding: 27px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cta-guia li { position: relative; }
.cta-guia__n { display: grid; place-items: center; width: 29px; height: 29px; border: var(--bw-1) solid var(--cta-icono-borde); border-radius: 50%; background: var(--cta-icono-bg); font-size: 13px; font-weight: 650; color: var(--color-primary-600); }
.cta-guia li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 43px; right: 0; height: 1px; background: var(--cta-icono-borde); }
.cta-guia li > div { display: flex; align-items: flex-start; gap: 11px; margin-top: 17px; color: var(--cta-icono-trazo); }
.cta-guia svg { flex: none; margin-top: 3px; }
.cta-guia p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--cta-texto); }

/* ---- Efectos al pasar el raton: solo donde hay raton ---- */
@media (hover: hover) and (pointer: fine) {
    .cta-nav__enlace:hover { background: var(--maes-nav-hover); }
    .cta .btn--quiet:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
    .cta-volver:hover { color: var(--color-primary-600); }
    .cta .form-field :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"])), select):hover { border-color: var(--color-border-hover); }
    .cta-eleccion:hover, .cta .perfil-card:hover { border-color: var(--color-border-hover); }
}

/* La fila señalada, solo mientras la tabla es tabla (hasta 760 px es una rejilla de fichas). */
@media (hover: hover) and (pointer: fine) {
    @media (min-width: 761px) { .cta-tabla tbody tr:hover td { background: var(--cta-fila-hover); } }
}

/* ---- Cortes de la maqueta ---- */
@media (max-width: 1460px) {
    .app-main:has(> .cta) { padding-left: 26px; padding-right: 26px; }
    .cta-disposicion { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
    .cta-nav__enlace { gap: 9px; padding-left: 8px; padding-right: 8px; }
    .cta-nav__enlace > svg { display: none; }
    .cta-numeracion { flex-direction: column; align-items: flex-start; gap: 17px; }
    .cta-perfil { padding: 16px; }
    .cta-perfiles, .cta fieldset.perfil-cards { gap: 11px; }
    .cta-tabla--api th, .cta-tabla--api td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1320px) {
    /* El menu pasa arriba, en cinco columnas. */
    .cta-disposicion { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cta-nav__rotulo, .cta-nav__nota { display: none; }
    .cta-nav ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
    .cta-nav__enlace { min-height: 51px; border-color: var(--color-border); background: var(--maes-nav-caja); font-size: 13px; }
    .cta-nav__enlace[aria-current="page"] { background: var(--maes-nav-actual); border-color: var(--maes-nav-actual-borde); }
    .cta-nav__icono { width: 29px; height: 29px; }
}
@media (max-width: 1000.98px) {
    .cta-nav__enlace { gap: 7px; font-size: 12px; }
    .cta-nav__icono { width: 25px; height: 28px; }
    .cta-tabla th, .cta-tabla td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 760.98px) {
    .cta { font-size: 16px; line-height: 1.6; }
    .app-main:has(> .cta) { padding: 23px 16px 22px; }
    .cta-cabecera { align-items: flex-start; gap: 10px; margin-bottom: 22px; }
    .cta-cabecera .page-title { font-size: 29px; }
    .cta-cabecera .page-subtitle { line-height: 1.7; }
    .cta-cabecera .page-emblema { width: 43px; height: 43px; margin-top: 17px; border-radius: 12px; }
    .cta-cabecera .page-emblema svg { width: 24px; height: 24px; }
    .cta-disposicion { gap: 19px; }
    .cta-contenido { scroll-margin-top: 85px; }
    /* Sin JavaScript, los enlaces en dos columnas. Con el, el desplegable de la maqueta con su boton
       «Ir» (`app.js` marca `.cta--con-ir` y retira `hidden` del formulario). */
    .cta-nav ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cta-nav__enlace { min-height: 48px; font-size: 14px; }
    .cta--con-ir .cta-nav { display: none; }
    .cta--con-ir .cta-ir { display: flex; flex-direction: column; gap: 7px; }
    .cta-ir__fila { display: flex; align-items: stretch; gap: 8px; }
    .cta-ir__rotulo { font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
    .cta-ir select { flex: 1; min-width: 0; min-height: 51px; padding: 11px 13px; border: var(--bw-1) solid var(--maes-nav-actual-borde); border-radius: 10px; background: var(--color-primary-050); font: inherit; font-size: 16px; font-weight: 600; color: var(--cta-campo); cursor: pointer; }
    .cta-ir select:focus { outline: 2px solid transparent; border-color: var(--color-primary-500); box-shadow: var(--sh-focus); }
    .cta-ir__boton { flex: none; min-width: 56px; min-height: 51px; font-size: 16px; }
    .cta .card-heading { flex-wrap: wrap; gap: 11px; padding: 21px 19px; }
    .cta .card-heading > div > p { line-height: 1.75; }
    .cta-icono { width: 38px; height: 38px; border-radius: 11px; }
    .cta .card-heading > .btn, .cta .card-heading > .cta-crear { width: 100%; margin: 7px 0 0; }
    .cta .card-heading > .btn, .cta .card-heading > .cta-crear .btn { width: 100%; min-height: 48px; font-size: 16px; }
    .cta .card-body { padding: 23px 19px; }
    .cta .cta-tarjeta + .cta-tarjeta { margin-top: 19px; }
    .cta-banda { grid-template-columns: 1fr 1fr; gap: 21px 17px; padding: 22px 19px; }
    .cta-banda > div:last-child { grid-column: 1 / -1; }
    .cta-banda dt { font-size: 13px; }
    .cta-banda dd { font-size: 16px; }
    .cta-banda--seguridad { grid-template-columns: minmax(0, 1fr); }
    .cta-nota--banda { padding: 16px 19px; font-size: 13px; line-height: 1.8; }
    .cta-rejilla { grid-template-columns: minmax(0, 1fr); }
    .cta-grupo > legend { margin-bottom: 22px; font-size: 16px; }
    .cta-grupo + .cta-grupo, .cta-rejilla + .cta-grupo { margin-top: 27px; padding-top: 26px; }
    .cta .form-label { font-size: 15px; line-height: 1.65; }
    .cta .form-field input:not(:where([type="checkbox"], [type="radio"], [type="file"])), .cta .form-field select { min-height: 50px; }
    .cta .form-hint { margin-top: 10px; line-height: 1.85; }
    .cta .form-check { gap: 12px; min-height: 44px; font-size: 16px; line-height: 1.7; }
    .cta .form-check > input { margin-top: 5px; }
    .cta .form-check small { font-size: 14px; line-height: 1.8; }
    .cta-nota { padding: 14px; font-size: 14px; line-height: 1.8; }
    .cta-acciones { padding: 18px 19px; }
    .cta-acciones .btn { flex: 1; min-height: 49px; font-size: 16px; }
    .cta-texto { font-size: 16px; }
    .cta-entradilla, .cta-pregunta { font-size: 15px; line-height: 1.75; }
    .cta-volver { min-height: 44px; }
    .cta-logo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cta-logo__vista { min-height: 135px; }
    .cta-logo__opciones > p { font-size: 15px; }
    .cta-logo__opciones > .form-hint { font-size: 13px; }
    .cta .cuenta-logo-form { flex-direction: column; align-items: stretch; gap: 9px; }
    .cta .cuenta-logo-form input[type="file"] { flex: none; }
    .cta .cuenta-logo-form .btn { min-height: 46px; font-size: 15px; }
    .cta-logo__quitar .btn { min-height: 44px; font-size: 14px; }
    .cta-modulos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cta-modulos .form-check { padding: 18px; }
    .cta-modulos .form-check input { margin: 0 0 0 auto; }
    .cta-rol-fijo { padding: 17px; }
    .cta-numeracion > code { max-width: 100%; padding: 14px 12px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
    .cta-numeracion > p { font-size: 13px; line-height: 1.8; }
    .cta-conservacion { padding: 18px 16px; }
    .cta-conservacion__dato { flex-wrap: wrap; gap: 11px; }
    .cta-conservacion__nota { line-height: 1.85; }
    .cta-adjuntos { margin-left: 0; padding: 16px; }
    .cta-adjuntos .form-field { max-width: none; }
    .cta-modos { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .cta-eleccion { padding: 18px; }
    .cta-eleccion strong, .cta .perfil-card__title { font-size: 16px; }
    .cta-eleccion small, .cta .perfil-card__desc { font-size: 14px; line-height: 1.85; }
    .cta-duracion { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cta-duracion .form-field input { max-width: none; }
    .cta-perfiles, .cta fieldset.perfil-cards, .cta .alcance-deca .perfil-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .cta-perfil { display: grid; grid-template-columns: 37px minmax(0, 1fr); align-items: center; gap: 12px; padding: 19px; }
    .cta-perfil h3 { margin: 0; font-size: 17px; }
    .cta-perfil p { grid-column: 1 / -1; font-size: 14px; }
    .cta .perfil-card { padding: 20px; }
    /* La tabla pasa a una rejilla de dos columnas por fila, con el rotulo de cada dato encima
       (`data-label`). Al cambiar `display` la tabla pierde su semantica: por eso las vistas escriben
       los papeles ARIA (`role="table"`, `row`, `cell`…). La cabecera se oculta solo a la vista. */
    .cta .table-wrap { overflow: visible; }
    .cta-tabla, .cta-tabla tbody { display: block; width: 100%; }
    .cta-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cta-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 13px; padding: 21px 19px; border-top: var(--bw-1) solid var(--cta-filete); }
    .cta-tabla td, .cta-tabla td:first-child, .cta-tabla td:last-child { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 14px; }
    .cta-tabla td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 7px; font-size: 12px; color: var(--color-text-muted); }
    .cta-tabla--usuarios .cta-usuario, .cta-tabla__clave { grid-column: 1 / -1; min-width: 0; }
    .cta-usuario__inicial { width: 40px; height: 40px; font-size: 16px; }
    .cta-usuario__nombre { font-size: 17px; }
    .cta-usuario__correo { font-size: 13px; }
    .cta-pastilla { font-size: 12px; }
    .cta .acceso-deca { font-size: 14px; }
    /* El aire vertical generico de movil (issue #187: `main .card > * + form`, `main form > * + .btn`) no
       vale aqui: las tarjetas de Cuenta reparten su espacio con el cuerpo y el pie, y un margen suelto
       descuadraba «Editar» respecto de «Desactivar» (comprobacion C03). */
    .cta .cta-tarjeta > * + form, .cta .cta-contenido form > * + .btn, .cta .cta-contenido form > * + button[type="submit"] { margin-top: 0; }
    .cta .cta-contenido .card-body > form + form { margin-top: 8px; }
    /* Acciones de fila en movil: una linea, todas a la misma altura, con 44 px de zona tactil. */
    .cta-tabla td.col-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; width: auto; white-space: normal; }
    .cta-tabla td.col-actions:empty { display: none; }
    .cta-tabla td.col-actions > form { margin: 0; }
    .cta-tabla td.col-actions .btn { min-height: 44px; padding: 7px 10px; font-size: 14px; }
    .cta-tabla code { font-size: 14px; }
    .cta-tabla__segundo { font-size: 13px; }
    .cta-claves { max-width: none; }
    .cta-2fa { grid-template-columns: minmax(0, 1fr); gap: 25px; }
    .cta .cuenta-qr { width: 184px; justify-self: center; }
    .cta-2fa__confirmar #s-2fa { max-width: none; font-size: 24px; text-align: center; }
    .cta-2fa__confirmar .btn, .cta-contenido .card-body > form > .btn { width: 100%; }
    .cta-plan { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .cta-plan__plan { grid-row: auto; min-height: 124px; padding: 22px; }
    .cta-plan__uso { padding: 10px 0 0; }
    .cta-plan__uso dd { font-size: 37px; }
    .cta-plan__limite dt, .cta-plan__limite dd { font-size: 13px; }
    .cta-plan__renovacion { flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 13px; }
    .cta-plan__renovacion dt { font-size: 14px; }
    .cta-plan__renovacion dd { margin: 0; font-size: 16px; }
    .cta-plan__acciones { flex-direction: column; align-items: stretch; gap: 12px; }
    .cta-plan__acciones .btn { min-height: 47px; margin: 0; font-size: 15px; }
    .cta-plan__pagos { order: -1; }
    .cta-api { grid-template-columns: minmax(0, 1fr); }
    .cta-api__id dd { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px; }
    .cta-api__id code { line-height: 1.85; }
    .cta-api__id .btn { min-height: 44px; margin: 0; font-size: 14px; }
    .cta-api-docs { align-items: flex-start; gap: 12px; padding: 17px; }
    .cta-api-docs__icono { width: 30px; height: 34px; margin-top: 3px; border-radius: 9px; }
    .cta-api-docs a { min-height: 44px; }
    .cta-api-docs p { line-height: 1.85; }
    .cta-botones .btn { flex: 1 1 100%; min-height: 48px; }
    .cta-limite { padding: 14px 19px 0; }
    .cta-pie-nota { padding: 1px 19px 21px; }
    .cta .table-wrap + .cta-pie-nota { padding-top: 18px; }
    .cta-pie-nota .cta-nota { font-size: 13px; }
    .cta-historial time { font-size: 13px; }
    .cta-vacio p { font-size: 15px; }
    .cta-legal__fila { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 13px; padding: 22px 19px; }
    .cta-legal__icono { width: 35px; height: 39px; }
    .cta-legal__texto h3 { font-size: 16px; }
    .cta-legal__texto p { font-size: 14px; line-height: 1.8; }
    .cta-legal__fila .btn { grid-column: 2; justify-self: start; min-height: 44px; font-size: 14px; white-space: normal; }
    .cta-correo a { gap: 8px; min-height: 44px; font-size: 17px; }
    .cta .cta-tarjeta--ayuda .btn { width: 100%; min-height: 49px; font-size: 16px; }
    .cta-guia { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 24px 19px; }
    .cta-guia li { display: flex; align-items: flex-start; gap: 13px; }
    .cta-guia__n { flex: none; margin-top: 1px; }
    .cta-guia li > div { margin: 0; }
    .cta-guia li:not(:last-child)::after { top: 40px; left: 14px; right: auto; width: 1px; height: calc(100% - 21px); }
    .cta-guia p { font-size: 15px; }
    .cta-guia svg { display: none; }
}
@media (max-width: 370.98px) {
    .app-main:has(> .cta) { padding-left: 12px; padding-right: 12px; }
    .cta-cabecera .page-emblema { display: none; }
    .cta .card-heading, .cta .card-body, .cta-banda, .cta-acciones { padding-left: 16px; padding-right: 16px; }
    .cta-conservacion__dato > svg { display: none; }
    .cta-nav ul { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Colores forzados: lo que solo se distinguia por el fondo lleva marco ---- */
@media (forced-colors: active) {
    .cta-nav__enlace[aria-current="page"] { border: 2px solid Highlight; }
    .cta-estado, .cta-pastilla, .readonly-tag { border-color: CanvasText; }
    .cta-modulos .form-check:has(input:checked), .cta-eleccion:has(input:checked), .cta .perfil-card:has(.perfil-card__input:checked) { border: 2px solid Highlight; }
    .cta-adjuntos { border-left-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-nav__enlace, .cta-eleccion { transition: none; }
}
@media print {
    .cta-lateral, .cta-acciones, .cta-volver { display: none; }
    .cta-disposicion { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Registro y acceso (#339, S-230)
   Maqueta `Docarga-registro-acceso-redisenados.html`. Esta pagina no lleva la estructura de la
   aplicacion: cabecera con el idioma, panel de marca a la izquierda y tarjeta a la derecha.
   Cortes de la maqueta: 1600 (hacia arriba), 1120, 900, 540 y 370 px, escritos con `.98` como
   el resto del rediseno. Todo cuelga de `body.acc` (lo pone `views/auth/layout.php`), para que
   los campos, las casillas, el campo de contraseña y el pie legal —que tambien se pintan en
   Cuenta, en las paginas legales y en las publicas— solo cambien aqui.

   Contraste: los grises secundarios de la maqueta (#87a0b4, #6c879d, #7d98ad, #8299ad, #90a3b4,
   #8099ae, #7a94a9…) dan entre 2,4:1 y 3,8:1. El texto secundario es `--color-text-muted`
   (5,06:1 sobre blanco) y, sobre el lienzo con sus manchas azules, `--color-text-subtle`
   (4,74:1 en la mas oscura). Los tonos que si llegan son los de Cuenta (`--cta-*`), que la
   maqueta pinta iguales.
   ============================================================================ */
body.acc {
    --color-text-muted: var(--color-text-muted-b);
    --acc-x: 38px;      /* margen lateral de la tarjeta: lo usan las franjas que la cruzan */
    --acc-b: 37px;      /* margen inferior de la tarjeta */
    min-height: 100vh; font-size: 16px; line-height: 1.5;
    background: var(--acc-lienzo), var(--color-bg);
}
.acc p { overflow-wrap: anywhere; }

/* ---- Cabecera: marca (solo sin panel) e idioma ---- */
.acc-top {
    max-width: 1320px; min-height: 78px; margin: 0 auto; padding: 21px 36px 18px;
    display: flex; justify-content: flex-end; align-items: center;
}
.acc-marca { display: none; border-radius: 8px; }
.acc-marca img { display: block; width: auto; height: 34px; }
/* El selector real de siempre (cinco idiomas, envio a `/idioma`) con el aspecto de la maqueta. */
.acc-idioma { position: relative; display: flex; align-items: center; gap: 8px; color: var(--color-text-subtle); }
.acc-idioma__mundo { flex: none; }
.acc-idioma select {
    -webkit-appearance: none; appearance: none; min-height: 37px; padding: 8px 31px 8px 12px;
    border: 1px solid var(--color-border-strong); border-radius: 9px;
    background: var(--color-surface); color: var(--color-text-subtle);
    font: inherit; font-size: 13px; cursor: pointer;
}
.acc-idioma__flecha { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
/* El boton de envio (para quien no tiene JavaScript) aparece al enfocarlo, colgado bajo el
   selector: en el flujo empujaria la flecha fuera de su sitio. */
.acc-idioma .visually-hidden--focusable:focus-visible { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); }

/* ---- Rejilla: panel de marca + contenido ---- */
.acc-layout {
    display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1fr); gap: 44px; align-items: start;
    width: calc(100% - 72px); max-width: 1035px; margin: 35px auto 0; padding-bottom: 36px;
}
/* El registro lleva el formulario entero en una pagina: panel mas estrecho y tarjeta mas ancha.
   Sin `:has()` el registro se pinta con la rejilla del acceso, que tambien funciona. */
.acc:has(.acc-registro) .acc-layout { max-width: 1190px; grid-template-columns: 355px minmax(0, 1fr); gap: 33px; margin-top: 16px; }
/* En el documento el contenido va ANTES que el panel (lectura y tabulador llegan primero al
   formulario); la rejilla los coloca: panel a la izquierda, contenido a la derecha. */
.acc-contenido { grid-column: 2; grid-row: 1; min-width: 0; }

.acc-panel {
    grid-column: 1; grid-row: 1; position: relative; min-width: 0; overflow: hidden; border-radius: 24px;
    background: var(--acc-panel); box-shadow: 0 19px 46px #12375e12, 0 2px 5px #1b38570b;
}
/* Pegado arriba solo donde cabe entero (mide 645 px mas 28 de separacion): en una ventana baja
   —un portatil de 1366 x 650— o con el texto ampliado se queda en el flujo y se desplaza con la
   pagina, en vez de quedar cortado por abajo. */
@media (min-height: 720px) {
    .acc-panel { position: sticky; top: 28px; }
}
.acc-panel::before, .acc-panel::after { content: ""; position: absolute; border: 1px solid var(--acc-panel-aro); border-radius: 50%; pointer-events: none; }
.acc-panel::before { right: -170px; top: -140px; width: 450px; height: 450px; }
.acc-panel::after { left: -100px; bottom: -210px; width: 470px; height: 470px; }
.acc-panel__dentro { position: relative; z-index: 1; min-height: 645px; padding: 38px 37px 28px; display: flex; flex-direction: column; }
/* El logotipo (615 x 140) y el dibujo (364 x 318) son fondos, y su `url()` esta mas abajo, dentro de
   la consulta que deja ver el panel: hasta 900 px el navegador no los pide. */
.acc-panel__marca { align-self: flex-start; display: block; width: 184.5px; height: 42px; border-radius: 8px; background: left center / contain no-repeat; }
.acc-panel__marca:focus-visible { outline-color: var(--color-focus-ring-on-dark); }
.acc-panel__lema { margin-top: 53px; }
.acc-panel__ante { margin: 0 0 16px; color: var(--acc-panel-suave); font-size: 10px; font-weight: 650; letter-spacing: 2.05px; text-transform: uppercase; }
.acc-panel__titulo { margin: 0; color: var(--acc-panel-titulo); font-size: 29px; font-weight: 650; line-height: 1.35; letter-spacing: -.65px; }
.acc-panel__titulo span { display: block; color: var(--acc-panel-acento); }
.acc-panel__sub { margin: 13px 0 0; color: var(--acc-panel-suave); font-size: 15px; }
.acc-panel__dibujo { align-self: center; flex: none; width: min(364px, calc(100% + 32px)); aspect-ratio: 364 / 318; margin: 14px -16px 0; background: center / contain no-repeat; }
.acc-panel__pie { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 14px; }
.acc-panel__pie span { flex: 1; height: 1px; background: var(--acc-panel-filete); }
.acc-panel__pie p { margin: 0; color: var(--acc-panel-suave); font-size: 11px; letter-spacing: 1.3px; }
.acc:has(.acc-registro) .acc-panel__dentro { min-height: 618px; padding-left: 31px; padding-right: 31px; }
.acc:has(.acc-registro) .acc-panel__lema { margin-top: 49px; }
.acc:has(.acc-registro) .acc-panel__titulo { font-size: 28px; }
.acc:has(.acc-registro) .acc-panel__dibujo { width: min(364px, calc(100% + 36px)); margin: 19px -18px 0; }

/* ---- Tarjeta y su cabecera ---- */
.auth-card {
    overflow: hidden; padding: 37px var(--acc-x) var(--acc-b);
    border: 1px solid var(--color-border); border-radius: 20px;
    background: var(--color-surface); box-shadow: 0 9px 32px #1d426607, 0 1px 4px #16365704;
}
.acc-cab { margin-bottom: 27px; }
.acc-cab__icono {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 24px;
    border: 1px solid var(--maes-emblema-borde); border-radius: 13px;
    background: var(--maes-emblema); color: var(--maes-emblema-trazo);
}
.acc-cab__ante { margin: 0 0 7px; color: var(--color-text-muted); font-size: 10px; font-weight: 650; line-height: 1.6; letter-spacing: 1.5px; text-transform: uppercase; }
.auth-title { margin: 0; color: var(--color-primary-700); font-size: 27px; font-weight: 700; line-height: 1.35; letter-spacing: -.65px; }
.auth-sub { margin: 13px 0 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.8; }

/* ---- Campos ---- */
.auth-form { margin: 0; }
.auth-form > .form-field + .form-field { margin-top: 23px; }
.acc .form-field { display: block; min-width: 0; }
.acc .form-label { display: block; margin-bottom: 9px; color: var(--cta-rotulo); font-size: 14px; font-weight: 600; line-height: 1.65; }
.acc .form-field input:not(:where([type="checkbox"], [type="radio"], [type="file"])), .acc .form-field select {
    width: 100%; min-width: 0; min-height: 51px; padding: 12px 14px;
    border: 1px solid var(--cta-campo-borde); border-radius: 10px;
    background: var(--color-surface); color: var(--cta-campo); font-size: 16px; line-height: 1.6;
}
/* El campo enfocado toma el azul primario y conserva el anillo de la aplicacion (3:1 o mas); el
   de la maqueta (#409bde con un halo al 7 %) no llega. */
.acc .form-field :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"])), select):focus { border-color: var(--color-primary-500); }
.acc .form-field input.is-error, .acc .form-field select.is-error { border-color: var(--form-red); }
.acc .form-error { display: block; margin: 9px 0 0; color: var(--form-red); font-size: 13px; line-height: 1.75; }
.acc .form-hint { display: block; margin: 9px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.8; }
.acc .req { margin-left: 2px; color: var(--form-red); }
.acc-opcional { color: var(--color-text-muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
/* Dibujo dentro del campo (sobre, candado): adorno; quien nombra el campo es su etiqueta. */
.acc-campo { position: relative; }
.acc-campo > svg, .clave__dibujo { position: absolute; top: 50%; left: 15px; width: 19px; height: 19px; transform: translateY(-50%); color: var(--cta-icono-trazo); pointer-events: none; }
.clave__dibujo svg { display: block; }
.acc .acc-campo input:not(:where([type="checkbox"], [type="radio"], [type="file"])), .acc .clave--dibujo input:not(:where([type="checkbox"], [type="radio"], [type="file"])) { padding-left: 44px; }
.acc .clave { display: block; }
/* Sin fijar el tipo: el boton de ver/ocultar lo cambia de `password` a `text`. */
.acc .clave input:not(:where([type="checkbox"], [type="radio"], [type="file"])) { padding-right: 53px; }
.acc .clave__ver { top: 4px; right: 5px; bottom: auto; width: 43px; height: 43px; min-height: 0; border-radius: 8px; color: var(--color-text-muted); }
.acc .mono { letter-spacing: 3px; }

/* ---- Avisos y resumen de errores ---- */
.acc .form-alert { margin-bottom: 23px; }
.acc-resumen p { margin: 0; font-weight: var(--fw-semibold); }
.acc-resumen ul { margin: 6px 0 0; padding-left: 20px; }
.acc-resumen a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Botones y enlaces de la tarjeta ---- */
.acc .btn { min-height: 51px; padding: 13px 19px; border-radius: 10px; gap: 12px; font-size: 16px; line-height: 1.5; }
.acc-enviar { margin-top: 27px; }
.acc-enviar svg { flex: none; transition: transform var(--dur-base) var(--ease); }
.acc-seguro { display: flex; align-items: flex-start; gap: 8px; max-width: 340px; margin: 17px auto 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.85; }
.acc-seguro svg { flex: none; margin-top: 2px; color: var(--cta-icono-trazo); }
.acc-olvido { display: table; margin: 26px auto; color: var(--color-primary-600); font-size: 14px; line-height: 1.7; text-decoration: none; }
/* Franja «¿No tienes cuenta?»: cruza la tarjeta de lado a lado y la cierra por abajo. */
.acc-alta {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 calc(var(--acc-x) * -1) calc(var(--acc-b) * -1); padding: 22px 12px;
    border-top: 1px solid var(--cta-filete); background: var(--cta-pie-bg);
}
.acc-alta p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.acc-alta a { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; color: var(--color-primary-600); font-size: 14px; font-weight: 650; text-decoration: none; }
.acc-volver {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 4px 0 calc(var(--acc-b) * -1); padding: 24px 0;
    color: var(--color-text-muted); font-size: 14px; text-decoration: none;
}
.acc-volver svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
    .acc .form-field :is(input:not(:where([type="checkbox"], [type="radio"], [type="file"])), select):hover { border-color: var(--color-border-hover); }
    .acc .clave__ver:hover { background: var(--color-primary-050); color: var(--color-primary-600); }
    .acc-enviar:hover svg { transform: translateX(3px); }
    .acc-olvido:hover, .acc-alta a:hover, .acc-volver:hover { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 4px; }
    .acc .perfil-card:hover { border-color: var(--color-border-hover); }
}

/* ---- Registro ---- */
.acc:has(.acc-registro) .auth-card { --acc-x: 32px; padding-top: 31px; }
.acc:has(.acc-registro) .acc-cab { display: grid; grid-template-columns: 45px minmax(0, 1fr); column-gap: 14px; margin-bottom: 24px; }
.acc:has(.acc-registro) .acc-cab__icono { grid-row: 1 / 3; align-self: center; margin: 0; }
.acc:has(.acc-registro) .acc-cab__ante { grid-column: 2; margin: 0 0 4px; }
.acc:has(.acc-registro) .auth-title { grid-column: 2; font-size: 26px; line-height: 1.4; }
.acc:has(.acc-registro) .auth-sub { grid-column: 1 / -1; margin-top: 18px; }
.acc-obligatorios { margin: 0 0 28px; color: var(--color-text-muted); font-size: 12px; line-height: 1.7; }
.acc-seccion { min-width: 0; margin: 0; padding: 0; border: 0; }
.acc-seccion + .acc-seccion { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--cta-filete); }
/* La leyenda flota para que el filete de arriba la deje dentro del grupo; lo que la siga —sea la
   rejilla o un mensaje de error que solo aparece a veces— baja siempre a la linea siguiente. */
.acc-seccion > legend { float: left; width: 100%; display: flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 0; color: var(--cta-leyenda); font-size: 15px; font-weight: 600; line-height: 1.65; }
.acc-seccion > legend svg { flex: none; color: var(--cta-icono-trazo); }
.acc-seccion > legend ~ * { clear: both; }
.acc-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 21px 19px; }
.acc-celda { min-width: 0; }
.acc-ancho { grid-column: 1 / -1; }
.acc-extranjera { padding: 18px 19px; border: 1px solid var(--cta-caja-borde); border-radius: 12px; background: var(--cta-caja-bg); }
.acc-extranjera .form-field--idext + .form-field { margin-top: 18px; }
.acc .form-check { display: flex; align-items: flex-start; gap: 11px; color: var(--cta-casilla); font-size: 14px; line-height: 1.8; cursor: pointer; }
.acc .form-check input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--color-primary-600); }
.acc .form-check > span { min-width: 0; }
.acc .form-check a { color: var(--color-primary-600); text-underline-offset: 3px; }
/* Logo: el selector de ficheros del navegador dentro de la caja de la maqueta. */
.acc-subir { display: flex; align-items: center; gap: 15px; padding: 17px 19px; border: 1px dashed var(--sop-subir-borde); border-radius: 12px; background: var(--sop-subir); }
.acc-subir__icono { flex: none; display: grid; place-items: center; width: 39px; height: 43px; border: 1px solid var(--cta-icono-borde); border-radius: 10px; background: var(--color-surface); color: var(--cta-icono-trazo); }
.acc .acc-subir input[type="file"] { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--cta-campo); font-size: 14px; }
.acc-subir input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 12px; border: 1px solid var(--color-primary-100); border-radius: 8px;
    background: var(--color-primary-050); color: var(--color-primary-600); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
/* Actividad (issue #26): las cuatro tarjetas con su radio a la vista, como las dibuja la maqueta. */
.acc .perfil-cards { display: block; margin-bottom: 0; }
.acc .perfil-cards.is-error { outline: 0; }
.acc .perfil-cards__legend { display: block; margin-bottom: 20px; color: var(--cta-leyenda); }
.acc .perfil-cards .form-error { margin: 0 0 12px; }
/* Filas iguales (issue #187, punto 2 de Jorge): las cuatro tarjetas miden lo mismo aunque la descripcion de una
   ocupe menos lineas, en cualquier idioma y ancho. */
.acc-perfiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: 13px; }
.acc .perfil-card {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 17px; gap: 10px; align-content: start; align-items: start;
    padding: 17px; border: 1px solid var(--cta-caja-borde); border-radius: 12px; background: var(--color-surface);
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.acc .perfil-cards.is-error .perfil-card { border-color: var(--form-red); }
.acc .perfil-card__input { position: static; grid-column: 3; grid-row: 1; width: 17px; height: 17px; margin: 4px 0 0; opacity: 1; accent-color: var(--color-primary-600); }
.acc .perfil-card__icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--cta-icono-borde); border-radius: 9px; background: var(--cta-icono-bg); color: var(--cta-icono-trazo); }
.acc .perfil-card__body { display: contents; }
.acc .perfil-card__title { grid-column: 2; grid-row: 1; align-self: center; color: var(--cta-casilla); font-size: 14px; font-weight: 600; line-height: 1.6; }
.acc .perfil-card__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--cta-texto); font-size: 12px; line-height: 1.85; }
.acc .perfil-card:has(.perfil-card__input:checked) { border-color: var(--cta-marcada-borde); background: var(--cta-marcada); box-shadow: none; }
/* El anillo de foco lo lleva la tarjeta entera, no el radio de 17 px. El del radio se vuelve transparente en vez
   de quitarse: con colores forzados el navegador lo repinta. */
.acc .perfil-card__input:focus-visible { outline-color: transparent; }
.acc .perfil-card:has(.perfil-card__input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
/* Primera capa de informacion RGPD (issue #25 §3): nota discreta, distinta de la casilla contractual. */
.auth-privacy { display: flex; align-items: flex-start; gap: 12px; margin-top: 27px; padding: 19px 18px; border: 1px solid var(--cta-nota-borde); border-radius: 12px; background: var(--cta-nota-bg); color: var(--cta-texto); font-size: 12px; line-height: 1.8; }
.auth-privacy__icono { flex: none; margin-top: 1px; color: var(--cta-icono-trazo); }
.auth-privacy__title { margin: 0 0 7px; color: var(--cta-leyenda); font-weight: 600; }
.auth-privacy__line { margin: 2px 0; }
.auth-privacy a { color: var(--color-primary-600); text-underline-offset: 3px; }
.acc-aceptacion { margin-top: 24px; }
.acc-aceptacion .form-check { font-size: 13px; line-height: 1.95; }
.acc-registro .acc-enviar { margin-top: 25px; }

/* ---- Pie legal: solo su aspecto dentro de esta pagina ---- */
.acc .legal-foot { margin: 0; padding: 23px 8px 0; border: 0; background: none; text-align: center; }
.acc .legal-foot__links { gap: 8px 10px; }
.acc .legal-foot__links a { color: var(--color-text-subtle); font-size: 12px; line-height: 1.8; }
.acc .legal-foot__sep { color: var(--color-border-hover); font-size: 12px; }
.acc .legal-foot__copy { margin: 13px 0 0; color: var(--color-text-subtle); font-size: 11px; line-height: 1.8; letter-spacing: .25px; }

/* ---- Cortes de la maqueta ---- */
@media (min-width: 1600px) {
    .acc-layout { margin-top: 67px; }
    .acc:has(.acc-registro) .acc-layout { margin-top: 24px; }
}
@media (max-width: 1120.98px) {
    body.acc { --acc-x: 29px; }
    .acc-layout { grid-template-columns: minmax(0, .77fr) minmax(0, 1fr); gap: 26px; margin-top: 22px; }
    .acc-panel__dentro { min-height: 631px; padding-left: 28px; padding-right: 28px; }
    .acc-panel__titulo { font-size: 27px; }
    .acc:has(.acc-registro) .acc-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 26px; }
    .acc:has(.acc-registro) .acc-panel__dentro { padding-left: 25px; padding-right: 25px; }
    .acc:has(.acc-registro) .acc-panel__titulo { font-size: 25px; }
    .acc:has(.acc-registro) .auth-card { --acc-x: 26px; }
    .acc:has(.acc-registro) .auth-title { font-size: 23px; }
    .acc-rejilla { grid-template-columns: minmax(0, 1fr); }
    /* Tarjeta de actividad estrecha: el nombre baja bajo el dibujo. */
    .acc .perfil-card { grid-template-columns: 32px minmax(0, 1fr) 17px; gap: 10px 7px; padding: 15px; }
    .acc .perfil-card__title { grid-column: 1 / 3; grid-row: 2; }
    .acc .perfil-card__desc { grid-row: 3; }
}
/* Las dos imagenes del panel, SOLO donde el panel se ve. Es el complemento exacto del corte de
   900,98 px (un `min-width: 901px` dejaria sin imagen las anchuras fraccionarias intermedias). */
@media not all and (max-width: 900.98px) {
    .acc-panel__marca { background-image: url("../img/docarga-logo-white.svg"); }
    .acc-panel__dibujo { background-image: url("../img/acceso-ilustracion.svg"); }
}
@media (max-width: 900.98px) {
    body.acc { --acc-x: 36px; --acc-b: 35px; }
    .acc-top { max-width: 740px; padding: 25px 25px 20px; justify-content: space-between; }
    .acc-marca { display: block; }
    .acc-panel { display: none; }
    .acc-contenido { grid-column: 1; }
    .acc-layout, .acc:has(.acc-registro) .acc-layout { grid-template-columns: minmax(0, 1fr); width: calc(100% - 50px); max-width: 510px; margin-top: 24px; }
    .acc:has(.acc-registro) .acc-layout { max-width: 690px; margin-top: 16px; }
    .auth-card { padding-top: 35px; }
    .acc:has(.acc-registro) .auth-card { --acc-x: 31px; }
    .acc:has(.acc-registro) .auth-title { font-size: 26px; }
    .acc-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .acc .perfil-card { grid-template-columns: 34px minmax(0, 1fr) 17px; gap: 10px; padding: 17px; }
    .acc .perfil-card__title { grid-column: 2; grid-row: 1; }
    .acc .perfil-card__desc { grid-row: 2; }
}
@media (max-width: 540.98px) {
    body.acc { --acc-x: 22px; --acc-b: 26px; background: var(--acc-lienzo-movil), var(--color-bg); }
    .acc-top { min-height: 76px; padding: 21px 19px 16px; }
    .acc-marca { display: flex; align-items: center; min-height: 44px; }
    .acc-marca img { height: 30px; }
    /* Cada enlace del resumen de errores, con su zona de 44 px. */
    .acc-resumen a { display: inline-block; padding: 12px 0; }
    .acc-idioma { gap: 6px; }
    .acc-idioma__mundo { display: none; }
    /* 16 px y 44 px de alto: con menos, iOS amplia la pagina al abrir el selector. */
    .acc-idioma select { min-height: 44px; padding-left: 10px; font-size: 16px; }
    .acc-layout, .acc:has(.acc-registro) .acc-layout { width: calc(100% - 30px); margin-top: 17px; }
    .auth-card, .acc:has(.acc-registro) .auth-card { --acc-x: 22px; padding-top: 26px; border-radius: 18px; }
    .acc-cab { margin-bottom: 28px; }
    .acc-cab__icono { width: 42px; height: 42px; margin-bottom: 23px; border-radius: 12px; }
    .acc-cab__ante { letter-spacing: 1.2px; }
    .auth-title { line-height: 1.4; }
    .auth-sub { margin-top: 12px; font-size: 16px; line-height: 1.75; }
    .acc .form-label { font-size: 15px; }
    .acc .form-field input:not(:where([type="checkbox"], [type="radio"], [type="file"])), .acc .form-field select { min-height: 52px; }
    .acc .clave__ver { width: 44px; height: 44px; }
    .auth-form > .form-field + .form-field { margin-top: 24px; }
    .acc .btn { min-height: 52px; }
    .acc-enviar { margin-top: 26px; }
    .acc-seguro { gap: 9px; margin-top: 18px; font-size: 13px; }
    .acc-seguro svg { margin-top: 4px; }
    .acc-olvido { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 19px 0 17px; font-size: 15px; }
    .acc-alta { gap: 0 7px; padding: 12px 14px; }
    .acc-alta p, .acc-alta a { font-size: 15px; }
    .acc-alta a { min-height: 44px; }
    .acc-volver { min-height: 44px; padding: 24px 0 25px; font-size: 15px; }
    .acc .form-error { font-size: 14px; line-height: 1.7; }
    .acc .form-hint { margin-top: 10px; font-size: 13px; line-height: 1.85; }
    .acc-opcional { font-size: 13px; }
    .acc .legal-foot { padding: 22px 4px 0; }
    /* En varias lineas el punto separador quedaba colgando al final de una: se quita y separa el hueco. */
    .acc .legal-foot__links { gap: 0 18px; }
    .acc .legal-foot__sep { display: none; }
    .acc .legal-foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
    .acc .legal-foot__copy { margin-top: 6px; letter-spacing: 0; }
    /* Registro */
    .acc:has(.acc-registro) .acc-cab { grid-template-columns: 38px minmax(0, 1fr); gap: 5px 11px; margin-bottom: 21px; }
    .acc:has(.acc-registro) .acc-cab__icono { width: 38px; height: 40px; border-radius: 11px; }
    .acc:has(.acc-registro) .acc-cab__ante { margin: 0; letter-spacing: 1.1px; }
    .acc:has(.acc-registro) .auth-title { font-size: 25px; line-height: 1.35; }
    .acc:has(.acc-registro) .auth-sub { margin-top: 14px; }
    .acc-obligatorios { margin-bottom: 25px; line-height: 1.75; }
    .acc-seccion > legend { font-size: 16px; line-height: 1.6; }
    .acc-seccion + .acc-seccion { margin-top: 27px; padding-top: 25px; }
    .acc-rejilla { grid-template-columns: minmax(0, 1fr); gap: 23px; }
    .acc-extranjera { padding: 17px 15px; }
    .acc-extranjera .form-field--idext + .form-field { margin-top: 19px; }
    .acc .form-check { font-size: 15px; line-height: 1.75; }
    .acc .form-check input { margin-top: 5px; }
    .acc-subir { gap: 11px; padding: 17px 14px; }
    .acc-subir__icono { width: 32px; height: 38px; border-radius: 9px; }
    .acc-subir input[type="file"]::file-selector-button { padding: 11px 12px; }
    .acc-perfiles { grid-template-columns: minmax(0, 1fr); }
    .acc .perfil-card { grid-template-columns: 35px minmax(0, 1fr) 17px; gap: 8px 11px; }
    .acc .perfil-card__icon { width: 35px; height: 35px; }
    .acc .perfil-card__title { font-size: 15px; line-height: 1.65; }
    .acc .perfil-card__desc { grid-column: 2 / -1; font-size: 14px; line-height: 1.8; }
    .acc .perfil-card__input { margin-top: 5px; }
    .auth-privacy { gap: 9px; margin-top: 26px; padding: 17px 14px; font-size: 13px; line-height: 1.85; }
    .auth-privacy__title { margin-bottom: 9px; }
    .auth-privacy__line { margin: 4px 0; }
    .acc-aceptacion .form-check { font-size: 14px; line-height: 1.9; }
}
@media (max-width: 370.98px) {
    .acc-top { padding-left: 15px; padding-right: 15px; }
    .acc-marca img { height: 27px; }
    .acc-layout, .acc:has(.acc-registro) .acc-layout { width: calc(100% - 24px); }
    .auth-card, .acc:has(.acc-registro) .auth-card { --acc-x: 17px; }
    .acc:has(.acc-registro) .auth-title { font-size: 23px; }
    .acc:has(.acc-registro) .acc-cab { grid-template-columns: minmax(0, 1fr); }
    .acc:has(.acc-registro) .acc-cab__icono { display: none; }
    .acc:has(.acc-registro) .acc-cab__ante, .acc:has(.acc-registro) .auth-title { grid-column: 1; }
    .acc .perfil-card { padding: 16px 14px; }
    .auth-privacy__icono { display: none; }
}
/* ---- Colores forzados: lo que solo se distinguia por el fondo lleva marco ---- */
@media (forced-colors: active) {
    .acc-panel { border: 1px solid CanvasText; }
    .acc .perfil-card:has(.perfil-card__input:checked) { border: 2px solid Highlight; }
    .acc .form-field input.is-error, .acc .form-field select.is-error { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .acc-enviar svg, .acc .perfil-card { transition: none; }
}
@media print {
    .acc-top, .acc-panel { display: none; }
    .acc-layout, .acc:has(.acc-registro) .acc-layout { grid-template-columns: minmax(0, 1fr); }
    .acc-contenido { grid-column: 1; }
}