/* Web de expedientes. Sin frameworks: una hoja de estilos y HTML servido por FastAPI. */

:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1f2328;
  --suave: #5f6670;
  --borde: #d9dde3;
  --enlace: #0b57d0;

  --verde: #1e8e3e;
  --verde-fondo: #e6f4ea;
  --naranja: #e37400;
  --naranja-fondo: #fef3e2;
  /* «Documentos sin clasificar»: amarillo, para no confundirlo con el naranja de «mal enviado».
     El texto va en un tono oscuro: el amarillo solo no se lee sobre blanco. */
  --amarillo: #f9ab00;
  --amarillo-texto: #8a5a00;
  --amarillo-fondo: #fef7e0;
  --rojo: #d93025;
  --rojo-fondo: #fce8e6;
  --azul: #1a73e8;
  --azul-fondo: #e8f0fe;
  --gris: #80868b;
  --gris-fondo: #f1f3f4;
}

/* Tema oscuro: el del sistema, salvo que se haya elegido otro con el botón de la barra
   (static/tema.js pone `data-tema` en <html>). Los mismos colores en los dos sitios. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #16181c;
    --superficie: #202329;
    --texto: #e8eaed;
    --suave: #9aa0a6;
    --borde: #3c4043;
    --enlace: #8ab4f8;

    --verde: #34a853;
    --verde-fondo: #1e3326;
    --naranja: #f29900;
    --naranja-fondo: #3a2c14;
    --amarillo: #fdd663;
    --amarillo-texto: #fdd663;
    --amarillo-fondo: #3a3414;
    --rojo: #ee675c;
    --rojo-fondo: #3c1f1d;
    --azul: #669df6;
    --azul-fondo: #1c2a40;
    --gris: #9aa0a6;
    --gris-fondo: #2a2d31;
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #16181c;
  --superficie: #202329;
  --texto: #e8eaed;
  --suave: #9aa0a6;
  --borde: #3c4043;
  --enlace: #8ab4f8;

  --verde: #34a853;
  --verde-fondo: #1e3326;
  --naranja: #f29900;
  --naranja-fondo: #3a2c14;
  --amarillo: #fdd663;
  --amarillo-texto: #fdd663;
  --amarillo-fondo: #3a3414;
  --rojo: #ee675c;
  --rojo-fondo: #3c1f1d;
  --azul: #669df6;
  --azul-fondo: #1c2a40;
  --gris: #9aa0a6;
  --gris-fondo: #2a2d31;
}

:root[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--enlace); }
code { font-size: 0.9em; }
h1 { font-size: 1.5rem; margin: 0.2rem 0; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }

main { padding: 16px 24px 40px; max-width: 1800px; margin: 0 auto; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button, input { font: inherit; }
button {
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--suave); }
button:disabled { opacity: 0.45; cursor: default; }
button.enlace { border: none; background: none; color: var(--enlace); padding: 0; text-decoration: underline; }
input[type="text"], input[type="search"], input:not([type]) {
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  border-radius: 6px; padding: 5px 8px;
}

/* --- barra superior y pie ------------------------------------------------------------- */

.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 10px 24px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
.titulo-app { font-weight: 700; color: var(--texto); text-decoration: none; font-size: 1.05rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0; color: var(--suave); font-size: 0.85rem; }
.leyenda li { display: flex; align-items: center; gap: 5px; }
/* La campana de las notificaciones, a la derecha del todo. */
.campana { margin-left: auto; text-decoration: none; color: var(--suave); white-space: nowrap; }
/* El botón del tema, a la derecha, junto a la campana (o solo, si no la hay). */
.cambiar-tema {
  margin-left: auto; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto); border-radius: 999px; width: 34px; height: 34px; padding: 0;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.campana + .cambiar-tema { margin-left: 0; }
.cambiar-tema:hover { background: var(--fondo); }
.cambiar-tema:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.campana.con-avisos b {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--rojo); color: #fff; font-size: 0.8rem;
}

