/* Piel 2.0 aplicada al canal DS22: solo lo que es propio de este sistema.
   Se carga después de piel.css. */

/* Cabecera: la navegación es una barra fina arriba; los logos van debajo,
   como parte de la página y sin línea que los encierre. */
header {
    display: contents;   /* para que la barra pueda quedar fija al bajar por la página */
}

/* La barra acompaña al usuario; los logos se quedan arriba y se van con la página. */
.header-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 950;        /* sobre la página y el botón de acciones; bajo los modales */
    background: var(--papel);
    padding: 0 1.5rem;
    min-height: var(--alto-barra);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--linea);
    max-width: none;
    margin: 0;
}

.header-institucional {
    padding: 1.75rem 1.5rem 0;
}

.nav-top-bar {
    width: 100%;
    max-width: 696px;    /* el ancho del texto de la columna de lectura: lo de la izquierda y lo de la derecha, juntos */
    margin: 0 auto;
}

.nav-site-label {
    color: var(--tinta-suave);
    font-weight: 400;
    letter-spacing: 0;
}

.nav-hamburger-bar {
    background: var(--tinta);
    height: 1.5px;
}

.nav-top-ingresar {
    flex: none;
    font-size: var(--t-s);
    font-weight: 500;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radio-s);
    white-space: nowrap;
}

/* En este sistema el h2 es la bajada del título, no un título de sección. */
h2 {
    font-size: var(--t-m);
    font-weight: 400;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--linea);
}

.info-box.warning,
.info-box.reserva {
    background: var(--papel-suave);
    border-left: none;
}

.btn-lg {
    margin-top: 2rem;
    margin-right: 0.25rem;
}

/* La regla de lo accionable, para los elementos propios del sistema. */
.btn-sort,
.nav-top-ingresar,
.nav-hamburger,
.menu-global a,
.menu-global a.btn-login,
.menu-global .btn-logout {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tinta);
    text-decoration: none;
    box-shadow: none;
}

.btn-sort:hover,
.nav-top-ingresar:hover,
.nav-top-ingresar:focus-visible,
.nav-hamburger:hover,
.nav-hamburger:focus-visible,
.menu-global a:hover,
.menu-global a:focus-visible,
.menu-global a.btn-login:hover,
.menu-global .btn-logout:hover {
    background: var(--papel-hover);
    color: var(--tinta);
}

.header-logos a {
    text-decoration: none;
}

/* ── Módulos ─────────────────────────────────────────────────────────────── */

/* Los módulos van en la misma barra de navegación, junto al nombre del sistema.
   El actual lleva borde, como todo lo seleccionado. */
.nav-site-label {
    flex: none;
}

.nav-modulos {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    margin-left: 0.5rem;
    min-width: 0;
}

.nav-modulos .pestana {
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .nav-modulos { flex-wrap: wrap; }
}

/* Barra agrupada (dueño, 2026-10-13): quien tiene entradas de más de un grupo las ve
   plegadas. El nombre del grupo lleva a su pantalla principal; la flecha despliega el
   resto. Lo que no es de un grupo (Avisos) queda siempre a la vista, al final. */
.nav-grupo { display: none; }
@media (min-width: 701px) {
    .nav-agrupada > a.en-grupo { display: none; }
    .nav-agrupada > a { order: 2; }
    .nav-grupo { order: 1; display: inline-flex; align-items: center; position: relative; }
    .nav-grupo > .pestana { padding-right: 0.3rem; }
    /* El grupo actual lleva un solo borde, alrededor del nombre y su flecha: sin esto el
       nombre y el grupo traían cada uno el suyo y se veían dos cajas, una dentro de otra. */
    .nav-grupo.es-actual { border-radius: var(--radio-s); }
    /* La regla general de «lo seleccionado lleva borde» usa !important: aquí también. */
    .nav-grupo.es-actual > .pestana { border-color: transparent !important; background: transparent; }
    .nav-grupo.es-actual .nav-grupo-mas > summary { background: transparent; }
    .nav-grupo-mas > summary {
        list-style: none; cursor: pointer; display: inline-flex; align-items: center;
        padding: 0.35rem 0.3rem; border-radius: var(--radio-s); color: var(--tinta-suave);
    }
    .nav-grupo-mas > summary::-webkit-details-marker { display: none; }
    .nav-grupo-mas > summary:hover, .nav-grupo-mas[open] > summary { color: var(--tinta); background: var(--papel-hover); }
    .nav-grupo-mas > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
    .nav-grupo-menu {
        position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 60; min-width: 13rem;
        display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem;
        background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-m, 8px);
    }
    .nav-grupo-menu a {
        display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
        padding: 0.45rem 0.6rem; border-radius: var(--radio-s); border: 1px solid transparent;
        font-size: var(--t-s); color: var(--tinta-suave); text-decoration: none; white-space: nowrap;
    }
    .nav-grupo-menu a:hover, .nav-grupo-menu a:focus-visible { color: var(--tinta); background: var(--papel-hover); }
    .nav-grupo-menu a.es-actual { color: var(--tinta); border-color: var(--linea-fuerte); }
}

.nav-sesion-correo {
    font-size: var(--t-s);
    color: var(--tinta-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.nav-sesion-salir {
    display: inline;
    margin: 0;
}

button.nav-top-ingresar {
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 760px) {
    .nav-site-label,
    .nav-sesion-correo {
        display: none;
    }
}

.contador {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    margin-left: 0.15rem;
}

.tabla-modulo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-s);
}

.tabla-modulo th {
    text-align: left;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--tinta-suave);
}

.tabla-modulo th,
.tabla-modulo td {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
}

.tabla-modulo tbody tr:hover {
    background: var(--papel-hover);
}

.celda-principal {
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
}

.celda-secundaria {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}

.vacio,
.nota-modulo {
    font-size: var(--t-s);
    color: var(--tinta-suave);
}

.titulo-seccion {
    font-size: var(--t-l);
    font-weight: 600;
    margin: 2.5rem 0 1rem;
}

.aviso-ok,
.aviso-error {
    font-size: var(--t-s);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radio-s);
    margin-bottom: 1rem;
}

.aviso-ok { background: var(--verde-fondo); color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); }

.formulario-llave {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
}

.formulario-llave label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}

.formulario-llave label.ancho { flex: 1; min-width: 220px; }

.formulario-llave input,
.formulario-llave select,
.fila-firma input {
    padding: 0.45rem 0.6rem;
    font-size: var(--t-s);
    border: 1px solid var(--linea);
    color: var(--tinta);
    background: var(--papel);
}

.formulario-llave #especifica { display: flex; gap: 0.9rem; }
.formulario-llave #especifica[hidden] { display: none; }

.llave-concedida,
.fila-firma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0;
}

.tarjeta-firma {
    border-bottom: 1px solid var(--linea);
    padding: 1rem 0;
}

.fila-firma { margin-top: 0.6rem; }

.nav-hamburger {
    margin-right: 0.25rem;
}

.nav-modulos {
    margin-left: 0;
}

/* ── Panel del tramitador ─────────────────────────────────────────────────── */

/* Dos columnas: el menú del módulo a la izquierda, fijo al bajar; el listado o
   la causa a la derecha, usando todo el alto. */
main:has(.tramitacion-nav) {
    max-width: 1320px;
}

:is(main, .container):has(> .tramitacion-nav) {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: 2.5rem;
    row-gap: 0;
    align-items: start;
}

:is(main, .container):has(> .tramitacion-nav) > * {
    grid-column: 2;
}

:is(main, .container):has(> .tramitacion-nav) > .tramitacion-nav {
    grid-column: 1;
    grid-row: 1 / span 400;
    position: sticky;
    top: calc(var(--alto-barra) + 1.5rem);
    max-height: calc(100vh - var(--alto-barra) - 3rem);
    overflow-y: auto;
}

.lateral-grupo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--linea);
}

.lateral-grupo:last-child {
    border-bottom: none;
}

/* Título de cada grupo: en negrita y con aire, para que secciones y acciones no se confundan. */
.lateral-titulo {
    font-size: var(--t-s);
    font-weight: 700;
    color: var(--tinta);
    padding: 0 0.6rem 0.6rem;
    font-variant-numeric: tabular-nums;
}

.lateral-nota {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    padding: 0 0.6rem 0.4rem;
    margin-top: -0.4rem;
}

.icono {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--tinta-suave);
}

.tramitacion-nav .pestana > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.tramitacion-nav .es-actual .icono,
.tramitacion-nav [aria-pressed="true"] .icono,
.tramitacion-nav details[open] > summary .icono {
    color: var(--tinta);
}

/* Acción pedida fuera de una causa: se despliega debajo la pregunta de en cuál. */
.accion-desplegable > summary {
    list-style: none;
}

.accion-desplegable > summary::-webkit-details-marker {
    display: none;
}

.accion-desplegable[open] > summary {
    font-weight: 500;
    background: var(--papel-suave);
    border-color: var(--linea-fuerte);
}

.accion-desplegable > form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem 0.8rem;
}

.accion-desplegable label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}

.accion-desplegable select {
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--linea-fuerte);
    background: var(--papel);
    color: var(--tinta);
    width: 100%;
}

.accion-desplegable .btn {
    align-self: flex-start;
}

.tramitacion-nav .pestana {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: var(--t-s);
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
}

.tramitacion-nav .pestana.es-actual,
.tramitacion-nav .pestana[aria-pressed="true"] {
    font-weight: 500;
    background: var(--papel-suave);
}

/* En pantalla angosta la columna pasa arriba, en filas. */
@media (max-width: 900px) {
    :is(main, .container):has(> .tramitacion-nav) {
        display: block;
    }
    :is(main, .container):has(> .tramitacion-nav) > .tramitacion-nav {
        position: static;
        max-height: none;
        margin-bottom: 1.5rem;
    }
    .lateral-grupo {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
    }
    .lateral-rotulo { width: 100%; }
    .tramitacion-nav .pestana { width: auto; }
}

/* Las acciones se abren a un lado; el listado o el expediente se corre y sigue a la vista. */
.panel-accion {
    position: fixed !important;
    inset: 0 !important;
    background: transparent !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    pointer-events: none;
    z-index: 960 !important;
}

.panel-accion > div {
    pointer-events: auto;
    width: min(460px, 96vw) !important;
    max-width: none !important;
    height: 100vh;
    max-height: 100vh !important;
    overflow-y: auto;
    background: var(--papel) !important;
    border-left: 1px solid var(--linea);
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.25rem 1.5rem;
}

body.panel-abierto main {
    width: calc(100% - min(460px, 96vw));   /* el contenido se angosta: nada queda bajo el panel */
    margin-left: 0;
    margin-right: min(460px, 96vw);
}

.panel-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--t-m);
    font-weight: 600;
    margin-bottom: 1rem;
}

.panel-titulo button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--t-m);
    color: var(--tinta-suave);
    padding: 0.2rem 0.5rem;
}

.panel-titulo button:hover { background: var(--papel-hover); }

