/*
  Sistema visual del panel: fondo blanco, contenedores en gris
  cálido, títulos negros de alto contraste y cifras tabulares. Un único acento, reservado para la acción
  principal; los colores de estado solo aparecen en insignias y marcas de urgencia.
*/
:root {
  --fondo: #ffffff;
  --plano: #f4f2f0;
  --plano-fuerte: #ebe8e4;
  --linea: #e3dfda;
  --tinta: #111111;
  --tinta-media: #4a4642;
  --tinta-suave: #6b6661;
  --tinta-tenue: #9a948e;
  --acento: #1f4fd8;
  --acento-hover: #1a43b8;
  --peligro: #b42318;
  --peligro-fondo: #fdecea;
  --atencion: #8a4b00;
  --atencion-fondo: #fdf1dc;
  --exito: #1b6b3a;
  --exito-fondo: #e6f4ea;
  --radio: 14px;
  --radio-chico: 10px;
  --ancho: 1180px;
  --alto-barra: 3.6rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
/* Las clases con display no deben ganarle al atributo hidden que usa app.js para cambiar de pantalla. */
[hidden] { display: none !important; }
body { margin: 0; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; }
h3 { font-size: 0.95rem; line-height: 1.25; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { flex: none; }

.saltar { position: absolute; left: -999px; min-height: 0; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--tinta); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; border: 0; }

/* ---------- Encabezado ---------- */
/* El desenfoque va solo en pantallas anchas: backdrop-filter vuelve al encabezado contenedor de la barra fija del teléfono. */
.encabezado { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 0.97); border-bottom: 1px solid var(--linea); }
.encabezado-interno { max-width: var(--ancho); margin: 0 auto; padding: 0.6rem 1rem; display: flex; align-items: center; gap: 1rem; }
.marca { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.marca-logo { flex: none; min-width: 2.4rem; height: 1.9rem; padding: 0 0.35rem; border-radius: 8px; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; }
.marca-texto { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.marca-texto small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--tinta-suave); letter-spacing: 0; }

/* Menú de la cuenta: correo, configuración y cierre de sesión. */
.mas { position: relative; margin-left: auto; }
.mas summary {
  list-style: none; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--plano-fuerte);
  display: grid; place-items: center; color: var(--tinta); transition: background-color 0.15s;
}
.mas summary:hover, .mas[open] summary { background: var(--linea); }
.mas summary::-webkit-details-marker { display: none; }
.mas summary svg { width: 1.2rem; height: 1.2rem; }
.mas .menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 12; display: grid; gap: 0.15rem; min-width: 15rem; max-width: calc(100vw - 2rem);
  padding: 0.4rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 12px 32px rgb(17 17 17 / 0.12);
}
.mas .usuario { padding: 0.55rem 0.75rem 0.6rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--linea); font-size: 0.82rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas .usuario:empty { display: none; }
.mas .menu form { margin: 0; }
.menu-opcion {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--radio-chico);
  justify-content: flex-start; background: none; text-align: left; text-decoration: none; font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
.menu-opcion:hover { background: var(--plano); }
.menu-opcion svg { width: 1.05rem; height: 1.05rem; color: var(--tinta-suave); }

