/* Sofía para Aromacom — negro y blanco a fondo; el color vive solo en las tres rayas diagonales de la marca. */

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --negro: #000;
  --blanco: #fff;
  --amarillo: #f6c61e;
  --celeste: #5ec3dd;
  --beige: #d9b596;

  /* Superficie actual: las tarjetas invertidas (blanco) cambian estas variables y todo lo de adentro las sigue */
  --fondo: #000;
  --sup: #0c0c0c;
  --tx: #fff;
  --tx-2: #bcbcbc;
  --tx-3: #a3a3a3;
  --ln: #2a2a2a;
  --bd: #707070;
  --foco: var(--amarillo);

  /* El lienzo de la página, los realces suaves y la tarjeta «urgente» invertida: todo cambia con el tema */
  --lienzo: #000;
  --r1: #080808;
  --r2: #101010;
  --r3: #141414;
  --ya-fondo: #fff; --ya-sup: #f2f2f2; --ya-tx: #000; --ya-tx-2: #474747; --ya-tx-3: #626262; --ya-ln: #d6d6d6; --ya-bd: #000; --ya-foco: #000;

  --fuente: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --paso--1: 0.8125rem;
  --paso-0: 0.90625rem;
  --paso-1: 1.0625rem;
  --paso-2: 1.3125rem;
  --paso-3: clamp(1.5rem, 2.3vw, 1.875rem);
  --paso-4: clamp(2.1rem, 4vw, 3.5rem);

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2.25rem;
  --e7: 3.5rem;
  --radio: 1.25rem;

  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tema claro: la misma marca invertida. Las tres rayas no cambian de valor y siguen siendo la única voz de color. */
html[data-efectivo="claro"] {
  color-scheme: light;
  --lienzo: #fff; --fondo: #fff; --sup: #f6f6f6;
  --tx: #000; --tx-2: #444; --tx-3: #595959;
  --ln: #dcdcdc; --bd: #7a7a7a; --foco: #000;
  --r1: #f7f7f7; --r2: #f1f1f1; --r3: #ebebeb;
  --ya-fondo: #000; --ya-sup: #0c0c0c; --ya-tx: #fff; --ya-tx-2: #bcbcbc; --ya-tx-3: #a3a3a3; --ya-ln: #2a2a2a; --ya-bd: #fff; --ya-foco: var(--amarillo);
}
html { background: var(--lienzo); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fuente);
  font-size: var(--paso-0);
  line-height: 1.55;
  color: var(--tx);
  background: var(--lienzo);
  font-variant-numeric: tabular-nums;
  caret-color: var(--foco);
  scrollbar-color: #5a5a5a transparent;
}
::selection { background: var(--amarillo); color: #000; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; max-width: 100%; }
.icono { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.solo-lectores:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip-path: none; padding: 0.5rem 1rem; background: var(--tx); color: var(--fondo); z-index: 99; border-radius: 99px; }

/* ---------- Titulares: hilo ligero con la palabra clave muy pesada ---------- */
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--paso-4); }
h2 { font-size: var(--paso-3); }
h3 { font-size: var(--paso-2); }
h1 b, h2 b, h3 b, h1 strong, h2 strong, h3 strong { font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
.hoja p { max-width: 68ch; }
strong, b { font-weight: 700; }

/* Las tres rayas de la marca, como línea corta */
.rayas {
  display: inline-block; width: 3.4rem; height: 1rem; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 16' fill='none' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M9 15 17 1' stroke='%23F6C61E'/%3E%3Cpath d='M20 15 28 1' stroke='%235EC3DD'/%3E%3Cpath d='M31 15 39 1' stroke='%23D9B596'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.rayas.grande { width: 5rem; height: 1.4rem; }

/* ---------- Armazón ---------- */
.tablero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.tablero > * { min-width: 0; }
.lateral { background: var(--lienzo); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--ln); }
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.marca { display: flex; align-items: baseline; gap: var(--e3); text-decoration: none; min-width: 0; }
.marca-casa { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.4em; text-transform: uppercase; }
.marca-nombre { font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; }
.marca-nombre b { font-weight: 800; }
.marca-lema { display: none; font-size: var(--paso--1); color: var(--tx-2); }
.chip-demo { margin-left: auto; }
.menu-boton {
  display: inline-flex; align-items: center; gap: var(--e2); flex: none;
  min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--bd); border-radius: 99px; background: transparent;
  font-weight: 700; font-size: var(--paso-0); cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.menu-boton:hover { border-color: var(--tx); }
.menu-boton[aria-expanded="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.lateral-cuerpo { display: none; flex-direction: column; gap: var(--e3); padding-top: var(--e3); }
.lateral[data-abierto] .lateral-cuerpo { display: flex; }
.nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.nav-item {
  display: flex; align-items: center; gap: var(--e2); min-height: 2.75rem;
  padding: 0.5rem 0.9rem; border-radius: 99px; border: 1px solid var(--ln);
  color: var(--tx-2); font-weight: 600; font-size: var(--paso-0); text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.nav-item:hover { color: var(--tx); border-color: var(--bd); }
.nav-item[aria-current="page"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.nav-contador { min-width: 1.4rem; padding: 0 0.4rem; text-align: center; background: var(--tx); color: var(--fondo); border-radius: 99px; font-size: 0.75rem; line-height: 1.45rem; font-weight: 800; }
.menu-boton[aria-expanded="true"] .nav-contador { background: var(--fondo); color: var(--tx); }
.aviso-demo { display: none; border: 1px solid var(--bd); color: var(--tx-2); border-radius: 0.9rem; padding: var(--e2) var(--e3); font-size: var(--paso--1); line-height: 1.45; }
.aviso-demo::before { content: ""; display: block; width: 2.2rem; height: 0.7rem; margin-bottom: var(--e2); background: url("/rayas-cortas.svg") no-repeat left center / contain; }
.aviso-demo[data-visible] { display: block; }
.estado-sofia { font-size: var(--paso--1); color: var(--tx-3); line-height: 1.4; }

.principal { position: relative; container: principal / inline-size; padding: 5rem clamp(1rem, 2.4vw, 3.5rem) var(--e7); min-width: 0; overflow-x: clip; }
.principal::before {
  content: ""; position: absolute; top: 0; right: 0; width: min(46vw, 560px); aspect-ratio: 460 / 300; z-index: 0; pointer-events: none;
  background: url("/rayas.svg") no-repeat right top / 100% auto;
  top: -4rem;
}
.vista { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: var(--gap-seccion, 2.25rem); }

.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e4); padding-top: var(--e4); }
.encabezado-texto { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; max-width: 64rem; }
.encabezado p { color: var(--tx-2); font-size: var(--paso-1); line-height: 1.5; max-width: 62ch; }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: var(--paso--1); color: var(--tx-3); font-weight: 600; }
.migas a { color: var(--tx-2); display: inline-flex; align-items: center; min-height: 1.5rem; }   /* 24 px de alto: lo mínimo para tocarlo con comodidad */
.migas a:hover { color: var(--tx); }

@media (min-width: 900px) {
  .principal::before { width: min(40vw, 560px); }
  .tablero { grid-template-columns: 17rem minmax(0, 1fr); }
  .lateral { position: sticky; top: 0; height: 100dvh; padding: var(--e6) var(--e5); border-bottom: 0; border-right: 1px solid var(--ln); overflow-y: auto; display: flex; flex-direction: column; gap: var(--e6); }
  .lateral-cabeza { display: block; }
  .marca { flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .marca-casa { font-size: 0.95rem; letter-spacing: 0.44em; }
  .marca-nombre { font-size: 2.75rem; }
  .marca-lema { display: block; }
  .chip-demo, .menu-boton { display: none !important; }
  .lateral-cuerpo { display: flex; flex: 1; padding-top: 0; gap: var(--e6); }
  .nav { display: flex; flex-direction: column; gap: 0.25rem; }
  .nav-item { border-color: transparent; min-height: 0; padding: 0.55rem 1rem; }
  .tema { margin-top: auto; }
  .principal { padding: var(--e5) clamp(1.5rem, 2.6vw, 3.75rem) var(--e7); }
}

/* ---------- La tarjeta: todo el contenido vive aquí ---------- */
.hoja {
  position: relative; display: flex; flex-direction: column; gap: var(--e4); min-width: 0;
  background: var(--fondo); color: var(--tx);
  border: 1px solid var(--bd); border-radius: var(--radio);
  padding: var(--pad, 1.5rem);
  transition: border-color 0.2s;
}
/* Lo que más urge se invierte: tarjeta blanca con texto negro */
.hoja.ya {
  --fondo: var(--ya-fondo); --sup: var(--ya-sup); --tx: var(--ya-tx); --tx-2: var(--ya-tx-2); --tx-3: var(--ya-tx-3); --ln: var(--ya-ln); --bd: var(--ya-bd); --foco: var(--ya-foco); border-color: var(--ya-fondo);
}
.hoja-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.hoja-nota { color: var(--tx-2); font-size: var(--paso--1); }
.hoja-linea { height: 1px; background: var(--ln); border: 0; margin: 0; }

/* La raya de estado: una raya inclinada de la marca */
.marca-estado { --c: var(--tx); display: inline-block; width: 5px; height: 1.6rem; flex: none; background: var(--c); transform: skewX(-22deg); border-radius: 2px; margin-inline: 3px; }
.marca-estado[data-c="semana"] { --c: var(--amarillo); }
.marca-estado[data-c="mes"] { --c: var(--celeste); }
.marca-estado[data-c="calma"] { --c: var(--beige); }
.hoja.ya .marca-estado[data-c="ya"] { --c: var(--tx); }

/* Rejillas: responden al ancho del área de trabajo (el navegador menos el menú) */
.rejilla { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container principal (min-width: 680px) { .rejilla.dos, .rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container principal (min-width: 1100px) {
  .rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla.dos-tercios { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .rejilla.tercio-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
/* Tarjetas del mismo tipo: tantas columnas como quepan, con un máximo para que no se estiren */
.rejilla.tarjetas { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, calc((100% - 3 * var(--gap, 1.25rem)) / 4))), 1fr)); }
.rejilla.tarjetas.anchas { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(24rem, calc((100% - 2 * var(--gap, 1.25rem)) / 3))), 1fr)); }
.rejilla.resumenes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.rejilla.iguales { align-items: stretch; }
.hoja > .fila-flex:last-child { margin-top: auto; }
.apilar { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.fila-flex { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.separado { justify-content: space-between; }
.crecer { flex: 1 1 0; min-width: 0; }

/* ---------- Sellos, círculo a mano y talón ---------- */
/* Sellos y chips son neutros: el color vive solo en la raya inclinada de la marca */
.sello, .chip { --c: transparent; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; border: 1px solid var(--bd); border-radius: 99px; }
.sello { padding: 0.1rem 0.8rem 0.1rem 0.65rem; color: var(--tx); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.7; }
.sello[data-c]::before, .chip[data-c]::before { content: ""; width: 3px; height: 0.95em; flex: none; background: var(--c); transform: skewX(-22deg); border-radius: 1px; }
.sello[data-c="semana"], .chip[data-c="semana"] { --c: var(--amarillo); }
.sello[data-c="mes"], .chip[data-c="mes"] { --c: var(--celeste); }
.sello[data-c="calma"], .chip[data-c="calma"] { --c: var(--beige); }
.sello[data-c="mes"], .sello[data-c="calma"], .chip[data-c="mes"], .chip[data-c="calma"] { color: var(--tx-2); }
/* Esta semana: contorno firme, para distinguirlo de un vistazo de lo que todavía queda lejos */
.sello[data-c="semana"], .chip[data-c="semana"] { border-color: var(--tx); border-width: 1.5px; color: var(--tx); font-weight: 800; }
.sello[data-c="ya"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.sello[data-c="ya"]::before { background: var(--fondo); }
.hoja.ya .sello[data-c]:not([data-c="ya"])::before, .hoja.ya .chip[data-c]::before { background: var(--tx); }

.circulo-mano { position: relative; display: inline-grid; place-items: center; width: 2.9rem; height: 2.3rem; font-weight: 800; font-size: 1rem; flex: none; }
.circulo-mano svg { position: absolute; inset: -0.25rem -0.35rem; width: calc(100% + 0.7rem); height: calc(100% + 0.5rem); fill: none; stroke: var(--celeste); stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.hoja.ya .circulo-mano svg { stroke: var(--tx); }

.talon { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e4); border-top: 1px dashed var(--bd); margin-top: var(--e1); }
.talon-titulo { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); letter-spacing: 0.04em; }
.talon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: var(--paso--1); }
.talon li { display: inline-flex; align-items: center; gap: var(--e2); }

/* ---------- Botones: píldora con las rayas asomando al final ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 2.6rem; padding: 0.5rem 1.35rem;
  border: 1.5px solid var(--tx); background: var(--tx); color: var(--fondo);
  border-radius: 99px; font-weight: 700; font-size: var(--paso-0); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, translate 0.12s;
}
.boton:not(.chico) { padding-right: 3rem; }
/* Las rayas viven en un remate negro al final de la píldora, así se leen también sobre el botón blanco */
.boton::after {
  content: ""; position: absolute; right: 3px; top: 3px; bottom: 3px; width: 2.2rem; border-radius: 99px; opacity: 0; translate: 0.5rem 0; pointer-events: none;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18' fill='none' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M4 16 9 2' stroke='%23F6C61E'/%3E%3Cpath d='M12 16 17 2' stroke='%235EC3DD'/%3E%3Cpath d='M20 16 25 2' stroke='%23D9B596'/%3E%3C/svg%3E") no-repeat center / 1.1rem 0.8rem;
  transition: translate 0.3s var(--salida), opacity 0.2s;
}
.boton:hover::after, .boton:focus-visible::after { opacity: 1; translate: 0 0; }
/* En reposo: los botones principales llevan las rayas; los secundarios, la flecha larga de la marca */
.boton:not(.suave):not(.chico):not(.peligro)::after { opacity: 1; translate: 0 0; }
.boton::before {
  content: ""; position: absolute; right: 0.6rem; top: 50%; width: 1.4rem; height: 0.55rem; translate: 0 -50%; opacity: 0; pointer-events: none;
  background: currentColor;
  -webkit-mask: url("/flecha-larga.svg") no-repeat center / contain;
  mask: url("/flecha-larga.svg") no-repeat center / contain;
  transition: opacity 0.2s;
}
.boton.suave:not(.chico):not(:disabled)::before { opacity: 0.85; }
.boton.suave:not(.chico):hover::before, .boton.suave:not(.chico):focus-visible::before { opacity: 0; }
.boton.peligro::before, .boton.peligro::after { display: none; }
.boton.pregunta { white-space: normal; text-align: left; line-height: 1.4; border-radius: 1.1rem; padding-block: 0.55rem; justify-content: flex-start; }
.boton.pregunta::before, .boton.pregunta::after { display: none; }
.boton:active { translate: 0 1px; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton.suave { background: var(--fondo); color: var(--tx); border-color: var(--bd); }
.boton.suave:hover { border-color: var(--tx); }
.boton.peligro { background: var(--fondo); color: var(--tx); border-color: var(--bd); border-style: dashed; }
.boton.peligro:hover { border-color: var(--tx); border-style: solid; }
.boton.chico { min-height: 2.1rem; padding: 0.25rem 1.2rem 0.25rem 0.95rem; font-size: var(--paso--1); }
.boton.chico::after { width: 1.7rem; background-size: 0.95rem 0.7rem; }
.boton.carga::after { opacity: 1; translate: 0 -50%; top: 50%; bottom: auto; right: 0.9rem; width: 1rem; height: 1rem; background: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.7s linear infinite; }
@keyframes gira { to { rotate: 1turn; } }

.chip { padding: 0.12rem 0.8rem 0.12rem 0.7rem; font-size: var(--paso--1); font-weight: 600; line-height: 1.6; color: var(--tx-2); }
.chip[data-c="ya"] { --c: var(--tx); }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.campo > span, .etiqueta { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); letter-spacing: 0.02em; }
.campo small { color: var(--tx-3); font-size: var(--paso--1); line-height: 1.45; }
input, select, textarea {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.9rem;
  background: var(--sup); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 0.8rem;
}
select { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.7rem; }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; border-radius: 1rem; }
input::placeholder, textarea::placeholder { color: var(--tx-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--tx-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--tx); padding: 0; }   /* 24 px: el tamaño mínimo para tocarlas */
input[type="file"] { padding: 0.45rem; }
.rejilla-campos { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.opcion { display: flex; align-items: flex-start; gap: var(--e3); }

/* ---------- Tablas y listas ---------- */
.tabla-caja { margin: 0 calc(var(--pad, 1.5rem) * -1); padding: 0 var(--pad, 1.5rem); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla.ancha { min-width: 46rem; }
/* En áreas de trabajo angostas cada fila de la tabla ancha se convierte en una ficha apilada */
@container zona (max-width: 899px) {
  .tabla.ancha { min-width: 0; display: block; }
  .tabla.ancha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla.ancha tbody { display: block; }
  .tabla.ancha tr { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) 0; border-bottom: 1px solid var(--ln); }
  .tabla.ancha td { display: flex; align-items: center; gap: var(--e3); padding: 0; border: 0; }
  .tabla.ancha tbody tr:hover td { background: transparent; }
  .tabla.ancha td[data-etiqueta]::before { content: attr(data-etiqueta); flex: 0 0 5.75rem; color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
  .tabla.ancha td.num { justify-content: flex-start; padding-top: var(--e2); }
}
.talon-linea { padding-top: var(--e3); border-top: 1px solid var(--ln); }
.tabla th { text-align: left; font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); padding: var(--e2) var(--e4) var(--e3) 0; border-bottom: 1px solid var(--bd); white-space: nowrap; letter-spacing: 0.03em; }
.tabla td { padding: var(--e3) var(--e4) var(--e3) 0; border-bottom: 1px solid var(--ln); vertical-align: middle; }
.tabla tbody tr:hover td { background: var(--r2); }
.tabla .num { text-align: right; padding-right: 0; }
.tabla td:first-child { font-weight: 600; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista > li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--ln); }
.lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dato-fuerte { font-weight: 700; }
.apagado { color: var(--tx-2); }
.pequeno { font-size: var(--paso--1); }
.dias { font-weight: 800; }

/* ---------- Pestañas: la activa lleva una raya amarilla ---------- */
.pestanas { display: flex; gap: var(--e2); overflow-x: auto; padding: 2px; margin: -2px; }
.pestana { padding: 0.5rem 1.1rem; background: transparent; color: var(--tx-2); border: 1px solid transparent; border-radius: 99px; font-weight: 600; font-size: var(--paso-0); cursor: pointer; white-space: nowrap; }
.pestana:hover { color: var(--tx); border-color: var(--bd); }
.pestana[aria-selected="true"], .pestana[aria-pressed="true"] { color: var(--fondo); background: var(--tx); border-color: var(--tx); }

.vacio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); padding: var(--e4) 0; max-width: 48ch; }
.vacio p { color: var(--tx-2); }