.panel-subtitulo {
    font-size: var(--t-s);
    font-weight: 600;
    margin: 1.25rem 0 0.25rem;
}

.panel-accion textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-size: var(--t-s);
    border: 1px solid var(--linea);
}

/* En tramitación las acciones están en la barra: el botón flotante sobra. */
main:has(.tramitacion-nav) #centro-acciones > .ca-fab,
main:has(.tramitacion-nav) .ca-fab {
    display: none;
}

/* ── Estilo "tarjetas" (propuesta, 2026-10-07) ────────────────────────────────
   Prueba sobre el panel de Expedientes: tarjetas con borde fino, cifras de
   resumen, tabla dentro de una tarjeta y color en estados y cuadernos. Todo
   bajo .tarjetas, para no tocar el resto mientras el CEO lo evalúa. */

.tarjetas .encabezado-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tarjetas h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.tarjetas .encabezado-pagina p {
    font-size: var(--t-s);
    color: var(--tinta-suave);
    margin-top: 0.15rem;
}

.tarjetas input[type="search"] {
    width: 260px;
    padding: 0.5rem 0.75rem;
    font-size: var(--t-s);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    background: var(--papel);
    color: var(--tinta);
}

.tarjetas input[type="search"]:focus {
    border-color: var(--tinta);
}

.tarjetas .resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tarjetas .tarjeta {
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
    background: var(--papel);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(55, 53, 47, 0.04);
}

.tarjetas .tarjeta-rotulo {
    font-size: var(--t-s);
    color: var(--tinta-suave);
}

.tarjetas .tarjeta-valor {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.tarjetas .tarjeta-nota {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}

.tarjetas .tarjeta-tabla {
    padding: 0;
    overflow: hidden;
}

.tarjetas table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-s);
}

.tarjetas th {
    text-align: left;
    font-weight: 500;
    color: var(--tinta-suave);
    background: var(--papel-suave);
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--linea);
}

.tarjetas td {
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}

.tarjetas tbody tr {
    cursor: pointer;
}

.tarjetas tbody tr:hover {
    background: var(--papel-suave);
}

.tarjetas tbody tr:last-child td {
    border-bottom: none;
}

.tarjetas .causa {
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.tarjetas .apagado {
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}

.tarjetas .tarjeta-pie {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--linea);
    margin: 0;
}

/* Estado: una píldora con punto de color. */
.insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--t-xs);
    font-weight: 500;
    padding: 0.15rem 0.6rem 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

.insignia::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    /* Que no se aplaste cuando el texto ocupa dos renglones: se veía como un huevo. */
    flex: none;
    align-self: flex-start;
    margin-top: calc((1lh - 0.45rem) / 2);
}

.insignia-azul { color: var(--azul); background: var(--azul-fondo); border-color: var(--azul-linea); }
.insignia-ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.insignia-morado { color: var(--morado); background: var(--morado-fondo); border-color: var(--morado-linea); }
.insignia-verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-linea); }
.insignia-naranja { color: var(--naranja); background: var(--naranja-fondo); border-color: var(--naranja-linea); }
.insignia-rojo { color: var(--rojo); background: var(--rojo-fondo); border-color: var(--rojo-linea); }
.insignia-turquesa { color: var(--turquesa); background: var(--turquesa-fondo); border-color: var(--turquesa-linea); }
.insignia-gris { color: var(--tinta-suave); background: var(--papel-suave); border-color: var(--linea-fuerte); }

/* Cuaderno: cada uno con su color, siempre el mismo en todo el sistema. */
.etiqueta {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radio-s);
    text-decoration: none;
    margin-right: 0.25rem;
    border: 1px solid transparent;
}

.etiqueta:hover { border-color: currentColor; }

/* Principal (B-107): el DS 22 y el Tribunal de Honor, hacia afuera un solo cuaderno. */
.etiqueta-principal { color: var(--azul); background: var(--azul-fondo); }
.etiqueta-protocolo22 { color: var(--azul); background: var(--azul-fondo); }
.etiqueta-tribunal { color: var(--morado); background: var(--morado-fondo); }
.etiqueta-incidentes { color: var(--naranja); background: var(--naranja-fondo); }
.etiqueta-cumplimiento { color: var(--verde); background: var(--verde-fondo); }

@media (max-width: 700px) {
    .tarjetas .encabezado-pagina { flex-direction: column; align-items: stretch; }
    .tarjetas input[type="search"] { width: 100%; }
}

/* En pantallas angostas el panel de la acción ocupa todo: correr el contenido lo
   dejaría sin espacio. */
@media (max-width: 900px) {
    body.panel-abierto main { margin-right: 0; width: 100%; }
    .panel-accion > div { width: 100vw !important; }
}

/* El plazo se lee completo: sin cortar con puntos suspensivos. */
.plazo-item,
.plazo-item * {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
}

/* Estilo tarjetas: piezas que usan los listados de tramitación. */
.tarjetas .encabezado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.tarjetas td {
    vertical-align: top;
}

.tarjetas .celda-acciones {
    white-space: nowrap;
    text-align: right;
}

.tarjetas .valor-rojo { color: var(--rojo); }
.tarjetas .valor-ambar { color: var(--ambar); }

/* Plazos: una línea por plazo; el color va en la palabra que dice cuánto falta. */
.plazo-linea {
    font-size: var(--t-s);
    color: var(--tinta-suave);
    line-height: 1.5;
}

.plazo-linea + .plazo-linea { margin-top: 0.2rem; }

.plazo-rojo, .plazo-ambar, .plazo-azul, .plazo-gris { font-weight: 600; }
.plazo-rojo { color: var(--rojo); }
.plazo-ambar { color: var(--ambar); }
.plazo-azul { color: var(--azul); }
.plazo-gris { color: var(--tinta); font-weight: 500; }

/* Números de causa, fechas y estados no se parten en varias líneas. */
.tarjetas .causa,
.tarjetas .sin-corte,
.tarjetas .insignia {
    white-space: nowrap;
}

.tarjetas .celda-acciones form {
    display: inline;
}

/* Primera celda de un listado: el título de la fila; puede ocupar varias líneas. */
.tarjetas .titulo-fila {
    font-weight: 600;
    text-decoration: none;
}

/* ── Vista interna de una causa ───────────────────────────────────────────── */

.causa .tarjeta,
.causa .resumen {
    margin-bottom: 1.25rem;
}

.causa section {
    scroll-margin-top: calc(var(--alto-barra) + 1rem);
}

.tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--linea);
}

.tarjeta-cabecera.sin-borde {
    border-bottom: none;
    padding: 0 0 0.5rem;
}

.tarjetas .tarjeta-cabecera h2 {
    font-size: var(--t-m);
    font-weight: 600;
    color: var(--tinta);
    border: none;
    margin: 0;
    padding: 0;
}

.tarjeta-cabecera .pestanas {
    margin: 0;
    flex-wrap: wrap;
}

.tarjetas tbody tr.sin-clic {
    cursor: default;
}

.tarjetas tbody tr.sin-clic:hover {
    background: transparent;
}

.que-sigue-fase {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
}

.que-sigue-tramite {
    font-size: var(--t-l);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.guia-plegable {
    margin-top: 1rem;
}

.guia-plegable > summary {
    list-style: none;
    display: inline-block;
    padding-left: 0;
    color: var(--tinta-suave);
}

.guia-plegable > summary::-webkit-details-marker { display: none; }
.guia-plegable[open] > summary { margin-bottom: 0.75rem; color: var(--tinta); }


/* ── Guía: mover el acto y marcar trámites (B-036) ─────────────────────────── */
.que-sigue-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cambiar-acto > summary { list-style: none; display: inline-block; }
.cambiar-acto > summary::-webkit-details-marker { display: none; }

.cambiar-acto-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: var(--t-s);
}

.cambiar-acto-form select {
    max-width: 26rem;
    font-size: var(--t-s);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
    color: var(--tinta);
}

/* Descartar: letras rojas, sin relleno; el relleno queda para lo que avanza. */
.btn.btn-peligro,
.btn-sm.btn-peligro:not(.btn-primary) { color: var(--rojo); }
.btn.btn-peligro:hover,
.btn.btn-peligro:focus-visible { background: var(--rojo-fondo); color: var(--rojo); }

/* ── El PDF se nota: icono y rojo de PDF ───────────────────────────────────── */
.enlace-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--rojo-linea);
    border-radius: var(--radio-s);
    background: var(--rojo-fondo);
    color: var(--rojo);
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.enlace-pdf:hover,
.enlace-pdf:focus-visible { background: var(--rojo); color: var(--papel); }
.icono-pdf { flex: none; }


/* ── Administración: llaves que nacen del correo (B-037) ───────────────────── */
.tarjetas .formulario-llave input,
.tarjetas .formulario-llave select { border-radius: var(--radio-s); }

.alcance-detalle { flex-basis: 100%; }
.alcance-detalle[hidden] { display: none; }
.alcance-en-linea { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.rotulo-campo {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    margin-bottom: 0.25rem;
}

.lista-causas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.1rem 1rem;
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}

.formulario-llave .lista-causas label {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--t-s);
    color: var(--tinta);
    padding: 0.15rem 0;
    cursor: pointer;
}

.formulario-llave .lista-causas input { padding: 0; }
.formulario-pie { flex-basis: 100%; }

.tarjetas .llave-concedida { margin: 0.15rem 0; gap: 0.4rem; }

button.enlace-pdf-boton {
    cursor: pointer;
    font-family: inherit;
    padding: 0.45rem 0.8rem;
    font-size: var(--t-s);
}


/* ── Formulario de denuncia, en tarjetas (B-038) ───────────────────────────── */
.denuncia { max-width: var(--columna); margin: 0 auto; font-size: var(--t-m); }
.denuncia form { display: flex; flex-direction: column; gap: 1rem; }
.denuncia .tarjeta,
.denuncia fieldset {
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--papel);
}
.denuncia fieldset fieldset { border: 0; padding: 0; margin-top: 1rem; }
.denuncia legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.9rem;
    font-size: var(--t-m);
    font-weight: 600;
    color: var(--tinta);
}
.denuncia legend + * { clear: both; }
.denuncia .tarjeta-cabecera { padding: 0 0 0.6rem; }
.denuncia-acogida p { font-size: var(--t-s); line-height: 1.6; color: var(--tinta); }
.denuncia-nota { font-size: var(--t-xs); line-height: 1.6; color: var(--tinta-suave); }
.denuncia-nota .tarjeta-rotulo { margin-bottom: 0.3rem; }
.denuncia input[type="text"], .denuncia input[type="email"], .denuncia input[type="number"],
.denuncia input[type="date"], .denuncia select, .denuncia textarea {
    font-size: 16px;                 /* menos que esto, el teléfono hace zoom al escribir */
    border-radius: var(--radio-s);
}
.denuncia details.denuncia-plegable { padding: 0; }
.denuncia details.denuncia-plegable fieldset { border-width: 1px 0 0; border-radius: 0; background: transparent; padding: 1rem 0 0; margin-top: 1rem; }