/* ---------- Navegación ---------- */
/* En el teléfono es una barra inferior con íconos; en pantallas anchas va en el encabezado. */
.navegacion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr);
  background: #fff; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom);
}
.navegacion a {
  display: grid; justify-items: center; align-content: center; gap: 0.2rem; min-height: var(--alto-barra); min-width: 0;
  text-decoration: none; font-size: 0.7rem; font-weight: 600; color: var(--tinta-suave);
}
.navegacion svg { width: 1.35rem; height: 1.35rem; }
.navegacion a[aria-current="page"] { color: var(--acento); }
/* La navegación aparece cuando hay una planilla para recorrer (app.js pone `con-panel` en el body). */
body:not(.con-panel) .navegacion { display: none; }
body.con-panel { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
/* Punto rojo en «Hoy» cuando hay temas que no pueden esperar; el texto oculto lo anuncia al lector de pantalla. */
.navegacion a { position: relative; }
.navegacion a.con-urgencias::after { content: ""; position: absolute; top: 0.55rem; left: calc(50% + 0.35rem); width: 8px; height: 8px; border-radius: 999px; background: var(--peligro); border: 2px solid #fff; }

@media (min-width: 900px) {
  body.con-panel { padding-bottom: 0; }
  .navegacion a.con-urgencias::after { top: 0.3rem; left: auto; right: 0.3rem; }
  .navegacion a.con-urgencias[aria-current="page"]::after { border-color: var(--tinta); }
  .encabezado { background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(1.4) blur(10px); }
  .encabezado-interno { padding: 0.7rem 1.5rem; }
  .navegacion { position: static; flex: 1; display: flex; gap: 0.15rem; background: none; border: 0; padding: 0; margin-left: 1.25rem; }
  .navegacion a { display: flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0 0.85rem; border-radius: 999px; font-size: 0.9rem; color: var(--tinta-media); }
  .navegacion a:hover { background: var(--plano); color: var(--tinta); }
  .navegacion a[aria-current="page"] { background: var(--tinta); color: #fff; }
  .navegacion svg { width: 1.05rem; height: 1.05rem; }
  .mas { margin-left: 0.25rem; }
}

/* ---------- Estado de lectura y avisos ---------- */
.barra { max-width: var(--ancho); margin: 0 auto; padding: 0.85rem 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.leido { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--tinta-media); min-width: 0; }
.leido.con-hora::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--exito); box-shadow: 0 0 0 3px var(--exito-fondo); }
@media (min-width: 900px) { .barra { padding: 1.25rem 1.5rem 0; } }

.aviso { max-width: calc(var(--ancho) - 2rem); margin: 1rem 1rem 0; padding: 0.8rem 1rem; border-radius: var(--radio-chico); background: var(--atencion-fondo); color: var(--atencion); font-size: 0.9rem; font-weight: 500; }
.aviso.exito { background: var(--exito-fondo); color: var(--exito); }
.aviso-reconexion { display: grid; gap: 0.5rem; max-width: calc(var(--ancho) - 2rem); margin: 1rem 1rem 0; padding: 1rem 1.15rem; border-radius: var(--radio); background: var(--atencion-fondo); color: var(--atencion); }
.aviso-reconexion h2 { margin: 0; font-size: 1.05rem; }
.aviso-reconexion p { margin: 0; }
@media (min-width: 1212px) { .aviso-reconexion { margin: 1rem auto 0; } }
@media (min-width: 1212px) { .aviso { margin: 1rem auto 0; } }

/* ---------- Botones ---------- */
/* El acento solo existe en la acción principal. */
button, .boton, .boton-accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s;
}
button:hover, .boton:hover, .boton-accion:hover { background: var(--plano); }
button svg, .boton svg, .boton-accion svg { width: 1rem; height: 1rem; }
button.primario, .boton.primario, .boton-accion.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.primario:hover, .boton.primario:hover, .boton-accion.primario:hover { background: var(--acento-hover); }
.boton.chico { min-height: 2.25rem; padding: 0 0.85rem; font-size: 0.82rem; }
@media (max-width: 899px) { .boton.chico { min-height: 2.75rem; } }
body.escribiendo #contenido button { opacity: 0.5; pointer-events: none; }

.acciones, .acciones-contacto, .acciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.acciones-fila { margin-top: 0.35rem; }
.enlace-planilla { font-size: 0.85rem; font-weight: 600; color: var(--tinta-media); text-decoration: none; }
.enlace-planilla:hover, .enlace-planilla:focus-visible { color: var(--tinta); text-decoration: underline; }

/* ---------- Estructura de las vistas ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: 1rem 1rem 2rem; }
@media (min-width: 900px) { main { padding: 1.25rem 1.5rem 3rem; } }
.vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: start; }
/* Sin min-width: 0 una celda de grilla no se achica y los gráficos desbordan la pantalla. */
.tarjeta, .columnas > *, .columna-hoy, .bloque { min-width: 0; }

.cabeza-vista { display: grid; gap: 0.35rem; }
.titulo-vista { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700; }
.detalle { color: var(--tinta-suave); font-size: 0.88rem; }
.nota { font-size: 0.82rem; color: var(--tinta-suave); padding-left: 0.75rem; border-left: 3px solid var(--linea); }

.tarjeta { display: grid; gap: 0.75rem; align-content: start; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.15rem; }
.tarjeta > h2 { font-size: 1.05rem; }
.centrada { max-width: 34rem; margin: 2.5rem auto; text-align: center; justify-items: center; background: var(--plano); border-color: transparent; padding: 2rem 1.5rem; }
.centrada h1, .centrada h2 { font-size: 1.4rem; letter-spacing: -0.025em; }
.centrada p { color: var(--tinta-media); }
.centrada .acciones { justify-content: center; margin-top: 0.25rem; }
@media (max-width: 599px) { .centrada { margin: 1.5rem 1rem; } }

.panel { border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; overflow: hidden; }
.panel.plano { background: var(--plano); border-color: transparent; }

/* Listas genéricas (ficha y gráficos): una línea fina entre elementos. */
.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista li { display: grid; gap: 0.2rem; padding: 0.75rem 0; border-top: 1px solid var(--linea); justify-items: start; }
.lista li:first-child { border-top: 0; padding-top: 0.15rem; }
.lista li:last-child { padding-bottom: 0; }