/* ---------- Tablero de selección ---------- */
.columnas { display: flex; gap: var(--e4); overflow-x: auto; padding: 2px 2px var(--e4); margin: -2px; scroll-snap-type: x proximity; align-items: flex-start; }
.columna { flex: 0 0 16rem; scroll-snap-align: start; background: var(--r1); border: 1px solid var(--ln); border-radius: var(--radio); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e3); min-height: 9rem; }
.columna[data-soltar] { border: 1px dashed var(--tx); background: var(--r3); }
.columna-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); padding: var(--e1) var(--e2) 0; font-weight: 700; font-size: var(--paso-0); }
.columna-titulo span:last-child { color: var(--tx-3); font-weight: 600; }
.papelito {
  background: var(--fondo); color: var(--tx); border: 1px solid var(--bd); border-radius: 1rem; padding: var(--e3) var(--e4);
  display: flex; flex-direction: column; gap: var(--e2); cursor: grab; text-decoration: none; text-align: left; width: 100%;
  transition: border-color 0.2s, translate 0.2s var(--salida);
}
.papelito:hover { border-color: var(--tx); translate: 0 -2px; }
.papelito[data-arrastrando] { opacity: 0.45; cursor: grabbing; }
.papelito-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.papelito strong { line-height: 1.25; font-weight: 700; }

.celdas { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); border-top: 1px solid var(--ln); border-left: 1px solid var(--ln); }
.celda { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.celda[data-marcada] { background: var(--r2); }
.celda strong { line-height: 1.25; }

.zona-soltar { border: 1px dashed var(--bd); border-radius: var(--radio); padding: var(--e5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); transition: border-color 0.2s, background-color 0.2s; }
.zona-soltar[data-sobre] { border-color: var(--tx); background: var(--r3); }

/* ---------- Bandeja y conversación ---------- */
.carta textarea { min-height: 9rem; }
.canal { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 700; font-size: var(--paso--1); }
.chat { display: flex; flex-direction: column; gap: var(--e3); min-height: 14rem; max-height: 58vh; overflow-y: auto; padding-right: var(--e2); }
.burbuja { max-width: 62ch; padding: var(--e3) var(--e4); border-radius: 1.1rem; white-space: pre-wrap; line-height: 1.55; }
.burbuja.sofia { border: 1px solid var(--bd); align-self: flex-start; border-bottom-left-radius: 0.25rem; }
.burbuja.yo { background: var(--tx); color: var(--fondo); align-self: flex-end; border-bottom-right-radius: 0.25rem; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; z-index: 50; right: var(--e4); bottom: var(--e4); display: flex; flex-direction: column; gap: var(--e2); max-width: min(26rem, calc(100vw - 2rem)); }
.toast { background: var(--tx); color: var(--fondo); padding: var(--e3) var(--e4); border-radius: 1rem; font-weight: 600; display: flex; gap: var(--e2); align-items: flex-start; animation: entrar 0.4s var(--salida) both; }
.toast[data-tipo="error"] { background: var(--fondo); color: var(--tx); border: 1px solid var(--tx); }
.toast a { text-decoration: underline; }
/* Los avisos no tapan botones: los clics pasan de largo, salvo el enlace del propio aviso */
.toasts, .toast { pointer-events: none; }
.toast a { pointer-events: auto; }
.carga-pagina { color: var(--tx-2); padding: var(--e6) 0; }

/* ---------- Momento firmado: las tarjetas entran en secuencia ---------- */
@keyframes entrar {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
.entra .hoja { animation: entrar 0.45s var(--salida) both; animation-delay: calc(var(--n, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .lateral, .encabezado-acciones, .toasts, .boton, .principal::before { display: none !important; }
  .hoja { border: 1px solid #999; break-inside: avoid; }
  .tablero { display: block; }
}

/* ---------- Volante de la vacante (se imprime en blanco sobre negro) ---------- */
.volante { background: #000; color: #fff; border: 1px solid var(--bd); border-radius: var(--radio); padding: var(--e6) var(--e5); display: flex; flex-direction: column; gap: var(--e4); max-width: 34rem; position: relative; overflow: hidden; }
.volante .marca-casa { font-size: 0.8rem; }
.volante h2 { font-size: 2.2rem; }
.volante ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--e1); }

/* Imprimir solo el volante de la vacante */
@media print {
  body[data-imprimir="volante"] * { visibility: hidden; }
  body[data-imprimir="volante"] .volante, body[data-imprimir="volante"] .volante * { visibility: visible; }
  body[data-imprimir="volante"] .volante { position: absolute; left: 0; top: 0; width: 100%; max-width: none; background: #fff; color: #000; border-color: #000; }
}

/* ======================= Fase 1: flujo, claridad y accesibilidad ======================= */

/* ---------- Selector compacto de tres opciones (Mensajes) ---------- */
.segmentos { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--bd); border-radius: 1.2rem; }
.segmento { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3rem; padding: 0.35rem 0.25rem; border: 0; border-radius: 0.95rem; background: transparent; color: var(--tx-2); font-weight: 600; font-size: var(--paso--1); line-height: 1.2; cursor: pointer; }
.segmento strong { font-size: 1.1rem; font-weight: 800; color: inherit; }
.segmento:hover { color: var(--tx); }
.segmento[aria-selected="true"] { background: var(--tx); color: var(--fondo); }

/* ---------- Acordeones: configuración y formularios que no se usan a diario ---------- */
details.acordeon { padding: 0; gap: 0; }
details.acordeon > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 3.5rem; padding: var(--e4) var(--e5); cursor: pointer; border-radius: var(--radio); }
details.acordeon > summary::-webkit-details-marker { display: none; }
details.acordeon > summary::after { content: ""; width: 0.65rem; height: 0.65rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; flex: none; transition: rotate 0.25s var(--salida); }
details.acordeon[open] > summary::after { rotate: 225deg; translate: 0 2px; }
details.acordeon > summary h2 { font-size: var(--paso-2); }
details.acordeon > summary small { display: block; color: var(--tx-2); font-size: var(--paso--1); font-weight: 400; margin-top: 0.15rem; }
details.acordeon > .acordeon-cuerpo { display: flex; flex-direction: column; gap: var(--e4); padding: 0 var(--e5) var(--e5); }
details > summary { min-height: 1.5rem; }   /* todo lo que se abre mide al menos 24 px de alto */
details.mini > summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.ejemplo { border: 1px dashed var(--bd); border-radius: 0.9rem; padding: var(--e3) var(--e4); font-size: var(--paso--1); color: var(--tx-2); line-height: 1.55; }
.ejemplo strong { color: var(--tx); }
.enlace-suave { color: var(--tx-2); font-size: var(--paso--1); }
.enlace-suave a { color: var(--tx); font-weight: 700; }

/* ---------- Carga: un esqueleto breve en lugar de una pantalla negra ---------- */
.esqueleto { display: flex; flex-direction: column; gap: var(--e5); opacity: 0; animation: aparecer 0.2s 0.15s forwards; padding-top: var(--e4); }
@keyframes aparecer { to { opacity: 1; } }
.esq { border-radius: 1rem; background: linear-gradient(90deg, var(--r1) 0%, var(--r3) 50%, var(--r1) 100%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.esq-titulo { height: 3.25rem; width: min(26rem, 80%); }
.esq-linea { height: 1.1rem; width: min(34rem, 90%); }
.esq-tarjeta { height: 9rem; border-radius: var(--radio); }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Errores junto al campo, sin depender del color ---------- */
.error-campo { display: flex; align-items: flex-start; gap: var(--e2); color: var(--tx); font-weight: 700; font-size: var(--paso--1); line-height: 1.4; }
.error-campo::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tx); color: var(--fondo); font-size: 0.75rem; font-weight: 800; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--tx); border-style: dashed; outline: 1px solid var(--tx); outline-offset: 1px; }
.resumen-errores { border: 1px solid var(--tx); border-radius: 0.9rem; padding: var(--e3) var(--e4); font-weight: 700; font-size: var(--paso--1); line-height: 1.5; }

/* ---------- Objetivos táctiles de 44 px en pantallas angostas o táctiles ---------- */
@media (max-width: 899px), (pointer: coarse) {
  .boton, .boton.chico, .pestana { min-height: 2.75rem; }
  input, select { min-height: 2.75rem; }
  .opcion { min-height: 2.75rem; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 1.5rem; min-width: 1.5rem; height: 1.5rem; min-height: 1.5rem; flex: none; }
  .papelito { min-height: 2.75rem; }
}
.hoja-nota, .vacio p, .talon-titulo { max-width: 62ch; }

/* ---------- Pantallas muy angostas (320 px): nada se sale de su caja ---------- */
.lista > li { flex-wrap: wrap; }
.lista > li > .crecer { flex: 1 1 10rem; }
@media (max-width: 480px) {
  .chip, .sello { white-space: normal; }
}
@media (max-width: 400px) {
  .chip-demo, #menu-actual { display: none; }
  .menu-boton { padding: 0 0.85rem; }
  .marca-casa { letter-spacing: 0.3em; }
}
.lista > li > .icono + span { flex: 1 1 0; min-width: 0; }

/* ---------- Envío por WhatsApp: estado real y confirmación inmediata ---------- */
.estado-envio { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--paso--1); line-height: 1.5; }
.estado-envio .icono { margin-top: 0.15rem; }
.confirmar-envio { display: flex; flex-direction: column; gap: var(--e3); border: 1.5px solid var(--tx); border-radius: 1rem; padding: var(--e4); }
.confirmar-envio h4 { margin: 0; font-size: var(--paso-1); font-weight: 800; }
.confirmar-envio p { margin: 0; }
.texto-final { border: 1px solid var(--bd); border-radius: 0.8rem; padding: var(--e3) var(--e4); white-space: pre-wrap; max-height: 14rem; overflow: auto; line-height: 1.55; background: var(--sup); }
.qr-caja { width: min(15rem, 100%); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 1rem; padding: var(--e3); }
.qr-caja .qr { width: 100%; height: auto; image-rendering: pixelated; }
.qr-caja p { color: #000; text-align: center; font-size: var(--paso--1); }


/* ======================= Composición fluida, familias de tarjetas y tema ======================= */

/* Densidad: variables que cambian según el ancho del área de trabajo. Primero se afloja el relleno, no la letra. */
.vista { --gap: 1.25rem; --pad: 1.5rem; --gap-seccion: 2.25rem; }
@container principal (max-width: 679px) { .vista { --gap: 1rem; --pad: 1.1rem; --gap-seccion: 1.75rem; } }
@container principal (min-width: 1100px) { .vista { --pad: 1.35rem; } }
@container principal (min-width: 1600px) { .vista { --gap: 1.5rem; --pad: 1.25rem; --gap-seccion: 2.5rem; } }
.rejilla:has(> :nth-child(7)) { --pad: 1.1rem; --gap: 1rem; } /* muchas tarjetas: más compactas por dentro */

/* Familias: las hermanas de una fila se estiran a la altura de la más alta; los formularios no se igualan a la fuerza */
.rejilla > :is(.card-resumen, .card-accion, .card-lista) { align-self: stretch; }
.rejilla > .card-formulario { align-self: start; }
.card-cabeza { display: flex; align-items: flex-start; gap: var(--e2); min-width: 0; }
.card-cabeza h3 { font-size: var(--paso-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.24em; overflow-wrap: anywhere; }
.card-cabeza .marca-estado { margin-top: 0.15rem; }
.card-sello { min-height: 1.9rem; display: flex; align-items: center; }
.card-accion { gap: var(--e3); }
.card-accion > .card-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.card-accion > .card-pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.card-resumen > p { flex: 1 1 auto; }

/* Menú «Más»: la acción principal queda a la vista; las secundarias se abren sin mover la tarjeta */
.mas { position: relative; }
.mas > summary { list-style: none; cursor: pointer; }
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary.boton::before, .mas > summary.boton::after { display: none; }
.mas > summary.boton { padding-right: 1.2rem; }
.mas-lista { position: absolute; right: 0; bottom: calc(100% + 0.4rem); z-index: 6; min-width: 15rem; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; background: var(--fondo); border: 1px solid var(--bd); border-radius: 1rem; }
.mas-lista .boton { justify-content: flex-start; width: 100%; }

/* Listas que aprovechan el ancho: varias columnas cuando caben */
.lista.en-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); column-gap: calc(var(--gap, 1.25rem) * 2); }
.lista.en-columnas > li { border-bottom: 1px solid var(--ln); padding-bottom: var(--e3); }
.lista.en-columnas > li:last-child { padding-bottom: var(--e3); }

/* Tarjetas de distinta altura que rellenan el espacio: las siguientes ocupan el hueco, no se reserva una columna vacía */
.masonry { column-width: 26rem; column-gap: var(--gap, 1.25rem); }
.masonry > * { break-inside: avoid; margin-bottom: var(--gap, 1.25rem); }

/* Personal: encabezado fijo, columnas según el contenido y acciones agrupadas */
.tabla thead th { position: sticky; top: 0; background: var(--fondo); z-index: 2; }
.tabla.ancha td:first-child { min-width: 13rem; }
.tabla.ancha th:last-child, .tabla.ancha td:last-child { width: 1%; white-space: nowrap; }
.grupo-botones { display: inline-flex; }
.grupo-botones > .boton { border-radius: 0; padding: 0.25rem 0.85rem; }
.grupo-botones > .boton::before, .grupo-botones > .boton::after { display: none; }
.grupo-botones > .boton:first-child { border-radius: 99px 0 0 99px; }
.grupo-botones > .boton:last-child { border-radius: 0 99px 99px 0; margin-left: -1.5px; }

/* El volante de la vacante es una pieza de marca: siempre negro con letras blancas, también en el tema claro */
.volante { --fondo: #000; --tx: #fff; --tx-2: #bcbcbc; --tx-3: #a3a3a3; --bd: #707070; --ln: #2a2a2a; background: #000; color: #fff; }

/* Selector de tema: Sistema, Oscuro o Claro */
.tema { display: flex; flex-direction: column; gap: var(--e2); }
.tema-titulo { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); letter-spacing: 0.04em; }
.tema-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--bd); border-radius: 1.2rem; }
.tema-opcion { min-height: 2.5rem; padding: 0 0.25rem; border: 0; border-radius: 0.95rem; background: transparent; color: var(--tx-2); font-weight: 600; font-size: var(--paso--1); cursor: pointer; }
.tema-opcion:hover { color: var(--tx); }
.tema-opcion[aria-pressed="true"] { background: var(--tx); color: var(--fondo); }
html[data-efectivo="claro"] .circulo-mano svg { stroke-width: 2.2; }
.hoja > .card-pie { margin-top: auto; }
.card-accion .talon { margin-top: auto; }
.card-resumen { gap: var(--e3); }
.card-resumen > .lista { flex: 1 1 auto; }

/* Columnas decididas con el ancho real (ver ajustarColumnas): sin filas a medias cuando se puede evitar */
.rejilla.tarjetas[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.masonry[style*="--cols"] { column-count: var(--cols); column-width: auto; }

/* Filtros: fila de píldoras si hay espacio; un desplegable breve si no */
.filtros-compactos { display: none; }
@container principal (max-width: 679px) {
  .filtros-amplios { display: none; }
  .filtros-compactos { display: block; }
  .encabezado { padding-top: 0; }
  .encabezado p { font-size: var(--paso-0); }
}
.filtros-compactos > summary { list-style: none; cursor: pointer; }
.filtros-compactos > summary::-webkit-details-marker { display: none; }
.filtros-compactos .fila-flex { padding-top: var(--e3); }

/* Resúmenes: se reparten el ancho; si una fila queda incompleta, la última tarjeta crece y no deja hueco */
.rejilla.resumenes { display: flex; flex-wrap: wrap; }
.rejilla.resumenes > * { flex: 1 1 18rem; min-width: 0; }

/* ---------- Segunda pasada visual (revisión de capturas) ---------- */

/* Barra lateral: en pantallas bajas se compacta para que el selector de tema y el estado siempre se vean sin desplazarse */
@media (min-width: 900px) and (max-height: 960px) {
  .lateral { padding-block: var(--e5); gap: var(--e4); }
  .lateral-cuerpo { gap: var(--e4); }
  .marca-nombre { font-size: 2.25rem; }
  .nav-item { padding-block: 0.38rem; }
  .aviso-demo { padding: var(--e2) var(--e3); }
  .aviso-demo::before { margin-bottom: var(--e1); }
  .tema { gap: var(--e1); }
  .tema-opcion { min-height: 2.15rem; }
}
@media (min-width: 900px) and (max-height: 740px) {
  .lateral { padding-block: var(--e4); gap: var(--e3); }
  .lateral-cuerpo { gap: var(--e3); }
  .marca-nombre { font-size: 2rem; }
  .nav-item { padding-block: 0.28rem; }
  .nav { gap: 0.1rem; }
  .aviso-demo { font-size: 0.75rem; line-height: 1.35; }
}

/* Acciones del encabezado: no se apoyan sobre las rayas de la marca cuando el encabezado es ancho */
@container principal (min-width: 1250px) { .encabezado-acciones { margin-right: 4.5rem; } }

/* Móvil: los títulos de tarjeta no reservan dos líneas si ya van en una sola columna */
@container principal (max-width: 679px) {
  .card-cabeza h3 { min-height: 0; }
  /* Filas con sello: el texto usa todo el ancho y el sello baja debajo, alineado con el texto */
  .lista > li:has(> .marca-estado) { row-gap: var(--e2); }
  .lista > li:has(> .marca-estado) > .crecer { flex-basis: calc(100% - 11px - var(--e3)); }
  .lista > li:has(> .marca-estado) > .crecer + :is(.sello, .chip, .sellos) { margin-left: calc(11px + var(--e3)); }
  .lista > li > .sellos { flex: 0 1 auto; min-width: 0; }
}

/* Listas con dos columnas más cortas (quién está en qué zona) */
.lista.en-columnas.compacta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.dato-fecha { white-space: nowrap; text-align: right; }

/* Personal: las fechas y el líder no se parten mientras haya espacio; en fichas apiladas el nombre va sobre el cargo */
.tabla.ancha td[data-etiqueta="Líder"], .tabla.ancha td[data-etiqueta="Ingreso"] { white-space: nowrap; }
@container zona (max-width: 899px) {
  .tabla.ancha td:first-child { min-width: 0; }
}

/* Tarjetas en columnas: si la tarjeta resulta angosta, el sello baja bajo el texto (decide el ancho de la tarjeta, no el de la página) */
.masonry > .hoja { container: tarjeta / inline-size; }
@container tarjeta (max-width: 33rem) {
  .lista > li:has(> .marca-estado) { row-gap: var(--e2); }
  .lista > li:has(> .marca-estado) > .crecer { flex-basis: calc(100% - 11px - var(--e3)); }
  .lista > li:has(> .marca-estado) > .crecer + :is(.sello, .chip, .sellos) { margin-left: calc(11px + var(--e3)); }
  .lista > li > .sellos { flex: 0 1 auto; min-width: 0; }
}

/* Chip de tipo y sello de plazo viajan juntos; si no caben, bajan juntos y alineados con el texto */
.sellos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e2); flex: none; }
/* Un botón solo en un grupo conserva la píldora completa */
.grupo-botones > .boton:only-child { border-radius: 99px; margin-left: 0; }