/* ── Mis casos: lo que ve una parte (B-040) ────────────────────────────────── */
.texto-tarjeta {
    font-size: var(--t-s);
    line-height: 1.6;
    color: var(--tinta);
    margin: 0.15rem 0 0.9rem;
}
ul.texto-tarjeta { padding-left: 1.1rem; }

.huella { font-size: var(--t-xs); word-break: break-all; }

.historial-lista {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 1px solid var(--linea);
}
.historial-lista li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0 0.3rem 0.6rem;
    font-size: var(--t-s);
    color: var(--tinta-suave);
}
.historial-lista li::before {
    content: "";
    position: absolute;
    left: calc(-1rem - 4px);
    top: 0.7rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--linea-fuerte, var(--linea));
}
.historial-lista li.hecho { color: var(--tinta); }
.historial-lista li.hecho::before { background: var(--verde); }
.historial-lista li.con-plazo::before { background: var(--ambar); }

.declaraciones label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-s);
    line-height: 1.5;
    padding: 0.3rem 0;
    cursor: pointer;
}
.denuncia input[type="file"] { font-size: var(--t-s); }
.denuncia .declaraciones .btn { width: auto; margin-top: 0; }


/* ── La parte: notificaciones nuevas (B-041) ───────────────────────────────── */
.contador.contador-aviso { background: var(--ambar-fondo); color: var(--ambar); font-weight: 600; }
.tarjetas tbody tr.fila-nueva { background: var(--ambar-fondo); }
.tarjetas tbody tr.fila-nueva:hover { background: var(--ambar-fondo); }
a.tarjeta.tarjeta-enlace { text-decoration: none; color: inherit; display: block; }
a.tarjeta.tarjeta-enlace:hover { background: var(--papel-suave); }

/* ── Barra con muchos módulos (quien es parte y además tiene llaves): se ensancha
      en vez de montar los módulos sobre el correo (B-043) ───────────────────── */
.nav-top-bar {
    width: fit-content;
    min-width: min(696px, 100%);
    max-width: 100%;
    padding: 0 1rem;
}
.nav-modulos { flex: 1 0 auto; }
.nav-sesion-correo { flex: 0 1 auto; min-width: 0; margin-left: 1rem; }
@media (max-width: 1000px) {
    .nav-modulos { flex: 1 1 auto; }
}

/* ── Elegir archivo: el botón del navegador, en el estilo del sistema ───────── */
.denuncia input[type="file"] {
    width: 100%;
    padding: 0.4rem;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-s);
    color: var(--tinta-suave);
    background: var(--papel);
}
.denuncia input[type="file"]::file-selector-button {
    font: inherit;
    font-size: var(--t-s);
    margin-right: 0.75rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
    color: var(--tinta);
    cursor: pointer;
}
.denuncia input[type="file"]::file-selector-button:hover { background: var(--papel-suave); }


/* ── Carátula de la causa (B-044) ──────────────────────────────────────────── */
.caratula { font-weight: 600; color: var(--tinta); }
.caratula-editar { margin-top: 0.4rem; }
.caratula-editar input[type="text"] {
    flex: 1 1 22rem;
    max-width: 30rem;
    font-size: var(--t-s);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
    color: var(--tinta);
}
.caratula-editar .tarjeta-nota { flex-basis: 100%; }


/* ── Caratular: stock de palabras + texto libre (B-046) ────────────────────── */
.formulario-llave.caratular > .ancho { flex-basis: 100%; }
.stock-palabras { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; }
button.palabra {
    font: inherit;
    font-size: var(--t-s);
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--tinta);
    background: var(--papel);
    cursor: pointer;
}
button.palabra:hover, button.palabra:focus-visible { background: var(--papel-suave); }
.caratula-vista {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
}
.formulario-llave label.casilla { flex-direction: row; align-items: baseline; gap: 0.45rem; font-size: var(--t-xs); }
.formulario-pie { display: flex; gap: 0.5rem; }
.panel-accion .tarjeta-nota { font-size: var(--t-xs); line-height: 1.5; color: var(--tinta-suave); }


/* ── La carátula: una sola pastilla, entera y siempre del mismo color (B-048).
      El color es la tinta de la paleta: no significa órgano, plazo ni estado. ── */
.caratula-pill {
    display: inline-block;
    max-width: 100%;
    padding: 0.12rem 0.65rem;
    border-radius: 0.85rem;
    background: var(--acento);
    color: var(--papel);
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.45;
    vertical-align: middle;
    overflow-wrap: anywhere;
}
.caratula-pill[hidden] { display: none; }
.caratula-pill.caratula-grande { font-size: var(--t-m); padding: 0.25rem 0.9rem; border-radius: 1.1rem; }
.caratula-linea { margin-top: 0.3rem; }
.caratula-titulo { margin: 0.35rem 0 0.4rem; }
.lateral-nota .caratula-pill { margin-bottom: 0.2rem; }


/* ════════════════════════════════════════════════════════════════════════════
   B-050 · Interfaz y experiencia: teléfono, qué sigue, foco, orden y folios
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Utilidades ────────────────────────────────────────────────────────────── */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.solo-movil { display: none !important; }

/* Acción secundaria que confirma algo (Guardar, No firmar): borde fino, sin relleno.
   El relleno queda para la única acción que avanza. */
.btn.btn-borde { border-color: var(--linea-fuerte); }

.insignia.sin-punto { padding-left: 0.6rem; }
.insignia.sin-punto::before { display: none; }

/* El asterisco de obligatorio no es un error: va en tinta. */
.req-star { color: var(--tinta); font-weight: 700; }
.opcional { font-weight: 400; color: var(--tinta-suave); font-size: var(--t-s); }

.tarjetas .tabla-fija { table-layout: fixed; }

/* ── Ordenar causas ────────────────────────────────────────────────────────── */
.ordenar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.ordenar .tarjeta-nota { margin-right: 0.25rem; }
.ordenar .pestana { cursor: pointer; font-family: inherit; }

/* ── Qué sigue, dicho a la parte ───────────────────────────────────────────── */
.que-sigue-parte {
    font-size: var(--t-m);
    line-height: 1.55;
    margin: 0 0 0.5rem;
}
.que-sigue-parte .plazo-gris { font-weight: 600; }
p.que-sigue-tramite { margin-top: 0; }
.te-toca .causa { margin-right: 0.1rem; }

/* ── Paneles laterales: la barra (correo y Salir) queda a la vista ─────────── */
.panel-accion {
    inset: var(--alto-barra) 0 0 0 !important;
}
.panel-accion > div {
    height: calc(100vh - var(--alto-barra));
    max-height: calc(100vh - var(--alto-barra)) !important;
}
.panel-accion:focus { outline: none; }      /* el foco pasa al primer campo; el contenedor no lleva anillo */
.panel-titulo button { border-radius: var(--radio-s); }

/* ── Menú de tres líneas: línea fina, velo neutro, sin sombra (M11) ────────── */
.menu-global.menu-drawer {
    border-right: 1px solid var(--linea);
    box-shadow: none;
}
.nav-overlay { background: rgba(55, 53, 47, 0.35); }
.menu-global.menu-drawer .nav-drawer-footer button.btn-logout,
.menu-global.menu-drawer .nav-drawer-footer .nav-drawer-logout-form .btn-logout {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tinta);
}
.menu-global.menu-drawer .nav-drawer-footer button.btn-logout:hover { background: var(--papel-hover); color: var(--tinta); }

/* ── Menú del módulo de tramitación: el botón de plegar solo existe en angosto ─ */
.lateral-plegar { display: none !important; }

/* ── Páginas de aviso (401, 403) y acceso ──────────────────────────────────── */
.aviso-pagina,
.acceso {
    max-width: 30rem;
    margin: 0 auto;
}
.aviso-pagina-texto {
    font-size: var(--t-m);
    line-height: 1.6;
    color: var(--tinta);
    margin: 0.75rem 0 1.25rem;
}
.aviso-pagina .tarjeta-nota,
.acceso > .tarjeta-nota { margin-top: 1.5rem; }
.acceso form.tarjeta { margin-top: 1rem; }
.acceso .form-group input { width: 100%; padding: 0.7rem 0.9rem; font-size: 16px; border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); }
.acceso .form-group:last-of-type { margin-bottom: 0.5rem; }
.aviso-error ul, .aviso-ok ul { margin: 0.35rem 0 0 1.1rem; }
.aviso-error a { color: inherit; }

/* ── Firma ─────────────────────────────────────────────────────────────────── */
.firma-documento { margin-bottom: 1rem; }
.firma-documento .fila-firma input { flex: 1 1 12rem; max-width: 20rem; border-color: var(--linea-fuerte); }
.firma-documento .fila-firma input:disabled { background: var(--papel-suave); }
.firma-documento .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Portada: la acción arriba; lo normativo, plegado ──────────────────────── */
.portada-bajada { font-size: var(--t-m); line-height: 1.6; margin: 1.25rem 0 0; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0.75rem; }
.portada-acciones .btn-lg { margin: 0; }
.portada-nota { margin-bottom: 2rem; }
.portada-plegable { border-top: 1px solid var(--linea); }
.portada-plegable:last-of-type { border-bottom: 1px solid var(--linea); }
.portada-plegable > summary {
    padding: 0.9rem 0.25rem;
    font-size: var(--t-m);
    font-weight: 600;
}
.portada-plegable[open] > summary { margin-bottom: 0.25rem; }
.portada-plegable > :not(summary) { font-size: var(--t-m); line-height: 1.6; margin: 0 0.25rem 1rem; }
.portada-plegable ul { padding-left: 1.2rem; }
.portada-plegable li { margin-bottom: 0.5rem; }

/* ── Ingreso de la denuncia por pasos ──────────────────────────────────────── */
.pasos-indicador { margin-bottom: 0.25rem; scroll-margin-top: calc(var(--alto-barra) + 0.75rem); }
.pasos-indicador[hidden] { display: none; }
.pasos-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-bottom: 0.4rem; }
.pasos-barra span { height: 4px; border-radius: 2px; background: var(--linea); }
.pasos-barra span.hecho { background: var(--tinta); }