.vacio { display: flex; align-items: center; gap: 0.6rem; color: var(--tinta-suave); font-size: 0.9rem; }
.panel > .vacio { padding: 1.1rem 1rem; }
.vacio svg { width: 1.15rem; height: 1.15rem; color: var(--exito); }

/* Nombres de cliente: sin subrayado salvo al pasar el mouse o con el foco. */
.enlace-cliente, .fila-titulo a { font-weight: 600; text-decoration: none; }
.enlace-cliente:hover, .enlace-cliente:focus-visible, .fila-titulo a:hover, .fila-titulo a:focus-visible { text-decoration: underline; }
.volver { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 600; font-size: 0.9rem; color: var(--tinta-media); text-decoration: none; }
.volver:hover { color: var(--tinta); }
.volver svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Insignias y plazo de 72 horas ---------- */
.insignia { justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.insignia::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.insignia.peligro { background: var(--peligro-fondo); color: var(--peligro); }
.insignia.atencion { background: var(--atencion-fondo); color: var(--atencion); }
.insignia.neutra { background: var(--plano); color: var(--tinta-media); }
.insignia.exito { background: var(--exito-fondo); color: var(--exito); }

/* La barra muestra el tiempo consumido; el texto de la insignia da el dato exacto. */
.plazo { display: grid; gap: 0.3rem; min-width: 9.5rem; justify-self: start; }
.plazo-pista { height: 6px; border-radius: 999px; background: var(--plano-fuerte); overflow: hidden; }
.plazo-relleno { display: block; height: 100%; border-radius: inherit; }
.plazo-relleno.peligro { background: var(--peligro); }
.plazo-relleno.atencion { background: #d38b1c; }

/* ---------- Hoy ---------- */
.portada { display: grid; gap: 0.4rem; }
.portada .fecha { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); }
.titulo-portada { font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 900px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }
.cifra {
  display: grid; gap: 0.6rem; align-content: space-between; justify-content: stretch; min-height: 8rem; height: auto; padding: 0.95rem 1rem;
  border-radius: var(--radio); background: var(--plano); border: 1px solid transparent; text-align: left; white-space: normal; font-weight: 400;
}
.cifra:hover { background: var(--plano-fuerte); }
.cifra-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--tinta-media); line-height: 1.25; }
.cifra-cabeza svg { width: 1.1rem; height: 1.1rem; color: var(--tinta-suave); }
.cifra-valor { font-size: clamp(2.1rem, 8vw, 2.75rem); line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
.cifra-pie { font-size: 0.78rem; color: var(--tinta-suave); }
/* Marca de urgencia: solo en las cifras urgentes con algún pendiente. */
.cifra.urgente { background: #fff; border-color: var(--linea); box-shadow: inset 3px 0 0 var(--peligro); }
.cifra.urgente:hover { background: var(--plano); }
.cifra.urgente .cifra-pie { color: var(--peligro); font-weight: 600; }

.grilla-hoy { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .vista.hoy { gap: 2rem; }
  .grilla-hoy { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .grilla-hoy.una-columna { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
}
.columna-hoy { display: grid; gap: 1.5rem; }

.bloque { display: grid; gap: 0.75rem; scroll-margin-top: 5rem; }
.bloque-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.bloque-cabeza h2 { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 700; }
.cuenta { font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave); letter-spacing: 0; }
.enlace-ver { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.85rem; font-weight: 600; color: var(--tinta-media); text-decoration: none; white-space: nowrap; }
.enlace-ver:hover, .enlace-ver:focus-visible { color: var(--tinta); text-decoration: underline; }
.subtitulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); }

/* Bloque «Al día»: una línea con ✓ por cada sección sin pendientes. */
.al-dia { list-style: none; margin: 0; padding: 0.35rem 1rem; }
.al-dia li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; font-size: 0.9rem; color: var(--tinta-media); border-top: 1px solid var(--plano-fuerte); scroll-margin-top: 5rem; }
.al-dia li:first-child { border-top: 0; }
.al-dia svg { width: 1.1rem; height: 1.1rem; color: var(--exito); }