/* Las dos pestañas de /notificaciones: «Sin leer» y «Leídas». */
.pestanas { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--borde); }
.pestanas a {
  padding: 8px 14px; color: var(--suave); text-decoration: none;
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.pestanas a[aria-current="page"] {
  color: var(--texto); font-weight: 600; background: var(--superficie); border-color: var(--borde);
}

.notificaciones-todas { margin: 12px 0; }
/* Cada notificación en una línea mientras quepa: el texto ocupa todo el ancho y el botón,
   a la derecha, no se encoge. */
.notificaciones { list-style: none; margin: 0; padding: 0; }
.notificaciones li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
}
.notificaciones li > span { flex: 1 1 auto; min-width: 0; }
.notificaciones li > form { flex: none; }
.notificaciones small { margin-left: 8px; white-space: nowrap; }

footer { padding: 12px 24px; color: var(--suave); font-size: 0.8rem; display: flex; gap: 12px; flex-wrap: wrap; }
.en-linea { display: inline; }

/* --- estados: punto de color con símbolo ---------------------------------------------- */

.punto {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
}
.punto.verde { background: var(--verde); }
.punto.naranja { background: var(--naranja); }
.punto.sin-clasificar { background: var(--amarillo); color: #1f2328; }
.punto.rojo { background: var(--rojo); }
.punto.azul { background: var(--azul); }
.punto.gris { background: var(--gris); }
.punto.vacia { background: transparent; border: 2px dashed var(--borde); color: var(--suave); }
.punto.neutro { background: var(--superficie); border: 2px solid var(--suave); color: var(--suave); }
a.punto:hover { outline: 3px solid var(--borde); }

/* --- listado --------------------------------------------------------------------------- */

.resumen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.cifra {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 16px; color: var(--suave);
}
.cifra b { font-size: 1.5rem; color: var(--texto); margin-right: 4px; }
.cifra.ok b { color: var(--verde); }
.cifra.pendiente b { color: var(--rojo); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.filtros input[type="search"] { min-width: 240px; }

.tabla-desplazable { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
th { font-size: 0.8rem; color: var(--suave); font-weight: 600; background: var(--gris-fondo); }
tr:last-child td { border-bottom: none; }
td.c, th.c { text-align: center; width: 54px; }
td.n, th.n { text-align: right; width: 60px; font-variant-numeric: tabular-nums; }
.listado tbody tr:hover { background: var(--gris-fondo); }
.codigo { font-weight: 600; font-variant-numeric: tabular-nums; }
.vacio { text-align: center; color: var(--suave); padding: 24px; }

.faltan { font-size: 0.85rem; }
.falta {
  display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 999px;
  font-weight: 600; white-space: nowrap;
}
.falta small { font-weight: 400; }
.falta.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.falta.naranja { background: var(--naranja-fondo); color: var(--naranja); }
.falta.sin-clasificar { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.falta.azul { background: var(--azul-fondo); color: var(--azul); }

.chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 0 7px; border-radius: 6px;
  background: var(--gris-fondo); border: 1px solid var(--borde); color: var(--texto);
  font-size: 0.8rem; text-decoration: none;
}
.etiqueta { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.etiqueta.ok { background: var(--verde-fondo); color: var(--verde); }
.etiqueta.dudoso { background: var(--naranja-fondo); color: var(--naranja); }
.etiqueta.en-curso { background: var(--azul-fondo); color: var(--azul); }

/* --- ficha de expediente --------------------------------------------------------------- */

.cabecera-exp { margin-bottom: 8px; }
.volver { font-size: 0.9rem; }
.meta { color: var(--suave); margin: 6px 0 0; }
.estado-exp { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; }
.estado-exp.ok { background: var(--verde-fondo); color: var(--verde); }
.estado-exp.pendiente { background: var(--rojo-fondo); color: var(--rojo); }
.estado-y-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ficha.con-visor { grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); }

.carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.carpeta {
  background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--gris);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  scroll-margin-top: 80px;
}
.carpeta.verde { border-left-color: var(--verde); }
.carpeta.naranja { border-left-color: var(--naranja); background: linear-gradient(90deg, var(--naranja-fondo), var(--superficie) 40%); }
.carpeta.sin-clasificar { border-left-color: var(--amarillo); background: linear-gradient(90deg, var(--amarillo-fondo), var(--superficie) 40%); }
.carpeta.rojo { border-left-color: var(--rojo); background: linear-gradient(90deg, var(--rojo-fondo), var(--superficie) 40%); }
.carpeta.azul { border-left-color: var(--azul); }
.carpeta.gris { border-left-color: var(--gris); opacity: 0.85; }
.carpeta.vacia { border-left-style: dashed; border-left-color: var(--borde); }
.carpeta.neutro { border-left-color: var(--suave); }
.carpeta:target { box-shadow: 0 0 0 3px var(--azul); }
/* El revisor dijo REVISAR y nadie la ha marcado: le toca decidir a una persona. */
.carpeta.pide-decision { outline: 2px dashed var(--azul); outline-offset: -2px; }

.carpeta header { display: flex; gap: 10px; align-items: flex-start; }
.carpeta h3 { margin: 0; font-size: 1rem; }
.carpeta h3 .nombre { font-weight: 400; color: var(--suave); font-size: 0.85rem; }
.carpeta p { margin: 0; }
.estado { font-size: 0.85rem; color: var(--suave); }
.carpeta.verde .estado b { color: var(--verde); }
.carpeta.naranja .estado b { color: var(--naranja); }
.carpeta.sin-clasificar .estado b { color: var(--amarillo-texto); }
.carpeta.rojo .estado b { color: var(--rojo); }
.carpeta.azul .estado b { color: var(--azul); }

.nota { font-style: italic; }
.revisor { font-size: 0.85rem; background: var(--gris-fondo); border-radius: 6px; padding: 6px 8px; }
.aviso { font-size: 0.85rem; color: var(--naranja); }
.aviso-peritoline {
  margin: 8px 0 14px; padding: 8px 12px; border-radius: 6px;
  background: var(--naranja-fondo); color: var(--naranja); font-size: 0.9rem;
}
.listado td.perito, .listado td.siniestro { white-space: nowrap; }

.subida { margin: 10px 0 4px; scroll-margin-top: 80px; }
.aviso-subida {
  margin: 0 0 8px; padding: 8px 12px; border-radius: 6px;
  background: var(--azul-fondo); color: var(--texto); font-size: 0.9rem;
}
.aviso-subida p { margin: 0 0 4px; }
.aviso-subida code { overflow-wrap: anywhere; }
.lote { margin: 0; padding-left: 18px; }
.lote li { margin: 2px 0; }
.lote .etiqueta { margin-left: 6px; }
.anadir summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  border: 1px solid var(--azul); background: var(--azul-fondo); color: var(--azul);
  border-radius: 6px; padding: 5px 12px; font-weight: 600; user-select: none;
}
.anadir summary::-webkit-details-marker { display: none; }
.anadir summary::before { content: "+"; font-size: 1.1em; line-height: 1; }
.anadir[open] summary::before { content: "−"; }
.anadir summary:hover { background: var(--superficie); }
.anadir summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.anadir form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.anadir input[type="file"] { max-width: 100%; }
/* «Subir documento» (web publicada): el formulario va en columna, con las casillas de carpeta. */
.subir-documento { flex-direction: column; align-items: stretch !important; }
.subir-documento .nota textarea { width: 100%; box-sizing: border-box; }
.subidas-manuales { padding-left: 18px; font-size: 0.9rem; }
.subidas-manuales li { margin: 4px 0; }
.sin-docs { color: var(--suave); font-size: 0.85rem; }

.docs { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.docs li { margin: 2px 0; overflow-wrap: anywhere; }
.docs small { color: var(--suave); }
.docs a[aria-current="true"] { font-weight: 700; }

.acciones { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--borde); }
.acciones input[type="text"] { width: 100%; font-size: 0.85rem; }
.botones { display: flex; flex-wrap: wrap; gap: 6px; }
.botones button { font-size: 0.8rem; }
.b-validado { border-color: var(--verde); color: var(--verde); }
.b-mal_enviado { border-color: var(--naranja); color: var(--naranja); }
.b-no_aplicable { border-color: var(--gris); color: var(--gris); }
.b-quitar { border-style: dashed; }

.vacias { margin-top: 10px; color: var(--suave); font-size: 0.9rem; }
.vacias ul { margin: 6px 0; }
.documentos tr.actual { background: var(--azul-fondo); }
.chip.quien-chatgpt { background: var(--azul-fondo); border-color: var(--azul); color: var(--azul); }
.chip.quien-a-mano { background: var(--verde-fondo); border-color: var(--verde); color: var(--verde); }
.documentos td:first-child { overflow-wrap: anywhere; }

/* --- visor ----------------------------------------------------------------------------- */

.visor {
  position: sticky; top: 64px; align-self: start;
  height: calc(100vh - 80px); display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
}
.visor-cab {
  display: flex; gap: 12px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid var(--borde); font-size: 0.85rem;
}
.visor-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.visor-cab span { color: var(--suave); }
.visor-cab .cerrar { text-decoration: none; font-size: 1.1rem; color: var(--suave); }
a.boton, button.boton {
  display: inline-block; font: inherit; cursor: pointer; padding: 2px 10px; border-radius: 6px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--azul); background: var(--azul-fondo); color: var(--azul);
}
/* Un botón deshabilitado no reacciona al ratón: con el fondo blanco del hover, el rojo de
   «Subir al Consorcio» deshabilitado se quedaba blanco sobre blanco. */