.denuncia .paso[hidden] { display: none; }
.tarjetas.denuncia h2.paso-titulo {
    font-size: var(--t-l);
    font-weight: 600;
    color: var(--tinta);
    border: none;
    margin: 0 0 1rem;
    padding: 0;
}
.paso-titulo:focus { outline: none; }
.denuncia .form-group { margin-bottom: 1.25rem; }
.denuncia .form-group > label,
.denuncia .grupo-opciones > legend { font-size: var(--t-m); font-weight: 600; }
.denuncia .form-group small { font-size: var(--t-s); line-height: 1.5; }
.denuncia fieldset.grupo-opciones { border: 0; padding: 0; margin: 0 0 1.25rem; background: transparent; }
.denuncia .grupo-opciones > legend { float: none; margin-bottom: 0.35rem; }
.denuncia .radio-group label,
.denuncia .checkbox-group label { font-size: var(--t-m); padding: 0.55rem 0; min-height: 44px; }
.denuncia input[type="radio"], .denuncia input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; }
.denuncia .campo-fijo { background: var(--papel-suave); cursor: not-allowed; }
.denuncia .casilla-linea { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: var(--t-s); min-height: 44px; cursor: pointer; }
.aviso-suave {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radio-s);
    background: var(--ambar-fondo);
    color: var(--ambar);
    font-size: var(--t-s);
    line-height: 1.5;
}
.paso-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.paso-nav > :only-child { margin-left: auto; }
.paso-nav-fin { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.paso-nav .btn { font-size: var(--t-m); padding: 0.65rem 1.1rem; font-family: inherit; }

.denuncia details.detalle { border-top: 1px solid var(--linea); }
.denuncia details.detalle:last-of-type { border-bottom: 1px solid var(--linea); }
.denuncia details.detalle > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.25rem;
    font-size: var(--t-m);
    font-weight: 600;
    list-style: none;
}
.denuncia details.detalle > summary::-webkit-details-marker { display: none; }
.denuncia details.detalle > summary::after { content: "+"; font-weight: 400; color: var(--tinta-suave); font-size: var(--t-l); line-height: 1; }
.denuncia details.detalle[open] > summary::after { content: "–"; }
.denuncia details.detalle > :not(summary) { margin-left: 0.25rem; margin-right: 0.25rem; }
.denuncia details.detalle[open] { padding-bottom: 0.75rem; }

.medidas-bloque { margin-bottom: 0.75rem; }
.medidas-bloque h4 { font-size: var(--t-s); font-weight: 600; margin: 0.9rem 0 0.35rem; }
.medida-item { display: block; padding: 0.55rem 0; font-size: var(--t-m); line-height: 1.45; cursor: pointer; }
.medida-item input[type="checkbox"] { margin-right: 0.45rem; vertical-align: -0.15rem; }
.medida-ayuda { display: block; margin: 0.15rem 0 0 1.75rem; font-size: var(--t-s); color: var(--tinta-suave); font-weight: 400; }
.medida-destacada { background: var(--papel-suave); border-radius: var(--radio-s); padding-left: 0.5rem; padding-right: 0.5rem; }

.revision { margin: 0 0 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.revision[hidden] { display: none; }
.revision > div { display: flex; gap: 0.75rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.revision > div:last-child { border-bottom: none; }
.revision dt { flex: 0 0 7rem; color: var(--tinta-suave); }
.revision dd { margin: 0; overflow-wrap: anywhere; }
.denuncia .denuncia-nota { margin-bottom: 1rem; }
.denuncia .declaraciones label { font-size: var(--t-m); }

.aviso-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(55, 53, 47, 0.35);
}
.aviso-modal-caja {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
}
.aviso-modal-caja h2 { font-size: var(--t-l); font-weight: 600; color: var(--tinta); border: none; margin: 0 0 0.5rem; padding: 0; }
.aviso-modal-caja p { font-size: var(--t-m); line-height: 1.55; margin: 0; }

/* ── Angosto (hasta 900 px): el menú del módulo de tramitación va plegado ──── */
@media (max-width: 900px) {
    .lateral-plegar {
        display: flex !important;
        width: 100% !important;
        min-height: 44px;
        border: 1px solid var(--linea) !important;
        border-radius: var(--radio-m);
        font-weight: 500 !important;
    }
    .tramitacion-nav .lateral-cuerpo { display: none; padding-top: 0.75rem; }
    .tramitacion-nav.abierto .lateral-cuerpo { display: block; }
    .tramitacion-nav.abierto .lateral-plegar-signo { transform: rotate(180deg); }
    :is(main, .container):has(> .tramitacion-nav) > .tramitacion-nav { margin-bottom: 1rem; }
    .tramitacion-nav .lateral-grupo .pestana { min-height: 40px; }
    .panel-accion > div { padding: 1rem; }
}

/* ── Teléfono (hasta 700 px) ───────────────────────────────────────────────────
   La barra se reduce a menú + Salir y los módulos pasan dentro del menú; las
   cifras van de a dos; cada fila de tabla es una tarjeta apilada (lo principal
   arriba, lo secundario debajo, la acción a la vista); lo accionable mide 44 px. */
@media (max-width: 700px) {
    main { padding: 1.25rem 1rem 3rem; }
    h1, .tarjetas h1 { font-size: 1.6rem; }
    .solo-movil { display: inline-flex !important; }
    .solo-escritorio { display: none !important; }

    /* Barra: menú + Salir. */
    .header-nav-wrap { padding: 0 0.5rem; }
    .nav-top-bar { width: 100%; min-width: 0; padding: 0; margin-bottom: 0; justify-content: space-between; }
    .nav-hamburger { width: 44px; height: 44px; }
    .nav-top-ingresar { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.9rem; }
    .nav-modulos { display: none; }

    /* Los módulos, dentro del menú: arriba del todo, antes de las páginas públicas. */
    body.nav-open .nav-modulos {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: min(300px, 88vw);
        margin: 0;
        padding: 0.75rem 1rem 0.5rem;
        background: var(--papel-suave);
        border-right: 1px solid var(--linea);
        border-bottom: 1px solid var(--linea);
    }
    body.nav-open .nav-modulos .pestana {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
        padding: 0 0.75rem;
        font-size: var(--t-m);
    }
    .header-nav-wrap:has(.nav-modulos > a) .menu-global.menu-drawer {
        padding-top: calc(var(--n-modulos, 1) * 46px + 2.25rem);
    }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(2)) { --n-modulos: 2; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(3)) { --n-modulos: 3; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(4)) { --n-modulos: 4; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(5)) { --n-modulos: 5; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(6)) { --n-modulos: 6; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(7)) { --n-modulos: 7; }
    .header-nav-wrap:has(.nav-modulos > a:nth-child(8)) { --n-modulos: 8; }
    .menu-global.menu-drawer a,
    .menu-global.menu-drawer .btn-logout { min-height: 44px; display: flex; align-items: center; }

    /* Logos: una sola línea, chicos. */
    .header-institucional { padding: 0.75rem 1rem 0; overflow: hidden; }
    .header-logos { flex-wrap: nowrap; gap: 0.5rem; max-width: 100%; }
    .logo-entidad { height: 18px; min-width: 0; flex: 0 1 auto; }
    .logo-fechida { height: 30px; margin: 0 0.15rem; flex: none; }

    /* Encabezado y cifras. */
    .tarjetas .encabezado-pagina { margin-bottom: 1rem; }
    .tarjetas .encabezado-acciones { justify-content: flex-start; }
    .tarjetas .resumen { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
    .tarjetas .tarjeta { padding: 0.9rem 1rem; }
    .tarjetas .resumen .tarjeta { padding: 0.7rem 0.85rem; margin-bottom: 0; }
    .tarjetas .tarjeta-valor { font-size: 1.4rem; }
    .tarjetas .tarjeta-rotulo { font-size: var(--t-xs); }
    .tarjeta-cabecera { padding: 0.75rem 1rem; }
    .tarjetas .tarjeta-pie { padding: 0.7rem 1rem; }

    /* Lo accionable: 44 px de alto como mínimo. */
    .btn, .btn-sm, .pestana, .enlace-pdf, button.palabra {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .enlace-pdf { padding: 0 0.8rem; font-size: var(--t-s); }
    .etiqueta { padding: 0.5rem 0.7rem; }
    input, select, textarea { font-size: 16px; }      /* con menos, el teléfono hace zoom al escribir */
    .tarjetas input[type="search"] { min-height: 44px; }

    /* Tablas: cada fila, una tarjeta apilada. */
    .tarjetas .tarjeta-tabla { overflow: visible; padding: 0; }
    .tarjetas table,
    .tarjetas tbody,
    .tarjetas td { display: block; }
    .tarjetas table { table-layout: auto !important; }
    .tarjetas thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tarjetas tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.75rem;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--linea);
    }
    .tarjetas tbody tr[hidden] { display: none; }
    .tarjetas tbody tr:last-child { border-bottom: none; }
    .tarjetas td { padding: 0; border: 0; width: auto !important; min-width: 0; }
    .tarjetas td:empty { display: none; }
    .tarjetas td.celda-titulo,
    .tarjetas td.titulo-fila,
    .tarjetas td:first-child:not([data-rotulo]) {
        flex: 1 1 100%;
        order: -1;
        font-size: var(--t-m);
        font-weight: 600;
        line-height: 1.4;
    }
    .tarjetas td.celda-titulo .causa { font-size: var(--t-m); }
    .tarjetas td.celda-ancha,
    .tarjetas td.celda-acciones { flex: 1 1 100%; }
    .tarjetas td[data-rotulo]::before {
        content: attr(data-rotulo) ": ";
        font-size: var(--t-xs);
        font-weight: 400;
        color: var(--tinta-suave);
    }
    .tarjetas td.celda-acciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        text-align: left;
        white-space: normal;
    }
    .tarjetas td.celda-acciones:not(:has(a, button, .insignia, .tarjeta-nota, .apagado:not(.solo-escritorio))) { display: none; }
    .tarjetas td.celda-acciones .btn-sm:not(.btn-primary) { border-color: var(--linea-fuerte); }
    .tarjetas td.celda-acciones form { display: inline-flex; }
    .tarjetas .sin-corte { white-space: normal; }
    .tarjetas .insignia { white-space: normal; }
    .ordenar { width: 100%; }

    /* Formularios. */
    .formulario-llave { flex-direction: column; align-items: stretch; }
    .formulario-llave label.ancho { min-width: 0; }
    .formulario-llave input, .formulario-llave select, .fila-firma input { min-height: 44px; }
    .formulario-llave #especifica, .alcance-en-linea { flex-direction: column; }
    .lista-causas { grid-template-columns: 1fr; }
    .cambiar-acto-form select { max-width: 100%; width: 100%; min-height: 44px; }
    .fila-firma { align-items: stretch; }
    .firma-documento .fila-firma input { max-width: none; flex-basis: 100%; }
    .paso-nav .btn { flex: 1 1 auto; }
    .paso-nav-fin { flex: 1 1 100%; }
    .portada-acciones .btn-lg { flex: 1 1 100%; text-align: center; padding: 0.8rem 1rem; }
    .revision > div { flex-direction: column; gap: 0.1rem; }
    .revision dt { flex: none; }

    /* Pie. */
    footer { font-size: var(--t-xs); }
}

.te-toca { margin-bottom: 1.25rem; }
.tarjetas .tabla-folios td.celda-titulo { min-width: 16rem; }
@media (max-width: 700px) { .tarjetas .tabla-folios td.celda-titulo { min-width: 0; } }

/* ── Qué sigue para la parte: el color de la tarjeta entera (dueño, 2026-10-09).
      Solo en la vista de la parte: rojo = le toca a ella (plazo propio corriendo);
      gris = su plazo venció o causa cerrada; verde = espera al órgano; azul = espera
      a la otra parte. El estado va además escrito en la insignia. ── */