/* ======================= Inspector lateral (un solo patrón) ======================= */
:root { --insp-ancho: clamp(25rem, 27vw, 32rem); }
html.inspector-bloquea { overflow: hidden; }
.inspector-raiz { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.inspector-raiz > * { pointer-events: auto; }
.inspector-velo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); }
html[data-efectivo="claro"] .inspector-velo { background: rgba(0, 0, 0, 0.42); }
.inspector {
  position: fixed; top: var(--insp-top, 1rem); right: 1rem; bottom: 1rem; width: var(--insp-ancho);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--fondo); color: var(--tx); border: 1px solid var(--tx-2); border-radius: var(--radio); outline: none;
  opacity: 0; transform: translateX(3rem);
  transition: transform 0.52s var(--salida), opacity 0.34s ease-out;
  container: insp / inline-size;
}
.inspector.abierto { opacity: 1; transform: none; }
.inspector.cerrando { opacity: 0; transform: translateX(2rem); transition-duration: 0.26s, 0.2s; transition-timing-function: ease-in, ease-in; }
.inspector-raiz[data-modo="hoja"] .inspector { top: 0; right: 0; bottom: 0; width: min(40rem, 100vw); border-radius: var(--radio) 0 0 var(--radio); border-right: 0; }
.inspector-raiz[data-modo="completa"] .inspector { inset: 0; width: auto; border-radius: 0; border: 0; transform: translateY(1rem); }
.inspector-raiz[data-modo="completa"] .inspector.abierto { transform: none; }
.inspector-cabeza { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--ln); }
.inspector-titulo { min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.inspector-kicker { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-2); }
.inspector-titulo h2 { margin: 0; font-size: var(--paso-3); line-height: 1.12; overflow-wrap: anywhere; outline: none; }
.inspector-cerrar { flex: none; }
.inspector-cerrar::before, .inspector-cerrar::after { display: none; }
.inspector-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e4) var(--e5);
  display: flex; flex-direction: column; gap: var(--e4);
  scrollbar-width: thin; scrollbar-color: var(--bd) transparent;
}
.inspector-cuerpo::-webkit-scrollbar { width: 10px; }
.inspector-cuerpo::-webkit-scrollbar-track { background: transparent; }
.inspector-cuerpo::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 99px; border: 3px solid var(--fondo); min-height: 2.5rem; }
.inspector-cuerpo::-webkit-scrollbar-thumb:hover { background: var(--tx-2); }
.inspector-pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: var(--e4) var(--e5); border-top: 1px solid var(--ln); background: var(--fondo); }
.inspector-pie .separar { margin-left: auto; }
.inspector .rejilla-campos { grid-template-columns: minmax(0, 1fr); }
@container insp (min-width: 34rem) { .inspector .rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inspector .ficha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.inspector .ficha-dato { margin: 0; color: var(--tx-2); font-size: var(--paso--1); }

/* En pantallas anchas el panel no tapa la lista: la lista se reacomoda al ancho que queda */
/* El panel lateral ya no estrecha toda la página: solo reserva espacio a su zona (ver reservar() en inspector.js) */
@media (prefers-reduced-motion: reduce) { .inspector, .inspector.cerrando { transition: none; transform: none; } }

/* Fila o tarjeta que se está editando */
.hoja[data-seleccionada] { border-color: var(--tx); }

/* ======================= Campo de fecha y calendario ======================= */
.fecha-campo { position: relative; display: block; }
.fecha-campo .fecha-texto { width: 100%; padding-right: 3.1rem; }
.fecha-boton {
  position: absolute; right: 0.3rem; top: 50%; translate: 0 -50%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.fecha-boton:hover, .fecha-boton[aria-expanded="true"] { background: var(--r3); color: var(--tx); }
.fecha-boton .icono { width: 1.15rem; height: 1.15rem; }
.calendario {
  position: fixed; z-index: 90; width: 19.5rem; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2);
  background: var(--fondo); color: var(--tx); border: 1px solid var(--tx-2); border-radius: 1.1rem;
  animation: cal-entra 0.14s ease-out;
}
@keyframes cal-entra { from { opacity: 0; transform: translateY(-4px); } }
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.cal-mes { display: flex; align-items: center; gap: var(--e2); font-weight: 800; font-size: var(--paso-0); text-transform: capitalize; }
.cal-rayas { display: inline-block; width: 1.5rem; height: 0.5rem; background: url("/rayas-cortas.svg") no-repeat left center / contain; }
.cal-nav { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--bd); border-radius: 50%; background: transparent; color: var(--tx); cursor: pointer; }
.cal-nav:hover { border-color: var(--tx); background: var(--r3); }
.cal-nav .icono { width: 1rem; height: 1rem; }
.cal-rejilla { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; }
.cal-rejilla th { padding: 0.3rem 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--tx-2); text-align: center; border: 0; }
.cal-rejilla td { padding: 0; text-align: center; border: 0; background: none; }
.cal-rejilla td:nth-child(6) { border-left: 1px solid var(--ln); }
.cal-dia {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 50%;
  background: transparent; color: var(--tx); font: inherit; font-size: var(--paso--1); font-weight: 600; cursor: pointer;
  transition: background-color 0.12s;
}
td:nth-child(n+6) > .cal-dia { font-weight: 500; color: var(--tx-2); }
td[data-fuera] > .cal-dia { color: var(--tx-3); font-weight: 400; }
.cal-dia:hover:not(:disabled) { background: var(--r3); border-color: var(--bd); }
.cal-dia[data-hoy] { border-color: var(--tx); }
.cal-dia[data-elegida], .cal-dia[data-elegida]:hover { background: var(--tx); color: var(--fondo); border-color: var(--tx); font-weight: 800; }
.cal-dia:disabled { color: var(--tx-3); text-decoration: line-through; cursor: not-allowed; opacity: 0.6; }
.cal-pie { display: flex; justify-content: space-between; gap: var(--e2); border-top: 1px solid var(--ln); margin-top: var(--e1); padding-top: var(--e2); }
.cal-pie .boton::before, .cal-pie .boton::after { display: none; }
@media (prefers-reduced-motion: reduce) { .calendario { animation: none; } }

/* ======================= Cards compactas ======================= */
/* Plazos: números tabulares y una línea visual común dentro de cada card y fila */
.sello, .chip { font-variant-numeric: tabular-nums; }
.rejilla.tarjetas { --pad: 1.15rem; --gap: 1rem; }
.card-accion { gap: var(--e2); }
.card-accion .talon { margin-top: 0; padding-top: var(--e3); }
.card-accion .talon ul { flex-direction: column; flex-wrap: nowrap; gap: var(--e1); }
.card-accion > .card-pie { padding-top: var(--e1); }
.card-accion .card-cuerpo p { margin: 0; }
.rejilla.tarjetas .card-cabeza h3 { font-size: var(--paso-1); min-height: 2.5em; line-height: 1.25; }

/* ======================= Mensajes: cards compactas y detalle en el inspector ======================= */
.mensaje { gap: var(--e2); }
.mensaje-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.mensaje-plazo { margin-left: auto; display: inline-flex; }
.mensaje-para h3 { margin: 0; font-size: var(--paso-1); line-height: 1.25; overflow-wrap: anywhere; }
.mensaje-para p { margin: 0; }
.mensaje-previa {
  margin: 0; color: var(--tx-2); font-size: var(--paso--1); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em; overflow-wrap: anywhere;
}
.mensaje-aviso { display: flex; align-items: center; gap: var(--e2); margin: 0; font-weight: 700; }
.mensaje .card-pie { justify-content: space-between; }
.pie-aparte { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--e2); }
.detalle-para p { margin: 0; }
.campo-mensaje textarea { min-height: 12rem; line-height: 1.6; resize: vertical; }
.inspector .confirmar-envio { margin-top: var(--e1); }

/* ======================= Acciones de navegación: una sola familia ======================= */
.accion {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: 2.25rem; padding: 0 0.95rem; flex: none;
  border: 1px solid var(--bd); border-radius: 99px; background: transparent; color: var(--tx);
  font: inherit; font-size: var(--paso--1); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.accion::after {
  content: ""; flex: none; width: 1.15rem; height: 0.5rem; background: currentColor;
  -webkit-mask: url("/flecha-larga.svg") no-repeat center / contain; mask: url("/flecha-larga.svg") no-repeat center / contain;
  transition: translate 0.2s var(--salida);
}
.accion:hover { border-color: var(--tx); background: var(--r3); }
.accion:hover::after, .accion:focus-visible::after { translate: 3px 0; }
.accion[data-principal] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.accion[data-principal]:hover { background: var(--tx); opacity: 0.88; }
@media (max-width: 899px), (pointer: coarse) { .accion { min-height: 2.75rem; } }

/* Fila completa seleccionable (vacantes en Hoy): toda la fila es el destino */
.fila-enlace {
  display: flex; align-items: center; gap: var(--e3); min-height: 2.5rem; padding: var(--e2) var(--e2); margin: 0 calc(var(--e2) * -1);
  border-radius: 0.8rem; color: inherit; text-decoration: none; transition: background-color 0.15s;
}
.fila-enlace:hover { background: var(--r3); }
.fila-enlace .crecer { display: flex; flex-direction: column; gap: 0.1rem; }
.fila-enlace > .icono { flex: none; width: 1.1rem; height: 1.1rem; color: var(--tx-2); transition: translate 0.2s var(--salida); }
.fila-enlace:hover > .icono, .fila-enlace:focus-visible > .icono { translate: 3px 0; color: var(--tx); }
.card-resumen .lista > li { padding-block: 0; border-bottom: 0; }
.card-resumen .lista > li + li { border-top: 1px solid var(--ln); }
@media (max-width: 899px), (pointer: coarse) { .fila-enlace { min-height: 2.75rem; } }

/* ======================= Resúmenes de Hoy con mini gráfica ======================= */
.card-resumen { container: resumen / inline-size; gap: 0; }
.resumen-interior { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "cue" "pie"; grid-template-rows: auto 1fr auto; gap: var(--e2) var(--e4); }
.con-grafica .resumen-interior { grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 40%); grid-template-areas: "tit tit" "cue graf" "pie graf"; }
.resumen-titulo { grid-area: tit; margin: 0; }
.resumen-cuerpo { grid-area: cue; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; align-self: start; }
.resumen-pie { grid-area: pie; align-self: end; display: flex; flex-wrap: wrap; gap: var(--e2); padding-top: var(--e1); }
.resumen-grafica { grid-area: graf; min-width: 0; min-height: 0; display: flex; }
.cifra { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.cifra strong { font-size: clamp(1.7rem, 2.1vw, 2.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra span { font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.resumen-contexto { margin: 0; font-size: var(--paso--1); line-height: 1.4; color: var(--tx-2); overflow-wrap: anywhere; }
.resumen-contexto[data-urgente] { color: var(--tx); font-weight: 700; }
.resumen-contexto[data-urgente]::before { content: ""; display: inline-block; width: 3px; height: 0.95em; margin-right: 0.45rem; vertical-align: -0.1em; background: var(--amarillo); transform: skewX(-22deg); border-radius: 1px; }
.card-resumen .lista { flex: 0 1 auto; }

/* Mini gráfica de barras verticales redondeadas: el mismo lenguaje en las tres cards */

/* Avance segmentado de una vacante */
.avance { display: flex; gap: 2px; height: 6px; margin-top: 0.3rem; border-radius: 99px; overflow: hidden; }
html[data-efectivo="claro"] .avance { box-shadow: 0 0 0 1px var(--bd); }

/* Cards angostas: la gráfica baja debajo del resumen, centrada y a todo el ancho, en lugar de quedar apretada al costado */
@container resumen (max-width: 26rem) {
  .con-grafica .resumen-interior { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "cue" "graf" "pie"; grid-template-rows: auto auto auto auto; }
}

/* ======================= Transición Hoy → módulo (View Transitions, con alternativa) ======================= */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: ease-out; }
::view-transition-group(titulo-modulo) { animation-duration: 0.22s; animation-timing-function: var(--salida); }
::view-transition-old(tarjeta-origen) { animation: tarjeta-sale 0.2s ease-out both; }
::view-transition-new(tarjeta-origen) { display: none; }
@keyframes tarjeta-sale { to { opacity: 0; transform: translateY(-3px) scale(1.012); } }
.hoja.elevada { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Ajuste de tamaño: los resúmenes con gráfica conservan la medida exterior que tenían */
.rejilla.resumenes > .hoja { --pad: 1.15rem; }
.resumen-titulo { font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.15; }
.resumen-interior { row-gap: var(--e2); }
.fila-enlace .dato-fuerte { font-size: var(--paso-0); line-height: 1.3; }
.fila-enlace { padding-block: 0.4rem; }
@container resumen (max-width: 22rem) { .fila-enlace > .icono { display: none; } }

/* En cards muy anchas la gráfica no se estira: conserva un ancho cómodo y queda pegada a la derecha */

/* Cards angostas (móvil): resumen más compacto para no crecer */
@container resumen (max-width: 24rem) {
  .cifra strong { font-size: 1.5rem; }
  .resumen-interior { row-gap: 0.35rem; }
}

/* Menú «Más»: se ancla a la card (no al botón), así nunca se sale de la pantalla en móviles angostos */
.card-accion .mas { position: static; }
.card-accion .mas-lista { right: var(--pad, 1.15rem); bottom: calc(var(--pad, 1.15rem) + 2.6rem); min-width: 0; width: min(15rem, calc(100% - 2 * var(--pad, 1.15rem))); }

/* ---------- Pulido tras revisar las capturas ---------- */
/* La barra de la fila seleccionada no tapa la primera letra */
/* Los botones pequeños no llevan el remate de rayas (al pasar el ratón tapaba el texto: «Revis///») */
.boton.chico:not(.carga)::after { display: none; }
/* El mensaje aprovecha la altura del panel */
.inspector .campo-mensaje { flex: 1 1 auto; min-height: 0; }
.inspector .campo-mensaje textarea { flex: 1 1 auto; }

.cal-mes { text-transform: none; }
.cal-nombre { display: inline-block; }
.cal-nombre::first-letter { text-transform: uppercase; }
/* Fila seleccionada en modo ficha: la sangría gana a la regla general de las filas apiladas */

/* ======================= Vista rápida, alturas estables y un solo scroll ======================= */

/* ---------- Barras de desplazamiento: UN solo acento por barra (celeste; amarillo si la superficie tiene el foco) ---------- */
:root {
  --scroll-pista: color-mix(in srgb, var(--tx) 8%, transparent);
  --scroll-pulgar: var(--celeste);
  --scroll-pulgar-foco: var(--amarillo);
}
html[data-efectivo="claro"] {
  --scroll-pulgar: color-mix(in srgb, var(--celeste) 58%, #000);
  --scroll-pulgar-foco: color-mix(in srgb, var(--amarillo) 58%, #000);
}
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-pista); }
.zona-scroll, .inspector-cuerpo, .calendario { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-pista); scrollbar-gutter: stable; }
/* Respaldo para navegadores sin scrollbar-color (Safari, Chrome antiguo) */
.zona-scroll::-webkit-scrollbar, .inspector-cuerpo::-webkit-scrollbar { width: 11px; height: 11px; }
.zona-scroll::-webkit-scrollbar-track, .inspector-cuerpo::-webkit-scrollbar-track { background: var(--scroll-pista); border-radius: 99px; }
.zona-scroll::-webkit-scrollbar-thumb, .inspector-cuerpo::-webkit-scrollbar-thumb { background: var(--scroll-pulgar); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; min-height: 2.5rem; }
.zona-scroll::-webkit-scrollbar-thumb:hover, .inspector-cuerpo::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-pulgar); border-width: 1px; }

/* ---------- Zonas de trabajo: altura según el espacio que queda, no según cuántos registros hay ---------- */
.vista { --zona-max: max(22rem, calc(100dvh - var(--zona-top, 13rem) - 1.5rem)); }
.zona-scroll { min-width: 0; }
.zona-scroll .tabla-caja { margin: 0; padding: 0; }
.zona-scroll tr[data-id] { scroll-margin-top: 3.25rem; scroll-margin-bottom: 1rem; }
@media (min-width: 900px) and (min-height: 520px) {
  .zona-tarjeta { max-height: var(--zona-max); min-height: 0; }
  .zona-tarjeta > .zona-scroll {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
    margin-right: calc(var(--pad, 1.5rem) * -0.55); padding-right: calc(var(--pad, 1.5rem) * 0.55);
  }
  .zona-lista { max-height: var(--zona-max); display: flex; flex-direction: column; min-height: 0; }
  .zona-lista > .zona-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: -4px; padding: 4px 0.6rem 4px 4px; }
}

