/* GesDoc — hoja de estilo única.
   Todo color vive en una variable: así el tema claro es solo un bloque de
   sobreescrituras y no hay que ir cazando literales uno por uno. */
/* Paleta tomada del emblema: azul marino profundo y dorado. La densidad es
   deliberadamente compacta — un programa de trabajo se juzga por cuánta
   información cabe sin cansar, no por lo grande que sean los números. */
:root {
  color-scheme: dark;
  --fondo: #0a1420;
  --panel: #0f1e30;
  --panel-alto: #142840;
  --barra: rgba(9, 18, 30, .94);
  --borde: #1c3149;
  --borde-suave: #16283c;
  --texto: #e9eef6;
  --texto-suave: #8ba0b9;
  --acento: #c9a227;
  --acento-claro: #e0bd53;
  --acento-texto: #0a1420;
  --foco: rgba(201, 162, 39, .18);
  --fila-hover: rgba(201, 162, 39, .07);
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --verde: #3fa45b;
  --amarillo: #d0a02c;
  --naranja: #e07a2f;
  --rojo: #e05260;
  --ok-fondo: rgba(63, 164, 91, .14);
  --error-fondo: rgba(224, 82, 96, .14);
  --b-plazo-f: rgba(63, 164, 91, .16);   --b-plazo-t: #6cc98a;
  --b-vencer-f: rgba(208, 160, 44, .16); --b-vencer-t: #ddb84f;
  --b-hoy-f: rgba(224, 122, 47, .18);    --b-hoy-t: #f0a468;
  --b-vencido-f: rgba(224, 82, 96, .18); --b-vencido-t: #f07b87;
  --b-final-f: rgba(139, 160, 185, .14); --b-final-t: #8ba0b9;
  --p-total: rgba(139, 160, 185, .10);   --p-total-b: #24405e;
  --p-pend: rgba(201, 162, 39, .10);     --p-pend-b: #6b5518;
  --ancho-form: 940px;
}

html[data-tema="claro"] {
  color-scheme: light;
  --fondo: #f2f5f9;
  --panel: #ffffff;
  --panel-alto: #f7f9fc;
  --barra: rgba(15, 30, 48, .97);   /* la barra se mantiene marino: es la marca */
  --borde: #dbe3ed;
  --borde-suave: #e8edf4;
  --texto: #14273d;
  --texto-suave: #5b7089;
  --acento: #8a6d14;
  --acento-claro: #a8871b;
  --acento-texto: #ffffff;
  --foco: rgba(138, 109, 20, .15);
  --fila-hover: rgba(20, 39, 61, .04);
  --sombra: 0 1px 2px rgba(20, 39, 61, .07);
  --verde: #1f7a43;
  --amarillo: #8a6d14;
  --naranja: #b25317;
  --rojo: #c02b3c;
  --ok-fondo: rgba(31, 122, 67, .10);
  --error-fondo: rgba(192, 43, 60, .10);
  --b-plazo-f: rgba(31, 122, 67, .12);   --b-plazo-t: #1f7a43;
  --b-vencer-f: rgba(138, 109, 20, .14); --b-vencer-t: #7a600f;
  --b-hoy-f: rgba(178, 83, 23, .13);     --b-hoy-t: #9c4712;
  --b-vencido-f: rgba(192, 43, 60, .11); --b-vencido-t: #c02b3c;
  --b-final-f: rgba(91, 112, 137, .11);  --b-final-t: #5b7089;
  --p-total: rgba(91, 112, 137, .08);    --p-total-b: #dbe3ed;
  --p-pend: rgba(138, 109, 20, .09);     --p-pend-b: #d8c68a;
}
/* En tema claro la barra sigue oscura, así que su texto va claro */
html[data-tema="claro"] .barra { --texto: #e9eef6; --texto-suave: #a9bdd6; }

* { box-sizing: border-box; }

/* Altura completa para que el pie quede abajo y no flotando a media pantalla */
html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 18px;
  min-height: 46px;   /* min y no height: si el menú se parte, la barra crece */
  background: var(--barra);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
  color: var(--texto);
}

.marca {
  font-size: 15px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; display: flex; align-items: center; gap: 7px;
}
.marca span { color: var(--acento); }
.marca img { width: 22px; height: 22px; border-radius: 50%; }