.tarjetas .tarjeta.que-sigue-color { border-width: 1px 1px 1px 6px; }
.tarjetas .tarjeta.que-sigue-rojo { background: var(--rojo-fondo); border-color: var(--rojo); }
.tarjetas .tarjeta.que-sigue-rojo .que-sigue-tramite { color: var(--rojo); }
.tarjetas .tarjeta.que-sigue-gris { background: var(--papel-suave); border-color: var(--tinta-tenue); }
.tarjetas .tarjeta.que-sigue-gris .que-sigue-tramite { color: var(--tinta-suave); }
.tarjetas .tarjeta.que-sigue-verde { background: var(--verde-fondo); border-color: var(--verde); }
.que-sigue-color .insignia { background: var(--papel); white-space: normal; }
.que-sigue-color .tarjeta-nota { color: var(--tinta); }

/* La misma señal en cada fila de Mis casos: un borde a la izquierda y la insignia. */
.tarjetas tbody tr.fila-qs > td:first-child { box-shadow: inset 5px 0 0 var(--qs, transparent); }
.tarjetas tbody tr.fila-qs-rojo { --qs: var(--rojo); background: var(--rojo-fondo); }
.tarjetas tbody tr.fila-qs-rojo:hover { background: var(--rojo-fondo); }
.tarjetas tbody tr.fila-qs-gris { --qs: var(--tinta-tenue); }
.tarjetas tbody tr.fila-qs-verde { --qs: var(--verde); }
.tarjetas tbody tr.fila-qs-azul { --qs: var(--azul); }
@media (max-width: 700px) {
    .tarjetas tbody tr.fila-qs > td:first-child { box-shadow: none; }
    .tarjetas tbody tr.fila-qs { box-shadow: inset 5px 0 0 var(--qs, transparent); }
}
.tarjetas tr.fila-qs td.celda-ancha { max-width: 13rem; }
.tarjetas tr.fila-qs td.celda-ancha .insignia { white-space: normal; border-radius: var(--radio-l); line-height: 1.35; }
@media (max-width: 700px) { .tarjetas tr.fila-qs td.celda-ancha { max-width: none; } }


/* ── Guía de la causa: marco de actos v3 como selector de estado (B-062) ───── */
.guia-causa .tarjeta-cabecera > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.guia-codigo {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--tinta-suave);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    padding: 0.05rem 0.35rem;
    white-space: nowrap;
}

.guia-insignias { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }

.guia-ficha { margin: 0.5rem 0; font-size: var(--t-s); }
.guia-ficha > div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px dotted var(--linea); }
.guia-ficha dt { color: var(--tinta-suave); }
.guia-ficha dd { margin: 0; }
.guia-plazo-norma { display: block; margin-top: 0.2rem; }

.guia-preguntas { margin: 0.6rem 0; }
.guia-pregunta { border-top: 1px dotted var(--linea); padding: 0.35rem 0; font-size: var(--t-s); }
.guia-pregunta > summary { cursor: pointer; }
.guia-pregunta ul { margin: 0.3rem 0 0.3rem 1.1rem; }
.guia-pregunta li { margin-bottom: 0.2rem; }

.aviso-guia {
    border: 1px solid var(--ambar-linea);
    background: var(--ambar-fondo);
    color: var(--ambar);
    border-radius: var(--radio-s);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: var(--t-s);
}

.guia-form {
    display: grid;
    gap: 0.4rem;
    max-width: 40rem;
    margin-top: 0.6rem;
    font-size: var(--t-s);
    text-align: left;
}
.guia-form label { color: var(--tinta-suave); }
.guia-form select,
.guia-form input[type="text"],
.guia-form input[type="search"] {
    width: 100%;
    font-size: var(--t-s);
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
    color: var(--tinta);
}
.guia-form button { justify-self: start; }
.guia-elegido { border-left: 3px solid var(--linea-fuerte); padding-left: 0.6rem; }
.guia-elegido p { margin: 0.15rem 0; }

/* ── La tarjeta «Guía de la causa» en la pantalla de la causa ────────────────
   Un bloque por cuaderno, con forma de tarjeta: blanco, línea fina, esquinas de caja.
   El color va solo en el nombre del cuaderno y en las insignias; el resto es tinta.
   Jerarquía: nombre del cuaderno (etiqueta) → estado actual (lo más grande) → ficha y
   preguntas → sugerencia (caja gris) → acciones (con borde: se ven apretables). */
.guia-causa #guia { display: block; scroll-margin-top: calc(var(--alto-barra) + 2.25rem); }
.guia-causa > .tarjeta-cabecera.sin-borde { padding-bottom: 0.25rem; }

.guia-causa .tarjeta-cabecera > div:has(> details[open]) { flex-basis: 100%; }
.guia-causa .tarjeta-cabecera > div > details[open] { flex-basis: 100%; }
.guia-clasificar-pendiente { margin-top: 0.5rem; }
.guia-clasificar-pendiente,
.guia-sugerencia,
.guia-causa details.cambiar-acto[open] > .guia-form,
.guia-causa details.guia-clasificar[open] > .cambiar-acto-form {
    background: var(--papel-suave);
    border-radius: var(--radio-m);
    padding: 0.8rem 1rem;
}
.guia-clasificar-pendiente .cambiar-acto-form { margin-top: 0; }
.guia-clasificar-pendiente .tarjeta-nota { margin: 0.4rem 0 0; }
.guia-clasificar .cambiar-acto-form label { color: var(--tinta-suave); }

.guia-cuaderno {
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    background: var(--papel);
    margin-top: 0.9rem;
    scroll-margin-top: calc(var(--alto-barra) + 1rem);
}

.guia-cuaderno-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--linea);
}

.guia-cuaderno-nombre {
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.5;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radio-s);
    margin: 0;
}

.guia-parte { padding: 0.9rem 1rem 1rem; }
.guia-parte + .guia-parte { border-top: 1px solid var(--linea); }
.guia-parte > .tarjeta-rotulo { font-size: var(--t-xs); }

.guia-estado {
    font-size: var(--t-l);
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
    margin: 0.1rem 0 0.5rem;
}
.guia-estado .guia-codigo { vertical-align: 0.2em; margin-right: 0.2rem; }
.guia-estado-vacio { font-size: var(--t-m); font-weight: 500; color: var(--tinta-suave); margin-bottom: 0.1rem; }
.guia-estado-vacio + .tarjeta-nota { margin: 0; }
.guia-nota { margin: 0 0 0.5rem; }

.guia-cuaderno .guia-ficha { margin: 0.6rem 0 0.75rem; }
.guia-cuaderno .guia-ficha > div { grid-template-columns: 5.5rem 1fr; border-top: 0; padding: 0.15rem 0; }
.guia-cuaderno .guia-preguntas { margin: 0.75rem 0 0; }
.guia-cuaderno .guia-preguntas > .tarjeta-rotulo { font-size: var(--t-xs); margin-bottom: 0.25rem; }
.guia-cuaderno .guia-pregunta { border-top: 1px solid var(--linea); padding: 0.2rem 0; }
.guia-cuaderno .guia-pregunta > summary { padding: 0.2rem 0.35rem; margin: 0 -0.35rem; }
.guia-cuaderno .guia-pregunta > .tarjeta-nota { margin: 0.3rem 0 0; }

.guia-sugerencia {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    margin: 0.9rem 0 0;
    font-size: var(--t-s);
}
.guia-sugerencia p { margin: 0; }
.guia-sugerencia-estado { font-size: var(--t-m); font-weight: 600; line-height: 1.4; }
.guia-sugerencia-estado .guia-codigo { vertical-align: 0.1em; margin-right: 0.2rem; }
.guia-sugerencia .tarjeta-nota { max-width: 44rem; line-height: 1.55; }
.guia-sugerencia form { margin-top: 0.3rem; }
.guia-causa .sin-corte { white-space: nowrap; }

/* Acciones de la tarjeta: con borde y fondo blanco, para que se lean como botones. Las
   que despliegan un formulario llevan una flecha; abiertas, ocupan el renglón entero. */
.guia-causa .btn-borde { background: var(--papel); }
.guia-causa .btn-borde:hover,
.guia-causa .btn-borde:focus-visible { background: var(--papel-hover); border-color: var(--tinta-suave); }
.guia-causa details.cambiar-acto > summary::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.2rem) rotate(45deg);
}
.guia-causa details.cambiar-acto[open] > summary::after { transform: translateY(0) rotate(-135deg); }
.guia-causa details.cambiar-acto[open] > summary { border-color: var(--linea-fuerte); }

.guia-acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; }
.guia-parte > .guia-acciones { margin-top: 0.9rem; }
.guia-acciones > details[open],
.guia-acciones:has(> details[open]),
.guia-linea > details[open] { flex-basis: 100%; }
.guia-plegadas[open] > .guia-pregunta:first-of-type { margin-top: 0.5rem; }

.guia-parte-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.guia-parte-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.guia-parte-cabecera h4 { margin: 0; }

/* Incidentes y líneas de cumplimiento: un renglón por cada uno. */
.guia-lineas { list-style: none; flex: 1 1 100%; margin: 0.25rem 0 0; padding: 0; }
.guia-lineas-primera { margin-top: -0.65rem; }
.guia-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--linea);
    font-size: var(--t-s);
}
.guia-lineas-primera > .guia-linea:first-child { border-top: 0; }
.guia-lineas + .guia-acciones { padding-top: 0.65rem; border-top: 1px solid var(--linea); flex-basis: 100%; }
.guia-linea-principal { flex: 1 1 18rem; min-width: 0; line-height: 1.5; }
.guia-linea-principal strong { font-weight: 600; }
.guia-linea-principal > .tarjeta-nota,
.guia-linea-dato > .guia-codigo + .tarjeta-nota { display: block; }
.guia-linea-marcas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.guia-linea-dato { flex: 0 1 auto; }
.guia-linea > details:not([open]) { margin-left: auto; }
.guia-linea-dato > .tarjeta-nota:first-child { margin-right: 0.15rem; }

.guia-aviso { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--linea); line-height: 1.55; }
.guia-aviso strong { font-weight: 600; color: var(--tinta); }

/* ── Jerarquía de la tarjeta (tercera vuelta) ────────────────────────────────
   1. El cuaderno donde la causa está viva va primero, con su nombre como título y el
      color del cuaderno como acento. 2. Dentro, un solo foco: el estado actual o, si
      falta, la sugerencia, con «indicar otro estado» al lado como camino menor.
   3. Las demás acciones pesan menos que el contenido. 4. Los cuadernos sin abrir van
      al final, cada uno en un renglón apagado con su acción. */
.guia-cuadernos { display: flex; flex-direction: column; }
.guia-cuaderno.es-plegado { order: 1; }

.guia-cuaderno-titulo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: var(--t-m);
    font-weight: 600;
    line-height: 1.4;
    color: var(--tinta);
}
.guia-cuaderno-titulo .guia-cuaderno-marca {
    flex: none;
    width: 0.3rem;
    height: 1.1rem;
    border-radius: var(--radio-s);
    background: currentColor;
}