/* Fechas: la tarjeta principal (con sus tres grupos) y una columna lateral que se baja cuando falta ancho */
.zona-fechas { display: grid; gap: var(--gap, 1.25rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container principal (min-width: 1100px) { .zona-fechas { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); } }
.zona-lateral { display: flex; flex-direction: column; gap: var(--gap, 1.25rem); min-width: 0; }
.grupo + .grupo { margin-top: var(--e5); }
.grupo-titulo { position: sticky; top: 0; z-index: 3; margin: 0; padding: var(--e2) 0 var(--e3); background: var(--fondo); font-size: var(--paso-2); }

/* El panel comparte las líneas de su zona (arriba y abajo) */
.inspector { top: var(--insp-top, 1rem); bottom: var(--insp-bottom, 1rem); }
.inspector-raiz[data-modo="hoja"] .inspector { top: 0; bottom: 0; }

/* Móvil: dvh, zona segura y acciones inferiores siempre a la vista (también con el teclado virtual abierto) */
.inspector-raiz[data-modo="completa"] .inspector { height: 100dvh; max-height: 100dvh; }
.inspector-raiz[data-modo="completa"] .inspector-cabeza { padding-top: calc(var(--e4) + env(safe-area-inset-top, 0px)); touch-action: none; }
.inspector-raiz[data-modo="hoja"] .inspector-cabeza { touch-action: none; }
.inspector-pie { padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Vista rápida de un mensaje ---------- */
.mensaje { transition: opacity 0.2s ease, transform 0.2s var(--salida), border-color 0.2s; }
.mensaje[data-seleccionada] { transform: translateY(-2px); }
.lectura-mensaje {
  margin: 0; padding: var(--e4); border: 1px solid var(--ln); border-radius: 0.9rem; background: var(--sup);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: var(--paso-0);
}
.lectura-asunto { margin: 0; font-weight: 800; font-size: var(--paso-1); overflow-wrap: anywhere; }

/* ---------- Sofía propone una redacción (Mensajes) ---------- */
.bloque-mensaje { display: grid; gap: var(--e2); }
.fila-etiqueta { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 2.1rem; }
.fila-etiqueta .boton { margin-left: auto; }
.nota-cambio { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); color: var(--tx-2); }
.nota-cambio > span { flex: 1 1 12rem; min-width: 0; }
.sugerencia-sofia { display: grid; gap: var(--e3); padding: var(--e4); border: 1px solid var(--bd); border-radius: 1rem; background: var(--sup); animation: sugerencia-entra 0.42s var(--salida) both; }
.sugerencia-sofia h4 { display: flex; align-items: center; gap: var(--e2); margin: 0; font-size: var(--paso-0); font-weight: 800; }
.sugerencia-sofia h4 .icono { width: 1.35em; height: 1.35em; stroke-width: 2.2; }
.sugerencia-sofia .lista { margin: 0; }
.aviso-revision { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; font-weight: 700; }
.aviso-revision .icono { margin-top: 0.15rem; }
@keyframes sugerencia-entra { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Ajustes: ayuda de Sofía ---------- */
.uso-ia { display: grid; gap: var(--e2); }
.medidor { height: 0.55rem; border: 1px solid var(--bd); border-radius: 99px; overflow: hidden; }
.medidor > span { display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(115deg, var(--amarillo) 0 9px, var(--celeste) 9px 18px, var(--beige) 18px 27px); transform-origin: left; animation: medidor-crece 0.9s var(--salida) both; }
@keyframes medidor-crece { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .medidor > span { animation: none; } }
.cita { font-style: italic; overflow-wrap: anywhere; }

/* ---------- Mensajes → Recibidos ---------- */
.ficha-fin { margin-left: auto; }
.a-cargo { display: flex; align-items: center; gap: var(--e2); margin: 0; }
.a-cargo > .icono { width: 1em; height: 1em; }
.segmentos-chico { max-width: min(100%, 24rem); }
.segmentos-chico .segmento { min-height: 2.3rem; }
.segmento[aria-pressed="true"] { background: var(--tx); color: var(--fondo); }
.nota-sugerida { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--e2) var(--e3); margin: 0; color: var(--tx-2); }
.nota-sugerida > span { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 760px) { .segmentos[style*="--n: 6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entrada-wa { margin-top: var(--e3); padding-top: var(--e5); border-top: 1px dashed var(--bd); }
.conv-quien { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; }
.conv-quien > .icono { margin-top: 0.15rem; }
.conv-quien > span { min-width: 0; overflow-wrap: anywhere; }
.conv-seccion { display: grid; gap: var(--e2); }
.conv-quien-caja { display: grid; gap: var(--e3); padding: var(--e4); border: 1px solid var(--ln); border-radius: 0.9rem; background: var(--sup); }
.conv-quien-caja > p { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; }
.conv-quien-caja > p > .icono { margin-top: 0.15rem; }
.resultados-persona { margin: 0; }
.resultados-persona:empty { display: none; }
.hilo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.burbuja { display: grid; gap: var(--e2); max-width: 88%; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem 1rem 1rem 0.25rem; background: var(--sup); overflow-wrap: anywhere; }
.burbuja[data-dir="saliente"] { justify-self: end; border-radius: 1rem 1rem 0.25rem 1rem; border-color: var(--bd); background: transparent; box-shadow: inset 3px 0 0 var(--celeste); }
.burbuja-texto { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.burbuja-hora { justify-self: end; }
.cita-hilo { margin: 0; padding: 0 0 0 var(--e3); border-left: 3px solid var(--beige); color: var(--tx-2); }
.adjunto { display: grid; gap: var(--e2); padding: var(--e3); border: 1px dashed var(--bd); border-radius: 0.8rem; }
.adjunto .fila-flex { align-items: center; }
.elegir-vacante { display: grid; gap: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--ln); }
@media (max-width: 700px) { .burbuja { max-width: 94%; } }
.mensaje.conversacion .mensaje-previa { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lista > li:has(.cita) { align-items: flex-start; }
.lista > li:has(.cita) > .icono { margin-top: 0.22rem; }
@media (prefers-reduced-motion: reduce) { .sugerencia-sofia { animation: none; } }
.inspector .campo-mensaje textarea { overflow: hidden; resize: none; } /* crece con el texto: el único desplazamiento es el del panel */

/* ---------- Calendario como popover temático ---------- */
.fecha-entrada { position: relative; display: block; }
.fecha-lectura { display: block; margin-top: 0.25rem; font-size: var(--paso--1); color: var(--tx-2); }
.fecha-lectura:empty { display: none; }
.calendario { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); max-height: calc(100dvh - 16px); overflow-y: auto; }
html[data-efectivo="claro"] .calendario { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); border-color: var(--bd); }
.cal-dia:hover:not(:disabled) { background: color-mix(in srgb, var(--beige) 30%, transparent); border-color: color-mix(in srgb, var(--beige) 75%, var(--tx)); }
.cal-dia[data-elegida], .cal-dia[data-elegida]:hover { background: var(--celeste); color: #000; border-color: var(--celeste); font-weight: 800; }
html[data-efectivo="claro"] .cal-dia[data-elegida], html[data-efectivo="claro"] .cal-dia[data-elegida]:hover { border-color: #000; }
.cal-dia:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Panel de Fechas: ritmo constante entre campos ---------- */
.inspector .rejilla-campos { gap: var(--e3) var(--e4); }
.inspector .campo-ancho { grid-column: 1 / -1; }
.inspector .campo > span { margin-bottom: 0; }
.inspector .campo small { margin-top: 0.1rem; }
.inspector .intro { margin: 0; color: var(--tx-2); font-size: var(--paso--1); line-height: 1.5; }

.zona-corta { max-height: min(18rem, 34dvh); overflow: auto; overscroll-behavior: contain; padding-right: 0.5rem; }

/* ---------- Ajustes tras revisar las capturas (altura, panel y cabecera) ---------- */
/* El panel lateral un poco más ancho: con 5 acciones en el pie cabe en dos filas, no en tres */
:root { --insp-ancho: clamp(26rem, 29vw, 33rem); }
.inspector-titulo h2 { font-size: clamp(1.3rem, 1.5vw, 1.65rem); }
.inspector-pie { padding-inline: var(--e4); }
.inspector-cabeza, .inspector-cuerpo { padding-inline: var(--e4); }

/* «Ya vencidas» dentro de la tarjeta principal de Fechas: un bloque invertido, igual que la tarjeta urgente de Hoy */
.ya-bloque {
  --fondo: var(--ya-fondo); --sup: var(--ya-sup); --tx: var(--ya-tx); --tx-2: var(--ya-tx-2); --tx-3: var(--ya-tx-3); --ln: var(--ya-ln); --bd: var(--ya-bd); --foco: var(--ya-foco);
  background: var(--ya-fondo); color: var(--ya-tx); border-radius: 1rem; padding: 0 var(--e4) var(--e2); margin-bottom: var(--e5);
}
.ya-bloque .grupo-titulo { background: var(--ya-fondo); margin-inline: calc(var(--e4) * -1); padding-inline: var(--e4); border-radius: 1rem 1rem 0 0; padding-top: var(--e3); }

/* Pantallas bajas: la cabecera se compacta para que la zona de trabajo tenga sitio */
@media (min-width: 900px) and (max-height: 960px) {
  .principal { padding-top: 2.6rem; }
  .encabezado { padding-top: 0; gap: var(--e3); }
  .encabezado-texto { gap: 0.3rem; }
  .encabezado h1 { font-size: clamp(2rem, 3.1vw, 2.9rem); }
  .encabezado p { font-size: var(--paso-0); line-height: 1.4; }
  .vista { --gap-seccion: 1.5rem; }
}

/* ======================= Gráficas hermanas, selección completa y ancho de Personal ======================= */

/* ---------- Tres gráficas, un solo lenguaje: radios, grosores, tipografía y animación comunes ---------- */
:root {
  --g-acento: var(--amarillo);
  --g-secundario: var(--celeste);
  --g-fantasma: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tx) 36%, transparent) 0 1.5px, transparent 1.5px 5px);
}
html[data-efectivo="claro"] {
  --g-acento: color-mix(in srgb, var(--amarillo) 84%, #000);
  --g-secundario: color-mix(in srgb, var(--celeste) 78%, #000);
}
.mini-encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.mini-encabezado strong { font-size: 0.85rem; font-weight: 800; letter-spacing: 0; color: var(--tx); font-variant-numeric: tabular-nums; }
/* Pista fantasma rayada: la parte de un todo se dibuja sobre ella */
/* Datos principales: blanco (oscuro) o negro (claro). Acento dominante: amarillo. Acento secundario: celeste. */
.mini-barra { display: block; min-height: 0; border-radius: 99px; background: var(--tx); transform-origin: 50% 100%; animation: barra-crece 0.55s var(--salida) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.mini-barra[data-tono="acento"] { background: var(--g-acento); }
.mini-barra[data-tono="secundario"] { background: var(--g-secundario); }
.mini-barra[data-tono="base"] { background: var(--g-fantasma); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 30%, transparent); }
@keyframes barra-crece { from { transform: scaleY(0); } }
.avance > i { display: block; min-width: 6px; background: var(--tx); }
.avance > i[data-tono="acento"] { background: var(--g-acento); }
.avance > i[data-tono="secundario"] { background: var(--g-secundario); }

/* Anillo de cobertura (Limpieza) */
.anillo { position: relative; flex: 1 1 auto; min-height: 5rem; display: grid; place-items: center; color: var(--tx); }
.anillo svg { width: min(100%, 9.5rem); height: auto; aspect-ratio: 1; max-height: 100%; overflow: visible; }
.anillo-seg { fill: none; stroke-width: 13; stroke: var(--tx); animation: anillo-dibuja 0.7s var(--salida) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
.anillo-seg.redondo { stroke-linecap: round; }
.anillo-seg[data-estado="pendiente"] { stroke: var(--g-acento); }
.anillo-seg[data-estado="vacio"] { stroke: url(#rayado-anillo); opacity: 0.75; }
@keyframes anillo-dibuja { from { stroke-dasharray: 0 100; } }
.anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.anillo-centro strong { font-size: clamp(1.05rem, 1.3vw, 1.3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.anillo-centro small { margin-top: 0.15rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tx-2); }
@media (prefers-reduced-motion: reduce) { .mini-barra, .anillo-seg { animation: none; } }

/* ---------- Selección de una persona: contorno continuo alrededor de TODA la fila ---------- */
.zona-scroll { position: relative; }
tr[data-seleccionada] > td { background: transparent; }
.marco-fila {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 14px; --c: var(--tx); color: var(--c);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.marco-fila svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.marco-fila rect { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 0; animation: marco-dibuja 0.3s var(--salida) both; }
@keyframes marco-dibuja { from { stroke-dashoffset: 100; } }
.marco-fila[data-tono="amarillo"] { --c: var(--g-acento); }
.marco-fila[data-tono="celeste"] { --c: var(--g-secundario); }
.marco-fila[data-tono="beige"] { --c: color-mix(in srgb, var(--beige) 88%, var(--tx)); }
@media (prefers-reduced-motion: reduce) { .marco-fila rect { animation: none; } }
@media (min-width: 900px) and (min-height: 520px) { .zona-tarjeta > .zona-scroll { margin-left: -0.5rem; padding-left: 0.5rem; } }

/* ---------- La tabla de Personal responde al ancho de su tarjeta ---------- */
.zona-tarjeta { container: zona / inline-size; }
@container zona (min-width: 900px) {
  /* Columna de acciones con ancho propio y margen derecho fijo: «Editar | Renovar» nunca toca ni cruza el borde */
  .tabla.ancha th:last-child, .tabla.ancha td.num { min-width: 12.5rem; padding-right: var(--e3); }
  .tabla.ancha td.num .fila-flex { justify-content: flex-end; }
}
@container zona (min-width: 900px) and (max-width: 1079px) {
  /* Cuando la tabla no alcanza, se oculta la columna menos importante (Ingreso) en vez de comprimir «Renovar» */
  .tabla.ancha th:nth-child(3), .tabla.ancha td:nth-child(3) { display: none; }
}
@container zona (max-width: 679px) {
  .lista > li:has(> .marca-estado) { row-gap: var(--e2); }
  .lista > li:has(> .marca-estado) > .crecer { flex-basis: calc(100% - 11px - var(--e3)); }
  .lista > li:has(> .marca-estado) > .crecer + :is(.sello, .chip, .sellos) { margin-left: calc(11px + var(--e3)); }
  .lista > li > .sellos { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Lo que viene después de una zona ocupa todo el ancho; el panel solo reserva espacio a SU zona ---------- */
.lista.en-columnas[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
html[data-inspector="lateral"] .zona-fechas { grid-template-columns: minmax(0, 1fr); }
html[data-inspector="lateral"] .zona-lateral { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }

.mini-encabezado > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-encabezado > strong { flex: none; }

/* El selector y los avisos largos no se extienden bajo el panel lateral */
.segmentos { max-width: min(100%, calc(var(--n, 3) * 12.7rem)); }
.enlace-suave { max-width: 62ch; }

/* ======================= Alineaciones finas (revisión con la usuaria) ======================= */

/* ---------- Barras de desplazamiento: un color de la marca al azar por superficie (amarillo, celeste o beige) ---------- */
[data-acento="amarillo"] { --scroll-pulgar: var(--amarillo); }
[data-acento="celeste"] { --scroll-pulgar: var(--celeste); }
[data-acento="beige"] { --scroll-pulgar: var(--beige); }
html[data-efectivo="claro"] [data-acento="amarillo"], html[data-efectivo="claro"][data-acento="amarillo"] { --scroll-pulgar: color-mix(in srgb, var(--amarillo) 58%, #000); }
html[data-efectivo="claro"] [data-acento="celeste"], html[data-efectivo="claro"][data-acento="celeste"] { --scroll-pulgar: color-mix(in srgb, var(--celeste) 58%, #000); }
html[data-efectivo="claro"] [data-acento="beige"], html[data-efectivo="claro"][data-acento="beige"] { --scroll-pulgar: color-mix(in srgb, var(--beige) 52%, #000); }

/* ---------- Calendario: mide lo mismo que su campo; los días escalan con su ancho ---------- */
.calendario { container: cal / inline-size; }
.cal-dia { font-size: clamp(0.8125rem, 4.4cqw, 1.0625rem); }
.cal-rejilla th { font-size: clamp(0.7rem, 3.2cqw, 0.8125rem); }

/* ---------- Contrato: la fecha y el sello en dos columnas fijas para que los sellos queden alineados entre filas ---------- */
.contrato-celda { display: grid; grid-template-columns: 10rem auto; align-items: center; column-gap: var(--e3); }
.contrato-celda .sello { min-width: 7.6rem; }
.contrato-fecha { white-space: nowrap; }
@container zona (max-width: 899px) { .contrato-celda { grid-template-columns: auto auto; justify-content: start; } }

/* ---------- Líderes de área: cada ficha se alinea por arriba, así los nombres y los botones quedan en la misma línea ---------- */
.lista.lideres > li { align-items: flex-start; }
.lista.lideres > li .boton { margin-top: 0.1rem; }

/* En la ficha del panel la fecha y el sello van juntos, sin la columna fija de la tabla */
.inspector .contrato-celda { grid-template-columns: auto auto; justify-content: start; }

/* ---------- Pie del panel de un mensaje: cuadrícula de 6 columnas, todo alineado ---------- */
.pie-rejilla { flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e2); }
.pie-celda { display: flex; min-width: 0; }
.pie-celda > .boton { flex: 1 1 auto; width: 100%; min-width: 0; justify-content: center; white-space: nowrap; padding-inline: 0.5rem; }

/* Fechas: la tarjeta principal y la columna lateral terminan en la misma línea (con el panel abierto, la lateral baja y se suelta) */
@container principal (min-width: 1100px) {
  html:not([data-inspector="lateral"]) .zona-fechas > .zona-tarjeta { min-height: var(--lateral-alto, 0px); max-height: max(var(--zona-max), var(--lateral-alto, 0px)); }
}

/* ======================= Confirmación en línea, menú «Más» y buscador de líder ======================= */

/* ---------- Confirmación: el botón pasa a «Confirmar», aparece «Cancelar» y lo que sobra se quita de la fila ---------- */
.boton.confirmando { background: var(--tx); color: var(--fondo); border-color: var(--tx); border-style: solid; }
.boton.confirmando::before, .boton.confirmando::after { display: none; }
.boton.confirmando:hover { opacity: 0.9; }
.inspector-pie .boton.confirmando, .inspector-pie .cancelar-confirmacion { margin-left: 0; min-height: 2.6rem; padding: 0.5rem 1.35rem; font-size: var(--paso-0); }
.grupo-botones > .cancelar-confirmacion::before, .grupo-botones > .cancelar-confirmacion::after { display: none; }

/* ---------- Menú «Más»: se despliega a la derecha de «Más» (una opción con sitio) o hacia arriba (varias, o sin sitio) ---------- */
.card-accion .mas, .mas { position: relative; display: inline-flex; align-items: center; gap: var(--e2); }
.mas-opciones { display: flex; gap: var(--e2); }
.mas-opciones[hidden] { display: none; }
.mas-opciones[data-modo="medir"] { position: absolute; visibility: hidden; white-space: nowrap; }
.mas-opciones[data-modo="lado"] > * { animation: mas-lado 0.2s var(--salida) both; white-space: nowrap; }
@keyframes mas-lado { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .mas-opciones > * { animation: none !important; } }

/* ---------- Buscador de líder: sugerencias entre las personas que ya existen ---------- */
.buscador { position: relative; }
.sugerencias {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 8; margin: 0.3rem 0 0; padding: 0.35rem; list-style: none; max-height: 14rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; background: var(--fondo); border: 1px solid var(--tx-2); border-radius: 1rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  animation: cal-entra 0.14s ease-out;
}
html[data-efectivo="claro"] .sugerencias { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); border-color: var(--bd); }
.sugerencias[hidden] { display: none; }
.sugerencias [role="option"] { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem; cursor: pointer; }
.sugerencias [role="option"]:hover, .sugerencias [role="option"][aria-selected="true"] { background: color-mix(in srgb, var(--tx) 11%, transparent); }
.sugerencias small { color: var(--tx-2); }
.aviso-buscador { margin-top: 0.5rem; padding: var(--e3) var(--e4); border: 1px dashed var(--tx); border-radius: 0.9rem; display: flex; flex-direction: column; gap: var(--e2); }
.aviso-buscador[hidden] { display: none; }
.aviso-buscador p { margin: 0; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .sugerencias { animation: none; } }

/* ======================= Gráficas con plano (eje, rejilla, pistas fantasma) y su emergente ======================= */

/* La gráfica entera es un botón que abre la explicación; tiene su propio fondo para que los números se lean con calma */
.mini-graf { margin: 0; flex: 1; min-width: 0; min-height: 0; max-height: 11.5rem; width: 100%; max-width: 15rem; margin-left: auto; display: flex; flex-direction: column; align-self: stretch; }
.mini-abrir {
  all: unset; box-sizing: border-box; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: var(--e2); padding: 0.6rem 0.65rem 0.55rem;
  border: 1px solid var(--ln); border-radius: 1rem; cursor: pointer; color: var(--tx);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tx) 5%, transparent), color-mix(in srgb, var(--tx) 1.5%, transparent));
  transition: border-color 0.16s, background-color 0.16s, transform 0.16s var(--salida);
}
.mini-abrir.sin-boton { cursor: default; }
button.mini-abrir:hover { border-color: var(--tx-2); background-color: color-mix(in srgb, var(--tx) 4%, transparent); }
button.mini-abrir:active { transform: scale(0.985); }
button.mini-abrir:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.mini-encabezado { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-2); white-space: nowrap; }
.mini-info { flex: none; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: 0.2rem; border: 1px solid var(--tx-2); border-radius: 50%; font-style: normal; font-size: 0.625rem; font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--tx-2); transition: background-color 0.16s, color 0.16s; }
button.mini-abrir:hover .mini-info, button.mini-abrir:focus-visible .mini-info { background: var(--tx); color: var(--fondo); border-color: var(--tx); }

/* El plano: eje a la izquierda, rejilla punteada, pistas fantasma con el valor girado dentro y las etiquetas debajo */
.mini-plano { flex: 1 1 auto; min-height: 4.4rem; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "eje pistas" ". etiquetas"; column-gap: 0.4rem; row-gap: 0.4rem; padding-top: 0.3rem; }
.mini-eje { grid-area: eje; display: flex; flex-direction: column; justify-content: space-between; }
.mini-eje > span { height: 0; display: flex; align-items: center; justify-content: flex-end; font-size: 0.625rem; font-weight: 700; line-height: 1; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.mini-pistas { grid-area: pistas; position: relative; display: flex; justify-content: center; align-items: stretch; gap: 0.28rem; }
.mini-linea { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--tx) 24%, transparent); pointer-events: none; }
.mini-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 2rem; display: flex; justify-content: center; }
.mini-pista { position: relative; width: 100%; display: flex; flex-direction: column; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--tx) 10%, transparent); }
.mini-pista[data-pista] { background: var(--g-fantasma); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 20%, transparent); }
.mini-hueco { display: block; min-height: 0; }
.mini-barra[data-vacia="true"] { flex: 0 0 3px !important; opacity: 0.6; }
/* Los valores van girados y alineados en una misma línea arriba; si la barra llega hasta ahí, se leen sobre ella */
.mini-valor { position: absolute; top: 0.35rem; left: 50%; translate: -50% 0; rotate: 180deg; writing-mode: vertical-rl; font-size: 0.6875rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--tx); white-space: nowrap; pointer-events: none; }
.mini-valor[data-sobre] { color: var(--fondo); }
.mini-valor[data-sobre][data-tono="acento"], .mini-valor[data-sobre][data-tono="secundario"] { color: #000; }
.mini-etiquetas { grid-area: etiquetas; display: flex; justify-content: center; gap: 0.28rem; }
.mini-etiquetas > span { flex: 1 1 0; min-width: 0; max-width: 2rem; text-align: center; font-size: 0.65rem; font-weight: 700; line-height: 1.1; color: var(--tx-2); white-space: nowrap; }

/* Anillo dentro del mismo fondo */
.anillo-plano { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.anillo-plano .anillo { width: 100%; height: 100%; min-height: 4.4rem; }

/* ---------- Emergente que explica la gráfica ---------- */
.emergente {
  padding: 0; border: 1px solid var(--tx-2); border-radius: var(--radio); background: var(--fondo); color: var(--tx);
  width: min(38rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100dvh - 2rem)); overflow: hidden;
  opacity: 0; transform: translateY(0.9rem) scale(0.97); transition: opacity 0.18s ease-out, transform 0.24s var(--salida);
}
.emergente[open] { display: flex; }
.emergente.abierto { opacity: 1; transform: none; }
.emergente.cerrando { opacity: 0; transform: translateY(0.5rem) scale(0.985); transition-duration: 0.14s; }
.emergente::backdrop { background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s ease-out; }
.emergente.abierto::backdrop { opacity: 1; }
.emergente.cerrando::backdrop { opacity: 0; }
html[data-efectivo="claro"] .emergente::backdrop { background: rgba(0, 0, 0, 0.42); }
html:has(dialog.emergente[open]) { overflow: hidden; }
.emergente-caja { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; max-height: inherit; }
.emergente-cabeza { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--ln); }
.emergente-cabeza h2 { margin: 0.25rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.12; outline: none; }
.emergente-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--e4) var(--e5) var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.emergente .explica { margin: 0; line-height: 1.5; color: var(--tx); max-width: 60ch; }
.emergente .explica-pie { margin: 0; font-size: var(--paso--1); line-height: 1.45; color: var(--tx-2); }
.emergente .explica-grafica { display: flex; }
.emergente .mini-graf { max-width: none; max-height: none; margin: 0; height: 16rem; }
.emergente .mini-abrir { padding: 0.9rem 1rem 0.8rem; gap: var(--e3); background: linear-gradient(180deg, color-mix(in srgb, var(--tx) 6%, transparent), color-mix(in srgb, var(--tx) 2%, transparent)); }
.emergente .mini-encabezado { font-size: 0.75rem; }
.emergente .mini-eje > span { font-size: 0.75rem; }
.emergente .mini-pistas, .emergente .mini-etiquetas { gap: 0.5rem; }
.emergente .mini-col, .emergente .mini-etiquetas > span { max-width: 3.4rem; }
.emergente .mini-valor { font-size: 0.875rem; top: 0.5rem; }
.emergente .mini-etiquetas > span { font-size: 0.8125rem; }
.emergente .anillo svg { width: min(100%, 12rem); }
.emergente .anillo-centro strong { font-size: 1.9rem; }
.emergente .anillo-centro small { font-size: 0.8125rem; }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.leyenda li { display: flex; gap: var(--e3); align-items: flex-start; }
.leyenda li > div { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.leyenda strong { font-size: var(--paso-0); }
.leyenda span { font-size: var(--paso--1); line-height: 1.4; color: var(--tx-2); }
.muestra { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.2rem; border-radius: 99px; background: var(--tx); }
.muestra[data-tono="acento"] { background: var(--g-acento); }
.muestra[data-tono="secundario"] { background: var(--g-secundario); }
.muestra[data-tono="base"], .muestra[data-tono="vacio"] { background: var(--g-fantasma); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 40%, transparent); }
@media (max-width: 599px) {
  .emergente { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .emergente-cabeza, .emergente-cuerpo { padding-inline: var(--e4); }
  .emergente .mini-graf { height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .emergente, .emergente::backdrop { transition: none; }
  .emergente { transform: none; }
}

/* Ajustes tras la primera revisión: encabezado más corto, etiquetas que caben y emergente sin cortes */
.mini-abrir { padding-inline: 0.5rem; }
.mini-encabezado { letter-spacing: 0.08em; }
.mini-etiquetas > span { font-size: 0.6rem; letter-spacing: -0.01em; }
.mini-etiquetas, .mini-pistas { gap: 0.25rem; }
.emergente { max-height: min(52rem, calc(100dvh - 2rem)); }
.emergente .mini-graf { height: 14.5rem; }
.emergente .mini-encabezado { letter-spacing: 0.12em; }
.emergente .mini-etiquetas > span { letter-spacing: 0; }

/* Etiquetas y barras: las columnas son un poco más anchas que la barra, así las etiquetas caben sin pisarse */
.mini-abrir { padding-inline: 0.4rem; }
.mini-plano { column-gap: 0.3rem; }
.mini-pistas, .mini-etiquetas { gap: 0.2rem; }
.mini-col, .mini-etiquetas > span { max-width: 2.7rem; }
.mini-pista { max-width: 1.7rem; }
.mini-etiquetas > span { font-size: 0.58rem; }
.emergente .mini-pista { max-width: 3.2rem; }
.emergente .mini-col, .emergente .mini-etiquetas > span { max-width: 4rem; }

/* «Más» hacia arriba: las opciones forman un panel propio, no pastillas sueltas sobre el texto de la card */


/* Barras más pegadas: la columna es apenas más ancha que la barra, lo justo para que quepa la etiqueta */
.mini-col, .mini-etiquetas > span { max-width: 2.3rem; }
.mini-pista { max-width: 1.75rem; }
.emergente .mini-col, .emergente .mini-etiquetas > span { max-width: 3.7rem; }
.emergente .mini-pista { max-width: 3.2rem; }
.emergente-cuerpo:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: -4px; border-radius: 0 0 var(--radio) var(--radio); }

/* ======================= Menú lateral que se puede ocultar: queda una tira con solo los íconos ======================= */
.lateral-colapsar { display: none; }
.tema-opcion .icono { display: none; }
@media (min-width: 900px) {
  .tablero { transition: grid-template-columns 0.26s var(--salida); }
  .lateral { position: sticky; overflow-x: clip; }
  .lateral-colapsar {
    display: inline-grid; place-items: center; position: absolute; top: var(--e4); right: var(--e3); z-index: 2; width: 2.25rem; height: 2.25rem; padding: 0;
    border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; transition: color 0.16s, border-color 0.16s, background-color 0.16s;
  }
  .lateral-colapsar:hover { color: var(--tx); border-color: var(--bd); }
  .lateral-colapsar:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
  .lateral-colapsar .icono { width: 1.25rem; height: 1.25rem; transition: transform 0.26s var(--salida); }

  html[data-menu="icono"] .tablero { grid-template-columns: 5rem minmax(0, 1fr); }
  html[data-menu="icono"] .lateral { padding-inline: 0.6rem; align-items: center; overflow: visible; }
  html[data-menu="icono"] .lateral-colapsar { position: static; margin-top: 0; }
  html[data-menu="icono"] .lateral-colapsar .icono { transform: scaleX(-1); }
  html[data-menu="icono"] .lateral-cabeza { width: 100%; display: flex; justify-content: center; }
  /* La marca se reduce a las tres rayas; el nombre sigue disponible para quien usa lector de pantalla */
  html[data-menu="icono"] .marca { align-items: center; }
  html[data-menu="icono"] .marca > span:not(.marca-casa), html[data-menu="icono"] .marca-resto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-menu="icono"] .lateral-cuerpo { width: 100%; align-items: center; gap: var(--e4); }
  html[data-menu="icono"] .nav { align-items: center; }
  html[data-menu="icono"] .nav-item { position: relative; width: 3rem; height: 3rem; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  html[data-menu="icono"] .nav-item > span:not(.nav-contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-menu="icono"] .nav-item .icono { width: 1.35rem; height: 1.35rem; }
  html[data-menu="icono"] .nav-item .nav-contador { position: absolute; top: 0.05rem; right: 0; min-width: 1.15rem; padding: 0 0.3rem; font-size: 0.625rem; line-height: 1.15rem; box-shadow: 0 0 0 2px var(--lienzo, var(--fondo)); }
  html[data-menu="icono"] .nav-item[aria-current="page"] .nav-contador { background: var(--fondo); color: var(--tx); box-shadow: none; }
  html[data-menu="icono"] .aviso-demo, html[data-menu="icono"] .estado-sofia, html[data-menu="icono"] .tema-titulo { display: none; }
  html[data-menu="icono"] .tema { width: 100%; align-items: center; }
  html[data-menu="icono"] .tema-opciones { display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 1.6rem; }
  html[data-menu="icono"] .tema-opcion { width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  html[data-menu="icono"] .tema-opcion .icono { display: block; width: 1.15rem; height: 1.15rem; }
  html[data-menu="icono"] .tema-opcion > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .tablero, .lateral-colapsar .icono { transition: none; } }


/* Emergente: la X y la tecla Esc son la forma de cerrarlo; la pista «Esc» va junto al botón */
.emergente-cierre { flex: none; display: flex; align-items: center; gap: var(--e2); }
.atajo kbd { display: inline-block; padding: 0.15rem 0.45rem; border: 1px solid var(--bd); border-bottom-width: 2px; border-radius: 0.45rem; font: inherit; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; color: var(--tx-2); }
@media (pointer: coarse) { .atajo { display: none; } }

/* ======================= Gráficas: segunda revisión (centradas, sin rayado confuso, con leyenda) ======================= */
.mini-etiquetas > span { font-size: 0.625rem; letter-spacing: -0.02em; }
/* Selección: las pistas son lisas (el rayado confundía); lo rayado queda solo para «lo que falta» en la base de Mensajes */
.mini-pista[data-pista] { background: color-mix(in srgb, var(--tx) 10%, transparent); box-shadow: none; }

/* Anillo: la leyenda con conteos va junto al dibujo */
.anillo-plano { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; }
.anillo-plano .anillo { flex: 1 1 auto; width: 100%; max-height: 100%; }
.anillo-leyenda { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.7rem; }
.ley { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 700; color: var(--tx-2); white-space: nowrap; }
.ley b { color: var(--tx); font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ley .muestra { width: 0.6rem; height: 0.6rem; margin: 0; }
.muestra[data-tono="persona"] { background: transparent; border: 2px solid var(--tx); }
.anillo-num { font-size: 7.5px; font-weight: 800; fill: var(--fondo); pointer-events: none; }
.anillo-num[data-estado="pendiente"] { fill: #000; }
.anillo-num[data-estado="vacio"] { fill: var(--tx); paint-order: stroke; stroke: var(--fondo); stroke-width: 1.8px; }
.anillo-persona { fill: none; stroke-width: 4; stroke-linecap: round; stroke: color-mix(in srgb, var(--tx) 22%, transparent); }
.anillo-persona[data-lleno="true"] { stroke: var(--tx); }

/* Cards angostas (la gráfica va debajo, a todo el ancho): barras más anchas, centradas y con etiquetas cómodas */
@container resumen (max-width: 26rem) {
  .mini-graf { max-width: 24rem; max-height: 8.25rem; margin-inline: auto; }
  .mini-plano { min-height: 4.6rem; }
  .mini-pistas, .mini-etiquetas { gap: 0.5rem; }
  .mini-col, .mini-etiquetas > span { max-width: 3.4rem; }
  .mini-pista { max-width: 2.3rem; }
  .mini-etiquetas > span { font-size: 0.6875rem; letter-spacing: 0; }
  .mini-eje > span { font-size: 0.6875rem; }
  .anillo-plano { flex-direction: row; gap: var(--e5); }
  .anillo-plano .anillo { flex: none; width: 5.6rem; height: 5.6rem; min-height: 0; }
  .anillo-leyenda { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0.3rem; }
}

/* Selección: cada línea de avance lleva su leyenda de puntos (los mismos colores que la línea) */
.avance { height: 8px; margin-top: 0.35rem; }
.vac-leyenda { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; margin-top: 0.3rem; }
.vac-leyenda .ley-total { font-size: 0.6875rem; font-weight: 700; color: var(--tx-2); }
html[data-efectivo="claro"] .muestra[data-tono="acento"], html[data-efectivo="claro"] .muestra[data-tono="secundario"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

/* Emergente de Limpieza: datos, anillo grande con números y lista de zonas numerada */
.datos-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.dato { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.8rem; border: 1px solid var(--ln); border-radius: 0.9rem; }
.dato strong { font-size: 1.25rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dato span { font-size: 0.75rem; color: var(--tx-2); line-height: 1.3; }
.emergente .anillo-plano { width: 100%; }
.emergente .anillo-plano .anillo { flex: none; width: min(100%, 15rem); height: auto; aspect-ratio: 1; }
.emergente .anillo svg { width: 100%; }
.zonas-lista { list-style: none; margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; display: flex; flex-direction: column; gap: var(--e3); }
.zonas-lista li { display: flex; gap: var(--e3); align-items: center; }
.zonas-lista .num { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tx); color: var(--fondo); font-size: 0.75rem; font-weight: 800; }
.zonas-lista li[data-estado="pendiente"] .num { background: var(--g-acento); color: #000; }
.zonas-lista li[data-estado="vacio"] .num { background: transparent; color: var(--tx); border: 1.5px dashed var(--tx); }
.zonas-lista li > div { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.zonas-lista strong { font-size: var(--paso-0); }
.zonas-lista span { font-size: var(--paso--1); color: var(--tx-2); }
@media (max-width: 599px) { .datos-fila { grid-template-columns: minmax(0, 1fr); } }

/* El anillo del emergente tiene su propio tamaño; la caja se adapta a él */
.emergente .mini-graf:has(.anillo-plano) { height: auto; }
.emergente .anillo-plano .anillo { width: min(100%, 13rem); }
.fila-enlace { padding-block: 0.3rem; }

/* El anillo se ajusta a la altura que le queda en la caja (con la leyenda debajo), nunca la invade */
.anillo-plano .anillo { min-height: 3.6rem; }
.anillo-plano .anillo svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1; }
@container resumen (max-width: 26rem) { .anillo-plano .anillo svg { width: 100%; height: auto; } }
.emergente .anillo-plano .anillo svg { width: 100%; height: auto; max-height: none; }
/* Tamaño fijo y predecible del anillo en las cards (más grande en el emergente) */
.anillo-plano .anillo { flex: none; width: 6.4rem; height: 6.4rem; min-height: 0; max-height: none; }
.anillo-plano .anillo svg { width: 100%; height: auto; max-height: none; }
@container resumen (max-width: 26rem) { .anillo-plano .anillo { width: 5.6rem; height: 5.6rem; } }
.emergente .anillo-plano .anillo { width: min(100%, 13rem); height: auto; aspect-ratio: 1; }
/* Cards angostas: barras más esbeltas y una caja un poco más alta, para que sean barras y no óvalos */
@container resumen (max-width: 26rem) {
  .mini-graf { max-height: 9.4rem; }
  .mini-col, .mini-etiquetas > span { max-width: 3rem; }
  .mini-pista { max-width: 1.9rem; }
}

/* ======================= Lista desplegable propia (todas las listas de elegir) ======================= */
.sel { position: relative; display: block; width: 100%; }
.sel > select.sel-nativo { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.sel-boton {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 2.6rem; padding: 0.5rem 2.2rem 0.5rem 0.9rem; text-align: left; cursor: pointer;
  background: var(--sup); color: var(--tx); border: 1px solid var(--bd); border-radius: 0.8rem; transition: border-color 0.16s, background-color 0.16s;
}
.sel-boton:hover { border-color: var(--tx-2); }
.sel-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
.sel-boton[aria-expanded="true"] { border-color: var(--tx); }
.sel-boton[data-vacio="true"] .sel-texto { color: var(--tx-2); }
.sel-boton[aria-invalid="true"] { border-color: var(--tx); border-style: dashed; outline: 1px solid var(--tx); outline-offset: 1px; }
.sel-boton:disabled { opacity: 0.55; cursor: not-allowed; }
.sel-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-flecha { position: absolute; right: 0.9rem; top: 50%; width: 0.7rem; height: 0.5rem; margin-top: -0.25rem; fill: none; stroke: var(--tx-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--salida), stroke 0.16s; }
.sel-boton[aria-expanded="true"] .sel-flecha { transform: rotate(180deg); stroke: var(--tx); }

.sel-lista {
  position: fixed; z-index: 95; display: flex; flex-direction: column; gap: 2px; padding: 0.35rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); color: var(--tx); border: 1px solid var(--tx-2); border-radius: 1.1rem; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 0; animation: sel-entra 0.15s var(--salida);
  scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-pista);
}
.sel-lista[data-lado="arriba"] { transform-origin: 50% 100%; }
html[data-efectivo="claro"] .sel-lista { border-color: var(--bd); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16); }
@keyframes sel-entra { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.sel-lista[data-lado="arriba"] { animation-name: sel-entra-arriba; }
@keyframes sel-entra-arriba { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
.sel-opcion { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: 0.55rem 0.8rem 0.55rem 1.1rem; border-radius: 0.75rem; cursor: pointer; font-size: var(--paso-0); font-weight: 600; line-height: 1.3; }
.sel-opcion.activa { background: color-mix(in srgb, var(--tx) 11%, transparent); }
.sel-opcion[aria-selected="true"] { font-weight: 800; }
/* La opción elegida lleva la rayita amarilla de la marca */
.sel-opcion[aria-selected="true"]::before { content: ""; position: absolute; left: 0.45rem; top: 50%; width: 3px; height: 0.95em; margin-top: -0.475em; background: var(--amarillo); transform: skewX(-22deg); border-radius: 1px; }
.sel-marca { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sel-opcion[aria-selected="true"] .sel-marca { opacity: 1; }
.sel-opcion[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.sel-grupo { padding: 0.55rem 0.8rem 0.25rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-2); }
@media (prefers-reduced-motion: reduce) { .sel-lista { animation: none; } .sel-flecha { transition: none; } }

.sel-boton { font-weight: 400; }


/* Menú de íconos: debajo del logo se conservan las tres rayas de la marca */
@media (min-width: 900px) {
  /* Con el menú oculto, el logo lleva las tres líneas de la marca POR DETRÁS (como las palabras destacadas), no debajo */
  html[data-menu="icono"] .marca-a { height: auto; padding: 0.22em 0.5em; margin: 0; background: var(--rayas-detras) center / 100% 100% no-repeat; }
  html[data-menu="icono"] .marca-a img { height: 0.72em; width: auto; }
}



/* ======================= «Más»: las opciones son botones sueltos, del mismo tamaño que «Más» y con la misma separación entre todos ======================= */
.card-accion > .card-pie { position: relative; transition: margin-bottom 0.22s var(--salida); }
.card-accion .mas { position: relative; }
.mas-opciones[data-modo="columna"], .mas-opciones[data-modo="abajo"] { position: absolute; z-index: 6; width: max-content; display: flex; align-items: stretch; gap: var(--e2); }
/* Con sitio a la derecha: la primera opción queda en la línea de «Más» y las demás suben, todas con la misma separación */
.mas-opciones[data-modo="columna"] { left: calc(100% + var(--e2)); bottom: 0; flex-direction: column-reverse; }
/* Sin sitio al lado: debajo de la fila de botones, alineadas con su borde izquierdo (la card se alarga lo justo) */
.mas-opciones[data-modo="abajo"] { left: var(--izq-opciones, 0px); top: calc(100% + var(--e2)); flex-direction: column; }
.mas-opciones[data-modo="columna"] > *, .mas-opciones[data-modo="abajo"] > * {
  min-height: var(--alto-opcion, 2.4rem); justify-content: center; white-space: nowrap; background: var(--fondo);
  animation: mas-opcion 0.22s var(--salida) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes mas-opcion { from { opacity: 0; transform: translateX(-10px); } }
/* Con las opciones al lado, el texto que quedaría detrás se angosta para seguir viéndose completo */
.mas-reserva { padding-right: var(--mas-reserva, 0px); }
@media (prefers-reduced-motion: reduce) {
  .mas-opciones[data-modo="columna"] > *, .mas-opciones[data-modo="abajo"] > * { animation: none !important; }
  .card-accion > .card-pie { transition: none; }
}

/* ======================= Mensajes: se nota que cada card se puede abrir ======================= */
.mensaje { cursor: pointer; }
.mensaje:hover { border-color: var(--tx); transform: translateY(-2px); }
.mensaje:hover .card-pie .boton:not(.suave) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx) 18%, transparent); }
.mensaje-plazo { margin-left: auto; }
.abrir-icono {
  flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--bd); border-radius: 50%; color: var(--tx-2);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.22s var(--salida);
}
.abrir-icono .icono { width: 1rem; height: 1rem; transition: transform 0.22s var(--salida); }
.mensaje:hover .abrir-icono, .mensaje:focus-within .abrir-icono { background: var(--tx); color: var(--fondo); border-color: var(--tx); transform: scale(1.06); }
.mensaje:hover .abrir-icono .icono, .mensaje:focus-within .abrir-icono .icono { transform: translate(1px, -1px); }
.mensaje[data-seleccionada] .abrir-icono { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
@media (prefers-reduced-motion: reduce) { .mensaje:hover { transform: none; } .abrir-icono, .abrir-icono .icono { transition: none; } }
/* El ícono de abrir vive en la esquina de la card (no se mezcla con el plazo ni baja de línea) */
.mensaje { --pad: 1.15rem; }
.mensaje-linea { padding-right: 2.4rem; }
.mensaje .abrir-icono { position: absolute; top: calc(var(--pad, 1.15rem) - 0.1rem); right: var(--pad, 1.15rem); margin: 0; }

/* ======================= La «A» de AROMACOM es el logo: sin marco, del mismo tamaño que las letras ======================= */
/* Sobre fondo claro va el logo original; sobre fondo oscuro, la misma «A» con el cuerpo en blanco (las líneas de colores no cambian) */
.marca-casa { display: inline-flex; align-items: baseline; gap: 0.2em; font-size: 1rem; font-weight: 800; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; }
.marca-a { display: inline-block; flex: none; height: 0.72em; margin-right: 0.04em; }
.marca-a img { display: block; height: 100%; width: auto; }
.marca-a .sobre-oscuro, html[data-efectivo="oscuro"] .marca-a .sobre-claro { display: none; }
html[data-efectivo="oscuro"] .marca-a .sobre-oscuro { display: block; }
@media (min-width: 900px) {
  .marca-casa { font-size: 1.3rem; }
  html[data-menu="icono"] .marca-casa { font-size: 2.4rem; }
}

/* ======================= Mensajes: nada se apaga; la card elegida (y la que está bajo el cursor) lleva las tres rayas de la marca por detrás ======================= */
.mensaje { isolation: isolate; overflow: hidden; }
.mensaje::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transform: translateX(12%);
  background: linear-gradient(112deg, transparent 0 72%, var(--amarillo) 72% 76%, transparent 76% 79%, var(--celeste) 79% 83%, transparent 83% 86%, var(--beige) 86% 90%, transparent 90%);
  transition: opacity 0.25s ease, transform 0.45s var(--salida);
}
.mensaje:hover::before { opacity: 0.3; transform: none; }
.mensaje[data-seleccionada]::before { opacity: 0.6; transform: none; }
@media (prefers-reduced-motion: reduce) { .mensaje::before { transition: none; transform: none; } }

/* ======================= Gráficas: el mismo ícono de «abrir» que las cards de Mensajes ======================= */
.mini-info { width: 1.4rem; height: 1.4rem; margin-left: 0.2rem; font-size: 0; }
.mini-info .icono { width: 0.8rem; height: 0.8rem; }


/* ======================= Palabras destacadas: colores de la marca, de tres maneras ======================= */
:root { --voz-amarillo: var(--amarillo); --voz-celeste: var(--celeste); --voz-beige: var(--beige); --voz-negro: var(--tx); }
html[data-efectivo="claro"] {
  /* Como letra sobre fondo claro, los tonos se oscurecen lo justo para leerse (el celeste queda como un azul profundo) */
  --voz-amarillo: color-mix(in srgb, var(--amarillo) 46%, #000);
  --voz-celeste: color-mix(in srgb, var(--celeste) 36%, #0a3d62);
  --voz-beige: color-mix(in srgb, var(--beige) 55%, #000);
}
[data-voz="amarillo"] { --voz: var(--voz-amarillo); --banda: var(--amarillo); }
[data-voz="celeste"] { --voz: var(--voz-celeste); --banda: var(--celeste); }
[data-voz="beige"] { --voz: var(--voz-beige); --banda: var(--beige); }
[data-voz="negro"] { --voz: var(--voz-negro); }
/* 1) la letra de color */
[data-voz-modo="texto"] { color: var(--voz); }
/* 2) el color como resaltador por detrás, con la letra negra */
[data-voz-modo="fondo"] {
  color: #000; padding: 0 0.14em; margin: 0 -0.14em; border-radius: 0.14em; /* sin clonar el relleno: en títulos de varias líneas, cada línea no gana un margen extra y el texto no salta de línea antes de tiempo */
  background: linear-gradient(transparent 10%, color-mix(in srgb, var(--banda) 92%, transparent) 10% 94%, transparent 94%);
}
/* 3) las tres rayas de la marca POR DETRÁS de la palabra, de lado a lado (un poco inclinadas, como las rayas de la marca); la letra no cambia de color */
:root { --rayas-detras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 21 Q50 3 98 9' stroke='%23F6C61E' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2 28 Q50 10 98 16' stroke='%235EC3DD' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2 35 Q50 17 98 23' stroke='%23D9B596' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
[data-voz-modo="rayas"] {
  /* Tres líneas paralelas, limpias y parejas, con el mismo vuelo que las rayas de la esquina de la página: de lado a lado de la palabra, con puntas redondas y un grosor fijo y delgado */
  background: var(--rayas-detras) center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a[data-voz] { font-weight: 800; text-decoration: none; padding: 0 0.15em; margin: 0 -0.15em; border-radius: 0.35em; transition: background-color 0.16s; }
a[data-voz]:hover { background: color-mix(in srgb, var(--voz) 16%, transparent); }
a[data-voz]:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.ya [data-voz] { color: inherit; background: none; }

/* Cards angostas: barras de la gráfica más juntas (la gráfica va a todo el ancho, pero las barras no se separan de más) */
@container resumen (max-width: 26rem) {
  .mini-col, .mini-etiquetas > span { max-width: 2.5rem; }
  .mini-pistas, .mini-etiquetas { gap: 0.3rem; }
}

/* Teléfonos muy angostos: un poco menos de aire arriba y entre bloques, para que el primer contenido asome sin desplazarse */
@media (max-width: 480px) {
  .principal { padding-top: 4.25rem; }
  .vista { --gap-seccion: 1.45rem; }
  .marca-casa { font-size: 0.8rem; }
  .encabezado { padding-top: var(--e2); gap: var(--e3); }
  .encabezado-texto { gap: var(--e2); }
}

/* El navegador no reacomoda el desplazamiento por su cuenta: Sofía ya compensa los cambios de diseño (inspector, listas) y así la página no salta */
html { overflow-anchor: none; }

/* ======================= «Ver mensaje» desde Hoy: foco breve sobre la card (el resto se atenúa un poco, ella palpita y brilla) ======================= */
.zona-lista[data-foco] .mensaje:not([data-destacada]) { opacity: 0.42; }
.mensaje { transition: opacity 0.7s ease, transform 0.2s var(--salida), border-color 0.2s; }
.mensaje[data-destacada] { z-index: 2; border-color: var(--tx); animation: foco-card 4.4s ease-in-out both; }
.mensaje[data-destacada]::before { animation: foco-rayas 4.4s linear both; }
/* Las tres líneas hacen un vuelo suave, como un avioncito de papel: llegan desde abajo, planean un poco y al final suben y salen por arriba */
@keyframes foco-rayas {
  0% { opacity: 0; transform: translate(-6%, 108%) rotate(-3deg); animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
  20% { opacity: 1; transform: translate(0, 0) rotate(0deg); animation-timing-function: ease-in-out; }
  38% { opacity: 1; transform: translate(2.5%, -4%) rotate(0.8deg); animation-timing-function: ease-in-out; }
  56% { opacity: 1; transform: translate(-2%, 2.5%) rotate(-0.6deg); animation-timing-function: ease-in-out; }
  74% { opacity: 1; transform: translate(1.2%, -2%) rotate(0.4deg); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.45); }
  100% { opacity: 0; transform: translate(7%, -115%) rotate(2deg); }
}
@keyframes foco-card {
  0% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; transform: translateY(0) scale(1); }
  10% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarillo) 80%, transparent), 0 0 34px 6px color-mix(in srgb, var(--amarillo) 55%, transparent); transform: translateY(-4px) scale(1.012); }
  24% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--celeste) 70%, transparent), 0 0 18px 2px color-mix(in srgb, var(--celeste) 40%, transparent); transform: translateY(-2px) scale(1.004); }
  38% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--celeste) 85%, transparent), 0 0 34px 6px color-mix(in srgb, var(--celeste) 55%, transparent); transform: translateY(-4px) scale(1.012); }
  52% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--beige) 75%, transparent), 0 0 18px 2px color-mix(in srgb, var(--beige) 45%, transparent); transform: translateY(-2px) scale(1.004); }
  66% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarillo) 85%, transparent), 0 0 34px 6px color-mix(in srgb, var(--amarillo) 55%, transparent); transform: translateY(-4px) scale(1.012); }
  84% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx) 22%, transparent), 0 0 14px 0 color-mix(in srgb, var(--tx) 14%, transparent); transform: translateY(-2px) scale(1); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .zona-lista[data-foco] .mensaje:not([data-destacada]) { opacity: 0.6; }
  .mensaje[data-destacada] { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarillo) 70%, transparent); }
  .mensaje[data-destacada]::before { animation: none; opacity: 0.85; transform: none; }
}