.barra nav { display: flex; gap: 1px; flex: 1; flex-wrap: wrap; }
.barra nav a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 12.5px;
  transition: all .15s;
  white-space: nowrap;
}
.barra nav a:hover { color: var(--acento-claro); background: rgba(255,255,255,.05); }
/* La pestaña actual, resaltada en dorado con su propio fondo */
.barra nav a.activo {
  color: var(--acento-texto);
  background: var(--acento);
  font-weight: 600;
}
.barra nav a.activo:hover { color: var(--acento-texto); background: var(--acento-claro); }

.chip-prueba {
  color: var(--acento-claro);
  border: 1px solid var(--acento);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
}

/* A nombre de quién está la licencia */
.titular { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.titular > b {
  font-size: 11.5px; font-weight: 600; color: var(--acento-claro);
  max-width: 230px; overflow: hidden; text-overflow: ellipsis;
}

/* Quién está trabajando, cuando el programa está compartido en red */
.quien {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 3px; padding: 3px 9px;
}
.quien small { color: var(--acento); text-transform: uppercase;
               letter-spacing: .5px; font-size: 9.5px; }
.quien a { color: var(--texto-suave); text-decoration: none; font-size: 13px; }
.quien a:hover { color: var(--rojo); }

.btn-tema {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--texto-suave);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.btn-tema:hover { color: var(--acento-claro); border-color: var(--acento); }

/* ---------- Contenido: ancho completo, sin franjas muertas ---------- */
.contenido { flex: 1; width: 100%; margin: 16px auto 0; padding: 0 18px; }

/* Los formularios sí llevan tope: campos de 1900px de ancho no se leen */
.contenido.angosto { max-width: var(--ancho-form); }

h1 { font-size: 17px; font-weight: 600; margin: 4px 0 4px; letter-spacing: .2px; }
h3 { color: var(--texto); font-size: 13px; font-weight: 600; margin-top: 20px;
     text-transform: uppercase; letter-spacing: .7px; }
.sub { color: var(--texto-suave); font-size: 12.5px; margin: 4px 0 12px; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .2px; }
.pie { text-align: center; color: var(--texto-suave); font-size: 11px; padding: 16px; }

/* ---------- Avisos ---------- */
.aviso { padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; font-size: 12.5px; }
.aviso-ok { background: var(--ok-fondo); border: 1px solid var(--verde); }
.aviso-error { background: var(--error-fondo); border: 1px solid var(--rojo); }

.aviso-plazos {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 13px; border-radius: 4px; margin-bottom: 12px; font-size: 12.5px;
  background: var(--b-vencido-f); border: 1px solid var(--rojo);
  border-left: 3px solid var(--rojo);
}
.aviso-plazos a { color: inherit; font-weight: 600; }
.aviso-plazos .cerrar {
  margin-left: auto; background: transparent; border: none;
  color: var(--texto-suave); font-size: 18px; cursor: pointer;
}

/* ---------- Tarjetas de estadísticas ---------- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
/* Cada tarjeta lleva su propio tono pastel según lo que mide, para leer el
   estado de un vistazo sin tener que leer la etiqueta. */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 9px 12px;
  color: var(--texto-suave);
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .3px;
  box-shadow: var(--sombra);
  transition: border-color .15s;
}
.tarjeta:hover { border-color: var(--acento); }
.cifra { display: block; font-size: 20px; font-weight: 700; line-height: 1.15;
         color: var(--texto); letter-spacing: -.5px; }

.tarjeta.pastel-total     { background: var(--p-total);     border-color: var(--p-total-b); }
.tarjeta.pastel-pend      { background: var(--p-pend);      border-color: var(--p-pend-b); }
.tarjeta.pastel-hoy       { background: var(--b-hoy-f);     border-color: var(--naranja); }
.tarjeta.pastel-vencido   { background: var(--b-vencido-f); border-color: var(--rojo); }
.tarjeta.pastel-porvencer { background: var(--b-vencer-f);  border-color: var(--amarillo); }
.tarjeta.pastel-final     { background: var(--b-plazo-f);   border-color: var(--verde); }
.pastel-hoy .cifra       { color: var(--b-hoy-t); }
.pastel-vencido .cifra   { color: var(--b-vencido-t); }
.pastel-porvencer .cifra { color: var(--b-vencer-t); }
.pastel-final .cifra     { color: var(--b-plazo-t); }
.pastel-pend .cifra      { color: var(--acento); }
.nota-tarjeta { display: block; margin-top: 1px; font-size: 9.5px; opacity: .75;
                text-transform: none; letter-spacing: 0; }