.guia-estado-vacio.con-propuesta { font-size: var(--t-s); font-weight: 400; margin: 0; }
.guia-estado-vacio.con-propuesta + .guia-estado-nota { display: none; }

.guia-propuesta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1rem 1rem;
    background: var(--papel-suave);
    border-radius: var(--radio-m);
    font-size: var(--t-s);
}
.guia-propuesta > .guia-sugerencia,
.guia-propuesta > .guia-acciones { display: contents; }
.guia-propuesta > .guia-sugerencia > p { flex: 1 1 100%; max-width: none; margin: 0; }
.guia-propuesta > .guia-sugerencia > .insignia { flex: none; }
.guia-propuesta .guia-sugerencia-estado { font-size: var(--t-l); line-height: 1.35; }
.guia-propuesta .guia-sugerencia-estado .guia-codigo { vertical-align: 0.2em; }
.guia-propuesta > .guia-sugerencia > form,
.guia-propuesta > .guia-acciones > details { margin-top: 0.4rem; }
.guia-propuesta > .guia-acciones > details[open] { flex-basis: 100%; }
.guia-propuesta details.cambiar-acto[open] > .guia-form,
.es-plegado details.cambiar-acto[open] > .guia-form { background: var(--papel); }

.guia-causa .guia-accion-principal { font-weight: 600; border-color: var(--tinta-suave); }
.guia-causa .guia-accion-menor,
.guia-causa .es-plegado .btn-borde {
    font-weight: 400;
    color: var(--tinta-suave);
    border-color: var(--linea);
    background: transparent;
}
.guia-causa .guia-accion-menor:hover,
.guia-causa .guia-accion-menor:focus-visible,
.guia-causa details[open] > .guia-accion-menor,
.guia-causa .es-plegado .btn-borde:hover,
.guia-causa .es-plegado .btn-borde:focus-visible,
.guia-causa .es-plegado details[open] > .btn-borde { color: var(--tinta); border-color: var(--linea-fuerte); background: var(--papel); }

.guia-parte[id^="guia-incidentes"] { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* Con estado: el estado manda; la ficha y las preguntas quedan plegadas en el mismo
   renglón que «Cambiar el estado». Abierto, cada desplegable ocupa el renglón entero. */
.guia-parte.con-estado { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 0.5rem; }
.guia-parte.con-estado > * { flex: 1 1 100%; }
.guia-parte.con-estado > .guia-detalle,
.guia-parte.con-estado > .guia-acciones { flex: 0 0 auto; margin-top: 0.35rem; }
.guia-parte.con-estado > .guia-detalle[open],
.guia-parte.con-estado > .guia-acciones:has(> details[open]) { flex-basis: 100%; }
.guia-parte.con-estado > .guia-detalle[open] { margin-bottom: 0.4rem; }
.guia-parte.con-estado > .guia-insignias { margin-bottom: 0.4rem; }
.guia-detalle[open] > .guia-ficha { margin-top: 0.75rem; }
.guia-cuaderno-cabecera .guia-reciente { margin-left: auto; }

/* Lenguaje claro: la ficha corta a la vista, con rótulos que se leen; el código de lo
   que se nombra, chico y gris, como referencia para quien tramita. */
.guia-ref {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    white-space: nowrap;
}
.guia-cuaderno .guia-ficha-clara { margin: 0.15rem 0 0.5rem; }
.guia-cuaderno .guia-ficha-clara > div,
.guia-cuaderno .guia-ficha-detalle > div { grid-template-columns: 9rem 1fr; }
.guia-ficha-clara dd { font-weight: 500; }
.guia-ficha-detalle dd { max-width: 46rem; }
/* La ficha del estado elegido en el selector: la misma ficha corta, sobre blanco. */
.guia-form .guia-elegido { border-left: 0; padding: 0.6rem 0.75rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-s); }
.guia-form .guia-elegido .guia-ficha { margin: 0; }
.guia-form .guia-elegido .guia-elegido-nombre { margin: 0 0 0.3rem; font-weight: 600; line-height: 1.4; }
.guia-form .guia-elegido .guia-ficha > div { grid-template-columns: 9rem 1fr; border-top: 0; padding: 0.15rem 0; }
.guia-form .guia-elegido .tarjeta-nota { margin: 0.4rem 0 0; line-height: 1.5; }
.guia-detalle[open] > .guia-preguntas { margin-top: 0.6rem; }
.guia-salidas { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; line-height: 1.55; }
.guia-salidas li { margin-bottom: 0.3rem; }
.guia-salidas ul { margin: 0.2rem 0 0.2rem 1.1rem; padding: 0; }
.guia-salidas strong { font-weight: 600; }
.marco .guia-ficha > div { grid-template-columns: 10.5rem 1fr; }
.marco-acto-ficha .guia-ficha > div { grid-template-columns: 10.5rem 1fr; }

.guia-cuaderno.es-plegado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 1rem;
    background: var(--papel-suave);
    border-color: transparent;
}
.es-plegado > .guia-cuaderno-cabecera { flex: 1 1 auto; padding: 0; border: 0; }
.es-plegado .guia-cuaderno-titulo { font-size: var(--t-s); font-weight: 500; color: var(--tinta-suave); }
.es-plegado > .guia-parte { padding: 0; }
.es-plegado > .guia-parte:has(details[open]) { flex-basis: 100%; padding-bottom: 0.5rem; }
.es-plegado .guia-parte > .guia-acciones { margin-top: 0; }
.es-plegado .guia-parte-cabecera { display: none; }

/* ── Partes de la causa: agrupadas por calidad, una fila de un renglón por persona ── */
.tarjetas .partes-tabla { table-layout: fixed; }
.tarjetas .partes-tabla th:nth-child(2) { width: 38%; }
.tarjetas .partes-tabla th:nth-child(3) { width: 9.5rem; }
.tarjetas .partes-tabla td { padding: 0.4rem 1.25rem; vertical-align: middle; border-bottom: 0; }
.tarjetas .partes-tabla tbody tr:hover { background: transparent; }
.tarjetas .partes-grupo-titulo th {
    padding: 0.75rem 1.25rem 0.2rem;
    background: transparent;
    border-bottom: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--tinta-suave);
}
.tarjetas .partes-grupo + .partes-grupo .partes-grupo-titulo th { border-top: 1px solid var(--linea); }
.tarjetas .partes-grupo tr:last-child td { padding-bottom: 0.7rem; }
.partes-grupo-titulo .contador { font-weight: 400; }
.partes-nombre { font-weight: 500; overflow-wrap: anywhere; }
.tarjetas .partes-tabla .partes-correo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjetas .partes-ver td { padding-top: 0.1rem; padding-left: 0.65rem; }
.tarjetas .partes-ver .btn { color: var(--tinta-suave); }
.tarjetas .partes-ver .btn:hover, .tarjetas .partes-ver .btn:focus-visible { color: var(--tinta); }
.tarjetas .partes-tabla tr[hidden] { display: none; }

@media (max-width: 700px) {
    .tarjetas .partes-tabla, .tarjetas .partes-tabla tbody { display: block; }
    .tarjetas .partes-tabla tbody tr { padding: 0.35rem 1rem; gap: 0.1rem 0.6rem; border-bottom: 0; flex-wrap: wrap; }
    .tarjetas .partes-tabla tbody tr.partes-grupo-titulo { padding-top: 0.75rem; padding-bottom: 0.1rem; }
    .tarjetas .partes-grupo + .partes-grupo .partes-grupo-titulo { border-top: 1px solid var(--linea); }
    .tarjetas .partes-grupo-titulo th { display: block; padding: 0; border: 0 !important; }
    .tarjetas .partes-tabla td { padding: 0; }
    .tarjetas .partes-tabla td.partes-nombre { flex: 1 1 0; order: 0; font-size: var(--t-s); font-weight: 500; line-height: 1.5; }
    .tarjetas .partes-tabla td.partes-llave { flex: none; order: 1; }
    .tarjetas .partes-tabla td.partes-correo { flex: 1 1 100%; order: 2; font-size: var(--t-xs); }
    .tarjetas .partes-tabla td.partes-correo:not([title]) { display: none; }
    .tarjetas .partes-grupo tr:last-child { padding-bottom: 0.7rem; }
    .tarjetas .partes-ver td { flex: 1 1 100%; margin-left: -0.6rem; }
    .guia-cuaderno.es-plegado { padding: 0.5rem 0.6rem 0.5rem 0.85rem; }
    .guia-cuaderno .guia-ficha-clara > div,
    .guia-cuaderno .guia-ficha-detalle > div,
    .marco .guia-ficha > div,
    .marco-acto-ficha .guia-ficha > div { grid-template-columns: 1fr; gap: 0; padding: 0.25rem 0; }
    .guia-ficha-clara dt, .guia-ficha-detalle dt { font-size: var(--t-xs); }
    .guia-form .guia-elegido .guia-ficha > div { grid-template-columns: 1fr; gap: 0; padding: 0.25rem 0; }
}

/* ── Catálogo del marco (/tramitacion/marco) ─────────────────────────────────
   Misma familia que la guía de la causa: un bloque blanco por ámbito, color solo en la
   etiqueta del ámbito y en las insignias, y cada acto en un renglón con columnas
   alineadas (código, nombre, carácter, procedimientos, plazo) que se abre a su ficha. */
.marco > .tarjeta, .marco > .resumen { margin-bottom: 1.25rem; }
.marco section { scroll-margin-top: calc(var(--alto-barra) + 1rem); }
.marco .encabezado-pagina .btn { white-space: nowrap; flex: none; }

.marco-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: end; }
.marco-filtros label { display: grid; gap: 0.2rem; flex: 1 1 11rem; min-width: 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.marco-filtros select, .tarjetas .marco-filtros input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    font-size: var(--t-s);
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
    color: var(--tinta);
}
.marco-filtros .btn { flex: none; }