a.boton:hover, button.boton:hover:not(:disabled) { background: var(--superficie); }
.reclasificar { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.validacion { margin: 10px 0 4px; scroll-margin-top: 80px; }
.validacion details ul { margin: 4px 0; }
.confirmar { max-width: 760px; }
.presupuesto { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.presupuesto dt { color: var(--suave); }
.presupuesto dd { margin: 0; overflow-wrap: anywhere; }
.presupuesto .meta-linea, .confirmar .meta-linea { color: var(--suave); font-size: 0.85rem; }
.confirmar .botones { align-items: center; gap: 12px; }
.fecha-manual { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 640px) {
  .presupuesto { grid-template-columns: 1fr; }
  .presupuesto dd { margin-bottom: 6px; }
}
.etiquetar { border-bottom: 1px solid var(--borde); padding: 6px 12px; font-size: 0.85rem; }
.etiquetar summary { cursor: pointer; }
.etiquetar .meta-linea { color: var(--enlace); margin-left: 6px; }
.etiquetar form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.etiquetar p { margin: 0; }
.casillas {
  margin: 0; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px;
  max-height: 32vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px;
}
.casillas legend { padding: 0 4px; color: var(--suave); }
.casillas label { overflow-wrap: anywhere; }
.etiquetar .tipo select { margin-left: 6px; max-width: 100%; }
.visor iframe { flex: 1; width: 100%; border: 0; background: #525659; }
.lienzo { flex: 1; overflow: auto; background: #525659; padding: 12px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lienzo img { max-width: 100%; height: auto; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); background: #fff; }
.lienzo.texto { background: var(--superficie); align-items: stretch; }
.lienzo.texto h4 { margin: 8px 0 0; color: var(--suave); }
.lienzo.texto pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 0.85rem; }
details.correo { border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); margin: 6px 0; padding: 6px 10px; }
details.correo summary { cursor: pointer; overflow-wrap: anywhere; }
.cuerpo-correo {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 4px; font-family: inherit; font-size: 0.9rem;
  max-height: 32rem; overflow: auto; padding: 8px; background: var(--fondo); border-radius: 4px;
}

@media (max-width: 1100px) {
  .ficha.con-visor { grid-template-columns: minmax(0, 1fr); }
  .visor { position: static; height: 80vh; order: -1; }
}

@media (max-width: 640px) {
  main { padding: 12px 16px 32px; }
  .barra { padding: 10px 16px; }
  .carpetas { grid-template-columns: minmax(0, 1fr); }
}

/* --- El popup «Pedir documentación» (web publicada, web.peticiones) ------------------ */
.dialogo-peticion { width: min(820px, 94vw); max-height: 90vh; border: 1px solid var(--suave, #ccc);
  border-radius: 8px; padding: 0; background: var(--fondo, #fff); color: inherit; }
.dialogo-peticion::backdrop { background: rgb(0 0 0 / 45%); }
.dialogo-cuerpo { padding: 18px 22px; overflow-y: auto; max-height: 86vh; }
.peticion h2 { margin: 0 0 4px; font-size: 1.15rem; }
.peticion fieldset { border: 1px solid var(--gris-fondo, #eee); border-radius: 6px; margin: 12px 0; padding: 8px 12px; }
.peticion legend { font-weight: 600; padding: 0 4px; }
.peticion .opcion { display: block; margin: 4px 0; }
.peticion .opcion .etiqueta { margin-left: 6px; }
.peticion .observaciones { display: block; margin-top: 8px; }
.peticion textarea, .peticion input[type=text] { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.peticion .acciones { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.peticion .error-peticion { color: var(--rojo); background: var(--rojo-fondo); padding: 6px 10px; border-radius: 4px; }
.peticion iframe.correo { width: 100%; height: 50vh; border: 1px solid var(--gris-fondo, #eee); background: #fff; }
.peticion .cabeceras th { text-align: left; padding-right: 12px; color: var(--gris); font-weight: 600; }
.peticion .texto-correo { white-space: pre-wrap; font-size: .85rem; }
.peticion .anteriores table { font-size: .85rem; border-collapse: collapse; }
.peticion .anteriores td, .peticion .anteriores th { padding: 2px 8px; text-align: left; }
.boton.peligro { background: var(--rojo); color: #fff; border-color: var(--rojo); }
/* El hover general de .boton pone el fondo de --superficie, que en claro es blanco: con el
   texto blanco el botón rojo desaparecía. Los rojos siguen rojos, un poco más oscuros. */
a.boton.peligro:hover, button.boton.peligro:hover:not(:disabled) {
  background: var(--rojo); border-color: var(--rojo); color: #fff; filter: brightness(0.9);
}
.pedir-col { width: 2.5rem; }
button.sobre { font-size: 1.15rem; line-height: 1; padding: 2px 8px; cursor: pointer; }
.pedir-documentacion { margin: 10px 0; }

/* --- «Subir al Consorcio» (web publicada, web.envio_ccs) ---------------------------- */
#dialogo-ccs h2 { margin: 0 0 8px; font-size: 1.15rem; }
.plan-ccs { margin: 6px 0 12px; padding-left: 20px; font-size: .9rem; }
.plan-ccs li { margin: 3px 0; }
.casillas-ccs { list-style: none; margin: 2px 0 6px; padding-left: 4px; }
.casillas-ccs label { display: flex; gap: 6px; align-items: baseline; cursor: pointer; overflow-wrap: anywhere; }
.casillas-ccs input { flex: none; }
.en-ccs { white-space: nowrap; }
.chip.ccs-subido { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde); }
.chip.ccs-subiendo { background: var(--azul-fondo); color: var(--azul); border-color: var(--azul); }
.chip.ccs-pendiente { background: var(--naranja-fondo); color: var(--naranja); border-color: var(--naranja); }
.casillas-ccs label:has(input:not(:checked)) { color: var(--suave); text-decoration: line-through; }
.botones-dialogo { display: flex; gap: 12px; justify-content: flex-end; margin-top: 14px; }

/* --- «Subir documento»: una fila por documento, cada uno con sus carpetas ------------- */
/* Una tarjeta por documento. La barra de la izquierda y la etiqueta de la cabecera dicen cómo
   va: naranja, falta elegir; verde, con sus carpetas; gris, lo decide el sistema. */
.documento-subida {
  margin: 14px 0; padding: 0 0 10px; min-width: 0;
  border: 1px solid var(--borde); border-left: 5px solid var(--naranja); border-radius: 8px;
  background: var(--superficie); box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}
.documento-subida[data-estado="elegido"] { border-left-color: var(--verde); }
.documento-subida[data-estado="sistema"] { border-left-color: var(--gris); }
.documento-subida > :not(.cabecera-documento) { margin-left: 12px; margin-right: 12px; }
/* Sin ancho explícito, Chrome mide la rejilla de casillas (auto-fill) con otro ancho dentro del
   formulario flex y deja ~70 px de hueco bajo la última tarjeta. */
.documentos-subida { width: 100%; }
.documentos-subida > .documento-subida:last-child { margin-bottom: 4px; }
.cabecera-documento {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 12px;
  background: var(--gris-fondo); border-bottom: 1px solid var(--borde); border-radius: 7px 7px 0 0;
}
.cabecera-documento .numero {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff;
  font-weight: 700; font-size: .85rem;
}
.cabecera-documento .nombre-fichero { flex: 1; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.estado-documento {
  flex: none; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  white-space: nowrap; background: var(--naranja-fondo); color: var(--naranja);
}
[data-estado="elegido"] .estado-documento { background: var(--verde-fondo); color: var(--verde); }
[data-estado="sistema"] .estado-documento {
  background: var(--superficie); color: var(--suave); border: 1px solid var(--borde);
}