/* CRM de DL — estilos del despacho
   ---------------------------------------------------------------
   Modo claro deliberado: para una herramienta de tablas y formularios que
   se mira durante horas es más legible que un modo oscuro.

   Regla que gobierna todo el archivo: sobre fondo claro, el texto de acento
   va SIEMPRE en el verde oscuro (--ambar-tinta). El verde salvia (--ambar)
   solo aparece como fondo de botón, o como texto sobre la barra superior,
   que es oscura.

   Los nombres de las variables (--toga, --papel, --ambar...) vienen de la
   base y se conservan para no tocar las plantillas; sus valores son los
   colores de delaguialuzon.com.
   --------------------------------------------------------------- */

/* Rotis Sans Serif, la tipografía del despacho, copiada de su web para la demo local.
   Si no carga cae a Source Sans 3. */
@font-face { font-family: 'Rotis'; font-weight: 300 400; font-style: normal;
  src: url('/static/Rotis45Light.woff') format('woff'); }
@font-face { font-family: 'Rotis'; font-weight: 600 900; font-style: normal;
  src: url('/static/Rotis65Bold.woff') format('woff'); }

/* Source Sans 3 (Adobe, SIL Open Font License 1.1: app/static/fuentes/LICENSE-source-sans.txt),
   alojada aquí y no en Google Fonts: así el navegador del cliente no envía su IP a Google
   (RGPD) y cabe en la Content-Security-Policy 'self' del formulario. Versión 3.052R. */
@font-face { font-family: 'Source Sans 3'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/static/fuentes/SourceSans3-Light.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/static/fuentes/SourceSans3-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/static/fuentes/SourceSans3-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/static/fuentes/SourceSans3-Bold.woff2') format('woff2'); }

:root {
  /* Marca: paleta de delaguialuzon.com (demo). Se conservan los nombres de
     las variables para no tocar el resto de la hoja. */
  --toga:        #2C373F;  /* gris pizarra: barra superior, títulos */
  --codice:      #1A1F24;  /* texto principal del sitio */
  --papel:       #FFFFFF;
  --ambar:       #718472;  /* verde salvia: acento y botones */
  --ambar-tinta: #5E7160;  /* el mismo verde, más oscuro, para texto sobre claro */

  /* Superficies derivadas: el gris pizarra rebajado sobre blanco.
     No son colores de marca, son el gris de interfaz que la marca no
     define y que una herramienta de trabajo necesita. */
  --fondo:       #F0F3F0;
  --borde:       #CBD3CB;
  --borde-suave: #E3E7E3;

  /* Texto */
  --texto:       #1A1F24;
  --texto-suave: #505861;

  /* Funcionales — interfaz, nunca marca */
  --verde:       #00794A;
  --oxido:       #A33A23;  /* ladrillo de la web nueva: lo que reclama la vista (vencidos, avisos) */
  --rojo:        #B3261E;
  --amarillo:    #8A6A2A;
  --blanco:      #FFFFFF;

  /* Tipografía */
  --display:  'Rotis','Source Sans 3','Segoe UI',system-ui,sans-serif;
  --texto-ff: 'Rotis','Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;

  --radio: 8px;
  --radio-card: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texto-ff);
  background: var(--fondo);
  color: var(--texto);
  font-size: 12.5px;  /* letra y espaciado del expediente compacto en todo el CRM (Andrea, 28-10-2026) */
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ambar-tinta); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #8C4A0F; }

/* Foco de teclado siempre visible. Sobre fondo claro va en el verde oscuro
   (--ambar-tinta), con más contraste que el verde salvia de los botones. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--ambar-tinta);
  outline-offset: 2px;
}

/* ---------- Barra superior ---------- */

.topbar {
  background: var(--toga);
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* con muchas secciones (administrador), baja a otra línea y no se sale */
  padding: 0 24px;
  min-height: 60px;
  gap: 0 24px;
}

.topbar .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: 16px;
  color: var(--papel);
  text-decoration: none;
}
.topbar .marca:hover { color: var(--papel); text-decoration: none; }
.topbar .marca img { height: 26px; width: auto; display: block; }

.topbar nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.topbar nav a {
  color: #C8D5DC;          /* gris azulado del sitio: solo sobre fondo oscuro */
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--papel); }
.topbar nav a.activo { color: var(--papel); border-bottom-color: var(--ambar); }

.topbar form { margin: 0; }
.topbar .cuenta { display: flex; align-items: center; gap: 12px; }
.topbar .quien { color: #C8D5DC; font-size: 13px; font-weight: 600; white-space: nowrap; }
.topbar .mi-cuenta { color: #C8D5DC; font-size: 13px; font-weight: 600; white-space: nowrap; }
.topbar .mi-cuenta:hover, .topbar .mi-cuenta.activo { color: var(--papel); }
.topbar button.logout {
  background: transparent;
  border: 1px solid rgba(253,253,253,.35);
  color: #C8D5DC;
  padding: 7px 14px;
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--texto-ff);
  font-size: 13px;
  font-weight: 600;
}
.topbar button.logout:hover { background: rgba(253,253,253,.1); color: var(--papel); }

/* ---------- Estructura ---------- */

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

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--texto);
}
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 8px; }

/* h3 es un antetítulo, no un titular: se queda en Figtree */
h3 {
  font-family: var(--texto-ff);
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.card {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
/* Título de recuadro como en el expediente: mayúscula pequeña en terracota, con su línea. */
.card h2 { margin: 0 0 8px; font-family: var(--texto-ff); font-size: 10px; font-weight: 700; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-tinta); display: flex; align-items: center; gap: 8px; }
.card h2::after { content: ""; flex: 1; height: 1px; background: var(--borde-suave); }

/* ---------- Cifras ---------- */
/* Montos y plazos en Figtree 800: es regla de marca, no gusto. */

.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: 10px;
  padding: 10px 14px;
}
.stat .num { font-size: 24px; font-weight: 800; color: var(--texto); line-height: 1.1; }
.stat .label { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
/* Cifras del panel que enlazan con su lista */
a.stat { display: block; color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--ambar); text-decoration: none; }
/* ---------- Inicio por urgencia (app/inicio.py) ---------- */
/* Jerarquía: el rojo solo en «Requiere atención hoy»; «Esta semana» en grande; la situación,
   más pequeña. Cada cifra con su línea de contexto. */