.marco #incidentes td.titulo-fila { min-width: 12rem; }
.marco #incidentes td.celda-ancha { min-width: 14rem; }
.marco-ambito { overflow: hidden; }
.marco-columnas,
.marco-acto > summary {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) 11.5rem 6.5rem 8.5rem 0.75rem;
    column-gap: 1rem;
    align-items: start;
    padding: 0.6rem 1rem;
}
.marco-columnas {
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    background: var(--papel-suave);
    border-bottom: 1px solid var(--linea);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.marco-acto { font-size: var(--t-s); }
.marco-acto + .marco-acto { border-top: 1px solid var(--linea); }
.marco-acto > summary { list-style: none; cursor: pointer; border-radius: 0; line-height: 1.5; }
.marco-acto > summary::-webkit-details-marker { display: none; }
.marco-acto > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.35rem;
    border-right: 1.5px solid var(--tinta-suave);
    border-bottom: 1.5px solid var(--tinta-suave);
    transform: rotate(45deg);
}
.marco-acto[open] > summary::after { transform: translateY(0.2rem) rotate(-135deg); }
.marco-acto[open] > summary { background: var(--papel-suave); }
.marco-acto > summary:focus-visible { outline-offset: -2px; }
.marco-acto-nombre { font-weight: 600; color: var(--tinta); }
.marco-acto-caracter { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.marco-acto-caracter .insignia { white-space: nowrap; }
.marco-acto-dato { font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.75; }
.marco-acto-ficha { padding: 0.75rem 1rem 1rem calc(1rem + 3.75rem + 1rem); border-top: 1px solid var(--linea); }
.marco-acto-ficha > p { margin: 0 0 0.5rem; max-width: 46rem; }
.marco-acto-ficha .guia-ficha { max-width: 52rem; }
.marco-acto-ficha .guia-ficha > div { grid-template-columns: 10.5rem 1fr; }
.marco-acto-ficha .aviso-guia { max-width: 46rem; }

/* Secciones plegadas: el renglón que las abre se lee como el título de su tarjeta. */
.marco-seccion > summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--t-m);
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    margin: -0.2rem -0.4rem;
}
.marco-seccion > summary::-webkit-details-marker { display: none; }
.marco-seccion > summary .contador { font-weight: 400; }
.marco-seccion > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    margin-right: 0.3rem;
    border-right: 1.5px solid var(--tinta-suave);
    border-bottom: 1.5px solid var(--tinta-suave);
    transform: translateY(-0.15rem) rotate(45deg);
}
.marco-seccion[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.marco-seccion[open] > summary { margin-bottom: 0.75rem; }
.marco-seccion.tarjeta-pie > summary { font-size: var(--t-s); font-weight: 500; color: var(--tinta); margin: 0; padding: 0.2rem 0; }
.marco-seccion.tarjeta-pie .guia-ficha { color: var(--tinta); }
.marco-seccion > .tarjeta-nota { display: block; margin: 0 0 0.5rem; }
.marco-seccion > .tarjeta-rotulo { font-size: var(--t-xs); margin: 1rem 0 0.3rem; }

.marco .guia-pregunta { border-top: 1px solid var(--linea); padding: 0.2rem 0; }
.marco .guia-pregunta > summary { padding: 0.25rem 0.35rem; margin: 0 -0.35rem; }
.marco .guia-pregunta > .tarjeta-nota { display: block; margin: 0.3rem 0 0; }
.marco .guia-ficha > div { border-top: 0; padding: 0.15rem 0; }
.marco-seccion > .guia-ficha { margin: 0; padding: 0.7rem 0; border-top: 1px solid var(--linea); max-width: 56rem; }
.marco-lista { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; font-size: var(--t-s); line-height: 1.6; }
.marco-lista li { margin-bottom: 0.3rem; }
.marco-lista strong { font-weight: 600; }

.marco-pendiente-nombre { font-size: var(--t-s); font-weight: 600; margin: 0; color: var(--tinta); }
.marco-pendiente > p { margin: 0 0 0.5rem; font-size: var(--t-s); line-height: 1.6; max-width: 56rem; }
.marco-pendiente > p:last-child { margin-bottom: 0; }
.marco-pendiente > p.tarjeta-nota { font-size: var(--t-xs); }

@media (max-width: 900px) {
    .marco-columnas,
    .marco-acto > summary { grid-template-columns: 3.75rem minmax(0, 1fr) 9.5rem 5.25rem 7rem 0.75rem; column-gap: 0.75rem; }
}

@media (max-width: 700px) {
    .marco-columnas { display: none; }
    .marco-acto > summary { grid-template-columns: 3.5rem auto minmax(0, 1fr) 0.75rem; column-gap: 0.6rem; row-gap: 0.25rem; padding: 0.75rem 0.85rem; min-height: 44px; }
    .marco-acto > summary::after { grid-column: 4; grid-row: 1; }
    .marco-acto-nombre { grid-column: 2 / 4; font-size: var(--t-m); line-height: 1.4; }
    .marco-acto-caracter { grid-column: 2 / 4; }
    .marco-acto-dato { grid-column: 2; }
    .marco-acto-dato + .marco-acto-dato { grid-column: 3; }
    .marco-acto-dato + .marco-acto-dato::before { content: "· "; }
    .marco-acto-ficha { padding: 0.75rem 0.85rem 0.9rem; }
    .marco-filtros label { flex-basis: 100%; }
}

@media (max-width: 700px) {
    .guia-ficha > div { grid-template-columns: 1fr; gap: 0; }
    .guia-form select, .guia-form input { min-height: 44px; }
    .guia-form select[size] { min-height: 12rem; }
    .guia-causa .btn { min-height: 44px; }
    .guia-cuaderno-cabecera { padding: 0.55rem 0.85rem; }
    .guia-parte { padding: 0.8rem 0.85rem 0.9rem; }
    .guia-clasificar-pendiente .cambiar-acto-form .btn { flex: none; }
    .guia-linea-principal { flex-basis: 100%; }
}

/* Acto de la guía de cada folio (B-070): una línea bajo el asunto, sin competir con él. */
.folio-acto { margin-top: 0.2rem; font-size: var(--t-xs); color: var(--tinta-suave); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.folio-acto a.enlace-boton { text-decoration: underline; color: var(--tinta-suave); }
.folio-acto .enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta-suave); text-decoration: underline; cursor: pointer; }
.folio-acto .enlace-boton:hover { color: var(--tinta); }
.dialogo-acto-folio { border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta); padding: 1rem 1.1rem; width: min(34rem, calc(100vw - 2rem)); }
.dialogo-acto-folio::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialogo-acto-folio h3 { margin: 0 0 0.4rem; font-size: var(--t-m); }
.dialogo-acto-folio .acciones, .guia-pregunta-estado .acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.guia-pregunta-estado p { margin: 0 0 0.3rem; }

/* Folios: las notificaciones van bajo el documento, y si aun así la tabla no cabe, se
   desplaza dentro de su tarjeta en vez de cortarse (dueño, 2026-10-13). */
.tarjetas .tarjeta-tabla:has(> .tabla-folios) { overflow-x: auto; }
.tarjetas .tabla-folios .folio-notif { margin-top: 0.35rem; }
.tarjetas .tabla-folios td.celda-titulo { min-width: 10rem; }
/* El estado de un escrito pendiente puede partirse en dos renglones; el resto de las
   insignias de la tabla no. La columna del documento no se estira más que su contenido. */
.tarjetas .tabla-folios td.celda-estado .folio-pendiente { white-space: normal; }
.tarjetas .tabla-folios td.celda-acciones { width: 1%; }
/* En escritorio el tipo del folio va bajo su número, sin columna propia: con ella la
   tabla no cabía en la tarjeta. En teléfono cada celda es un renglón y se usa la celda. */
.tarjetas .tabla-folios .folio-tipo { font-size: var(--t-xs); font-weight: 400; color: var(--tinta-suave); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.tarjetas .tabla-folios th, .tarjetas .tabla-folios td { padding-left: 0.9rem; padding-right: 0.9rem; }
.tarjetas .tabla-folios th:first-child, .tarjetas .tabla-folios td:first-child { padding-left: 1.25rem; }
.tarjetas .tabla-folios th:last-child, .tarjetas .tabla-folios td:last-child { padding-right: 1.25rem; }
@media (min-width: 701px) { .tarjetas .tabla-folios .col-tipo { display: none; } }
@media (max-width: 700px) { .tarjetas .tabla-folios .folio-tipo { display: none; } }

/* ── Guía de la causa sin cajas dentro de la caja (dueño, 2026-10-14; B-097) ─────────
   Reglas V-4 y V-5: la guía es la única caja; cada cuaderno es una sección separada
   por una línea fina, con la marca de color junto al nombre (fuerte si está abierto,
   pálida si no). Toda acción abre una ventana; nada se escribe sobre la página. */
.guia-causa .guia-cuadernos { display: block; }
.guia-causa .guia-cuaderno,
.guia-causa .guia-cuaderno.es-plegado {
    display: block; border: 0; border-radius: 0; background: none; box-shadow: none;
    margin: 0; padding: 1.15rem 0;
}
.guia-causa .guia-cuaderno + .guia-cuaderno { border-top: 1px solid var(--linea); }
.guia-causa .guia-cuadernos { border-top: 1px solid var(--linea); margin-top: 0.4rem; }
.guia-causa .guia-cuaderno.es-plegado { padding: 0.8rem 0; }
.guia-causa .guia-cuaderno-cabecera {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
    padding: 0; border: 0; background: none;
}
.guia-causa .es-vivo .guia-cuaderno-titulo { font-weight: 700; }
.guia-causa .es-plegado .guia-cuaderno-titulo { font-size: var(--t-m); font-weight: 500; color: var(--tinta-suave); }
.guia-causa .es-plegado .guia-cuaderno-marca { opacity: 0.35; }
.guia-cuaderno-acciones { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.guia-causa .es-vivo .tarjeta-rotulo { margin-top: 0.9rem; font-size: var(--t-xs); }
.guia-causa .es-vivo .guia-estado { margin: 0.1rem 0 0.15rem; }
.guia-causa .es-vivo .guia-estado + .tarjeta-nota { margin: 0 0 0.6rem; }

/* Lo esencial del estado, en una fila de tres datos, sin recuadro. */
.guia-causa .es-vivo .guia-ficha-clara {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1.25rem; margin: 0.3rem 0 0.2rem;
}
.guia-causa .es-vivo .guia-ficha-clara > div { display: block; border: 0; padding: 0; }
.guia-causa .es-vivo .guia-ficha-clara dt { font-size: var(--t-xs); }
.guia-causa .es-vivo .guia-ficha-clara dd { font-size: var(--t-s); font-weight: 600; }
@media (max-width: 640px) { .guia-causa .es-vivo .guia-ficha-clara { grid-template-columns: 1fr; } }

/* Una sola fila de acciones: un botón y enlaces. */
.guia-causa .guia-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 0.9rem; }
.guia-acciones-fin { margin-left: auto; color: var(--tinta-tenue); }
.guia-enlace {
    border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-s);
    color: var(--tinta-suave); cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px;
}
.guia-enlace:hover, .guia-enlace:focus-visible { color: var(--tinta); text-decoration-color: currentColor; }

/* Propuestas y sugerencias: una línea con su pill, sin recuadro. */
.guia-propuesta-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.6rem 0 0; font-size: var(--t-s); }
.guia-en-linea { display: inline; margin: 0; }

/* Renglones (incidentes, líneas de cumplimiento): separados por líneas finas. */
.guia-sub { margin-top: 0.9rem; }
.guia-renglones { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.guia-renglones > li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem;
    padding: 0.5rem 0; border-top: 1px solid var(--linea); font-size: var(--t-s);
}
.guia-renglones > li:last-child { border-bottom: 1px solid var(--linea); }
.guia-renglones > li > .guia-enlace { margin-left: auto; }