/* Filas: contenido a la izquierda, estado y acción a la derecha; en el teléfono la acción baja. */
.filas { list-style: none; margin: 0; padding: 0; }
.fila { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.85rem; padding: 0.85rem 1rem; border-top: 1px solid var(--linea); }
.fila:first-child, .subfila + .fila { border-top: 0; }
.fila-icono { grid-row: span 2; align-self: start; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--plano); display: grid; place-items: center; color: var(--tinta-media); font-size: 0.8rem; font-weight: 700; }
.fila-icono svg { width: 1.15rem; height: 1.15rem; }
.fila-icono.peligro { background: var(--peligro-fondo); color: var(--peligro); }
.fila-icono.atencion { background: var(--atencion-fondo); color: var(--atencion); }
.fila-titulo, .fila-detalle { grid-column: 2; }
.fila-titulo { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fila-detalle { font-size: 0.85rem; color: var(--tinta-suave); line-height: 1.4; overflow-wrap: anywhere; }
.fila-detalle .enlace-cliente { color: var(--tinta-media); font-weight: 500; }
.fila-lado { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
@media (min-width: 600px) {
  .fila { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .fila-lado { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; }
}
.fila.compacta { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fila.compacta .fila-lado { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
.panel.plano .fila { border-top-color: var(--plano-fuerte); }
.panel.plano .fila-icono { background: #fff; }
.subfila { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1rem 0.35rem; border-top: 1px solid var(--linea); }
.subfila:first-child { border-top: 0; }
.subfila.vacia { padding: 0.15rem 1rem 0.8rem; border-top: 0; font-size: 0.88rem; color: var(--tinta-suave); }
.subfila.vacia svg { width: 1.05rem; height: 1.05rem; color: var(--exito); }
.mas-items { padding: 0.75rem 1rem; border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--tinta-suave); }
.mas-items.suelto { padding: 0 0.25rem; border: 0; }

/* Vencimientos: selector segmentado por período. */
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--plano); }
.segmentos button { min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: transparent; font-size: 0.82rem; color: var(--tinta-media); }
.segmentos button:hover { background: rgb(255 255 255 / 0.6); }
.segmentos button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--linea); }
.segmentos .num { color: var(--tinta-suave); font-weight: 500; }
.periodo { display: grid; gap: 0.6rem; }
.dias { text-align: right; line-height: 1.1; }
.dias strong { display: block; font-size: 1.25rem; letter-spacing: -0.03em; }
.dias span { font-size: 0.72rem; color: var(--tinta-suave); }

.contacto { display: flex; gap: 0.35rem; }
.icono-boton { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; color: var(--tinta-media); text-decoration: none; }
.icono-boton:hover { background: var(--plano); color: var(--tinta); }
.icono-boton svg { width: 1.05rem; height: 1.05rem; }

/* ---------- Clientes ---------- */
.busqueda { display: grid; gap: 0.6rem; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--tinta-suave); pointer-events: none; }
input[type="search"] { width: 100%; min-height: 3rem; padding: 0 1rem 0 2.6rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--plano); }
input[type="search"]:focus { background: #fff; }
.filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.filtro { display: grid; gap: 0.2rem; }
.filtro span { font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); padding-left: 0.2rem; }
/* Con el filtro por productor (dos o más productores activos): cuatro filtros en dos columnas. */
.filtros.con-productor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filtro-productor { max-width: 18rem; }
select { width: 100%; min-height: 2.75rem; padding: 0 0.85rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff; }
/* Toda la fila abre la ficha: el enlace del nombre se extiende sobre la fila. */
.fila.enlazada:hover { background: var(--plano); }
.fila.enlazada .fila-titulo a::after { content: ""; position: absolute; inset: 0; }
.avatar { background: var(--plano-fuerte); color: var(--tinta); letter-spacing: 0.02em; }
.fila.sin-nombre .fila-titulo a { color: var(--tinta-suave); font-weight: 500; }
.fila.sin-nombre .fila-icono { background: var(--plano); color: var(--tinta-tenue); }
@media (max-width: 599px) { .clientes .fila-lado { margin-top: 0.3rem; } }

/* ---------- Ficha ---------- */
.ficha-cabeza { gap: 1rem; }
.ficha-identidad { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ficha-identidad h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.avatar.grande { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 16px; display: grid; place-items: center; font-weight: 700; }
.avatar.grande svg { width: 1.4rem; height: 1.4rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem; margin: 0; }
.datos > div { padding: 0.7rem 0.85rem; border-radius: var(--radio-chico); background: var(--plano); min-width: 0; }
.datos dt { font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.datos dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }
.patente { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; font-size: 1rem; padding: 0.1rem 0.5rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--plano); }