/* ---------- Fichas de filtro rápido (semáforo) ---------- */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chips-titulo { color: var(--texto-suave); font-size: 12px; text-transform: uppercase;
                letter-spacing: .5px; }
.chip {
  padding: 3px 11px; border-radius: 3px; font-size: 11.5px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--borde); color: var(--texto-suave);
  background: var(--panel); transition: all .15s;
}
.chip:hover { border-color: var(--acento); color: var(--texto); }
.chip-rojo     { color: var(--b-vencido-t); border-color: var(--b-vencido-t); }
.chip-naranja  { color: var(--b-hoy-t);     border-color: var(--b-hoy-t); }
.chip-amarillo { color: var(--b-vencer-t);  border-color: var(--b-vencer-t); }
.chip-verde    { color: var(--b-plazo-t);   border-color: var(--b-plazo-t); }
/* El activo se rellena con su propio color para que salte a la vista */
.chip-activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.chip-rojo.chip-activo     { background: var(--b-vencido-f); }
.chip-naranja.chip-activo  { background: var(--b-hoy-f); }
.chip-amarillo.chip-activo { background: var(--b-vencer-f); }
.chip-verde.chip-activo    { background: var(--b-plazo-f); }
.chip-rojo.chip-activo, .chip-naranja.chip-activo,
.chip-amarillo.chip-activo, .chip-verde.chip-activo { font-weight: 700; }

/* Campo con un Nro. de Oficio que ya existe */
.campo-repetido {
  border-color: var(--rojo) !important;
  box-shadow: 0 0 0 2px var(--b-vencido-f) !important;
}
#aviso-duplicado span { color: var(--texto-suave); font-size: 12px; }

/* ---------- Buscador de documentos para vincular ---------- */
.buscador-vinculo { position: relative; flex: 1; min-width: 280px; }
.buscador-vinculo input { width: 100%; }
.resultados-vinculo {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none; max-height: 300px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--acento);
  border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.resultados-vinculo li {
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--borde-suave);
}
.resultados-vinculo li:last-child { border-bottom: none; }
.resultados-vinculo li:hover { background: var(--fila-hover); }
.resultados-vinculo .ref { color: var(--acento); font-family: Consolas, monospace; }
.resultados-vinculo small { color: var(--texto-suave); }
.resultados-vinculo .sin-resultados { color: var(--texto-suave); cursor: default; }

/* ---------- Paneles desplegables ---------- */
.desplegable summary { cursor: pointer; color: var(--texto); }
.desplegable summary:hover { color: var(--acento); }
.desplegable[open] summary { margin-bottom: 4px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filtros input[type="search"] { flex: 1; min-width: 240px; }
.rango-fechas {
  display: flex; align-items: center; gap: 6px;
  color: var(--texto-suave); font-size: 12px; white-space: nowrap;
}
.rango-fechas input { padding: 6px 8px; font-size: 12.5px; }

/* ---------- Formularios ---------- */
input, select, textarea, button {
  font: inherit;
  font-size: 12.5px;
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 6px 9px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--foco);
}

/* El ícono del calendario lo dibuja el navegador según color-scheme, pero el
   fondo del input lo forzamos nosotros: se pueden desincronizar y quedar
   invisible. Este invert es el cinturón de seguridad en tema oscuro. */
:root:not([data-tema="claro"]) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 15px 16px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
}
.panel-centrado { max-width: 470px; margin: 34px auto; text-align: center; }

.grilla-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; }
.grilla-form label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--texto-suave); font-size: 13px;
}
/* Las aclaraciones del tipo "(máx. 800 caracteres)" van pegadas al nombre del
   campo, en la misma línea, no debajo. */
.grilla-form label > span { display: block; }
.grilla-form label small { opacity: .75; font-size: 12px; }
.ancho-total { grid-column: 1 / -1; }

.acciones { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }

/* Entrada o salida: dos pestañas chicas, no dos bloques. Es una elección
   entre dos cosas; ocupar media pantalla en eso le quita jerarquía al
   formulario, que es lo que el usuario viene a llenar. */