/* La ventana: lo único que tiene campos. */
dialog.ventana {
    width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow: auto;
    border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 1.1rem 1.2rem;
    background: var(--papel); color: var(--tinta); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
dialog.ventana::backdrop { background: rgba(30, 30, 30, 0.28); }
.ventana-cabecera { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.6rem; }
.ventana-cabecera h3 { margin: 0; font-size: var(--t-m); font-weight: 650; flex: 1; }
.ventana-cerrar { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--tinta-suave); cursor: pointer; padding: 0 0.2rem; }
.ventana-cerrar:hover { color: var(--tinta); }
dialog.ventana .guia-form { display: flex; flex-direction: column; gap: 0.35rem; }
dialog.ventana .guia-form label { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 0.35rem; }
dialog.ventana .guia-form input[type="text"],
dialog.ventana .guia-form input[type="search"],
dialog.ventana .guia-form select { width: 100%; }
.ventana-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
/* El reinicio de main.css (`* { margin: 0 }`) le quita a <dialog> su centrado: se
   devuelve a las ventanas del sistema. */
dialog.ventana, dialog.dialogo-acto-folio { margin: auto; }
/* Dentro de la guía, los avisos y lo pendiente son líneas, no recuadros (V-5). */
.guia-causa .aviso-error, .guia-causa .aviso-guia, .guia-causa .guia-clasificar-pendiente {
    border: 0; background: none; padding: 0; margin: 0.5rem 0;
}
.guia-causa .aviso-error { color: var(--rojo); }
.guia-causa .aviso-guia { color: var(--ambar); }
.guia-causa .guia-clasificar-pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
/* La ficha del estado elegido en la ventana: con una línea arriba, sin recuadro. */
dialog.ventana .guia-form .guia-elegido { border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 0.6rem 0 0; }

/* ── V-5 · Cajas anidadas (agente 3) ─────────────────────────────────────────
   Dentro de una tarjeta o de una ventana no hay cajas: se separa con aire, líneas
   finas horizontales, pills y texto de color. */

/* Marco de actos: cada ámbito y cada pendiente es una sección de la tarjeta, separada
   por una línea fina (el mismo trato que la guía de la causa, B-097). */
.marco .guia-cuaderno {
    border: 0; border-radius: 0; background: none; box-shadow: none;
    margin: 0; border-top: 1px solid var(--linea); overflow: visible;
}
.marco .guia-cuaderno-cabecera { padding: 0.9rem 0 0.5rem; border-bottom: 0; }
.marco .guia-cuaderno + .guia-cuaderno { margin-top: 0.4rem; }
.marco .marco-columnas { background: none; }
.marco .marco-pendiente { padding: 0 0 1rem; }
.marco .marco-pendiente > p:first-child { margin-top: 0; }
/* El aviso de un punto por decidir: una línea con su pill ámbar, sin recuadro. */
.marco .aviso-guia {
    border: 0; background: none; padding: 0; border-radius: 0;
    margin: 0.5rem 0 0; color: var(--tinta-suave);
}
.marco .aviso-guia > .insignia { margin-right: 0.35rem; }

/* Formulario público, paso 4: la revisión son renglones con separador, sin marco. */
.denuncia .revision { border: 0; border-radius: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.denuncia .revision > div { padding-left: 0; padding-right: 0; }
/* Paso 2: el aviso del correo ya registrado es texto ámbar, sin fondo. */
.denuncia .aviso-suave { background: none; border: 0; padding: 0; border-radius: 0; }

/* Caratular: la vista previa es solo la pill, sin recuadro alrededor. */
.caratular .caratula-vista { border: 0; border-radius: 0; background: none; padding: 0.2rem 0; }

/* ── V-4/V-5 · Tramitación (agente 1) ── */
/* En la tarjeta queda solo el botón de la acción; el formulario va en su ventana. */
.acciones-tarjeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.75rem; }
/* El aviso dentro de una tarjeta es una línea con su pill, sin fondo propio (V-5). */
.linea-aviso { margin: 0.4rem 0; color: var(--tinta-suave); }
.linea-aviso-error { color: var(--rojo); }
/* Los demás tipos de campo de las ventanas, al ancho de la ventana. */
dialog.ventana .guia-form input[type="date"],
dialog.ventana .guia-form input[type="datetime-local"],
dialog.ventana .guia-form input[type="number"],
dialog.ventana .guia-form input[type="password"] {
    width: 100%; font-size: var(--t-s); padding: 0.4rem 0.5rem;
    border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta);
}

/* ── V-4/V-5 · Administración (agente 2) ──────────────────────────────────────
   Administración, revisión de plazos y perfil: cada acción abre su ventana; en la
   página no queda ningún campo. Dentro de la ventana los campos van apilados, con el
   rótulo arriba. La lista de causas o de roles no lleva borde propio (V-5): renglones
   separados por líneas finas. */
dialog.ventana .form-apilado > label,
dialog.ventana .form-apilado .alcance-detalle > label {
    display: flex; flex-direction: column; gap: 0.2rem;
}
dialog.ventana .form-apilado input[type="email"],
dialog.ventana .form-apilado input[type="number"] {
    width: 100%; font-size: var(--t-s); padding: 0.4rem 0.5rem;
    border: 1px solid var(--linea); border-radius: var(--radio-s);
    background: var(--papel); color: var(--tinta);
}
dialog.ventana .form-apilado .alcance-detalle { margin-top: 0.35rem; }
dialog.ventana .form-apilado .alcance-detalle[hidden] { display: none; }
dialog.ventana .form-apilado .lista-causas label {
    display: flex; flex-direction: row; align-items: baseline; gap: 0.4rem;
    font-size: var(--t-s); color: var(--tinta); margin: 0; cursor: pointer;
}
.lista-causas {
    border: 0; border-radius: 0; padding: 0;
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.lista-causas > label { border-bottom: 1px solid var(--linea); padding: 0.3rem 0; }
.lista-causas > label:last-child { border-bottom: 0; }
dialog.ventana .lista-causas { grid-template-columns: 1fr; gap: 0; }
.linea-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.4rem 0 0; font-size: var(--t-s); }
.texto-rojo { color: var(--rojo); }
.acciones-tarjeta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.guia-renglones > li > .renglon-fin { margin-left: auto; }

/* ── Dos blancos (dueño, 2026-10-14; B-099) ────────────────────────────────────
   La página va en un blanco apenas gris y las cajas en blanco puro: así se nota qué
   está dentro de una caja y qué no, sin bordes gruesos ni sombras. La barra y la
   franja de logos siguen en blanco. Lo que no es caja (el encabezado de cada página,
   el título de la causa) va sobre el fondo, sin color propio. */
:root { --fondo: #FAFAF9; }
body { background: var(--fondo); }
header.encabezado-pagina, .encabezado-pagina { background: transparent; }

/* ── Tipo de folio con color (B-106) ──────────────────────────────────────────
   Resolución, constancia y escrito; el escrito, según lo presente la denunciante o el
   denunciado. Pastilla plana, sin borde, para no confundirse con las insignias de estado. */
.folio-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: var(--t-xs);
  font-weight: 550; line-height: 1.5; white-space: nowrap; background: var(--papel-hover); color: var(--tinta-suave); }
.folio-pill-resolucion { background: var(--azul-fondo); color: var(--azul); }
.folio-pill-constancia { background: var(--papel-hover); color: var(--tinta-suave); }
.folio-pill-escrito-denunciante { background: var(--verde-fondo); color: var(--verde); }
.folio-pill-escrito-denunciado { background: var(--morado-fondo); color: var(--morado); }
.folio-pill-escrito-parte { background: var(--ambar-fondo); color: var(--ambar); }
.tarjetas .tabla-folios .folio-tipo { margin-top: .2rem; }

/* ── Cuaderno Principal (dueño, 2026-10-15; B-107) ──────────────────────────────────
   El DS 22 y el Tribunal de Honor son etapas dentro de la sección Principal: un
   subtítulo con su marca y su estado, sin caja propia (nunca caja dentro de caja). */
.guia-causa .guia-etapa { padding: 0.75rem 0 0 0.9rem; margin-top: 0.6rem; border-left: 2px solid var(--linea); }
.guia-causa .guia-etapa .guia-cuaderno-cabecera { padding: 0; border: 0; background: none; }
.guia-etapa-titulo { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--tinta); }
.guia-etapa-titulo .guia-cuaderno-marca { flex: none; width: 0.25rem; height: 0.95rem; border-radius: var(--radio-s); background: currentColor; }
.guia-causa .guia-etapa.es-plegado .guia-etapa-titulo { font-weight: 500; color: var(--tinta-suave); }
.guia-causa .guia-etapa.es-plegado .guia-cuaderno-marca { opacity: 0.35; }

/* Etiquetas internas de una causa (B-109): solo las ven quien tramita y el Tribunal.
   Borde punteado: se distinguen de los estados oficiales. */
.etiquetas-linea, .escritos-sin-resolver { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.etiqueta-interna { border-style: dashed; }
.etiquetas-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .75rem; }
.etiqueta-filtro, .etiqueta-boton {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px;
    border: 1px dashed var(--linea-fuerte); background: var(--papel); color: var(--tinta-suave);
    font-size: var(--t-xs); text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.6;
}
.etiqueta-filtro:hover, .etiqueta-boton:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.etiqueta-filtro[data-vacia] { opacity: .55; }
.etiqueta-cuenta { font-variant-numeric: tabular-nums; opacity: .8; }
.etiqueta-filtro.es-actual, .etiqueta-boton.es-puesta { border-style: solid; font-weight: 600; }
.etiqueta-filtro-azul.es-actual, .etiqueta-filtro-azul.es-puesta { color: var(--azul); background: var(--azul-fondo); border-color: var(--azul-linea); }
.etiqueta-filtro-morado.es-actual, .etiqueta-filtro-morado.es-puesta { color: var(--morado); background: var(--morado-fondo); border-color: var(--morado-linea); }
.etiqueta-filtro-naranja.es-actual, .etiqueta-filtro-naranja.es-puesta { color: var(--naranja); background: var(--naranja-fondo); border-color: var(--naranja-linea); }
.etiqueta-filtro-ambar.es-actual, .etiqueta-filtro-ambar.es-puesta { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.etiqueta-filtro-verde.es-actual, .etiqueta-filtro-verde.es-puesta { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-linea); }
.etiqueta-filtro-turquesa.es-actual, .etiqueta-filtro-turquesa.es-puesta { color: var(--turquesa); background: var(--turquesa-fondo); border-color: var(--turquesa-linea); }
.etiqueta-filtro-gris.es-actual, .etiqueta-filtro-gris.es-puesta { color: var(--tinta); background: var(--papel-suave); border-color: var(--linea-fuerte); }
.etiqueta-filtro.es-actual:not([class*="etiqueta-filtro-"]) { color: var(--tinta); border-color: var(--tinta-suave); }
.etiquetas-editor { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0 .5rem; }

/* Principal: solo se ve el formulario de la etapa elegida (B-111). */
[data-etapa-form][hidden] { display: none; }