/* Llegar a Mensajes con el foco de «Ver mensaje»: las cards ya están en su sitio desde el primer cuadro */
[data-sin-entrada] .hoja:not([data-destacada]) { animation: none; }

/* Tema oscuro: la palabra que lleva las tres líneas por detrás recibe un contorno oscuro fino en la letra blanca, para que se lea con claridad sobre las líneas */
html:not([data-efectivo="claro"]) [data-voz-modo="rayas"] {
  --contorno: max(1.5px, 0.05em);
  text-shadow: var(--contorno) 0 #000, calc(var(--contorno) * -1) 0 #000, 0 var(--contorno) #000, 0 calc(var(--contorno) * -1) #000,
    calc(var(--contorno) * 0.72) calc(var(--contorno) * 0.72) #000, calc(var(--contorno) * -0.72) calc(var(--contorno) * 0.72) #000,
    calc(var(--contorno) * 0.72) calc(var(--contorno) * -0.72) #000, calc(var(--contorno) * -0.72) calc(var(--contorno) * -0.72) #000,
    0 0 0.16em rgba(0, 0, 0, 0.9);
}

/* ======================= Hoy: tarjetas o calendario ======================= */
.modo-hoy { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--bd); border-radius: 99px; }
.modo-boton { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 99px; background: transparent; color: var(--tx-2); font-weight: 700; font-size: var(--paso--1); cursor: pointer; transition: background-color 0.16s, color 0.16s; }
.modo-boton:hover { color: var(--tx); }
.modo-boton[aria-pressed="true"] { background: var(--tx); color: var(--fondo); }
.modo-boton:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.modo-boton .icono { width: 1.1rem; height: 1.1rem; }
@media (pointer: coarse) { .modo-boton { min-height: 2.75rem; } }
/* Las tarjetas van dentro de un contenedor que no altera el diseño: sus hijos siguen siendo hijos directos de la vista */
.hoy-tarjetas:not([hidden]) { display: contents; }
.hoy-tarjetas[hidden], .hoy-agenda[hidden] { display: none; }
.hoy-tarjetas.entra-modo > * { animation: entra-modo 0.38s var(--salida) both; }
.hoy-agenda.entra-modo { animation: entra-modo 0.38s var(--salida) both; }
@keyframes entra-modo { from { opacity: 0; transform: translateY(12px); } }