.selector-sentido {
  display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 3px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
}
.selector-sentido a {
  padding: 6px 16px; border-radius: 6px; color: var(--texto-suave);
  text-decoration: none; font-weight: 600; font-size: 12.5px;
  white-space: nowrap; transition: background .15s, color .15s;
}
.selector-sentido a small {
  font-weight: 400; font-size: 11px; opacity: .7; margin-left: 5px;
}
.selector-sentido a:hover { color: var(--texto); }
.selector-sentido a.activo {
  background: var(--acento); color: var(--acento-texto);
}
.selector-sentido a.activo small { opacity: .85; }
/* Distintivo de sentido en las tablas y en la ficha del documento */
.sentido { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.sentido-entrada { background: rgba(41,121,255,.15); color: #4d8dff; }
.sentido-salida  { background: rgba(0,200,83,.15);  color: var(--verde, #00C853); }

/* Un formulario de un solo botón que debe quedar junto a otros elementos:
   sin esto el <form> corta la línea. */
.en-linea { display: inline-block; margin: 0; }
/* Botón que parece un enlace: para acciones secundarias dentro de un aviso. */
.btn-plano {
  background: none; border: none; padding: 0; font: inherit;
  color: inherit; text-decoration: underline; opacity: .8;
}
.fila-check {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  cursor: pointer;
}
.fila-check input { width: auto; margin: 0; }
/* El resumen técnico se copia y se pega en un correo: tiene que verse
   completo, sin cortar líneas ni obligar a desplazarse en horizontal. */
.caja-resumen {
  width: 100%; display: block; resize: vertical; line-height: 1.5;
  white-space: pre; overflow-x: auto;
}

button, .btn-primario, .btn-secundario, .btn-peligro {
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: filter .15s;
}
button:hover, .btn-primario:hover, .btn-secundario:hover, .btn-peligro:hover {
  filter: brightness(1.15);
}

.btn-primario {
  background: var(--acento); color: var(--acento-texto); font-weight: 600;
  border: none; border-radius: 4px; padding: 7px 15px; font-size: 12.5px;
}
.btn-secundario {
  background: transparent; color: var(--texto); border: 1px solid var(--borde);
  border-radius: 4px; padding: 7px 15px; font-size: 12.5px;
}
.btn-secundario:hover { border-color: var(--acento); }
.btn-peligro {
  background: transparent; color: var(--rojo); border: 1px solid var(--rojo);
  border-radius: 4px; padding: 6px 14px; font-size: 12.5px;
}
.btn-mini { padding: 3px 9px; font-size: 11px; }

.form-cierre { display: flex; gap: 8px; flex-wrap: wrap; }
.form-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Tabla ---------- */
/* Con 9 columnas en una ventana de 900px hay desborde: el scroll horizontal
   evita que la última columna quede fuera de la pantalla. */
.zona-tabla { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.tabla th {
  text-align: left;
  padding: 7px 9px;
  background: var(--panel-alto);
  color: var(--texto-suave);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla th a { color: inherit; text-decoration: none; }
.tabla th a:hover { color: var(--acento); }
.orden-activo { color: var(--acento) !important; }
/* Letra chica en las celdas: con oficios como OF-CCFFAA-JCC-DDHH-2026-12557-O
   el tamaño normal partía el número en dos líneas y descuadraba la tabla. */
.tabla td { padding: 6px 9px; font-size: 11.5px; border-bottom: 1px solid var(--borde-suave); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { cursor: pointer; transition: background .1s; }
.tabla tbody tr:hover { background: var(--fila-hover); }
.vacio { text-align: center; color: var(--texto-suave); padding: 30px !important; cursor: default; }

/* Los urgentes saltan a la vista: fondo rojo suave, letra roja y una barra
   al costado. El fondo va en las celdas porque <tr> no lo pinta parejo. */
.tabla tbody tr.urgente td { background: var(--b-vencido-f); color: var(--b-vencido-t); }
.tabla tbody tr.urgente td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.tabla tbody tr.urgente:hover td { filter: brightness(1.08); }

/* Centrado por clase, no por nth-child: el índice de la columna del semáforo
   es distinto en cada tabla y además se renumera al reordenar. */
.tabla .centro { text-align: center; }

/* Estas dos van siempre en una sola línea */
.col-codigo, .col-oficio, .col-fecha { white-space: nowrap; }
.col-oficio { font-size: 11.5px; }
/* El asunto sí puede ocupar varias líneas: es el texto largo de verdad */
.col-asunto { min-width: 260px; max-width: 520px; white-space: normal;
              overflow-wrap: anywhere; line-height: 1.35; }
/* Origen angosto: casi siempre son siglas cortas y no necesita más ancho.
   Si alguno es largo se corta con puntos y el título completo va en el tooltip. */
.col-origen { max-width: 110px; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.col-accion { max-width: 170px; white-space: normal; overflow-wrap: anywhere;
              font-size: 11px; line-height: 1.3; }

/* ---------- Paginación ---------- */
.paginacion {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; color: var(--texto-suave); font-size: 13px;
}
.paginacion a, .paginacion span.pag-actual {
  padding: 5px 11px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--borde); color: var(--texto-suave);
}
.paginacion a:hover { border-color: var(--acento); color: var(--texto); }
.paginacion span.pag-actual {
  background: var(--acento); color: var(--acento-texto); border-color: var(--acento);
  font-weight: 600;
}
.paginacion .conteo { margin-right: auto; }

/* ---------- Semáforo ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
.badge-en-plazo { background: var(--b-plazo-f); color: var(--b-plazo-t); }
.badge-por-vencer { background: var(--b-vencer-f); color: var(--b-vencer-t); }
.badge-hoy { background: var(--b-hoy-f); color: var(--b-hoy-t); }
.badge-vencido { background: var(--b-vencido-f); color: var(--b-vencido-t); }
.badge-final { background: var(--b-final-f); color: var(--b-final-t); }
.badge-sin { background: transparent; color: var(--texto-suave); border: 1px dashed var(--borde); }

/* Palpita lo vencido. Se anima opacity (compositable) y no background-color,
   que provoca tirones en PC de oficina modestos. */
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.badge-vencido { animation: latido 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .badge-vencido { animation: none; } }

/* ---------- Detalle ---------- */
.cabecera-doc { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.detalle dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
.detalle dt { color: var(--texto-suave); }
.detalle dd { margin: 0; }
.lista-adjuntos, .lista-simple { list-style: none; padding: 0; }
.lista-adjuntos li, .lista-simple li {
  padding: 7px 0; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lista-adjuntos a, .lista-simple a { color: var(--acento); text-decoration: none; }
.lista-adjuntos small, .lista-simple small { color: var(--texto-suave); }

/* ---------- Estadísticas ---------- */
.barras { display: grid; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: 190px 1fr 60px; gap: 12px; align-items: center; }
.barra-fila .etiqueta { color: var(--texto-suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-fila .valor { text-align: right; font-weight: 600; }
.barra-pista { background: var(--fondo); border: 1px solid var(--borde); border-radius: 20px; height: 20px; overflow: hidden; }
.barra-relleno { height: 100%; background: var(--acento); border-radius: 20px; }
.barra-relleno.roja { background: var(--rojo); }
.barra-relleno.verde { background: var(--verde); }
.barra-relleno.naranja { background: var(--naranja); }
.grilla-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }

/* ---------- Licencia de uso ---------- */
/* La licencia se muestra como un documento legal: párrafos justificados a
   ambos márgenes. Para eso el texto NO puede llevar los saltos de línea del
   archivo .txt (ver texto_licencia.py); el navegador tiene que poder repartir
   las palabras él. La partición de sílabas evita los huecos feos que deja el
   justificado en español. */
.caja-licencia {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 16px 22px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin: 16px 0;
}
.caja-licencia p { margin: 0 0 11px; }
.caja-licencia h3 {
  margin: 18px 0 7px; font-size: 12.5px; letter-spacing: .4px;
  color: var(--texto); text-align: left;
}
.caja-licencia h3:first-child { margin-top: 0; }
.caja-licencia .lic-cabecera {
  text-align: center; color: var(--texto); font-weight: 600;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.caja-licencia .lic-pie {
  text-align: center; margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--borde);
}
/* El texto ya trae su propia letra —"a)", "b)"…— así que no se agrega viñeta */
.caja-licencia .lic-lista { list-style: none; padding-left: 18px; margin: 0 0 11px; }
.caja-licencia .lic-lista li { margin-bottom: 6px; }
.check-acepto { display: flex; align-items: center; gap: 8px; text-align: left; color: var(--texto); }

/* ---------- Impresión ---------- */
@media print {
  .barra, .pie, .filtros, .acciones, .paginacion, .aviso-plazos { display: none !important; }
  body, .panel, .tabla { background: #fff !important; color: #000 !important; }
  .tabla th, .tabla td { border-bottom: 1px solid #999 !important; }
  .badge { border: 1px solid #666 !important; color: #000 !important; background: #fff !important; }
  .badge-vencido { animation: none !important; font-weight: 700; }
  .contenido { padding: 0; }
  @page { margin: 12mm; }
}

@media (max-width: 760px) {
  .grilla-form { grid-template-columns: 1fr; }
  .barra { flex-wrap: wrap; }
  .detalle dl { grid-template-columns: 1fr; }
  .barra-fila { grid-template-columns: 120px 1fr 48px; }
}

/* ---------- Subcarpetas dentro de un expediente ----------
   Pestañas planas, no cajas: son un filtro, y una caja por subcarpeta
   competiría visualmente con la tabla que es lo que se viene a leer. */
.pestanas-carpeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pastilla-carpeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--panel-alto);
  color: var(--texto-suave);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

.pastilla-carpeta:hover {
  border-color: var(--acento);
  color: var(--texto);
}

.pastilla-carpeta b {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.pastilla-carpeta.activa {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.pastilla-carpeta.activa b { color: var(--acento-texto); }

/* Va pegada a la tabla: la acción se lee junto a lo que se marcó. */
.barra-mover {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--panel-alto);
}

/* Bloque de compra en Ajustes: texto a la izquierda, botones a la derecha. */
.fila-compra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Portada de acceso (entrar / aceptar invitación) ----------
   Pantalla partida a propósito: es lo primero que ve un cliente nuevo, no
   un formulario flotando en una página en blanco. Se sale del <main> con
   márgenes negativos en vez de tocar el layout general — así el resto de
   la aplicación (que se lee en una jornada de trabajo, no en una vitrina)
   sigue siendo la herramienta densa y funcional que es. */
.portada {
  margin: -16px -18px 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.portada-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 60px;
  background:
    radial-gradient(680px 480px at 12% 18%, rgba(224, 189, 83, .16), transparent 60%),
    radial-gradient(520px 420px at 92% 88%, rgba(201, 162, 39, .10), transparent 55%),
    var(--fondo);
  color: var(--texto);
}
/* Trama de puntos, apenas visible: da textura sin competir con el texto. */
.portada-marca::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(233, 238, 246, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
          mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}

.portada-marca-interior { position: relative; z-index: 1; }

.portada-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; }
.portada-logo img { width: 34px; height: 34px; border-radius: 50%; }
.portada-logo strong {
  font-size: 21px; font-weight: 600; letter-spacing: .3px; color: var(--texto);
}
.portada-logo strong b { color: var(--acento-claro); font-weight: 700; }
.portada-logo small {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--texto-suave); margin-top: 3px;
}

.portada-lema {
  font-size: 25px; line-height: 1.44; font-weight: 300; letter-spacing: .1px;
  color: var(--texto); max-width: 420px; margin: 0;
  border-left: 2px solid var(--acento);
  padding-left: 20px;
}

.portada-firma {
  position: relative; z-index: 1;
  font-size: 12px; color: var(--texto-suave); letter-spacing: .3px;
}

.portada-acceso {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px; background: var(--fondo);
  animation: portada-aparecer .5s ease both;
}
@keyframes portada-aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .portada-acceso { animation: none; } }

.portada-caja { width: 100%; max-width: 370px; }
.portada-caja h1 { font-size: 22px; margin: 0 0 6px; }
.portada-caja .sub { margin: 0 0 26px; }
.portada-caja label {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
  color: var(--texto-suave); font-size: 13px;
}
.portada-caja input {
  padding: 10px 12px; font-size: 13.5px;
}
.portada-caja .btn-primario {
  width: 100%; padding: 10px 15px; font-size: 13.5px; margin-top: 6px;
}
.portada-ayuda { margin: 22px 0 0; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }

/* Copia compacta de la marca, solo para cuando el panel izquierdo se
   esconde: sin esto, en celular el visitante entra a una pantalla sin
   ningún indicio de qué producto es. */
.portada-logo-movil { display: none; }

@media (max-width: 760px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada-marca { display: none; }
  .portada-acceso { padding: 48px 22px; min-height: 100vh; }
  .portada-logo-movil { display: flex; justify-content: center; margin-bottom: 30px; }
}