/* ---------- Estado vacío de una vista ---------- */
.estado-vacio { display: grid; justify-items: center; text-align: center; gap: 0.45rem; padding: 2.25rem 1.25rem; background: var(--plano); border-color: transparent; }
.estado-vacio .detalle { max-width: 34rem; }
.estado-vacio-icono { width: 3rem; height: 3rem; border-radius: 999px; background: var(--exito-fondo); color: var(--exito); display: grid; place-items: center; margin-bottom: 0.3rem; }
.estado-vacio-icono.neutro { background: #fff; color: var(--tinta-media); }
.estado-vacio-icono svg { width: 1.35rem; height: 1.35rem; }
.estado-vacio-titulo { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }

/* ---------- Siniestros ---------- */
/*
  En el teléfono y la tableta el tablero se desliza a propósito, una etapa por vez. Desde 1200 px entran todas las
  etapas sin desplazamiento: las que tienen siniestros se reparten el ancho y las vacías quedan como una franja
  angosta con su título y el cero. Las tarjetas van en una sola columna, así que se leen bien aun en columnas angostas.
*/
.tablero { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; align-items: flex-start; }
.etapa { flex: 0 0 min(17rem, 85%); min-width: 0; background: var(--plano); border-radius: var(--radio); padding: 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.6rem; scroll-snap-align: start; }
.etapa.vacia { flex: 0 0 9rem; }
@media (min-width: 1200px) {
  .tablero { overflow-x: visible; scroll-snap-type: none; gap: 0.6rem; }
  .etapa { flex: 1 1 0; padding: 0.6rem; }
  .etapa.vacia { flex: 0 0 7rem; }
  .etapa.vacia h3 { flex-direction: column; gap: 0.35rem; }
}
.etapa h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--tinta); }
.etapa .vacio { font-size: 0.82rem; }
.contador { flex: none; min-width: 1.6rem; text-align: center; background: #fff; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.78rem; color: var(--tinta-media); }
.etapa.vacia .contador { color: var(--tinta-tenue); }
/* Una sola columna: cada dato en su renglón, el plazo a todo el ancho y las acciones bajan sin superponerse. */
.tarjeta-siniestro { min-width: 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 0.7rem 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; justify-items: stretch; }
/* El nombre corta entre palabras; una palabra más ancha que la tarjeta termina en puntos suspensivos. */
.tarjeta-cliente { font-weight: 600; line-height: 1.3; overflow-wrap: normal; word-break: normal; hyphens: manual; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-dato, .tarjeta-fecha { font-size: 0.82rem; line-height: 1.35; color: var(--tinta-suave); }
.tarjeta-fecha { font-variant-numeric: tabular-nums; }
.tarjeta-siniestro > .insignia { justify-self: start; white-space: normal; }
.tarjeta-plazo { margin-top: 0.15rem; }
.tarjeta-plazo .plazo { min-width: 0; width: 100%; }
.tarjeta-plazo .insignia { justify-self: stretch; white-space: normal; }
.tarjeta-acciones { margin-top: 0.2rem; gap: 0.35rem 0.75rem; }
.tarjeta-acciones .boton { white-space: normal; text-align: center; }

/* ---------- Comisiones ---------- */
/* Resumen en palabras: una frase por renglón, con el mismo peso que el resumen de los gráficos. */
.resumen-comisiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.98rem; color: var(--tinta-media); }
.resumen-comisiones li { padding-left: 0.85rem; border-left: 3px solid var(--plano-fuerte); }
.resumen-comisiones li:first-child { color: var(--tinta); font-weight: 600; border-left-color: var(--tinta); }
/* Qué significa cada estado: nombre y explicación; en pantallas anchas, en dos columnas. */
.significados { display: grid; gap: 0.5rem; margin: 0; }
.significados > div { display: grid; gap: 0.1rem; padding: 0.55rem 0.8rem; border-radius: var(--radio-chico); background: var(--plano); }
.significados dt { font-weight: 700; font-size: 0.88rem; }
.significados dd { margin: 0; font-size: 0.85rem; color: var(--tinta-media); }
@media (min-width: 900px) { .significados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-top: 1px solid var(--linea); }
thead th { border-top: 0; background: var(--plano); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
th.numero, td.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En el teléfono cada fila de la tabla se lee como una tarjeta, con la etiqueta de cada dato. */
@media (max-width: 599px) {
  .panel.tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .panel.tabla table, .panel.tabla tbody, .panel.tabla tr, .panel.tabla td { display: block; }
  .panel.tabla tr { padding: 0.6rem 1rem; border-top: 1px solid var(--linea); }
  .panel.tabla tr:first-child { border-top: 0; }
  .panel.tabla td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; border: 0; text-align: right; }
  .panel.tabla td::before { content: attr(data-etiqueta); color: var(--tinta-suave); font-size: 0.82rem; text-align: left; }
  .panel.tabla td:empty { display: none; }
}

/* ---------- Gráficos ---------- */
/* El valor va escrito en cada barra; las bajas llevan rayado para no depender del color. */
.resumen-grafico { font-size: 0.95rem; color: var(--tinta-media); }
.resumen-grafico strong { color: var(--tinta); }
.grafico-columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.4rem, 1fr); gap: 0.35rem; overflow-x: auto; padding-top: 1.25rem; }
.columna-mes { display: grid; grid-template-rows: 9rem auto; gap: 0.3rem; }
.barras { display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--linea); }
.barra-grafico { position: relative; flex: 1; max-width: 1.4rem; min-height: 1px; border-radius: 5px 5px 0 0; }
.barra-grafico span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 0.1rem; font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.serie-a { background: var(--tinta); }
.serie-b { background: repeating-linear-gradient(45deg, #8f8a85 0 4px, #d7d2cc 4px 8px); }
.etiqueta-mes { display: grid; font-size: 0.72rem; color: var(--tinta-suave); text-align: center; line-height: 1.2; }
/* Meses sin movimiento: atenuados para que resalten los que sí tienen. */
.columna-mes.cero .barra-grafico span, .columna-mes.cero .etiqueta-mes { color: var(--tinta-tenue); font-weight: 400; }
.leyenda { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--tinta-media); }
.muestra { display: inline-flex; align-items: center; gap: 0.35rem; }
.muestra::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 3px; }
.muestra.serie-a, .muestra.serie-b { background: none; }
.muestra.serie-a::before { background: var(--tinta); }
.muestra.serie-b::before { background: repeating-linear-gradient(45deg, #8f8a85 0 4px, #d7d2cc 4px 8px); }
.grafico-horizontal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.grafico-horizontal li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr max-content; align-items: center; gap: 0.6rem; }
.grafico-horizontal .nombre { overflow-wrap: anywhere; font-size: 0.88rem; }
.pista { background: var(--plano); border-radius: 999px; height: 0.6rem; overflow: hidden; }
.relleno { display: block; height: 100%; background: var(--tinta); border-radius: 999px; }
.grafico-horizontal .valor { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--tinta-suave); }
/* Barras agrupadas en SVG: en el teléfono el gráfico conserva un ancho legible y se desliza. */
.grafico-svg-marco { overflow-x: auto; }
.grafico-svg { display: block; width: 100%; min-width: 34rem; max-width: 52rem; height: auto; }
.grafico-svg .barra-svg.serie-a { fill: var(--tinta); }
.grafico-svg .eje-svg { stroke: var(--linea); stroke-width: 1; }
.grafico-svg .valor-svg { font-size: 11px; font-weight: 600; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.grafico-svg .mes-svg { font-size: 10px; fill: var(--tinta-suave); }
.datos-grafico summary { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--tinta-media); }
.datos-grafico[open] summary { margin-bottom: 0.4rem; }