/* ---------- El calendario del mes ---------- */
[data-grupo="plazo"] { --g: var(--g-acento); }
[data-grupo="fecha"] { --g: var(--beige); }
[data-grupo="fiesta"] { --g: var(--g-secundario); }
.agenda { container: agenda / inline-size; gap: var(--e3); }
.agenda-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.agenda-cabeza h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; }
.agenda-total { margin: 0; flex: 1 1 auto; color: var(--tx-2); font-size: var(--paso--1); }
.agenda-nav { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }
.agenda-flecha { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--bd); border-radius: 50%; background: transparent; color: var(--tx); cursor: pointer; transition: background-color 0.16s, color 0.16s, border-color 0.16s; }
.agenda-flecha:hover { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.agenda-flecha:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.agenda-flecha .icono { width: 1.1rem; height: 1.1rem; }
.agenda-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: var(--paso--1); color: var(--tx-2); }
.agenda-leyenda li { display: flex; align-items: center; gap: 0.5rem; }
/* La rayita inclinada de la marca marca cada tipo de fecha */
.agenda-leyenda i, .agenda-tick { display: inline-block; flex: none; width: 4px; height: 0.95em; background: var(--g); transform: skewX(-22deg); border-radius: 1px; }
.agenda-rejilla { border: 1px solid var(--ln); border-radius: 1rem; overflow: hidden; }
.agenda-rejilla[data-dir="1"] .agenda-fila { animation: agenda-sig 0.3s var(--salida) both; }
.agenda-rejilla[data-dir="-1"] .agenda-fila { animation: agenda-ant 0.3s var(--salida) both; }
@keyframes agenda-sig { from { opacity: 0; transform: translateX(18px); } }
@keyframes agenda-ant { from { opacity: 0; transform: translateX(-18px); } }
.agenda-semana, .agenda-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-semana span { padding: 0.55rem 0.7rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--tx-2); }
.agenda-fila { border-top: 1px solid var(--ln); }
.agenda-celda { min-width: 0; border-left: 1px solid var(--ln); }
.agenda-celda:first-child { border-left: 0; }
.agenda-dia {
  all: unset; box-sizing: border-box; position: relative; width: 100%; min-height: clamp(5.6rem, 11vh, 8.2rem); padding: 0.45rem 0.5rem; display: flex; flex-direction: column; gap: 0.3rem;
  transition: background-color 0.15s;
}
.agenda-dia:not([data-n="0"]) { cursor: pointer; }
.agenda-dia:hover:not([data-n="0"]), .agenda-dia[aria-expanded="true"] { background: color-mix(in srgb, var(--tx) 7%, transparent); }
.agenda-dia:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: -3px; border-radius: 0.7rem; background: color-mix(in srgb, var(--tx) 6%, transparent); }
.agenda-num { align-self: flex-start; display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.35rem; border-radius: 99px; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-dia[data-hoy] .agenda-num { background: var(--tx); color: var(--fondo); font-weight: 800; }
.agenda-dia[data-fuera] { opacity: 0.5; }
.agenda-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda-ev {
  position: relative; display: block; overflow: hidden; padding: 0.1rem 0.4rem 0.1rem 0.7rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; text-overflow: ellipsis; background: color-mix(in srgb, var(--g) 16%, transparent);
}
.agenda-ev::before { content: ""; position: absolute; left: 0.3rem; top: 50%; width: 3px; height: 0.85em; margin-top: -0.425em; background: var(--g); transform: skewX(-22deg); border-radius: 1px; }
.agenda-mas { padding-left: 0.4rem; font-size: 0.6875rem; font-weight: 700; color: var(--tx-2); }
.agenda-puntos { display: none; flex-wrap: wrap; gap: 3px; }
.agenda-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); }
/* Calendario angosto (celular o ventana chica): cada día muestra puntos de color y el detalle sale al pulsarlo */
@container agenda (max-width: 680px) {
  .agenda-evs { display: none; }
  .agenda-puntos { display: flex; }
  .agenda-dia { min-height: 3.7rem; padding: 0.3rem; align-items: flex-start; }
  .agenda-num { min-width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
  .agenda-semana span { padding-inline: 0.3rem; text-align: center; }
}

/* ---------- Tarjetita de un día (al pasar el cursor): justo debajo del día y del mismo ancho ---------- */
.agenda-pop {
  position: fixed; z-index: 90; box-sizing: border-box; max-height: min(26rem, calc(100dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 0;
  background: var(--fondo); color: var(--tx); border: 1px solid var(--tx-2); border-radius: 1.1rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); outline: none;
  opacity: 0; transform: translateY(-8px) scale(0.96); transform-origin: var(--sale, 50%) 0;
  transition: opacity 0.18s ease-out, transform 0.34s var(--salida);
}
.agenda-pop[data-origen="abajo"] { transform: translateY(8px) scale(0.96); transform-origin: var(--sale, 50%) 100%; }
.agenda-pop.abierto { opacity: 1; transform: none; }
.agenda-pop.cerrando { opacity: 0; transition-duration: 0.12s; }
html[data-efectivo="claro"] .agenda-pop { border-color: var(--bd); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18); }
.agenda-pop:focus-visible { box-shadow: 0 0 0 2px var(--foco, var(--tx)), 0 18px 40px rgba(0, 0, 0, 0.5); }
.agenda-pop-cabeza { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.95rem 0.7rem; }
.agenda-pop-dia { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 0.85rem; background: var(--tx); color: var(--fondo); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.agenda-pop-fecha { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.agenda-pop-fecha strong { font-size: var(--paso-0); line-height: 1.2; }
.agenda-pop-fecha span { font-size: var(--paso--1); color: var(--tx-2); }
.agenda-pop-fecha b { color: var(--tx); font-weight: 800; }
.dia-chip { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.7rem; border: 1px solid var(--bd); border-radius: 99px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.dia-chip::before { content: ""; width: 3px; height: 0.9em; background: var(--amarillo); transform: skewX(-22deg); border-radius: 1px; }
.dia-chip[data-hoy="true"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.agenda-pop-lista { list-style: none; margin: 0; padding: 0 0.95rem 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; }
.agenda-pop-lista li { display: flex; gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--ln); }
.agenda-pop-lista .agenda-tick { margin-top: 0.25rem; }
.agenda-pop-lista strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--paso-0); line-height: 1.3; }
.agenda-pop-lista .agenda-detalle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.agenda-tipo { display: block; margin-bottom: 0.1rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-2); }
.agenda-detalle { display: block; margin-top: 0.1rem; font-size: var(--paso--1); line-height: 1.4; color: var(--tx-2); }
.agenda-ir { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: var(--paso--1); font-weight: 700; color: var(--tx); text-decoration: none; }
.agenda-ir .icono { width: 0.9rem; height: 0.9rem; transition: translate 0.2s var(--salida); }
.agenda-ir:hover .icono, .agenda-ir:focus-visible .icono { translate: 3px 0; }
.agenda-ir:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; border-radius: 4px; }
.agenda-pop-pie {
  all: unset; box-sizing: border-box; position: sticky; bottom: 0; display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.7rem 0.95rem; cursor: pointer;
  border-top: 1px solid var(--ln); background: var(--fondo); font-size: var(--paso--1); font-weight: 700; transition: background-color 0.16s;
}
.agenda-pop-pie .icono { width: 1rem; height: 1rem; transition: rotate 0.3s var(--salida); }
.agenda-pop-pie:hover, .agenda-pop-pie:focus-visible { background: color-mix(in srgb, var(--tx) 7%, var(--fondo)); }
.agenda-pop-pie:hover .icono, .agenda-pop-pie:focus-visible .icono { rotate: 90deg; }
.agenda-pop-pie:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: -3px; }
/* Todo día del mes deja ver que se puede pulsar para agregar algo */
.agenda-mas-dia {
  --mc: var(--amarillo); position: absolute; top: 0.45rem; right: 0.5rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--mc); border-radius: 50%;
  background: color-mix(in srgb, var(--mc) 34%, transparent); color: var(--tx); pointer-events: none;
  transition: background-color 0.2s, transform 0.34s var(--salida), box-shadow 0.25s;
}
.agenda-dia[data-c="1"] .agenda-mas-dia { --mc: var(--celeste); }
.agenda-dia[data-c="2"] .agenda-mas-dia { --mc: var(--beige); }
.agenda-mas-dia .icono { width: 0.85rem; height: 0.85rem; stroke-width: 2.6; }
.agenda-dia:hover .agenda-mas-dia, .agenda-dia:focus-visible .agenda-mas-dia, .agenda-dia[data-activo] .agenda-mas-dia { background: var(--mc); color: #000; transform: rotate(90deg) scale(1.1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc) 30%, transparent); }
@container agenda (max-width: 680px) { .agenda-mas-dia { display: none; } }
@media (pointer: coarse) { .agenda-mas-dia { display: none; } }

/* Nombre del mes como botón: abre la lista de meses y de años */
.agenda-titulo { position: relative; }
.agenda-titulo h2 { margin: 0; }
.agenda-mes-boton, .cal-mes-boton { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; border-radius: 0.8rem; font: inherit; color: inherit; transition: background-color 0.16s; }
.agenda-mes-boton { padding: 0.15rem 0.7rem 0.15rem 0.45rem; margin-left: -0.45rem; }
.agenda-mes-boton:hover, .agenda-mes-boton[aria-expanded="true"], .cal-mes-boton:hover, .cal-mes-boton[aria-expanded="true"] { background: color-mix(in srgb, var(--tx) 8%, transparent); }
.agenda-mes-boton:focus-visible, .cal-mes-boton:focus-visible, .mes-anio:focus-visible, .mes-opcion:focus-visible, .dia-tile:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.agenda-mes-boton > i, .cal-mes-boton > i, .mes-anio > i { flex: none; width: 0.5rem; height: 0.5rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 1px; rotate: 45deg; translate: 0 -2px; transition: rotate 0.3s var(--salida); }
.agenda-mes-boton[aria-expanded="true"] > i, .cal-mes-boton[aria-expanded="true"] > i { rotate: 225deg; translate: 0 2px; }
.agenda-mes-panel {
  position: absolute; z-index: 50; top: calc(100% + 0.5rem); left: -0.45rem; width: min(20.5rem, calc(100vw - 32px)); padding: 0.7rem;
  background: var(--fondo); border: 1px solid var(--tx-2); border-radius: 1.1rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: 1.6rem 0; transition: opacity 0.16s ease-out, transform 0.3s var(--salida);
}
html[data-efectivo="claro"] .agenda-mes-panel { border-color: var(--bd); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18); }
.agenda-mes-panel.abierto { opacity: 1; transform: none; }
.agenda-mes-panel[hidden] { display: none; }