.inicio-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.inicio-cabecera h1 { margin: 0; }
.vista { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.vista a { padding: 7px 14px; font-size: 14px; color: var(--texto); text-decoration: none; }
.vista a + a { border-left: 1px solid var(--borde); }
.vista a[aria-current="page"] { background: var(--toga); color: var(--papel); }
.atencion { background: #FBEDE9; border: 1px solid #E7B9AE; border-radius: var(--radio-card); padding: 16px 20px; margin-bottom: 26px; }
.atencion h2 { margin: 0 0 12px; font-size: 17px; color: #8E2F1C; }
.atencion-cifras { display: flex; flex-wrap: wrap; gap: 12px; }
.atencion-cifra {
  display: flex; align-items: baseline; gap: 10px; min-width: 200px; padding: 10px 16px;
  background: var(--blanco); border: 1px solid #E7B9AE; border-radius: var(--radio); color: #6E2414; text-decoration: none;
}
.atencion-cifra:hover { border-color: var(--oxido); text-decoration: none; }
.atencion-cifra .num { font-size: 28px; font-weight: 800; color: var(--oxido); line-height: 1; }
/* Plazos (caoba), consultas (ocre), documentos (naranja tostado) y gestiones (ciruela), de la
   familia de los gráficos y sin verdes, que se leen como algo bueno (Andrea, 22-10-2026): franja
   a la izquierda y número del mismo color, más oscuro donde el claro no se lee. El color va con lo que se cuenta, no con el orden. Los demás avisos
   siguen en rojo. */
.atencion-cifra[class*="tono-"] { border-left-width: 5px; }
.atencion-cifra.tono-plazos { border-left-color: #954A1E; }
.atencion-cifra.tono-plazos .num { color: #954A1E; }
.atencion-cifra.tono-consultas { border-left-color: #DCAA24; }
.atencion-cifra.tono-consultas .num { color: #9A6B0E; }
.atencion-cifra.tono-documentos { border-left-color: #D9692B; }
.atencion-cifra.tono-documentos .num { color: #C2571D; }
.atencion-cifra.tono-gestiones { border-left-color: #7E3B80; }
.atencion-cifra.tono-gestiones .num { color: #7E3B80; }
.al-dia { margin: 0 0 26px; padding: 10px 16px; background: var(--fondo); border-radius: var(--radio); color: var(--texto-suave); font-size: 14px; }
.al-dia::before { content: "✓ "; color: var(--verde); font-weight: 700; }
.grupo-cifras { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.grupo-nota { margin: -6px 0 12px; font-size: 13px; }
.stat .contexto { font-size: 13px; color: var(--texto-suave); margin-top: 6px; }
.stat .contexto-aviso { font-size: 13px; color: var(--oxido); font-weight: 700; margin-top: 4px; }
.stat .contexto-aviso::before { content: "! "; }
.cifras-semana { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cifras-semana .num { font-size: 38px; }
.cifras-situacion .num { font-size: 24px; }
.agenda-grupo { margin: 18px 0 4px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.agenda h2 + .agenda-grupo { margin-top: 6px; }
.agenda-vencidos { color: var(--oxido); }
.agenda-vencidos + table .agenda-cuando { color: var(--oxido); font-weight: 700; }
.agenda-cuando { width: 120px; white-space: nowrap; }
.agenda-area { width: 200px; color: var(--texto-suave); font-size: 13px; }
.agenda-caso { width: 150px; text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .agenda-area { display: none; }
  .agenda-cuando { width: auto; }
}

/* Tablero de expedientes: aviso tras mover, con «Deshacer» */
.aviso-movido {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); font-size: 14px;
}
.mover-hueco { display: inline-block; width: 28px; }
/* Ficha de consulta: «¿Ya es cliente del despacho?» antes de convertir (app/coincidencias.py) */
.ya-es-cliente { border-color: var(--ambar); }
.ya-es-cliente h2 { margin-top: 0; }
.opcion-cliente {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer;
}
.opcion-cliente:has(input:checked) { border-color: var(--toga); background: var(--fondo); }
.opcion-cliente input { width: auto; min-height: 0; margin: 3px 0 0; padding: 0; flex: none; }
.opcion-cliente > span { flex: 1; text-align: left; font-weight: 400; }
.ya-es-cliente .btn { margin-top: 8px; }
/* Posible conflicto de intereses (_conflicto.html, app/conflictos.py): mismo tono que «Requiere atención hoy» */
.conflicto { background: #FBEDE9; border-color: #E7B9AE; }
.conflicto h2 { margin-top: 0; color: #8E2F1C; }
.conflicto ul { margin: 0 0 8px; padding-left: 20px; }
.conflicto li { margin-bottom: 4px; }
.ayuda { margin: 4px 0 0; font-size: 13px; }
/* Plazo propuesto por el CRM sin confirmar: en gris hasta que lo confirma el responsable (docs/02). */
.por-confirmar td { color: var(--texto-suave); }
.confirmar-plazo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* Aviso de filtro activo en las listas (_filtro_activo.html) */
.filtro-activo {
  margin: -4px 0 16px; padding: 10px 14px; background: var(--fondo); border-radius: var(--radio);
  font-size: 14px; color: var(--texto);
}

/* ---------- Tablas ---------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde-suave); font-size: 12.5px; }
th {
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
tr:hover td { background: #F7F8FB; }

.top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
/* Primario: fondo verde salvia (--ambar). */

.btn {
  display: inline-block;
  background: var(--ambar);
  color: var(--papel);
  border: 2px solid transparent;
  padding: 6px 14px;
  border-radius: var(--radio);
  cursor: pointer;
  font-family: var(--texto-ff);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  min-height: 32px;
  line-height: 1.4;
}
.btn:hover { background: #5E7160; color: var(--papel); text-decoration: none; }
.btn.secundario { background: transparent; color: var(--toga); border-color: var(--toga); }
.btn.secundario:hover { background: rgba(44,55,63,.07); color: var(--toga); }
.btn.peligro { background: var(--rojo); color: var(--papel); }
.btn.peligro:hover { background: #8E1E17; color: var(--papel); }
.btn.chico { padding: 4px 10px; font-size: 11.5px; min-height: 26px; }

/* ---------- Formularios ---------- */

input, select, textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 12.5px;
  font-family: var(--texto-ff);
  background: var(--blanco);
  color: var(--texto);
  min-height: 32px;
}
textarea { resize: vertical; min-height: 80px; }
/* Casillas y botones de opción: su tamaño, no el de una caja de texto (con el 100 % de ancho la casilla
   se iba lejos de su texto; Andrea, 26-10-2026). */
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; vertical-align: middle; }
input::placeholder, textarea::placeholder { color: #8A90A6; }

.campo { margin-bottom: 10px; }
.campo label { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 3px; color: var(--texto); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ---------- Distintivos ---------- */
/* Fondos tenues con el texto en el color pleno: así el contraste aguanta. */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: .01em;
}
.badge.gris     { background: #E6E9F0; color: #4A5170; }
.badge.azul     { background: #E1E6F4; color: var(--toga); }
.badge.verde    { background: #DCEFE5; color: var(--verde); }
.badge.rojo     { background: #F7E2E0; color: var(--rojo); }
.badge.amarillo { background: #E3E9E3; color: var(--ambar-tinta); }

/* ---------- Kanban ---------- */

.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.kanban-col { background: #E5E8F0; border-radius: var(--radio-card); padding: 12px; min-height: 100px; }
.kanban-col h3 { padding: 4px 6px; margin-bottom: 12px; }
.kanban-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.kanban-card .titulo { font-weight: 800; margin-bottom: 4px; color: var(--texto); }
/* Número del expediente (Andrea, 26-10-2026): el mismo que lleva su dirección, para dictarlo y buscarlo. */
.kanban-num, .exp-num { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--texto-suave); }
.kanban-num { margin-bottom: 2px; }
.exp-num { margin-bottom: 2px; }
/* Buscador del tablero: filtra las tarjetas en el navegador (app/static/expedientes_buscar.js). */
.buscar-expedientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 20px; }
.buscar-expedientes label { font-size: 13px; font-weight: 800; }
.buscar-expedientes input { flex: 1 1 320px; max-width: 520px; min-height: 40px; }
.kanban-card[hidden], .buscar-expedientes[hidden], .sin-coincidencias[hidden] { display: none !important; }
.sin-coincidencias { padding: 8px 4px; font-size: 13px; }
.kanban-card .cliente { color: var(--texto-suave); font-size: 12.5px; margin-bottom: 8px; }
.kanban-card .mover { display: flex; justify-content: space-between; margin-top: 10px; }
.kanban-card .mover button {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--texto-ff);
  font-size: 12px;
  font-weight: 700;
  color: var(--toga);
  min-height: 32px;
}
.kanban-card .mover button:hover { background: #EEF0F6; }

/* ---------- Ingreso ---------- */
/* Única pantalla con degradado: es la cara de la herramienta. */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(165deg,#1A1F24 0%,#3E4F41 100%);
}
.login-box {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  padding: 40px 36px;
  width: 340px;
  max-width: 100%;
}
.login-box .isotipo { display: block; width: 210px; height: auto; margin: 0 auto 20px; }
.login-box h1 { text-align: center; margin-bottom: 6px; font-size: 20px; }
.login-box .sub { text-align: center; color: var(--texto-suave); font-size: 13px; margin-bottom: 24px; }
.login-box .btn { width: 100%; }
.error-msg {
  background: #F7E2E0;
  color: var(--rojo);
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ok-msg, .info-msg {
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.ok-msg { background: #E3EFE7; color: var(--verde); }
.info-msg { background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); }

.formulario-corto { max-width: 520px; }

/* Texto que solo leen los lectores de pantalla (etiquetas de filtros sin rótulo visible). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Registro de accesos */
.resultado-ok { color: var(--texto-suave); }
.resultado-fallo { color: var(--amarillo); font-weight: 600; }
.resultado-denegado { color: var(--rojo); font-weight: 600; }
.acciones-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Usuarios */
.casillas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
label.casilla { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; cursor: pointer; }
label.casilla input { width: auto; min-height: 0; margin: 0; }
.acceso-accion { margin-top: 24px; }

/* ---------- Gráficos del panel (app/graficos.py, docs/06) ---------- */
/* Tinta solo para los datos (Tufte, Few). Rejilla de tres columnas; barras para comparar áreas
   (nombre | barra | valor) y anillos para la parte de un todo. Los colores (madera de la nueva
   web) y el tamaño de cada gráfico van en el propio SVG; aquí solo la composición. */
.g-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.g-rejilla .card { margin-bottom: 0; }
.g-card { padding: 20px 22px 18px; }
.g-card h3 { margin: 0 0 2px; }
.g-sub { margin: 0 0 14px; font-size: 13px; color: var(--texto-suave); }
.g-fila {
  display: grid; grid-template-columns: minmax(0, 120px) minmax(40px, 1fr) minmax(40px, auto);
  gap: 12px; align-items: center; min-height: 32px;
}
a.g-fila { color: inherit; text-decoration: none; border-radius: 6px; margin: 0 -6px; padding: 0 6px; }
a.g-fila:hover { background: var(--fondo); text-decoration: none; }
.g-card svg a { cursor: pointer; }
.g-card svg a:hover rect, .g-card svg a:hover circle { opacity: .85; }
.g-etiqueta { font-size: 13.5px; line-height: 1.25; color: var(--texto); overflow-wrap: anywhere; }
.g-barra { display: block; }
.g-valor { font-size: 13.5px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-detalle { font-weight: 400; color: var(--texto-suave); }
.g-columnas { display: block; margin: 0 auto; }
/* Anillo de conversión: cifra grande en el centro, nota al lado; debajo, una fila por trámite. */
.g-anillo { display: block; flex: none; }
.g-centro { fill: var(--texto); font-size: 22px; font-weight: 700; font-family: var(--texto-ff); font-variant-numeric: tabular-nums; }
.g-anillo-con-leyenda { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
a.g-enlace { display: block; border-radius: 50%; }
a.g-enlace:hover { background: var(--fondo); text-decoration: none; }
.g-nota-anillo { margin: 0; }
.g-sub-bloque { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-valor .g-detalle { font-size: 12px; margin-left: 2px; }
.g-eje { fill: var(--texto-suave); font-size: 12px; font-family: var(--texto-ff); }
.g-num { fill: var(--texto); font-size: 12px; font-weight: 700; font-family: var(--texto-ff); }
.g-leyenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.g-leyenda-lista li { display: flex; align-items: center; gap: 8px; }
.g-leyenda-lista b { font-variant-numeric: tabular-nums; }
.g-leyenda-lista a { color: var(--texto); }
.g-alerta, .g-alerta a { color: var(--rojo); font-weight: 700; }
.g-leyenda-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.g-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--texto-suave); }
.g-nota a { color: var(--texto-suave); }
.g-etiqueta svg { vertical-align: -1px; margin-right: 4px; }
.g-tabla { margin-top: 12px; font-size: 13px; }
.g-tabla summary { cursor: pointer; color: var(--texto-suave); width: fit-content; }
.g-tabla { overflow-x: auto; }
.g-tabla table { margin-top: 8px; }
/* Tablas de los gráficos: compactas para caber en un tercio de pantalla; el nombre de la fila se
   parte en líneas y las cifras van a la derecha. */
.g-tabla th, .g-tabla td { padding: 6px 4px; font-size: 12.5px; }
.g-tabla th { font-size: 11px; letter-spacing: 0; }
.g-tabla th:first-child, .g-tabla td:first-child { padding-left: 0; overflow-wrap: anywhere; }
.g-tabla td:not(:first-child), .g-tabla th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabla ancha (consultas por mes: 12 meses más el total): el nombre del trámite no se parte, la
   primera columna queda fija y el resto se desplaza en horizontal dentro de la tarjeta. */
.g-tabla-ancha table { width: max-content; min-width: 100%; }
.g-tabla-ancha th:first-child, .g-tabla-ancha td:first-child {
  white-space: nowrap; overflow-wrap: normal; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  position: sticky; left: 0; background: var(--blanco); padding-right: 10px;
}
.g-tabla-ancha th:last-child, .g-tabla-ancha td:last-child { font-weight: 700; }
.g-card .vacio { padding: 8px 0; }
@media (max-width: 1080px) { .g-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .g-rejilla { grid-template-columns: 1fr; }
  .g-card { padding: 18px 18px 14px; }
  .g-fila { grid-template-columns: minmax(0, 110px) minmax(40px, 1fr) auto; gap: 10px; }
}

/* Fase de prueba: aviso visible en todas las páginas del CRM mientras está encendida (docs/08) */
.franja-prueba {
  background: #E3E9E3; color: var(--ambar-tinta);
  font-size: 13px; font-weight: 800; text-align: center;
  padding: 8px 16px; border-bottom: 1px solid var(--borde);
}
.provisional {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .06em;
  padding: 12px 16px; margin: 8px 0 16px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
  user-select: all; overflow-wrap: anywhere;
}

.vacio { color: var(--texto-suave); font-style: italic; padding: 24px 0; }
/* ---------- Recetas de trámite (app/recetas.py) ---------- */
.recetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.receta { display: block; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-card);
  padding: 16px 18px; }
.receta:hover { border-color: var(--ambar); }
.receta.elegida { border-color: var(--toga); box-shadow: inset 0 0 0 1px var(--toga); }
.receta-enlace { display: block; color: inherit; text-decoration: none; }
.receta-enlace:hover { text-decoration: none; }
.receta h3 { margin: 0 0 4px; }
.receta-precio { font-weight: 800; margin-bottom: 6px; }
.receta-que summary { cursor: pointer; width: fit-content; color: var(--texto-suave); }
.receta-que summary:hover { text-decoration: underline; }
.receta-que p { margin: 6px 0 0; }
.opcion-radio { display: block; font-weight: 400; margin: 4px 0; }
.opcion-radio input { width: auto; display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
.pasos { margin: 0; padding: 0; list-style: none; }
.pasos li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
.pasos li.hecho strong { color: var(--texto-suave); text-decoration: line-through; }
.paso-marca { width: 24px; height: 24px; border: 2px solid var(--toga); border-radius: 6px; background: var(--blanco);
  color: var(--verde); font-weight: 800; cursor: pointer; padding: 0; line-height: 1; }
.pasos li.hecho .paso-marca { background: var(--verde); color: var(--blanco); border-color: var(--verde); }
.paso-cita { margin-top: 4px; }
/* Panel del trámite (26-10-2026): pasos a la izquierda, más anchos; tasa, cita, pago y carpeta a la
   derecha. min-width: 0 deja encoger las columnas, así nada se sale ni se mete bajo la otra; con poco
   ancho (o zoom) pasa a una sola columna. */
.tramite-bloques { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 48px; }
.tramite-bloques > * { min-width: 0; }
.tramite-bloques a { overflow-wrap: anywhere; }
.tramite-bloques h3 { margin-bottom: 4px; }
.tramite-bloques h3.ficha-sub { margin-top: 24px; }
.tramite-bloques .lista-limpia li { margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
@media (max-width: 1000px) { .tramite-bloques { grid-template-columns: minmax(0, 1fr); } }
.pasos li { padding: 12px 0; }
.pasos li > div { min-width: 0; }
.paso-linea { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.paso-linea form.inline { display: inline-flex; }
/* «Cómo se hace»: la explicación del paso, plegada. */
.paso-explica { margin-top: 6px; }
.paso-explica > summary { cursor: pointer; width: fit-content; color: var(--texto-suave); }
.paso-explica > summary:hover { text-decoration: underline; }
.paso-explica p { margin: 4px 0 0; max-width: 62ch; }
/* «Anotar cita» / «Anotar plazo»: un botón; al abrirlo, su formulario en un recuadro propio. */
.paso-accion { margin-top: 8px; }
.paso-accion > summary { list-style: none; cursor: pointer; display: inline-block; padding: 5px 12px;
  border: 1px solid var(--toga); border-radius: var(--radio); font-size: 12.5px; font-weight: 700; background: var(--blanco); }
.paso-accion > summary::-webkit-details-marker { display: none; }
.paso-accion > summary::before { content: "+ "; }
.paso-accion[open] > summary::before { content: "− "; }
.paso-recuadro, .paso-accion > .paso-form { margin-top: 8px; padding: 12px 14px; background: var(--fondo);
  border: 1px solid var(--borde-suave); border-radius: var(--radio); }
.paso-recuadro p { margin: 0 0 6px; }
.paso-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 6px; }
.paso-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--texto-suave); }
.paso-form input, .paso-form select { width: auto; min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
.paso-form .hora-chica { width: 84px; }
.paso-form .campo-lugar { flex: 1 1 220px; min-width: 0; }
.paso-form .campo-lugar input { width: 100%; }
.recordatorio-cambiar .paso-form { margin: 6px 0; }
/* Recordatorio creado desde el paso: en ladrillo y negrita para que no se pierda entre el gris. */
.recordatorio-puesto { color: var(--oxido); font-weight: 700; }
.cita-anotada { color: var(--verde); font-weight: 700; }   /* la cita ya tiene día y hora */
.falta-ficha { color: var(--oxido); }   /* formularios: lo que la ficha del cliente no tiene */
.hora-chica { width: 70px; }
.lugar-chico { width: 380px; max-width: 100%; }   /* los nombres de las oficinas son largos */
.recordatorio-puesto::before { content: "⏰ "; }
.recordatorio-puesto.vencido { background: #FBEDE9; padding: 1px 7px; border-radius: 4px; }
.recordatorio-puesto.vencido::before { content: "⚠ "; }
/* «Cambiar o quitar» plegado en la misma línea; abierto, los dos formularios debajo. */
.recordatorio-cambiar { display: inline-block; vertical-align: top; }
.recordatorio-cambiar summary { cursor: pointer; color: var(--ambar-tinta); text-decoration: underline; list-style: none; }
.recordatorio-cambiar summary::-webkit-details-marker { display: none; }
.recordatorio-cambiar[open] { display: block; margin-top: 4px; }
.recordatorio-cambiar[open] form { margin-right: 10px; }

/* Ventana de aviso (dialog nativo): «Recordatorio puesto» al volver del panel del trámite y las
   confirmaciones de borrar (_confirmar.html). Signo de aviso por defecto; reloj en las de recordatorio. */
.aviso-modal {
  border: 0; border-top: 6px solid var(--oxido); border-radius: var(--radio-card); padding: 22px 26px;
  max-width: 440px; width: calc(100% - 32px); box-shadow: 0 18px 48px rgba(26, 31, 36, .28); color: var(--texto);
}
.aviso-modal::backdrop { background: rgba(44, 55, 63, .45); }
.aviso-modal h2 { margin: 0 0 10px; color: var(--oxido); }
.aviso-modal h2::before { content: "⚠ "; }
.aviso-modal.recordatorio h2::before { content: "⏰ "; }
.aviso-modal p { margin: 0 0 10px; font-size: 14.5px; }
.aviso-modal .btn { margin-top: 6px; }
.aviso-modal .acciones-modal { display: flex; gap: 10px; flex-wrap: wrap; }
.aviso-modal .acciones-modal form { margin: 0; }
.fecha-chica { width: auto; display: inline-block; padding: 2px 6px; font-size: 12.5px; margin: 0 4px; }
.paso-cita select { width: auto; display: inline-block; padding: 2px 6px; font-size: 12.5px; margin: 0 4px 0 0; }
.lista-limpia { margin: 0; padding: 0; list-style: none; }
.lista-limpia li { margin: 4px 0; }

.detalle-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.detalle-header .acciones { display: flex; gap: 8px; }

/* Fichas de datos (consulta, expediente, cliente, mi cuenta): una lista de definiciones en dos
   columnas. La etiqueta va a la izquierda, en gris y con ancho fijo, para que el ojo baje por
   una sola línea vertical y encuentre el dato sin leer la etiqueta entera; cada fila lleva una
   línea fina debajo. Los bloques (.ficha-bloques) agrupan las filas por tema con un antetítulo. */
dl.ficha { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; margin: 0; font-size: 14.5px; }
dl.ficha dt, dl.ficha dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--borde-suave); line-height: 1.45; }
dl.ficha dt { color: var(--texto-suave); font-size: 13px; padding-right: 20px; padding-top: 8px; }
dl.ficha dd { min-width: 0; overflow-wrap: anywhere; }
dl.ficha dd .badge { vertical-align: 1px; }
dl.ficha dt:nth-last-of-type(1), dl.ficha dd:last-of-type { border-bottom: 0; }
.ficha-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 40px; }
.ficha-bloques h3 { margin-bottom: 4px; }
.ficha-bloques h3.ficha-sub { margin-top: 20px; }  /* segundo bloque dentro de la misma columna */
.ficha-bloques + .ficha-bloques, .ficha-bloques + .relato, .ficha-bloques + form { margin-top: 20px; }
/* Texto libre del cliente o notas: una cita con margen a la izquierda, separada de los datos. */
.relato { margin: 20px 0 0; padding: 10px 16px; border-left: 3px solid var(--ambar); background: var(--fondo);
  border-radius: 0 var(--radio) var(--radio) 0; white-space: pre-line; }
.relato h3 { margin-bottom: 4px; }
.relato p { margin: 0; }
.pie-recurso { white-space: pre-line; font-size: 14px; }  /* respeta los saltos de línea del pie copiado */
/* Documentos del expediente (_documentos_expediente.html) */
.tabla-documentos td { vertical-align: top; }
.tabla-documentos summary, .resumen-anadir { cursor: pointer; font-weight: 600; }
/* Fundamento del plazo plegado (_plazo_descripcion.html, historial de la agenda): el ojo ve el plazo; la cita legal se abre */
.plazo-fundamento { margin-top: 4px; }
.plazo-fundamento > summary, .tabla-documentos .plazo-fundamento > summary { font-weight: 400; color: var(--texto-suave); width: fit-content; }
.plazo-fundamento > summary:hover { text-decoration: underline; }
.plazo-fundamento .ayuda { margin-top: 2px; }
.form-documento { margin-top: 8px; }
.form-documento input, .form-documento select { max-width: 100%; }
.form-documento .btn { margin-top: 4px; }
.form-quitar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.form-anadir { margin-top: 10px; align-items: end; }
/* Plazos que propone el CRM (_plazos_ficha.html) */
.plazos-propuestos { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.tabla-propuestas td { vertical-align: top; }
.tabla-propuestas summary { cursor: pointer; }
.cuenta-plazo { margin: 6px 0 6px 18px; padding: 0; font-size: 13px; }

form.inline { display: inline; }

.filtros { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.filtros select, .filtros input { width: auto; }

.muted { color: var(--texto-suave); }
.chico { font-size: 12.5px; }

fieldset.bloque {
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  padding: 16px 20px 4px;
  margin: 4px 0 20px;
}
fieldset.bloque legend {
  font-family: var(--texto-ff);
  font-size: 12px;
  font-weight: 800;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Adaptación a pantalla ---------- */

/* Pantallas medianas: el menú pasa a su propia línea, debajo de la marca y la cuenta, para que
   la barra no se salga de la pantalla (el administrador general tiene diez secciones). */
@media (max-width: 1180px) {
  .topbar { padding: 10px 16px; gap: 8px 14px; }
  .topbar .marca { flex: 1 1 auto; }
  .topbar nav { order: 3; width: 100%; gap: 8px 18px; }
  .topbar nav a { white-space: nowrap; }
}

/* Tablet */
@media (max-width: 980px) {
  main { max-width: 100%; padding: 24px 16px 48px; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .fila3 { grid-template-columns: 1fr 1fr; }
}

/* Móvil */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  body { font-size: 14px; }
  main { padding: 16px 12px 40px; }

  .topbar { padding: 12px 14px; }
  .topbar .marca { font-size: 15px; }
  .topbar nav { gap: 10px 16px; }

  h1 { font-size: 21px; }
  h2 { font-size: 17px; }

  .card { padding: 16px 16px; }

  .card table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 9px 8px; }

  .fila, .fila3 { grid-template-columns: 1fr; }
  dl.ficha { grid-template-columns: minmax(100px, max-content) 1fr; }
  dl.ficha dt { padding-right: 12px; }
  .kanban { grid-template-columns: 1fr; }

  .filtros { flex-direction: column; align-items: stretch; }
  .filtros input, .filtros select { width: 100% !important; }

  .top-actions { flex-direction: column; align-items: stretch; }
  .top-actions .btn { text-align: center; }

  .detalle-header .acciones { width: 100%; }
  .detalle-header .acciones .btn,
  .detalle-header .acciones form { flex: 1; }
  .detalle-header .acciones .btn { text-align: center; }
}

/* Ficha de Extranjería plegada (23-10-2026): el resumen va en el título; se abre si hace falta. */
details.ficha-plegable > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; list-style: none; }
details.ficha-plegable > summary::-webkit-details-marker { display: none; }
details.ficha-plegable > summary::before { content: "▸"; color: var(--texto-suave); font-size: 14px; }
details[open].ficha-plegable > summary::before { content: "▾"; }
details.ficha-plegable > summary h2 { margin: 0; }
details.ficha-plegable .ficha-propuestas { color: var(--oxido); }
details.ficha-plegable .ficha-cabecera { margin-top: 12px; }
details.ficha-plegable .ficha-cabecera p { margin: 0; max-width: 60ch; }

/* Agenda e historial del expediente (docs/16, paso 3): pendiente arriba, historial abajo */
.agenda-expediente h3.agenda-sub { margin: 14px 0 6px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.agenda-expediente .agenda-cuando.agenda-vencido { color: var(--oxido); font-weight: 700; }
.agenda-expediente .agenda-cuando.agenda-hoy { font-weight: 700; }
.agenda-expediente .agenda-relativo { font-weight: 400; color: var(--texto-suave); }
.agenda-expediente .agenda-vencido .agenda-relativo { color: var(--oxido); }
.agenda-anadir { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.agenda-anadir > details { flex: 1 1 220px; }
/* Sin raya «hoy» (23-10-2026): el historial se separa con aire y un filete suave arriba del título. */
.agenda-expediente h3.agenda-historial { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
/* Ficha de un cliente inactivo (Andrea, 26-10-2026): sus gestiones no avisan; lo legal pendiente, en ladrillo. */
.aviso-inactivo { background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--texto-suave);
  border-radius: var(--radio-card); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.aviso-inactivo p { margin: 0; }
.aviso-inactivo p + p { margin-top: 6px; }
.aviso-inactivo-pendiente { color: var(--oxido); }
/* «Marcar inactivo» en la ficha del cliente (_cliente_estado.html): consecuencias y motivo. */
.aviso-modal .lista-consecuencias { margin: 0 0 14px; padding-left: 18px; font-size: 14.5px; }
.aviso-modal .lista-consecuencias li { margin: 4px 0; }
.aviso-modal label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.aviso-modal input[type="text"] { margin-bottom: 12px; }
.aviso-modal.sin-signo h2::before { content: none; }
.estado-fijo { margin: 10px 0 0; }
.aviso-cierre-plazos { color: var(--oxido); }
/* «+ Añadir un documento»: nombre, casilla con su explicación y botón, uno debajo de otro. */
.form-anadir-doc { max-width: 520px; }
.form-anadir-doc .campo { margin-bottom: 10px; }
.form-anadir-doc p { margin: 4px 0 10px 26px; }


/* ---------- Pantalla compacta del TIE y el NIE (app/tramite_compacto.py, 28-10-2026) ----------
   Letra más pequeña y densa que el resto del CRM: lo que el profesional necesita cabe en un portátil
   de 14 pulgadas sin desplazarse. Terracota solo como identidad del área de Extranjería (títulos de
   tarjeta, franja, icono de subir); rojo y verde solo para el estado. */
:root {
  --terracota:       #C4653F;
  --terracota-suave: #F7EBE4;
  --terracota-tinta: #9A4A2A;
}
.badge.terracota { background: var(--terracota-suave); color: var(--terracota-tinta); }
.tc { font-size: 12.5px; line-height: 1.4; }
.tc .card { padding: 12px 14px; margin-bottom: 12px; border-color: var(--borde-suave); border-radius: 10px; }
.tc .card h2 { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-tinta); display: flex; align-items: center; gap: 8px; }
.tc .card h2::after { content: ""; flex: 1; height: 1px; background: var(--borde-suave); }
.tc .card h2 .acc { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ambar-tinta); font-size: 11.5px; }
.tc .card h2 button.acc { all: unset; cursor: pointer; color: var(--ambar-tinta); font-size: 11.5px; }
.tc .btn { font-size: 11.5px; padding: 5px 11px; }
.tc-vistas { display: flex; justify-content: flex-end; gap: 4px; margin: -4px 0 8px; font-size: 11px; color: var(--texto-suave); }
.tc-vistas a { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto-suave); }
.tc-vistas a.on { background: var(--toga); color: var(--blanco); border-color: var(--toga); }
/* Pares etiqueta / valor */
.tc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.tc-kv .f { min-width: 0; }
.tc-kv .f.w { grid-column: 1 / -1; }
.tc-kv small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #7B838B; margin-bottom: 1px; }
.tc-kv span { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-kv .vacio { color: var(--rojo); font-style: italic; font-size: 11.5px; }
.tc-bandera { display: inline-block; width: 16px; height: 12px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; border: .5px solid rgba(0,0,0,.15); object-fit: cover; }
.tc-pref { display: inline-block; font-size: 11px; color: var(--texto-suave); background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; padding: 0 5px; margin-right: 5px; }
/* Estado del trámite (vista A) */
.tc-estado { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border: 1px solid var(--borde-suave); border-radius: 8px; background: #FAFBFA; }
.tc-semaforo { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px currentColor; }
.tc-semaforo.rojo { background: var(--rojo); color: #FBECEA; }
.tc-semaforo.verde { background: var(--verde); color: #E6F2EC; }
.tc-estado-cuerpo { flex: 1; min-width: 0; }
.tc-estado .tc-linea { font-size: 13.5px; }
.tc-estado .tc-linea b { font-weight: 700; }
.tc-triangulo { color: var(--rojo); margin-right: 4px; }
.tc-sub { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-chip { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--borde-suave); }
.tc-chip.rojo { background: #FBECEA; color: var(--rojo); border-color: transparent; font-weight: 600; }
.tc-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tc-acciones form { display: inline; }
.tc-secuencia { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 10.5px; color: #7B838B; }
.tc-secuencia i { font-style: normal; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borde-suave); }
.tc-secuencia i.ok { color: var(--verde); border-color: #CDE5D8; }
.tc-secuencia i.cur { border-color: var(--rojo); color: var(--rojo); font-weight: 600; }
.tc-secuencia i.cur.verde { border-color: var(--verde); color: var(--verde); }
/* Carpeta de la cita */
.tc-docs { list-style: none; margin: 0; padding: 0; }
.tc-docs li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; padding: 5px 0; border-top: 1px solid var(--borde-suave); }
.tc-docs li:first-child { border-top: 0; }
.tc-docs.solo-texto li { grid-template-columns: 1fr; }  /* pestaña Trámites: sin iconos ni acciones */
.tc-docs .tc-i { width: 18px; height: 18px; color: var(--texto-suave); }
.tc-docs .n { font-size: 12.5px; min-width: 0; }
.tc-docs .n small { display: block; font-size: 10.5px; color: #7B838B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-docs li.ok .n small { color: var(--verde); }
.tc-docs li.falta .n small { color: var(--rojo); }
.tc-docs li.caso .n small { color: #7B838B; }
.tc-icono { width: 28px; height: 24px; border-radius: 5px; display: inline-grid; place-items: center; border: 1px solid var(--borde); cursor: pointer; color: var(--texto-suave); background: var(--blanco); padding: 0; text-decoration: none; }
.tc-icono svg { width: 14px; height: 14px; }
.tc-icono.sube { border-style: dashed; color: var(--terracota); }
.tc-icono.baja { color: var(--ambar-tinta); }
.tc-icono.hecho { color: var(--verde); border-color: #CDE5D8; cursor: default; }
.tc-subir { display: inline; }
.tc-subir input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tc-iconos { display: flex; gap: 4px; }
.tc-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borde-suave); font-size: 11px; color: var(--texto-suave); }
.tc-listo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11.5px; color: var(--texto-suave); }
.tc-listo .bar { flex: 1; height: 5px; background: var(--borde-suave); border-radius: 3px; overflow: hidden; }
.tc-listo .bar i { display: block; height: 100%; background: var(--terracota); }
/* Honorarios */
.tc-honor { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--borde-suave); }
.tc-honor:first-of-type { border-top: 0; }
.tc-honor b { font-weight: 600; }
.tc-nota { font-size: 11px; color: var(--texto-suave); margin: 6px 0 0; }
/* Hitos (vista B) */
.tc-hitos { list-style: none; margin: 0; padding: 0; }
.tc-hitos li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--borde-suave); font-size: 12px; }
.tc-hitos li:first-child { border-top: 0; }
.tc-hitos .d { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--borde); margin-top: 3px; }
.tc-hitos li.ok .d { background: var(--verde); border-color: var(--verde); }
.tc-hitos li.cur .d { border-color: var(--rojo); }
.tc-hitos li.cur { font-weight: 600; color: var(--rojo); }
.tc-hitos small { display: block; font-weight: 400; color: #7B838B; font-size: 10.5px; }
/* Rejillas */
.tc-a .tc-cuerpo { display: grid; grid-template-columns: 5fr 7fr; gap: 12px; align-items: start; }
.tc-a .tc-fila2 { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
.tc-b .tc-cuerpo { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 12px; align-items: start; }
/* Todas las columnas acaban a la misma altura (Andrea, 28-10-2026): el último recuadro de cada
   columna se estira hasta la más alta; el contenido queda arriba y el pie de la carpeta, abajo.
   Solo con las columnas lado a lado. */
@media (min-width: 1101px) {
  .tc-a .tc-cuerpo, .tc-a .tc-fila2, .tc-b .tc-cuerpo { align-items: stretch; }
  .tc-cuerpo > div, .tc-fila2 > div { display: flex; flex-direction: column; }
  .tc-cuerpo > div > .card:last-child, .tc-fila2 > div > .card:last-child, .tc-a .tc-fila2 { flex: 1; }
  .tc #documentacion { display: flex; flex-direction: column; }
  .tc #documentacion .tc-docs { margin-bottom: 10px; }
  .tc #documentacion .tc-pie { margin-top: auto; }
}
.tc-banda { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--blanco); border: 1px solid var(--borde-suave); border-left: 4px solid var(--terracota); border-radius: 10px; margin-bottom: 12px; }
.tc-banda .st { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tc-pill.rojo { background: #FBECEA; color: var(--rojo); }
.tc-pill.verde { background: #E6F2EC; color: var(--verde); }
.tc-banda .txt { font-size: 14px; font-weight: 600; min-width: 0; }
.tc-banda .txt small { display: block; font-weight: 400; font-size: 11px; color: var(--texto-suave); }
/* Ventanas de la pantalla compacta */
.tc-dialogo { border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 18px 22px; max-width: 720px; width: calc(100% - 32px); font-size: 13px; }
.tc-dialogo::backdrop { background: rgba(44, 55, 63, .35); }
.tc-dialogo h2 { margin: 0 0 12px; font-size: 16px; }
.tc-dialogo .fila3 { gap: 10px; }
.tc-dialogo .campo { margin-bottom: 8px; }
.tc-dialogo .campo label { font-size: 12px; margin-bottom: 3px; }
.tc-dialogo .acciones-form { display: flex; gap: 8px; margin: 10px 0 0; }
@media (max-width: 1100px) {
  .tc-a .tc-cuerpo, .tc-a .tc-fila2, .tc-b .tc-cuerpo { grid-template-columns: 1fr; }
}
button.enlace { all: unset; cursor: pointer; color: var(--ambar-tinta); text-decoration: underline; font: inherit; }
/* La página del expediente compacto empieza más arriba y con la cabecera más baja: lo importante
   tiene que caber en 768 px de alto. */
body:has(.tc) main { padding-top: 12px; }
body:has(.tc) .detalle-header { margin-bottom: 4px; align-items: center; }
body:has(.tc) .detalle-header h1 { font-size: 20px; margin: 0 0 2px; }
body:has(.tc) .detalle-header .exp-num { margin: 0; }
.detalle-header .tc-vistas { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 0 0; font-size: 11px; color: var(--texto-suave); }
.detalle-header .tc-vistas a { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto-suave); }
.detalle-header .tc-vistas a.on { background: var(--toga); color: var(--blanco); border-color: var(--toga); }


/* El recuadro del portal, en una línea dentro de su tarjeta. */
.tc #portal-tarjeta { padding: 8px 14px; }
.tc #portal-tarjeta .portal-recuadro { margin: 0; padding: 0; background: none; border: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.tc #portal-tarjeta .portal-recuadro .paso-linea { margin: 0; }
.tc #portal-tarjeta .portal-recuadro .btn { font-size: 11px; padding: 4px 9px; }
/* Línea de los datos del expediente bajo la pantalla compacta (28-10-2026). */
.tc-expediente { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 6px 2px; font-size: 11.5px; color: var(--texto-suave); border-top: 1px solid var(--borde-suave); }
.tc-expediente b { font-weight: 600; color: var(--texto); }
.tc-expediente .tc-notas { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-expediente .tc-cerrar { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.tc-expediente .tc-cerrar button.enlace { color: var(--texto-suave); }
.tc-expediente .tc-cerrar button.enlace:hover { color: var(--texto); }