/* ---------- Diálogos ---------- */
.dialogo { border: 0; border-radius: 18px; padding: 1.4rem; width: min(30rem, calc(100vw - 2rem)); box-shadow: 0 24px 60px rgb(17 17 17 / 0.25); color: var(--tinta); }
.dialogo::backdrop { background: rgb(17 17 17 / 0.45); }
/* Detalle de solo lectura: más ancho que la confirmación; la cabecera queda fija y el cuerpo se desplaza. Solo abierto
   lleva display (un display fijo mostraría el <dialog> cerrado). */
.dialogo.dialogo-detalle { width: min(40rem, calc(100vw - 2rem)); max-height: min(85vh, 48rem); padding: 0; overflow: hidden; }
.dialogo.dialogo-detalle[open] { display: flex; flex-direction: column; }
.dialogo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem 0.9rem; border-bottom: 1px solid var(--linea); }
.dialogo-cabeza h2 { margin: 0; font-size: 1.1rem; }
.dialogo-cabeza .detalle { margin: 0.2rem 0 0; }
.dialogo-cuerpo { display: grid; gap: 0.9rem; padding: 1rem 1.4rem 1.4rem; overflow-y: auto; overscroll-behavior: contain; }
.formulario { display: grid; gap: 0.9rem; }
.formulario h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
.formulario .acciones { flex-direction: row-reverse; justify-content: flex-start; margin-top: 0.25rem; }
@media (max-width: 599px) { .formulario .acciones > * { flex: 1; } }
.campo { display: grid; gap: 0.3rem; }
.campo span { font-size: 0.8rem; font-weight: 600; color: var(--tinta-media); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, select:focus, input[type="search"]:focus { border-color: var(--tinta-suave); }
.resumen { margin: 0; padding: 0.75rem 0.9rem 0.75rem 2rem; display: grid; gap: 0.25rem; font-size: 0.9rem; background: var(--plano); border-radius: var(--radio-chico); }
.advertencia { padding: 0.65rem 0.85rem; border-radius: var(--radio-chico); background: var(--atencion-fondo); color: var(--atencion); font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Evolución v3: detalle de siniestros, cobranza anual y configuración de la oficina ---------- */
.filtros.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
.filtros.uno { grid-template-columns: minmax(0, 12rem); }
/* Siniestros con varios productores: vía, negociación y productor; en el teléfono, el productor en su propio renglón. */
.filtros.tres { max-width: 54rem; }
@media (max-width: 599px) {
  .filtros.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros.tres > :last-child { grid-column: 1 / -1; }
}
/* «Ver detalle» abre un diálogo: botón con el borde completo de `.boton`, a todo el ancho de la tarjeta. */
.tarjeta-detalle { width: 100%; margin-top: 0.35rem; }
.grupo-coberturas summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--tinta-media); }
/* Datos del detalle: etiqueta y valor del mismo tamaño; la etiqueta se distingue por color y peso. En pantallas anchas,
   etiqueta a la izquierda y valor a la derecha; en el teléfono, una debajo de la otra. */