/* ---------- Lista de meses y de años (la usan el calendario de Hoy y el de los formularios) ---------- */
.mes-selector { display: flex; flex-direction: column; gap: 0.6rem; }
.mes-selector.entra { animation: mes-entra 0.3s var(--salida) both; }
@keyframes mes-entra { from { opacity: 0; transform: scale(0.97); } }
.mes-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.mes-anio { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 99px; cursor: pointer; font-size: var(--paso-1); font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color 0.16s; }
.mes-anio:hover { background: color-mix(in srgb, var(--tx) 8%, transparent); }
.mes-rango { cursor: default; }
.mes-rango:hover { background: none; }
.mes-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(2.8rem, auto); gap: 0.35rem; }
.mes-opcion {
  all: unset; box-sizing: border-box; position: relative; display: grid; place-items: center; padding: 0 0.3rem; border: 1px solid transparent; border-radius: 0.85rem; cursor: pointer;
  font-size: var(--paso-0); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.16s, border-color 0.16s, transform 0.2s var(--salida);
}
.mes-opcion:hover:not(:disabled) { background: color-mix(in srgb, var(--beige) 30%, transparent); border-color: color-mix(in srgb, var(--beige) 75%, var(--tx)); transform: translateY(-1px); }
.mes-opcion[aria-current] { border-color: var(--tx); }
.mes-opcion[aria-pressed="true"], .mes-opcion[aria-pressed="true"]:hover { background: var(--celeste); color: #000; border-color: var(--celeste); font-weight: 800; transform: none; }
html[data-efectivo="claro"] .mes-opcion[aria-pressed="true"] { border-color: #000; }
.mes-opcion[data-marca]::after { content: ""; position: absolute; bottom: 0.3rem; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--amarillo); }
.mes-opcion:disabled { color: var(--tx-3); text-decoration: line-through; cursor: not-allowed; opacity: 0.6; }
.mes-selector .cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-mes-boton { padding: 0.25rem 0.65rem; font-weight: 800; font-size: var(--paso-0); }
.cal-mes-boton > i { width: 0.42rem; height: 0.42rem; border-width: 2px; }
.calendario .cal-pie .boton { margin-inline: auto; }
.calendario .mes-selector + .cal-pie { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .hoy-tarjetas.entra-modo > *, .hoy-agenda.entra-modo, .agenda-rejilla .agenda-fila { animation: none !important; }
  .agenda-pop { transition: none; transform: none; }
}

.modo-hoy { background: var(--fondo); }

/* ======================= Foco sobre filas («Ver en Personal» / «Ver en Fechas»): mismo vuelo, con líneas delgadas ======================= */
.zona-scroll[data-foco] :is(tbody tr, li):not([data-destacada]) { opacity: 0.4; }
.zona-scroll :is(tbody tr, li) { transition: opacity 0.7s ease; }
.zona-scroll[data-foco] table { position: relative; z-index: 1; }
.foco-fila { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 14px; opacity: 0; } /* la propia fila recorta: las curvas no se salen de su card */
.foco-fila.activa { opacity: 1; animation: foco-fila-brillo 4.4s ease-in-out both; }
/* Tres curvas finas y redondas que VIAJAN por dentro de la fila: entran por abajo, suben curvándose hacia la derecha y salen casi por la esquina de arriba.
   Cada una es un tramo (una cinta) que se desliza a lo largo de un trazo más largo que la fila; la fila lo recorta, así que nada se sale de su card. */
.foco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.foco-svg path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.55 1.45; stroke-dashoffset: 0.6; }
.foco-svg .a { stroke: var(--amarillo); }
.foco-svg .b { stroke: var(--celeste); }
.foco-svg .c { stroke: var(--beige); }
.foco-fila.activa .foco-svg path { animation: foco-viaje 4.1s cubic-bezier(0.35, 0.1, 0.65, 0.9) both; }
.foco-fila.activa .foco-svg .b { animation-delay: 0.16s; }
.foco-fila.activa .foco-svg .c { animation-delay: 0.32s; }
/* Un solo recorrido continuo (sin frenar a la mitad): la cinta entra, cruza la parte derecha de la fila y sale por la esquina sin cortarse */
@keyframes foco-viaje {
  from { stroke-dashoffset: 0.6; }
  to { stroke-dashoffset: -1; }
}
@keyframes foco-fila-brillo {
  0% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; background: transparent; }
  10% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amarillo) 85%, transparent), 0 0 26px 3px color-mix(in srgb, var(--amarillo) 50%, transparent); background: color-mix(in srgb, var(--amarillo) 9%, transparent); }
  24% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--celeste) 75%, transparent), 0 0 14px 1px color-mix(in srgb, var(--celeste) 35%, transparent); background: color-mix(in srgb, var(--celeste) 6%, transparent); }
  38% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--celeste) 90%, transparent), 0 0 26px 3px color-mix(in srgb, var(--celeste) 50%, transparent); background: color-mix(in srgb, var(--celeste) 9%, transparent); }
  52% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--beige) 80%, transparent), 0 0 14px 1px color-mix(in srgb, var(--beige) 40%, transparent); background: color-mix(in srgb, var(--beige) 7%, transparent); }
  66% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amarillo) 90%, transparent), 0 0 26px 3px color-mix(in srgb, var(--amarillo) 50%, transparent); background: color-mix(in srgb, var(--amarillo) 9%, transparent); }
  84% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tx) 22%, transparent), 0 0 12px 0 color-mix(in srgb, var(--tx) 12%, transparent); background: color-mix(in srgb, var(--tx) 4%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .zona-scroll :is(tbody tr, li) { transition: none; }
  .zona-scroll[data-foco] :is(tbody tr, li):not([data-destacada]) { opacity: 0.6; }
  .foco-fila.activa { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--amarillo) 80%, transparent); }
  .foco-fila.activa .foco-svg path { animation: none; stroke-dashoffset: -0.1; }
}

/* ---------- Panel del día (a la derecha) ---------- */
.agenda-dia[data-activo] { background: color-mix(in srgb, var(--tx) 9%, transparent); box-shadow: inset 0 0 0 2px var(--tx); border-radius: 0.7rem; }
.dia-resumen { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); margin-bottom: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; }
.dia-bloque { position: relative; flex: none; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 0.15rem; width: 4.4rem; height: 4.4rem; border-radius: 1.1rem; background: var(--tx); color: var(--fondo); line-height: 1; }
.dia-bloque b { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dia-bloque small { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.dia-bloque::after { content: ""; position: absolute; right: 0.3rem; bottom: 0.3rem; width: 0.9rem; height: 0.55rem; background: url("/rayas-cortas.svg") no-repeat right bottom / contain; }
.dia-datos { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.agenda-panel-cuenta { margin: 0; font-size: var(--paso--1); color: var(--tx-2); }
.agenda-panel-vacio { margin: 0 0 var(--e4); line-height: 1.5; color: var(--tx-2); }
.dia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.dia-lista li { display: flex; gap: 0.7rem; padding: var(--e3); border: 1px solid var(--ln); border-radius: 1rem; background: color-mix(in srgb, var(--g) 9%, transparent); }
.dia-lista .agenda-tick { margin-top: 0.3rem; }
.dia-item { min-width: 0; display: flex; flex-direction: column; }
.dia-item strong { font-size: var(--paso-1); line-height: 1.25; }
.dia-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: 0.35rem; }
.dia-acciones .agenda-ir { margin-top: 0; }
.dia-lista li[data-nuevo] { animation: dia-nuevo 1.8s ease-out both; }
@keyframes dia-nuevo {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 80%, transparent); background: color-mix(in srgb, var(--g) 28%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; background: color-mix(in srgb, var(--g) 9%, transparent); }
}
/* Agregar una fecha: tres atajos (el tipo) que se despliegan en el formulario completo, sin saltos */
.dia-nueva { display: grid; margin-bottom: var(--e5); }
.dia-atajos, .dia-form { display: grid; transition: grid-template-rows 0.45s var(--salida), opacity 0.3s ease, visibility 0s linear 0s; }
.dia-atajos { grid-template-rows: 1fr; opacity: 1; }
.dia-form { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.45s; }
.dia-nueva[data-abierta] .dia-atajos { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.45s; }
.dia-nueva[data-abierta] .dia-form { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.dia-interior { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
.dia-subtitulo { margin: 0 0 var(--e2); font-size: var(--paso--1); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-2); }
.dia-subtitulo-lista { margin-top: 0; }
.dia-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.dia-tile {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; min-height: 2.9rem; padding: 0.25rem 0.5rem 0.25rem 0.3rem; cursor: pointer;
  border: 1px solid var(--bd); border-radius: 99px; font-size: 0.78rem; font-weight: 700; line-height: 1.15; white-space: nowrap; transition: border-color 0.18s, background-color 0.18s, transform 0.28s var(--salida);
}
.dia-tile-icono { --mc: var(--amarillo); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mc); color: #000; transition: transform 0.34s var(--salida); }
.dia-tile:nth-child(2) .dia-tile-icono { --mc: var(--celeste); }
.dia-tile:nth-child(3) .dia-tile-icono { --mc: var(--beige); }
.dia-tile-icono .icono { width: 1.05rem; height: 1.05rem; }
.dia-tile:hover { border-color: var(--tx); background: color-mix(in srgb, var(--beige) 20%, transparent); transform: translateY(-2px); }
.dia-tile:hover .dia-tile-icono { transform: rotate(90deg) scale(1.08); }

/* El formulario de fechas (panel «Agregar fecha» y panel de un día): opciones como píldoras, con teclado y lector de pantalla de verdad */
.ff { display: flex; flex-direction: column; gap: var(--e4); }
.ff-bloque { min-width: 0; margin: 0; padding: 0; border: 0; }
.ff-etiqueta { display: block; padding: 0; margin-bottom: 0.5rem; font-size: var(--paso--1); font-weight: 700; }
.ff-etiqueta small { margin-left: 0.4rem; font-weight: 400; color: var(--tx-3); }
.ff-pildoras { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ff-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-pildora { position: relative; display: inline-flex; min-width: 0; }
.ff-tres .ff-pildora { display: flex; }
.ff-pildora input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ff-pildora span {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.35rem 0.95rem; border: 1px solid var(--bd); border-radius: 99px;
  font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); text-align: center; transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.22s var(--salida);
}
.ff-pildora .icono { width: 1rem; height: 1rem; flex: none; }
.ff-tres .ff-pildora span { gap: 0.3rem; padding-inline: 0.45rem; white-space: nowrap; font-size: 0.8125rem; }
.ff-pildora:hover span { border-color: var(--tx); color: var(--tx); }
.ff-pildora input:checked + span { background: var(--tx); color: var(--fondo); border-color: var(--tx); font-weight: 800; }
.ff-pildora input:checked + span::after { content: ""; flex: none; width: 0.95rem; height: 0.6rem; background: url("/rayas-cortas.svg") no-repeat center / contain; }
.ff-pildora input:focus-visible + span { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.ff-pildora input:active + span { transform: scale(0.97); }
@media (pointer: coarse) { .ff-pildora span { min-height: 2.75rem; } }
.ff-resumen { position: relative; margin: 0; padding: var(--e3) var(--e3) var(--e3) 1.6rem; border: 1px solid var(--ln); border-radius: 1rem; background: color-mix(in srgb, var(--celeste) 10%, transparent); font-size: var(--paso--1); line-height: 1.55; }
.ff-resumen::before { content: ""; position: absolute; left: 0.75rem; top: 1rem; width: 4px; height: 1.05em; background: var(--celeste); transform: skewX(-22deg); border-radius: 1px; }
@media (prefers-reduced-motion: reduce) {
  .agenda-mes-panel, .agenda-mas-dia, .mes-selector.entra, .dia-atajos, .dia-form, .dia-tile, .dia-tile-icono, .ff-pildora span, .mes-opcion { transition: none; animation: none; }
  .dia-lista li[data-nuevo] { animation: none; }
  .agenda-mes-panel { transform: none; }
}

/* ======================= Notificaciones de Sofía (campana arriba a la izquierda) ======================= */
.lateral-campana {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; margin-left: auto; margin-right: var(--e2);
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; transition: color 0.16s, border-color 0.16s, background-color 0.16s;
}
.lateral-campana:hover, .lateral-campana[aria-expanded="true"] { color: var(--tx); border-color: var(--bd); }
.lateral-campana:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.lateral-campana .icono { width: 1.3rem; height: 1.3rem; transform-origin: 50% 0; }
.lateral-campana[data-nuevas] { color: var(--tx); }
.lateral-campana[data-nuevas] .icono { animation: campana-suena 1.6s var(--salida) 1; }
@keyframes campana-suena { 0% { rotate: 0deg; } 15% { rotate: 16deg; } 30% { rotate: -13deg; } 45% { rotate: 9deg; } 60% { rotate: -5deg; } 100% { rotate: 0deg; } }
.campana-cuenta {
  position: absolute; top: -0.2rem; right: -0.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 99px; background: var(--amarillo); color: #000;
  font-size: 0.625rem; font-weight: 800; line-height: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--lienzo, var(--fondo));
}
.campana-cuenta[hidden] { display: none; }
@media (min-width: 900px) {
  /* A la altura del nombre «Sofía», en la esquina de arriba a la izquierda de la pantalla (no encima de la palabra AROMACOM) */
  .lateral-campana { position: absolute; top: 3.15rem; right: var(--e3); z-index: 2; margin: 0; }
  html[data-menu="icono"] .lateral-campana { position: relative; top: auto; right: auto; }
  html[data-menu="icono"] .lateral-cabeza { flex-direction: column; gap: var(--e3); }
}

/* El panel: una card que sale de la campana */
.noti-panel {
  position: fixed; z-index: 95; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: var(--fondo); color: var(--tx);
  border: 1px solid var(--tx-2); border-radius: 1.25rem; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translate(-0.8rem, -0.6rem) scale(0.97); transform-origin: 1.4rem 0; transition: opacity 0.18s ease-out, transform 0.4s var(--salida);
}
html[data-efectivo="claro"] .noti-panel { border-color: var(--bd); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); }
.noti-panel.abierto { opacity: 1; transform: none; }
.noti-panel.cerrando { opacity: 0; transition-duration: 0.14s; }
.noti-cabeza { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e4) var(--e3); }
.noti-kicker { margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-2); }
.noti-cabeza h2 { margin: 0.15rem 0 0; font-size: 1.6rem; font-weight: 300; line-height: 1.1; outline: none; }
.noti-barra { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: 0 var(--e4) var(--e3); border-bottom: 1px solid var(--ln); font-size: var(--paso--1); color: var(--tx-2); }
.noti-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e3); scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-pista); }
.noti-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.noti-fila { --g: var(--tx-3); }
.noti-fila[data-nivel="urgente"], .noti-aviso[data-nivel="urgente"] { --g: var(--amarillo); }
.noti-fila[data-nivel="importante"], .noti-aviso[data-nivel="importante"] { --g: var(--celeste); }
.noti-fila[data-nivel="ok"], .noti-aviso[data-nivel="ok"] { --g: var(--beige); }
.noti-item {
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; cursor: pointer;
  border: 1px solid var(--ln); border-radius: 1rem; transition: border-color 0.16s, background-color 0.16s;
}
.noti-fila:not([data-leida]) .noti-item { background: color-mix(in srgb, var(--g) 10%, transparent); }
.noti-item:hover { border-color: var(--tx); background: color-mix(in srgb, var(--g) 16%, transparent); }
.noti-item:focus-visible, .noti-aviso-abrir:focus-visible, .noti-aviso-x:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.noti-tick { flex: none; align-self: flex-start; width: 4px; height: 1.5rem; margin: 0.1rem 0.15rem 0 0.2rem; background: var(--g); transform: skewX(-22deg); border-radius: 1px; }
.noti-texto { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.noti-nivel { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-2); }
.noti-nivel b { color: var(--tx); }
.noti-texto strong, .noti-aviso strong { font-size: var(--paso-0); line-height: 1.3; }
.noti-fila[data-leida] .noti-texto strong { font-weight: 600; color: var(--tx-2); }
.noti-detalle { font-size: var(--paso--1); line-height: 1.4; color: var(--tx-2); }
.noti-hora { font-size: 0.75rem; color: var(--tx-3); }
.noti-item .icono { flex: none; width: 1rem; height: 1rem; transition: translate 0.2s var(--salida); }
.noti-item:hover .icono { translate: 3px 0; }
.noti-vacio { margin: 0; padding: var(--e5) var(--e3); line-height: 1.5; text-align: center; color: var(--tx-2); }

/* La tarjeta que aparece un momento arriba a la izquierda cuando llega algo nuevo */
.noti-flota { position: fixed; z-index: 96; top: 0.9rem; left: 0.9rem; width: min(22rem, calc(100vw - 1.8rem)); display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.noti-aviso {
  --g: var(--tx-3); position: relative; overflow: hidden; display: flex; align-items: stretch; gap: 0.7rem; padding: 0.85rem 0.5rem 0.95rem 0.9rem; pointer-events: auto;
  background: var(--fondo); color: var(--tx); border: 1px solid var(--tx-2); border-radius: 1.1rem; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); animation: noti-entra 0.55s var(--salida) both;
}
html[data-efectivo="claro"] .noti-aviso { border-color: var(--bd); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2); }
.noti-aviso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--g); transform-origin: left; animation: noti-tiempo 8s linear both; }
.noti-aviso:hover::after, .noti-aviso:focus-within::after { animation-play-state: paused; }
.noti-aviso.saliendo { animation: noti-sale 0.26s ease-in both; }
@keyframes noti-entra { from { opacity: 0; transform: translate(-1.4rem, -0.8rem) scale(0.95); } }
@keyframes noti-sale { to { opacity: 0; transform: translate(-1rem, -0.4rem) scale(0.96); } }
@keyframes noti-tiempo { to { transform: scaleX(0); } }
.noti-aviso-abrir { all: unset; box-sizing: border-box; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; cursor: pointer; }
.noti-aviso-x { all: unset; box-sizing: border-box; flex: none; align-self: flex-start; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--tx-2); cursor: pointer; transition: background-color 0.16s, color 0.16s; }
.noti-aviso-x:hover { background: color-mix(in srgb, var(--tx) 10%, transparent); color: var(--tx); }
.noti-aviso-x .icono { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .noti-panel, .noti-aviso { animation: none; transition: none; transform: none; }
  .noti-aviso::after { animation: none; transform: scaleX(0.4); }
  .lateral-campana[data-nuevas] .icono { animation: none; }
}

/* ======================= Ajustes del calendario: dentro de su card, cierre con X y tipo libre ======================= */
.agenda-mes-panel { width: min(20.5rem, calc(100cqw - 1.4rem)); }
.agenda-mes-panel .mes-cierre { justify-content: flex-end; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--ln); }
.calendario .cal-pie { flex-wrap: wrap; align-items: center; }
.calendario .cal-pie .mes-cierre { margin-left: auto; }
.calendario .cal-pie .mes-cierre .atajo { margin-right: 0.1rem; }
.agenda-pop-cabeza { padding: 0.7rem 0.85rem 0.6rem; }
.agenda-pop-lista { padding-inline: 0.85rem; gap: 0.55rem; }
.agenda-pop-lista li { padding-top: 0.55rem; }
.agenda-pop-lista .agenda-detalle { -webkit-line-clamp: 1; }
.agenda-pop-lista .agenda-ir { margin-top: 0.15rem; }
.agenda-pop-mas { margin: -0.1rem 0.85rem 0.6rem; font-size: var(--paso--1); color: var(--tx-2); }
.agenda-pop-pie { padding: 0.6rem 0.85rem; }
td:nth-child(n+6) > .cal-dia[data-elegida], td[data-fuera] > .cal-dia[data-elegida] { color: #000; font-weight: 800; }
html[data-efectivo="claro"] td:nth-child(n+6) > .cal-dia[data-elegida], html[data-efectivo="claro"] td[data-fuera] > .cal-dia[data-elegida] { color: #000; }
.ff-libre { display: grid; grid-template-rows: 0fr; margin-top: calc(var(--e4) * -1); opacity: 0; visibility: hidden; transition: grid-template-rows 0.4s var(--salida), margin-top 0.4s var(--salida), opacity 0.25s ease, visibility 0s linear 0.4s; }
.ff-libre-interior { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
.ff:has(input[name="tipo"][value="otra"]:checked) .ff-libre { grid-template-rows: 1fr; margin-top: 0; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .ff-libre { transition: none; } }

/* ======================= Acceso con usuario: entrada, quién eres, salir y contraseñas temporales ======================= */
html[data-acceso] .lateral-cuerpo, html[data-acceso] .lateral-campana, html[data-acceso] .lateral-colapsar, html[data-acceso] .menu-boton, html[data-acceso] .chip-demo { display: none !important; }
html[data-acceso] .tablero { grid-template-columns: minmax(0, 1fr); }
html[data-acceso] .lateral { position: static; height: auto; border-right: 0; padding: var(--e5) var(--e5) 0; }
html[data-acceso] .principal::before { position: fixed; top: -4rem; }
.entrada { max-width: 30rem; margin: clamp(1.5rem, 8vh, 5rem) auto 0; display: flex; flex-direction: column; gap: var(--e4); }
.entrada-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.entrada-tema { display: grid; grid-template-columns: repeat(3, auto); gap: 3px; padding: 3px; border: 1px solid var(--bd); border-radius: 99px; }
.entrada-tema-opcion { min-height: 2rem; padding: 0 0.65rem; border: 0; border-radius: 99px; background: transparent; color: var(--tx-2); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.entrada-tema-opcion:hover { color: var(--tx); }
.entrada-tema-opcion[aria-pressed="true"] { background: var(--tx); color: var(--fondo); }
.entrada-tema-opcion:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
@media (max-width: 480px) {
  .entrada-cabecera { align-items: flex-start; }
  .entrada-tema { grid-template-columns: 1fr; border-radius: 1.1rem; }
  .entrada-tema-opcion { min-width: 5.3rem; }
}
.entrada h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 300; line-height: 1.1; outline: none; }
.entrada p { margin: 0; line-height: 1.5; }
.entrada-error { padding: var(--e3); border: 1px solid var(--tx); border-left: 5px solid var(--amarillo); border-radius: 0.9rem; font-weight: 600; }
.entrada-error[hidden] { display: none; }
.clave-campo { position: relative; display: flex; }
.clave-campo input { flex: 1 1 auto; padding-right: 3rem; }
.clave-ver { position: absolute; right: 0.35rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; transition: color 0.16s, background-color 0.16s; }
.clave-ver:hover, .clave-ver[aria-pressed="true"] { color: var(--tx); background: color-mix(in srgb, var(--tx) 8%, transparent); }
.clave-ver:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.clave-ver .icono { width: 1.2rem; height: 1.2rem; }
.usuario { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e2) var(--e3); border: 1px solid var(--ln); border-radius: 1rem; }
.usuario[hidden] { display: none; }
.usuario-datos { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.usuario-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--paso--1); }
.usuario-rol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--tx-2); }
.usuario-salir { flex: none; }
html[data-menu="icono"] .usuario { flex-direction: column; padding: var(--e2); border-radius: 1.6rem; }
html[data-menu="icono"] .usuario-datos, html[data-menu="icono"] .usuario-salir > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-menu="icono"] .usuario-salir { width: 2.4rem; height: 2.4rem; padding: 0; justify-content: center; border-radius: 50%; }
.clave-temporal { margin: 0; padding: var(--e4); border: 1px dashed var(--tx); border-radius: 1rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; overflow-wrap: anywhere; user-select: all; }
.clave-temporal:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 3px; }
.campo-casilla { display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 600; }

/* El menú lateral se compacta en pantallas bajas */
@media (min-width: 900px) and (max-height: 860px) {
  .lateral { padding-block: var(--e5); gap: var(--e4); }
  .lateral-cuerpo { gap: var(--e4); }
  .estado-sofia { font-size: 0.72rem; line-height: 1.3; }
  .aviso-demo { padding: var(--e2) var(--e3); font-size: 0.75rem; }
  .nav-item { padding-block: 0.42rem; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .nav-item { padding-block: 0.3rem; }
}

/* Mensajes en pantallas muy angostas (320–400 px): el selector de seis vistas, la frase y el aviso se compactan para que la lista empiece a la vista */
@media (max-width: 400px) {
  .segmentos[style*="--n: 6"] .segmento { min-height: 2.75rem; padding-block: 0.2rem; }
  .segmentos[style*="--n: 6"] .segmento strong { font-size: 1rem; }
  .vista > .encabezado + .segmentos[style*="--n: 6"] ~ .enlace-suave { font-size: 0.78rem; line-height: 1.35; }
  .vista > .encabezado:has(+ .segmentos[style*="--n: 6"]) p { font-size: 0.875rem; line-height: 1.4; }
  .vista > .encabezado:has(+ .segmentos[style*="--n: 6"]) h1 { font-size: clamp(1.85rem, 9vw, 2.1rem); }
}

/* ---------- Selección de punta a punta (Entrega 7) ---------- */
.opciones-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--e2) var(--e4); margin-top: var(--e2); }
.segmento .con-aviso { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; }
.segmento .con-aviso > .icono { width: 1em; height: 1em; }
#aviso-duplicado { border-color: var(--tx); }
#bloque-solicitud .rejilla-campos p, #bloque-publicaciones .lista a { overflow-wrap: anywhere; }

/* ---------- Ingreso y expediente (Entrega 8) ---------- */
.puntos { display: flex; flex-direction: column; }
.punto { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3) var(--e4); flex-wrap: wrap; }
.punto > .crecer { flex: 1 1 18rem; min-width: 0; }
.punto-meta { gap: var(--e2); margin-top: var(--e1, 0.25rem); }
.punto-acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.punto-obs { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; overflow-wrap: anywhere; }
.punto[data-seleccionada] { box-shadow: inset 3px 0 0 var(--tx); }
#tabla-lista-ingreso input[type="text"], #tabla-lista-ingreso input:not([type]), #tabla-lista-ingreso select { min-width: 8rem; width: 100%; }
#tabla-lista-ingreso input[type="number"] { width: 5.5rem; }
@media (max-width: 760px) { .punto-acciones { width: 100%; } .punto-acciones .boton { flex: 1 1 8rem; } }
#ingresos-en-curso .ingreso-acciones { margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; }

/* ---------- Inducción del primer mes (Entrega 9) ---------- */
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo > legend { padding: 0; margin-bottom: 0.35rem; font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); letter-spacing: 0.02em; }
.subtitulo { margin: var(--e4) 0 var(--e2); font-size: var(--paso--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-2); }
.inspector .apilar > section:first-of-type > .subtitulo { margin-top: var(--e2); }
.medidor-fino { height: 0.4rem; margin-top: var(--e2); max-width: 28rem; }
.lista-marcable { display: flex; flex-direction: column; gap: var(--e2); max-height: 15rem; overflow-y: auto; padding: var(--e2) var(--e3); border: 1px solid var(--bd); border-radius: 1rem; }
.lista-marcable .opcion, .opciones-etapas .opcion { align-items: flex-start; }
.filtros-induccion { align-items: flex-end; margin-bottom: var(--e3); }
.filtros-induccion .campo { min-width: 12rem; }
.validar-temario { align-items: flex-end; }
.validar-temario .campo { flex: 1 1 16rem; }
.avisos-sesion { display: flex; flex-direction: column; gap: var(--e2); }
.avisos-sesion .chip { height: auto; align-items: flex-start; white-space: normal; text-align: left; line-height: 1.35; padding-block: 0.35rem; }
#tabla-temario input[type="text"], #tabla-temario input:not([type]), #tabla-temario select { min-width: 8rem; width: 100%; }
#tabla-temario input[type="number"] { width: 5.5rem; }
#form-sesion .rejilla-campos { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
#tabla-temario td:first-child { width: 38%; min-width: 15rem; }
@media (max-width: 760px) { #tabla-temario td:first-child { width: auto; min-width: 0; } }

/* ---------- Contratos y evaluaciones (Entrega 10) ---------- */
.aviso-reloj { margin: 0; border: 1px dashed var(--tx); color: var(--tx); border-radius: 0.9rem; padding: var(--e2) var(--e3); font-size: var(--paso--1); line-height: 1.45; }
.aviso-reloj[hidden] { display: none; }
html[data-menu="icono"] .aviso-reloj { display: none; }
#form-ajustes h3.subtitulo { margin-top: var(--e3); }
#atencion-contratos .lista li, #lista-contratos .punto-acciones { align-items: center; }
a.enlace-fila { color: inherit; font-weight: 800; text-decoration: none; }
a.enlace-fila:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ---------- Ayuda con documentos aprobados y citas (Entrega 12) ---------- */
.chat { padding-bottom: 2px; }
.citas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.chat > .citas, .chat > .nota-chat { align-self: flex-start; width: min(100%, 62ch); margin-top: calc(var(--e2) * -1); }
.cita { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--bd); border-radius: 1rem; min-width: 0; }
.cita-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.cita-texto { margin: 0; padding-left: var(--e3); border-left: 3px solid var(--tx); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-chat { margin: 0; }
.documento-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; padding: var(--e3) var(--e4); border: 1px solid var(--bd); border-radius: 1rem; }
#form-prueba .campo, #form-chat .campo { margin: 0; }
.form-pregunta { flex-wrap: nowrap; align-items: center; }
@media (max-width: 600px) { .form-pregunta { flex-wrap: wrap; } .form-pregunta .campo, .form-pregunta .boton { flex: 1 1 100%; } }
#resultado-prueba { margin-top: var(--e3); }

/* ---------- Odoo (Entrega 13) ---------- */
#form-mapa .lista li { flex-wrap: wrap; }
#form-mapa .chico-campo { margin: 0; flex: 0 1 15rem; }
#form-mapa .chico-campo input { width: 100%; }
#lo-que-se-envia li > span { text-align: right; overflow-wrap: anywhere; }
#estado-odoo .grupo-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); justify-content: flex-end; }
#lo-que-se-envia li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--e3); }
.aviso-linea { display: flex; align-items: flex-start; gap: var(--e2); margin-top: var(--e1); font-size: var(--paso--1); line-height: 1.4; }
.aviso-linea .icono { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.1em; }

/* ---------- Reportes (Entrega 14) ---------- */
.kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); }
.kpi { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.15rem; padding: var(--e3) var(--e4); border: 1px solid var(--bd); border-radius: 1rem; min-width: 0; }
.kpi strong { font-size: 1.9rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.kpi span { font-size: var(--paso--1); line-height: 1.3; color: var(--tx-2); }
.kpi small { font-size: 0.78rem; line-height: 1.3; color: var(--tx-2); }
.kpi[data-alerta] { background: var(--tx); border-color: var(--tx); }
.kpi[data-alerta] strong, .kpi[data-alerta] span, .kpi[data-alerta] small { color: var(--fondo); }
#rep-sel-etapas .medidor-fino, #rep-sel-fuentes .medidor-fino { max-width: 16rem; }
#periodos { align-items: center; }

/* Barra lateral en pantallas de poca altura: con más botones en el menú sigue cabiendo sin desplazarse */
@media (min-width: 900px) and (max-height: 820px) {
  .nav-item { padding-block: 0.3rem; }
  .nav { gap: 0.12rem; }
}
.hoja-tabla { container: rep / inline-size; }
/* Las tablas de los reportes se apilan en fichas cuando su tarjeta es angosta (con su propio contenedor, sin tocar las reglas de la tabla de Personal) */
.tabla.reporte td, .tabla.reporte th { padding-right: var(--e4); }
.tabla.reporte tbody td { padding-block: var(--e3); border-bottom: 1px solid var(--ln); vertical-align: top; }
@container rep (max-width: 679px) {
  .tabla.reporte { display: block; }
  .tabla.reporte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla.reporte tbody { display: block; }
  .tabla.reporte tr { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) 0; border-bottom: 1px solid var(--ln); }
  .tabla.reporte td { display: flex; align-items: center; gap: var(--e3); padding: 0; border: 0; }
  .tabla.reporte td[data-etiqueta]::before { content: attr(data-etiqueta); flex: 0 0 8.5rem; color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
}
@media (max-width: 760px) { #periodos .segmento { min-height: 2.75rem; } }