.detalle-seccion { display: grid; gap: 0.5rem; }
.detalle-seccion + .detalle-seccion { border-top: 1px solid var(--linea); padding-top: 0.9rem; }
.detalle-seccion h3 { margin: 0; font-size: 1rem; }
.datos-siniestro { display: grid; gap: 0.55rem; margin: 0; }
.datos-siniestro > div { display: grid; gap: 0.1rem; }
.datos-siniestro dt { font-size: 0.9rem; font-weight: 500; color: var(--tinta-suave); }
.datos-siniestro dd { margin: 0; font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 560px) { .datos-siniestro > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; } }
.dialogo-cuerpo .lista li { font-size: 0.9rem; padding: 0.4rem 0; }
.grupo-coberturas { border-top: 1px solid var(--linea); }
.grupo-coberturas:first-of-type { border-top: 0; }
/* Grilla anual: tabla con desplazamiento horizontal propio (la página no se desliza); la primera columna queda fija
   para no perder de qué póliza es cada mes. Cada estado de la celda lleva su nombre escrito; el borde de color solo acompaña. */
.grilla-cobranza { overscroll-behavior-x: contain; }
.grilla-cobranza:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.grilla-cobranza table { min-width: max-content; }
.grilla-cobranza th, .grilla-cobranza td { padding: 0.6rem 0.75rem; }
.grilla-cobranza .celda-mes { min-width: 6.5rem; max-width: 10rem; vertical-align: top; overflow-wrap: anywhere; }
.grilla-cobranza th.celda-mes { text-align: center; }
.grilla-cobranza .vacio-mes { color: var(--tinta-tenue); text-align: center; }
.grilla-cobranza .celda-fija { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--linea); min-width: 9rem; max-width: 14rem; }
.grilla-cobranza thead .celda-fija { background: var(--plano); }
.ayuda-desplazamiento { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.estado-cobranza { margin: 0 0 0.25rem; padding-left: 0.4rem; border-left: 3px solid var(--linea); font-size: 0.78rem; line-height: 1.3; }
.estado-cobranza strong { display: block; font-weight: 600; }
.estado-cobranza.peligro { border-left-color: var(--peligro); }
.estado-cobranza.atencion { border-left-color: #d38b1c; }
.estado-cobranza.exito { border-left-color: var(--exito); }
.totales-cobranza tr.total th, .totales-cobranza tr.total td { font-weight: 700; }
/* En el teléfono cada póliza es una tarjeta y los meses van de a dos por renglón, con su nombre arriba. */
@media (max-width: 599px) {
  .grilla-cobranza table { min-width: 0; }
  .grilla-cobranza .celda-fija { position: static; box-shadow: none; max-width: none; min-width: 0; }
  .panel.tabla.grilla-cobranza tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
  .panel.tabla.grilla-cobranza tbody td:not(.celda-mes), .panel.tabla.grilla-cobranza tbody th { grid-column: 1 / -1; }
  .panel.tabla.grilla-cobranza tbody th { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; border: 0; text-align: right; }
  .panel.tabla.grilla-cobranza tbody th::before { content: attr(data-etiqueta); color: var(--tinta-suave); font-size: 0.82rem; font-weight: 400; text-align: left; }
  .panel.tabla.grilla-cobranza tbody td.celda-mes { min-width: 0; flex-direction: column; justify-content: flex-start; gap: 0.15rem; padding: 0.35rem 0; border-top: 1px solid var(--plano-fuerte); text-align: left; }
  .panel.tabla.grilla-cobranza tbody td.celda-mes::before { font-weight: 600; text-transform: capitalize; }
  .panel.tabla.grilla-cobranza tbody td.vacio-mes { color: var(--tinta-tenue); }
  .ayuda-desplazamiento { display: none; }
}

/* ---------- Carga y errores de lectura ---------- */
/* Actualizar la misma sección: la vista anterior queda atenuada y marcada como ocupada hasta que llegan los datos. */
#contenido.actualizando { opacity: 0.55; transition: opacity 0.2s; }
#boton-actualizar[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  #boton-actualizar[aria-disabled="true"] svg { animation: girar 1s linear infinite; }
}
@keyframes girar { to { transform: rotate(360deg); } }
.cargando-vista .vacio { padding: 1.1rem 1rem; }
.error-carga { display: grid; gap: 0.75rem; justify-items: start; padding: 1rem 1.1rem; background: var(--atencion-fondo); border-color: transparent; color: var(--atencion); }
.error-carga p { margin: 0; font-weight: 500; }
#contenido > .error-carga { margin-bottom: 1rem; }

/* ---------- Contexto de Hoy y entidad destacada en la ficha ---------- */
.fila-contexto { display: block; color: var(--tinta-suave); }
/* Póliza o siniestro al que lleva un enlace de Hoy: borde y fondo, además del foco. */
.lista li.destacada, .grupo-cuotas.destacada { background: var(--atencion-fondo); box-shadow: inset 3px 0 0 #d38b1c; border-radius: var(--radio-chico); padding-left: 0.6rem; }
.lista li[tabindex="-1"]:focus-visible, .grupo-cuotas:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* Celda de Cobranza con cuotas: toda la celda lleva a las cuotas de la póliza en la ficha. */
.enlace-mes { display: block; color: inherit; text-decoration: none; border-radius: var(--radio-chico); padding: 0.15rem; margin: -0.15rem; }
.enlace-mes:hover { background: var(--plano); }
.enlace-mes:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
/* La barra superior es fija: lo destacado no queda tapado al desplazarse hasta él. */
[id^="entidad-"], [id^="seccion-"] { scroll-margin-top: 5.5rem; }
/* Configuración: índice de secciones y búsqueda. */
.indice-oficina { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#contenido section[tabindex="-1"]:focus { outline: none; }
#contenido section[tabindex="-1"]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* Tarjeta de siniestro: negociación y próxima acción a la vista, sin desplegar el detalle. */
.tarjeta-resumen { color: var(--tinta-media); }
.limpiar-filtros { display: flex; justify-content: flex-start; }

/* ---------- Listas acotadas y secciones plegables ---------- */
/*
  Ninguna lista estira la pantalla: pasado un alto razonable (unas 6 a 8 filas) se desplaza adentro, sin ocultar nada,
  con el título y la cantidad afuera. Las sombras de arriba y de abajo avisan que hay más: la capa que las tapa se
  desplaza con el contenido, así que cada sombra aparece solo si hay algo para ese lado. `--fondo-lista` es el fondo del
  contenedor (blanco o gris cálido).
*/
.lista-acotada, .panel.plano.lista-acotada {
  --fondo-lista: #fff;
  position: relative; max-height: min(28rem, 70vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background-color: var(--fondo-lista);
  background-image:
    linear-gradient(var(--fondo-lista) 30%, transparent), linear-gradient(transparent, var(--fondo-lista) 70%),
    radial-gradient(farthest-side at 50% 0, rgb(17 17 17 / 0.14), transparent), radial-gradient(farthest-side at 50% 100%, rgb(17 17 17 / 0.14), transparent);
  background-position: top, bottom, top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.75rem, 100% 0.75rem;
  background-attachment: local, local, scroll, scroll;
}
.panel.plano.lista-acotada { --fondo-lista: var(--plano); }
/* El contorno del foco va por dentro: el contenedor de afuera (`.panel`) recorta lo que sobresale. */
.lista-acotada:focus-visible { outline-offset: -3px; }
/* Barras (por ramo, compañía, productor): filas bajas, unas 8 a la vista. */
.lista-acotada.lista-baja { max-height: min(18rem, 60vh); padding-right: 0.35rem; }
/* Listado principal de una vista (clientes) y grilla de cobranza: más alto, con la búsqueda y los filtros arriba. */
.lista-acotada.alta { max-height: min(44rem, 75vh); }
/* Tablas acotadas: el encabezado queda fijo arriba mientras se desplazan las filas. */
.panel.tabla.lista-acotada thead th { position: sticky; top: 0; z-index: 2; }
.panel.tabla.lista-acotada thead .celda-fija { z-index: 3; }
/* Tablero de siniestros: cada columna se desplaza adentro, así una etapa cargada no estira la página. */
.etapa-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.6rem; min-width: 0; }
.etapa-tarjetas.lista-acotada { --fondo-lista: var(--plano); max-height: min(70vh, 40rem); }

/* Secciones plegables: el título es un botón con aria-expanded; la cantidad sigue a la vista con la sección plegada. */
.plegable-cuerpo { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.plegar {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0;
  border: 0; border-radius: 6px; background: none; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  line-height: inherit; text-align: left; white-space: normal; cursor: pointer;
}
.plegar:hover { background: none; }
.plegar::after {
  content: ""; flex: none; align-self: center; width: 0.5rem; height: 0.5rem; margin: 0 0.3rem 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--tinta-suave);
  transform: translateY(-25%) rotate(45deg); transition: transform 0.15s;
}
.plegar:hover::after { color: var(--tinta); }
.plegar[aria-expanded="false"]::after { transform: rotate(-45deg); }
@media (min-width: 900px) { .plegar { min-height: 2.25rem; } }
.bloque-cabeza h2 { flex: 1; min-width: 0; }