/* Hapwork Comprar 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-app { 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;
}
@media (max-width: 760px) { .principal::before { width: min(64vw, 420px); } }
.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; }

/* La raya de estado: una raya inclinada de la marca */

/* 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)); }
}
/* 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.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); }

.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[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; }
/* Deshabilitado (el atributo disabled): NO se atenúa. Con opacidad la letra blanca quedaba gris sobre gris (3:1 en claro, casi invisible en oscuro).
   Se apaga con el fondo y la letra de la escala de la marca (--tx-3 sobre --sup: más de 6:1 en los dos temas), contorno punteado y sin rayas ni flecha */
.boton:disabled:not(.carga) { opacity: 1; cursor: not-allowed; background: var(--sup); color: var(--tx-3); border-color: var(--bd); border-style: dashed; }
.boton:disabled:not(.carga)::before, .boton:disabled:not(.carga)::after { opacity: 0 !important; }
.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; } }

/* Un chip largo baja de renglón dentro de su tarjeta (nunca se sale por el borde) y, con dos o tres líneas, el texto queda lejos del contorno */
.chip { padding: 0.26rem 0.8rem 0.26rem 0.7rem; font-size: var(--paso--1); font-weight: 600; line-height: 1.4; color: var(--tx-2); max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; border-radius: 1rem; }
/* Un aviso que es una frase (p.chip) o que vive en un panel lateral baja de renglón: nunca se sale por la derecha de su recuadro */
p.chip, .inspector .chip { white-space: normal; max-width: 100%; align-items: flex-start; text-align: left; overflow-wrap: anywhere; }
p.chip { border-radius: 1.1rem; padding-block: 0.3rem; }
p.chip > svg, .inspector .chip > svg { flex: none; margin-top: 0.3em; }
.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); }
/* Fecha y hora: al llegar al icono del calendario o del reloj el foco queda dentro del campo del navegador (:focus-within, no :focus) y el anillo de arriba se apagaba; el anillo se queda en el campo */
input[type="date"]:focus-within, input[type="time"]:focus-within { 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); }
}

.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); }

.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); }

/* ---------- Bandeja y conversación ---------- */

.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.asistente-dice { 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: 100; right: calc(var(--e4) + var(--insp-ocupado, 0px)); bottom: var(--e4); transition: right 0.3s var(--salida); 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, .toast .toast-accion { pointer-events: auto; }
.toast-accion { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* ---------- 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) ---------- */

/* Imprimir solo el volante de la vacante */
@media print {
  body[data-imprimir="volante"] * { visibility: hidden; }
}

/* ======================= 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); }
/* Pestañas con palabras largas («Integraciones», «Documentos», «Conciliación»): en pantallas angostas pasan a dos filas de dos para que ninguna palabra se salga de su botón */

.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; }
}
 .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; }
}
/* A 320–359 px la marca, la campana y el menú no caben en una fila: la marca se compacta para que «Hapwork Comprar» no quede debajo de la campana */
@media (max-width: 359px) {
  .lateral-cabeza, .marca { gap: var(--e2); }
  .lateral-cabeza .marca .marca-casa { font-size: 0.7rem; letter-spacing: 0.12em; }
  .marca-nombre { font-size: 1.3rem; }
  .menu-boton { padding: 0 0.6rem; }
}
.lista > li > .icono + span { flex: 1 1 0; min-width: 0; }

/* ---------- Envío por WhatsApp: estado real y confirmación inmediata ---------- */

.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 > .card-formulario { align-self: start; }

/* 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; }

/* Listas que aprovechan el ancho: varias columnas cuando caben */

/* Tarjetas de distinta altura que rellenan el espacio: las siguientes ocupan el hueco, no se reserva una columna vacía */

/* 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, .fila-flex.grupo-botones { display: inline-flex; column-gap: 0; row-gap: var(--e2); }   /* un grupo es segmentado: sin hueco entre sus botones en la fila; si se apila, sí hay espacio entre filas */
.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 */

/* 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); }

.hoja > .card-pie { margin-top: 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)); }

/* Filtros: fila de píldoras si hay espacio; un desplegable breve si no */

@container principal (max-width: 679px) {

  .encabezado { padding-top: 0; }
  .encabezado p { font-size: var(--paso-0); }
}

/* Resúmenes: se reparten el ancho; si una fila queda incompleta, la última tarjeta crece y no deja hueco */

/* ---------- 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) {

  /* Filas con sello: el texto usa todo el ancho y el sello baja debajo, alineado con el texto */

  .lista > li > .sellos { flex: 0 1 auto; min-width: 0; }
}

/* Listas con dos columnas más cortas (quién está en qué zona) */

/* 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) */

@container tarjeta (max-width: 33rem) {

  .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; overflow-x: hidden; 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 .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); }

/* 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; }

/* ======================= Mensajes: cards compactas y detalle en el inspector ======================= */

.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 */

/* ======================= Resúmenes de Hoy con mini gráfica ======================= */

.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); }

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

/* Avance segmentado de una vacante */

/* Cards angostas: la gráfica baja debajo del resumen, centrada y a todo el ancho, en lugar de quedar apretada al costado */

/* ======================= 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 */

/* 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; }
}

/* Menú «Más»: se ancla a la card (no al botón), así nunca se sale de la pantalla en móviles angostos */

/* ---------- 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 */

.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);
  }
}

/* Fechas: la tarjeta principal (con sus tres grupos) y una columna lateral que se baja cuando falta ancho */

.grupo + .grupo { margin-top: var(--e5); }

/* 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 ---------- */

/* ---------- Hapwork Comprar propone una redacción (Mensajes) ---------- */

@keyframes sugerencia-entra { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Ajustes: ayuda de Hapwork Comprar ---------- */

.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; } }
/* Ajustes → Inteligencia artificial (etapa B): pestañas, tarjetas por proveedor, resultado de la prueba de conexión, tablas y leyenda de la matriz */
.ia-pestanas { --n: 6; }
.ia-pestanas .segmento { min-height: 2.4rem; font-size: var(--paso--1); }
@container principal (max-width: 760px) { .ia-pestanas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container principal (max-width: 420px) { .ia-pestanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ia-panel { margin-top: var(--e3); }
.ia-seccion > h3 { margin: 0; }
.ia-seccion h4 { margin: var(--e2) 0 0; font-size: var(--paso-0); }
.ia-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--e4); align-items: start; }
.ia-tarjeta { display: grid; gap: var(--e2); padding: var(--e4); border: 1px solid var(--bd); border-radius: 0.9rem; background: var(--r1); min-width: 0; }
.ia-tarjeta h4 { margin: 0; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.ia-opciones { display: grid; gap: var(--e1) var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.ia-opciones > .etiqueta, .ia-opciones > legend { grid-column: 1 / -1; }
.ia-opciones .opcion { align-items: center; gap: var(--e1); }
.ia-prueba { display: grid; gap: var(--e2); }
.ia-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e4); margin: 0; }
.ia-datos dt { font-weight: 700; color: var(--tx-2); font-size: var(--paso--1); }
.ia-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ia-tabla td, .ia-tabla th { vertical-align: top; }
.ia-tabla .num { white-space: nowrap; }

@container principal (max-width: 640px) {
  .ia-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ia-tabla tr { display: grid; gap: var(--e1); padding: var(--e2) 0; border-bottom: 1px solid var(--ln); }
  .ia-tabla td { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr; gap: var(--e2); padding: 0; border: 0; text-align: left; }
  .ia-tabla td::before { content: attr(data-etiqueta); font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
  .ia-tabla td:empty { display: none; }
  .ia-tabla tfoot td { font-weight: 700; }
}
.cita { font-style: italic; overflow-wrap: anywhere; }

/* ---------- Mensajes → Recibidos ---------- */

.segmentos-chico { max-width: min(100%, 24rem); }
.segmentos-chico .segmento { min-height: 2.3rem; }
.segmento[aria-pressed="true"] { background: var(--tx); color: var(--fondo); }

@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); }
.prueba-previa { margin-top: var(--e3); padding-top: var(--e5); border-top: 1px dashed var(--bd); }

.prueba-previa .lista li { align-items: flex-start; }
.prueba-previa .lista li > .icono { margin-top: 0.15rem; flex: none; }
.prueba-previa .lista li > span { min-width: 0; overflow-wrap: anywhere; }

.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; }

.adjunto { display: grid; gap: var(--e2); padding: var(--e3); border: 1px dashed var(--bd); border-radius: 0.8rem; }
.adjunto .fila-flex { align-items: center; }

@media (max-width: 700px) { .burbuja { max-width: 94%; } }
.lista > li:has(.cita) { align-items: flex-start; }
.lista > li:has(.cita) > .icono { margin-top: 0.22rem; }

 /* 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 > span { margin-bottom: 0; }
.inspector .campo small { margin-top: 0.1rem; }

/* ---------- 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 */

/* 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);
}

/* 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. */

@keyframes barra-crece { from { transform: scaleY(0); } }

/* Anillo de cobertura (Limpieza) */

@keyframes anillo-dibuja { from { stroke-dasharray: 0 100; } }

/* ---------- Selección de una persona: contorno continuo alrededor de TODA la fila ---------- */
.zona-scroll { position: relative; }
tr[data-seleccionada] > td { background: transparent; }

@keyframes marco-dibuja { from { stroke-dashoffset: 100; } }

@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 > .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 ---------- */

/* 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 ---------- */

/* ---------- Líderes de área: cada ficha se alinea por arriba, así los nombres y los botones quedan en la misma línea ---------- */

/* En la ficha del panel la fecha y el sello van juntos, sin la columna fija de la tabla */

/* ---------- Pie del panel de un mensaje: cuadrícula de 6 columnas, todo alineado ---------- */

/* Fechas: la tarjeta principal y la columna lateral terminan en la misma línea (con el panel abierto, la lateral baja y se suelta) */

/* ======================= 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) ---------- */
 .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); }

@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 */

/* El plano: eje a la izquierda, rejilla punteada, pistas fantasma con el valor girado dentro y las etiquetas debajo */

/* Los valores van girados y alineados en una misma línea arriba; si la barra llega hasta ahí, se leen sobre ella */

/* Anillo dentro del mismo fondo */

/* ---------- 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; }

.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); }
}
@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 */

.emergente { max-height: min(52rem, calc(100dvh - 2rem)); }

/* Etiquetas y barras: las columnas son un poco más anchas que la barra, así las etiquetas caben sin pisarse */

/* «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 */

.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-app, 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) ======================= */

/* Selección: las pistas son lisas (el rayado confundía); lo rayado queda solo para «lo que falta» en la base de Mensajes */

/* Anillo: la leyenda con conteos va junto al dibujo */

.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); }

/* Cards angostas (la gráfica va debajo, a todo el ancho): barras más anchas, centradas y con etiquetas cómodas */

/* Selección: cada línea de avance lleva su leyenda de puntos (los mismos colores que la línea) */

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 */

.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; }

/* El anillo del emergente tiene su propio tamaño; la caja se adapta a él */

/* El anillo se ajusta a la altura que le queda en la caja (con la leyenda debajo), nunca la invade */

/* Tamaño fijo y predecible del anillo en las cards (más grande en el emergente) */

/* Cards angostas: barras más esbeltas y una caja un poco más alta, para que sean barras y no óvalos */

/* ======================= 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 ======================= */

.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; }
}

/* ======================= 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; }
}

/* ======================= Gráficas: el mismo ícono de «abrir» que las cards de Mensajes ======================= */

/* ======================= 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 DEBAJO de la palabra, de lado a lado (un poco curvadas, como las rayas de la marca); la letra no cambia de color ni la cruzan las líneas */
:root { --rayas-bajo: 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 7 Q50 0 98 3' stroke='%23F6C61E' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2 20 Q50 13 98 16' stroke='%235EC3DD' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2 33 Q50 26 98 29' stroke='%23D9B596' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
[data-voz-modo="rayas"] {
  /* Una banda de 0,22 em justo debajo de la línea de base: la letra (que se apoya en la base) queda libre y solo las «y», «p» o «g» la tocan; no sube al renglón siguiente */
  padding-bottom: 0.34em;   /* la banda (0,2 em al fondo de este relleno) queda bajo el alcance de las descendentes («p», «q», «y»): no las cruza */
  background: var(--rayas-bajo) left bottom / 100% 0.2em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Solo los títulos con una palabra decorada (ninguno más): aire bajo el título para el texto de debajo, y más altura entre líneas en pantalla angosta, donde la banda de la palabra cruza la línea siguiente */
h1:has([data-voz-modo="rayas"]), h2:has([data-voz-modo="rayas"]), h3:has([data-voz-modo="rayas"]) { padding-bottom: 0.5em; }
@media (max-width: 480px) { h1:has([data-voz-modo="rayas"]), h2:has([data-voz-modo="rayas"]), h3:has([data-voz-modo="rayas"]) { line-height: 1.5; } }
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) */

/* 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: Hapwork Comprar ya compensa los cambios de diseño (inspector, listas) y así la página no salta */
html { overflow-anchor: 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; }

/* ======================= Hoy: tarjetas o calendario ======================= */

/* Las tarjetas van dentro de un contenedor que no altera el diseño: sus hijos siguen siendo hijos directos de la vista */

@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); }

/* La rayita inclinada de la marca marca cada tipo de fecha */

@keyframes agenda-sig { from { opacity: 0; transform: translateX(18px); } }
@keyframes agenda-ant { from { opacity: 0; transform: translateX(-18px); } }

/* Calendario angosto (celular o ventana chica): cada día muestra puntos de color y el detalle sale al pulsarlo */

/* ---------- Tarjetita de un día (al pasar el cursor): justo debajo del día y del mismo ancho ---------- */

/* Todo día del mes deja ver que se puede pulsar para agregar algo */

/* Nombre del mes como botón: abre la lista de meses y de años */

 .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; }

 .cal-mes-boton:hover, .cal-mes-boton[aria-expanded="true"] { background: color-mix(in srgb, var(--tx) 8%, transparent); }
 .cal-mes-boton:focus-visible, .mes-anio:focus-visible, .mes-opcion:focus-visible{ outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
 .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); }
 .cal-mes-boton[aria-expanded="true"] > i { rotate: 225deg; translate: 0 2px; }

/* ---------- 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; }

/* ======================= 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; }
 /* la propia fila recorta: las curvas no se salen de su card */

/* 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. */

/* 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; }
}

/* ---------- Panel del día (a la derecha) ---------- */

@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 */

/* 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 */

@media (prefers-reduced-motion: reduce) {
   .mes-selector.entra, .mes-opcion { transition: none; animation: none; }
}

/* ======================= Notificaciones de Hapwork Comprar (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 «Hapwork Comprar», 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 ======================= */

.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; }

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; }

/* ======================= 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: 0; }
.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) {
  /* en el móvil las tres opciones quedan en una sola fila, a todo el ancho, debajo de la marca (antes se apilaban y quedaban altas y angostas) */
  .entrada-cabecera { flex-wrap: wrap; row-gap: var(--e3); }
  .entrada-tema { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entrada-tema-opcion { min-width: 0; min-height: 2.5rem; padding: 0 0.35rem; }
}
.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 { font-size: var(--paso--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-rol { overflow-wrap: break-word; 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-app { 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) ---------- */

#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-acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

.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; } }

/* ---------- 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; }

#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; }

/* ---------- Ayuda con documentos aprobados y citas (Entrega 12) ---------- */
.chat { padding-bottom: 2px; }

.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; }

#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; }

#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); }
/* Odoo · traspaso de la contratación (chat 4): cada dato con su valor, su campo en Odoo y de dónde viene; el estado (lo que dijo Odoo) a la derecha */
#operacion-ver #lo-que-se-envia li, #contrato-se-envia li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--e3); }

#requisitos-odoo > li { align-items: flex-start; }
#requisitos-odoo > li[data-ok="false"] > .icono { color: var(--ambar); }
#prueba-real summary { cursor: pointer; }
/* En celular o con el dedo, «Lo que pedirá el Odoo de Aromacom» se toca cómodo: al menos 44 px de alto con su relleno (sin perder el triángulo) */
@media (max-width: 899px), (pointer: coarse) { #prueba-real summary { box-sizing: border-box; min-height: 2.75rem; padding-block: 0.625rem; } }
#resumen-confirmar > li { align-items: flex-start; }
.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; }
/* «Recuperé lo que estabas escribiendo» (formularios recordados al recargar): una línea discreta arriba del formulario, ocupa todo el ancho de la rejilla */
.aviso-recuperado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin: 0; padding: var(--e2) var(--e3); border: 1px solid var(--ln); border-inline-start: 3px solid var(--celeste); border-radius: calc(var(--radio) / 2); background: var(--r2); font-size: var(--paso--1); line-height: 1.4; grid-column: 1 / -1; flex-basis: 100%; animation: aparecer-suave 0.24s var(--salida); }
@keyframes aparecer-suave { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-recuperado { animation: none; } }

/* ---------- Lectura local de cotizaciones (bloque 9) ---------- */
.lectura-subir { align-items: flex-end; }
.lectura-subir .campo { flex: 1 1 14rem; min-width: 0; }
.lectura-archivos > li { align-items: center; }
.lectura-filas { gap: var(--e3); }
.lectura-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); padding: var(--e3); border: 1px solid var(--ln); border-radius: calc(var(--radio) / 2); }
.lectura-fila .lectura-incluir { flex: 1 1 100%; }
.lectura-fila .lectura-campos { flex: 1 1 100%; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin-top: var(--e1); }
.lectura-fila .lectura-campos .opcion { align-self: end; padding-bottom: var(--e2); }
.lectura-fuente { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.lectura-fuente span { color: var(--tx-2); }
.lectura-avisos { gap: var(--e1); }

/* ---------- Integraciones: diagnóstico en Ajustes ---------- */
.integraciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--e3); }
.integracion { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: calc(var(--radio) / 2); min-width: 0; }
.integracion[data-lista="true"] { border-color: var(--celeste); }
.integracion-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.integracion-cabeza h3 { margin: 0; }
.integracion-estado { margin: 0; color: var(--tx-2); }
.integracion-marcas { gap: var(--e1); }
.integracion-marcas .chip[data-ok="false"] { color: var(--tx-2); }
.integracion-falta summary { cursor: pointer; margin-bottom: var(--e1); min-height: 2.75rem; display: flex; align-items: center; }
@media (min-width: 900px) and (pointer: fine) { .integracion-falta summary { min-height: 0; } }
.integracion-falta ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--e1); }

/* ---------- Odoo (bloque 10): solo lectura ---------- */
.odoo-pasos > li { align-items: flex-start; }
.odoo-pasos > li[data-ok="false"] .hito-marca { color: var(--ambar, var(--amarillo)); }
.odoo-campos { color: var(--tx-2); overflow-wrap: anywhere; }
.odoo-falta > li, .odoo-bloque .lista > li { align-items: flex-start; }
.ficha-odoo-campos dt .apagado { font-weight: 400; }

/* ---------- 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; }
}

/* 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) */

@container rep (max-width: 679px) {

  /* la barra va debajo del nombre y ocupa todo el ancho (antes quedaba como una rayita de 2 px al lado del nombre) */
}
@media (max-width: 760px) { #periodos .segmento { min-height: 2.75rem; } }

/* Mensajes: la barra de arriba (filtros, UNA acción hacia las bandejas y el estado de las conexiones) se acomoda al ancho que de verdad tiene; el detalle está en el bloque «Mensajes: una sola mesa de trabajo». */

/* (el recorte del aire de arriba y de abajo lo hace bandeja.js con un margen propio de esta vista: cambiar el relleno de la página contenedora movía el desplazamiento que otras pantallas restauran al volver) */

.conexiones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e3); }
/* el selector de canal es una sola línea compacta (nombre y cuenta), para no quitarle altura a la lista */
.segmentos.canales { display: inline-grid; grid-template-columns: repeat(3, auto); width: auto; max-width: 100%; border-radius: 99px; }
.canales .segmento { flex-direction: row; gap: 0.5rem; min-height: calc(var(--alto-ctl, 2.5rem) - 8px); padding: 0 0.9rem; border-radius: 99px; white-space: nowrap; }
.canales .segmento strong { font-size: 0.85rem; font-weight: 800; opacity: 0.9; }

.canales .segmento > span { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.canales .segmento svg { width: 1.05em; height: 1.05em; flex: none; }
@media (max-width: 760px) { .conexiones { justify-content: flex-start; } }
@media (max-width: 480px) {
  .canales .segmento { padding: 0 0.4rem; gap: 0.35rem; min-width: 0; }
  .canales .segmento svg { display: none; }
  /* el texto largo de la cabecera sigue ahí para quien lo lee con un lector de pantalla, pero en un teléfono angosto no le quita la primera pantalla a la lista */
}

/* ======================= Mensajes como bandeja de conversaciones (WhatsApp y Correo) =======================
   La lista a la izquierda, el chat al centro y, cuando aporta algo, la información de la persona a la derecha.
   Es de Hapwork Comprar: negro, blanco y los tres colores de la marca (amarillo, celeste, beige), en tema claro y oscuro.
   COMPOSICIÓN: aquí se trabaja todo el día, así que la bandeja ocupa casi todo el alto de la ventana (100dvh menos la franja de arriba) y no hace falta desplazar la página:
   se desplazan solo la lista, el historial, la información y —si el texto es muy largo— el editor. El ancho se mide sobre el espacio real (el panel de conexión lo puede angostar),
   por eso las columnas dependen de [data-angosto] / [data-medio] que pone la propia bandeja y no del ancho de la ventana. Las tres franjas de arriba miden lo mismo y sus líneas coinciden. */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* --- la franja de arriba: título y descripción a la izquierda; volver y estado del canal a la derecha; el selector WhatsApp / Correo debajo, sin otro bloque --- */

/* --- la lista --- */

/* los filtros van en UNA fila; si no caben, se recorren con dos flechas circulares que solo aparecen cuando hay algo escondido hacia ese lado */

@keyframes flecha-entra { from { opacity: 0; } to { opacity: 1; } }

/* cada fila: dos líneas (nombre y hora / fragmento con sus marcas) */

/* --- los chulitos de un mensaje que salió --- */
.ticks { display: inline-flex; flex: none; color: currentColor; animation: tick-entra 0.35s var(--salida) both; }
.ticks .icono { width: 1.05rem; height: 1.05rem; stroke-width: 2; }
.ticks[data-e="leido"] { color: var(--celeste); }
.ticks[data-e="fallido"], .ticks[data-e="en_duda"] { color: var(--amarillo); }

@keyframes tick-entra { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* --- el chat --- */

/* la cabecera nunca se amontona: el nombre y el contacto se recortan con «…», las acciones no se encogen y, si el chat es angosto, pierden el rótulo y quedan en ícono */

/* con el chat angosto las acciones de la cabecera quedan con su ícono (siguen llamándose igual): así el título (el asunto del correo o la persona) tiene sitio */

@keyframes chat-entra { from { opacity: 0; transform: translateY(0.45rem); } to { opacity: 1; transform: none; } }

/* --- burbujas --- */
.burbuja { position: relative; align-self: flex-start; display: grid; gap: 0.3rem; max-width: min(38rem, 86%); padding: 0.45rem 0.7rem 0.3rem; border: 1px solid var(--ln); border-radius: 1.05rem 1.05rem 1.05rem 0.3rem; background: var(--fondo); overflow-wrap: anywhere; }
.burbuja[data-dir="saliente"] {
  --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);
  align-self: flex-end; border-color: var(--ya-fondo); border-radius: 1.05rem 1.05rem 0.3rem 1.05rem; background: var(--ya-fondo); color: var(--ya-tx);
}
.burbuja-texto { margin: 0; white-space: pre-wrap; line-height: 1.42; }

@keyframes resaltar-msg { 0%, 40% { box-shadow: 0 0 0 3px var(--amarillo); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* --- archivos dentro del chat --- */

/* --- correo: el asunto arriba; los anteriores plegados en una línea; el último completo, con sus adjuntos --- */

.correo-cuerpo { white-space: pre-wrap; line-height: 1.5; max-height: 13rem; overflow: hidden; }
.correo-cuerpo.abierto { max-height: none; }

/* --- el editor, pegado abajo ---
   Recogido ocupa una fila (WhatsApp: adjuntar · escribir · enviar; correo: Responder · Responder a todos · Reenviar). Abierto, el cuerpo (campos y texto) se desplaza solo si es largo
   y la barra de acciones queda siempre a la vista; nunca pasa de cerca de la mitad del chat. */

/* Cómo responde Hapwork Comprar en esta conversación: Manual · Asistido · Automático, y «Preparar borrador». Nada se apaga: Automático no disponible se explica en texto. */

/* los campos del correo: Para y Asunto en una línea cada uno, con la etiqueta a la izquierda */

/* la barra: a la izquierda lo de apoyo, a la derecha guardar y enviar; todos los botones miden lo mismo y se alinean por el centro */

/* --- información de la persona: su propio scroll; la franja de arriba mide lo mismo que la del chat --- */

/* --- el visor de imágenes (emergente) --- */

/* --- el chat poco ancho (espacio estrecho): «Abrir en…» y «Descartar» quedan solo con su ícono; sigue siendo UNA fila --- */

/* --- el chat muy angosto (teléfono): la barra se parte en dos filas ordenadas --- */
@container chat (max-width: 620px) {

  .burbuja { max-width: 92%; }
}

/* --- pantallas angostas: el chat ocupa toda la pantalla (ajustada al teclado); atrás vuelve a la lista --- */
@media (max-width: 760px) {
  html.hilos-abierto, html.hilos-abierto body { overflow: hidden; }
  html.hilos-abierto { scrollbar-gutter: auto; }   /* el chat a pantalla completa no deja la franja reservada de la barra de desplazamiento */

  /* El lanzador de «Hablar con Hapwork Comprar» flota en el borde derecho: la conversación, el borrador y el campo de escribir dejan libre esa franja (la cabecera conserva su ancho completo) */

  /* el selector ocupa su fila; «Volver a tarjetas» y el estado del canal comparten la siguiente */
}

@media (prefers-reduced-motion: reduce) {

  .ticks{ animation: none; }
}

/* el selector entre la bandeja de WhatsApp y la de correo tiene dos opciones */
.segmentos.canales[style*="--n: 2"] { grid-template-columns: repeat(2, auto); }
@media (max-width: 760px) { .segmentos.canales[style*="--n: 2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) { .toasts { transition: none; } }

/* ======================= Mensajes: una sola mesa de trabajo (lista + panel) =======================
   Qué cambió y por qué:
   · la cuadrícula de tarjetas pasó a una LISTA DE FILAS: 14 mensajes se escanean hacia abajo, no en zigzag; el panel de revisión se pega a la derecha de la lista (una sola mesa);
   · el color solo dice algo: ámbar = pronto, rojo = vencido, un puntito = estado de un envío o de una conexión. Se acabaron los resaltadores en los nombres, las rayas diagonales y los botones negros repetidos;
   · el único negro grande de la pantalla es la acción principal del panel. */
:root { --rojo: #ff8a80; --ambar: #f6c61e; }
html[data-efectivo="claro"] { --rojo: #b3261e; --ambar: #8a5d00; }

/* ---------- la barra de arriba: filtros de canal · UNA acción hacia las bandejas · estado de las conexiones ---------- */

   /* por encima de la lista: el menú «Ir a bandejas» se despliega sobre ella */
.msj-rejilla { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

.msj-acciones { flex: 0 0 auto; display: flex; min-width: 0; }

/* El motor de WhatsApp corre en este equipo (simulado): una palabra más en la misma línea, sin caja (no cambia el alto de la franja), nunca un color de alerta */

/* el selector de canal es compacto: una sola línea */

@container mbarra (max-width: 620px) {

  .msj-acciones { flex: 1 1 100%; }
   .msj-acciones .menu-acciones { flex: 1 1 100%; }

  .msj-acciones .menu-pop { left: 0; right: 0; max-width: none; }
}

/* ---------- las vistas (Entrada · Por revisar · …): pestañas ligeras; la elegida con una línea, no con un bloque negro ---------- */

/* ---------- la mesa: la lista y, pegado a ella, el panel de revisión ---------- */

/* ---------- la fila de un mensaje (y de una conversación) ---------- */

/* «Ver mensaje» desde Hoy: la fila se ilumina un momento y las demás se atenúan un poco (sin rayas ni destellos de colores) */

@keyframes foco-fila {
  0% { background: var(--fondo); }
  10%, 55% { background: color-mix(in srgb, var(--amarillo) 34%, var(--fondo)); }
  100% { background: var(--fondo); }
}

/* ---------- el panel de revisión (inspector de un mensaje) ---------- */
.inspector-raiz[data-modo="lateral"] .inspector.acoplado { border-color: var(--bd); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: none; }

.inspector-sub { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0; color: var(--tx-2); font-size: 0.85rem; font-weight: 600; }
.inspector-sub .icono { width: 1rem; height: 1rem; }
.inspector-x { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: -0.1rem 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tx-2); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.inspector-x:hover { background: var(--r3); color: var(--tx); }
.inspector-x .icono { width: 1.15rem; height: 1.15rem; }
@media (max-width: 899px), (pointer: coarse) { .inspector-x { width: 2.75rem; height: 2.75rem; margin: -0.3rem -0.2rem 0 0; } }

@keyframes feedback-entra { from { opacity: 0; transform: translateY(2px); } }

/* el pie: la acción principal arriba, lo habitual debajo, y lo de poco uso aparte */

.boton[data-copiado] { border-color: var(--tx); }
.boton[data-copiado] .icono { color: var(--tx); }

/* ---------- el menú «⋯» ---------- */
.menu-acciones { position: relative; display: inline-flex; min-width: 0; }
.menu-disp[aria-expanded="true"] { border-color: var(--tx); background: var(--r2); }

.menu-pop {
  position: absolute; z-index: 30; display: grid; gap: 2px; width: max-content; min-width: 15rem; max-width: min(21rem, 88vw); padding: 0.35rem;
  background: var(--fondo); border: 1px solid var(--tx-2); border-radius: 0.95rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); animation: menu-entra 0.14s ease-out;
}
html[data-efectivo="claro"] .menu-pop { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); border-color: var(--bd); }
/* hacia dónde abre lo decide menu.js según el sitio que haya (data-dir) y de qué borde del botón arranca (data-lado) */
.menu-acciones[data-dir="arriba"] .menu-pop, .menu-acciones[data-arriba="si"]:not([data-dir]) .menu-pop { bottom: calc(100% + 0.4rem); top: auto; }
.menu-acciones[data-dir="abajo"] .menu-pop, .menu-acciones[data-arriba="no"]:not([data-dir]) .menu-pop { top: calc(100% + 0.4rem); bottom: auto; }
.menu-acciones[data-lado="der"] .menu-pop, .menu-acciones[data-alineado="izq"]:not([data-lado]) .menu-pop { left: 0; right: auto; }
.menu-acciones[data-lado="izq"] .menu-pop, .menu-acciones[data-alineado="der"]:not([data-lado]) .menu-pop { right: 0; left: auto; }
.menu-pop[hidden] { display: none; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(3px); } }
.menu-opcion { display: flex; align-items: flex-start; gap: 0.65rem; width: 100%; padding: 0.55rem 0.65rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--tx); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-opcion:hover, .menu-opcion:focus-visible { background: var(--r3); outline: none; }
.menu-opcion:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); }
.menu-opcion:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-opcion .icono { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--tx-2); }
.menu-texto { display: grid; gap: 0.1rem; min-width: 0; }
.menu-titulo { font-size: 0.88rem; font-weight: 700; line-height: 1.3; }
.menu-detalle { color: var(--tx-2); font-size: 0.76rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .menu-pop{ animation: none; } }

/* ======================= Bandejas de WhatsApp y de correo: claridad =======================
   · arriba: «← Mensajes por revisar», el título, el selector WhatsApp | Correo y el estado de la conexión (un puntito y una palabra): sin repetir nombres ni botones
   · la lista son FILAS (nada de tarjetas sueltas): la elegida, un fondo apenas distinto y una barra fina a la izquierda
   · el correo se lee como un cliente de correo: el asunto manda en la cabecera, el hilo va plegado y, debajo, la respuesta en un editor con sus campos Para y Asunto
   · sin conversación todavía, el mensaje preparado ocupa el centro: no queda una sábana blanca vacía
   · la información es UNA sola, igual para WhatsApp y correo, agrupada y en palabras */

/* la lista: filas */

/* el chat: cabecera y botones */

/* el correo: el color solo marca de quién es (a la izquierda, fino); el que se escribe va en celeste */

/* el editor: arriba, cómo se contesta (y otros borradores); en medio, Para y Asunto y el texto; abajo, la barra de acciones */

/* los archivos que se van a enviar: miniatura, nombre, tipo, peso; ver y quitar. Con varios, una galería */

/* la barra del editor: «Descartar» es texto, aparte; lo que sale de Hapwork Comprar vive en «⋯» */

.menu-pop { max-height: min(20rem, 70vh); overflow-y: auto; }

/* la información: una sola, agrupada, en palabras (la misma para WhatsApp y correo) */

/* Mensajes es una herramienta de trabajo: las rayas de la esquina son una marca pequeña (no una pieza gráfica), los títulos no llevan resaltador ni rayas atravesadas
   y la información se lee en dos columnas (etiqueta y valor) bien alineadas */

/* Teléfono y espacios angostos: el nombre ocupa su renglón completo; el tipo y cuánto falta van juntos debajo. Los estados de conexión van lado a lado (nombre arriba, estado abajo). */

/* ---------- Retoques tras la revisión visual ---------- */
/* «Primero lo más urgente»: una nota al final de la fila de vistas (no una barra gris que le quita alto a la lista) */

/* los títulos de grupo no se quedan pegados arriba (dejaban un grupo «vacío» a la vista al desplazarse) */

/* con el panel abierto, la fila solo lleva el chevron (el texto «Revisar» sobra) */

/* la descripción de la cabecera nunca se corta a media frase: si no cabe en una línea, usa dos (en WhatsApp y en correo mide lo mismo) */

/* Para y Asunto nunca se recortan, aunque el editor esté acotado en alto */

/* los controles del pie del panel miden lo mismo (36 px; 44 px en táctil) */

/* teléfono: la cabecera del chat deja sitio al nombre; el editor no deja botones sueltos */

/* pantalla completa (ventanas angostas): el panel cubre todo el ancho, sin la franja reservada de la barra de desplazamiento */
html[data-inspector="completa"] { scrollbar-gutter: auto; }

/* Mensajes en ventanas bajas: la lista (y con ella el panel acoplado) no baja de un alto cómodo para leer el mensaje y ver sus acciones */

/* blancos táctiles de 44 px en Mensajes hasta 899 px de ancho */

/* ---------- el menú se coloca solo, con título, buscador y desplazamiento por dentro ---------- */
.menu-pop { display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0.35rem; max-height: min(20rem, 70vh); }
.menu-lista { display: grid; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; }
.menu-titulo-pop { margin: 0; padding: 0.35rem 0.65rem 0.3rem; color: var(--tx-3); font-size: 0.75rem; font-weight: 700; }
.menu-buscar { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0.15rem 0.35rem; padding: 0 0.7rem; border: 1px solid var(--ln); border-radius: 0.7rem; background: var(--fondo); color: var(--tx-2); }
.menu-buscar:focus-within { border-color: var(--tx); color: var(--tx); }
.menu-buscar .icono { width: 1rem; height: 1rem; }
.menu-buscar input { flex: 1 1 auto; min-width: 0; min-height: 2.1rem; padding: 0; border: 0; background: transparent; color: var(--tx); font-size: 0.85rem; outline: none; }
.menu-sin-resultados { margin: 0; padding: 0.6rem 0.65rem; color: var(--tx-3); font-size: 0.82rem; }
.menu-opcion[hidden] { display: none; }
.menu-opcion.peligro .menu-titulo, .menu-opcion.peligro .icono { color: var(--rojo); }
.menu-opcion.peligro:hover, .menu-opcion.peligro:focus-visible { background: color-mix(in srgb, var(--rojo) 9%, transparent); }
.menu-marca { margin-left: 0.5rem; padding: 0.02rem 0.5rem; border: 1px solid var(--bd); border-radius: 99px; color: var(--tx-2); font-size: 0.68rem; font-weight: 700; }
.menu-opcion[aria-current="true"] { background: var(--r2); }

/* ======================= Bandejas: el editor, la lista y la información, más ligeros =======================
   · sin historial = un chat normal (el editor abajo; arriba, en pequeño, «No hay mensajes anteriores»); nada de formulario en medio de la pantalla
   · el editor es un editor: borde fino y suave, sin sombra, foco discreto; el negro fuerte solo en la acción principal («Enviar mensaje» / «Enviar correo»)
   · «Guardar borrador» (todavía no sale) y «Enviar» (sí sale) son cosas distintas y se ven distintas; lo destructivo vive en «⋯»
   · la información es una lectura: títulos discretos, sin cajas ni rayas, y se desliza desde la derecha */
:root { --linea-suave: #e6e4df; --linea-fuerte: #cfccc5; --verde: #6fd1a0; }
html[data-efectivo="oscuro"], html:not([data-efectivo="claro"]) { --linea-suave: #2c2c2c; --linea-fuerte: #4a4a4a; }
html[data-efectivo="claro"] { --linea-suave: #e6e4df; --linea-fuerte: #cfccc5; --verde: #1a7f4b; }

/* el editor */

/* «Enviar»: el botón principal; desactivado se queda a la vista (con su razón) y no se esconde */

/* Para y Asunto: dos líneas compactas, sin cajas */

/* la barra: «Guardar borrador» (secundaria) y «Enviar» (principal) a la derecha; Adjuntar, Copiar y «⋯» a la izquierda */

/* «⋯» → Descartar borrador */

/* la lista: filas más serenas */

/* el hilo de correo se lee como un correo: separación y tipografía, casi sin marcos */

/* la información: lectura editorial; se desliza desde la derecha */

/* ---------- arreglos que encontraron las pruebas ---------- */
/* una barra superior que no se estira cuando la página es corta (≤ 899 px) */
@media (max-width: 899px) { .tablero { grid-template-rows: auto minmax(0, 1fr); } }
/* las seis vistas siempre completas: se compactan y, si aun así no caben, pasan a 3 × 2 */

/* las rayas de la esquina no desaparecen en el teléfono */

/* el estado de la conexión de la franja de la bandeja se toca bien en pantallas táctiles */

/* los enlaces de los avisos del panel (Configurar correo…) se pueden tocar */

/* la barra del editor cabe en UNA fila: con el chat poco ancho, Adjuntar y Copiar quedan con su ícono (siguen teniendo nombre) */

 .menu-disp { white-space: nowrap; }

/* los modos del correo miden lo que dice su texto (no columnas iguales) y, si no caben junto a «Borradores», este baja a su propia línea */

/* la ayuda de Hapwork Comprar cabe en UNA línea en los espacios angostos: «Sugerir» y «Mejorar» (el nombre completo sigue en su ayuda emergente) */

/* teléfonos muy angostos (320 px): «Guardar borrador» y «Enviar» se reparten el ancho a partes iguales (nunca se salen) y los filtros caben en una sola fila */

/* el cuadro de texto del editor siempre es cómodo (≥ 6 líneas); si falta sitio, lo que se desplaza es el cuerpo del editor, no el texto */

.menu-nota { flex: none; margin: 0; padding: 0 0.75rem 0.5rem; color: var(--tx-2); font-size: 0.74rem; line-height: 1.35; }

/* en espacios angostos del correo, los modos que no están elegidos quedan con su ícono (con nombre accesible) y así «Borradores (N)» cabe en la misma fila: el cuadro de texto gana altura */

/* los nombres de archivo de la información pasan a una segunda línea antes que perder su extensión */

/* un menú con más opciones de las que se ven lo deja ver: sombra suave arriba y abajo cuando hay más por desplazar */
.menu-lista { background: linear-gradient(var(--fondo) 30%, transparent) top / 100% 1.6rem no-repeat local, linear-gradient(transparent, var(--fondo) 70%) bottom / 100% 1.6rem no-repeat local, radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--tx) 16%, transparent), transparent) top / 100% 0.5rem no-repeat scroll, radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--tx) 16%, transparent), transparent) bottom / 100% 0.5rem no-repeat scroll; }

/* ======================= Mensajes: «Filas | Tarjetas» ======================= */
/* el selector vive arriba, junto a «Ir a bandejas»: dos botones que se pulsan (aria-pressed); con poco ancho quedan solo con el ícono (y su nombre en la ayuda emergente) */
.msj-acciones { align-items: center; gap: 0.5rem; }

/* «Filas | Tarjetas» va SIEMPRE al lado de «Ir a bandejas»: con sitio, con su texto; con poco ancho, solo con el ícono (su nombre sigue en la ayuda emergente y para los lectores de pantalla) */

@container mbarra (max-width: 620px) { .msj-acciones .menu-acciones{ flex: 1 1 auto; min-width: 0; } }

/* ======================= Mensajes en «Tarjetas»: las cards de siempre (el color de la marca vive aquí; las filas son neutras) ======================= */

/* nada se apaga: la tarjeta elegida (y la que está bajo el cursor) lleva las tres rayas de la marca por detrás */

/* el panel de revisión: «Enviar» es siempre lo principal; si todavía no se puede, se ve apagado (sigue en su sitio) y, al pulsarlo, dice por qué */

/* Toque cómodo en celular (44 px) para lo que se usa a diario: el logo, la campana, las migas para volver y los botones chicos de un solo icono.
   Las migas pasan de 24 a 44 px de alto solo en celular; en pantallas anchas se quedan como estaban. */
@media (max-width: 480px) {
  .marca { min-height: 2.75rem; align-items: center; }
  .lateral-campana { width: 2.75rem; height: 2.75rem; }
  .migas a { min-height: 2.75rem; }
  .boton.chico { min-width: 2.75rem; }
}

/* ---------- Repetir la publicación (web/vistas/vacante-repeticion.js) ----------
   Las secciones vacías no dejan hueco: su margen negativo compensa el espacio entre elementos de la hoja. Los avisos siguen en pantalla (live region). */

/* Lo elegido se suma (fondo y una barra fina): lo demás no se atenúa */

@keyframes rep-entra { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Grupos de WhatsApp (web/vistas/ajustesDestinatarios.js) ---------- */

/* ---------- Trazabilidad de un borrador (web/vistas/bandeja.js, «Detalle del mensaje») ---------- */

/* ---------- «Hablar con Hapwork Comprar» (web/asistente.js). Escritorio (900 px o más): el botón vive en la columna lateral, fija a la altura de la ventana.
   Pantallas angostas (menos de 900 px): sale de la barra y flota como lanzador compacto (44 px), en el sitio que no tape nada. ---------- */
.asistente-ancla { display: contents; }
.asistente-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 2.75rem; padding: 0.4rem 1rem;
  border: 1.5px solid var(--tx); border-radius: 99px; background: var(--tx); color: var(--fondo); font: inherit; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: translate 0.12s, background-color 0.2s, color 0.2s;
}
.asistente-boton .icono { width: 1.2rem; height: 1.2rem; flex: none; }
.asistente-boton:hover { translate: 0 -1px; }
.asistente-boton:active { translate: 0 1px; }
.asistente-boton:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.asistente-boton[aria-expanded="true"] { background: var(--fondo); color: var(--tx); }
/* Escritorio: píldora de ancho completo bajo la marca; con el menú plegado, solo el ícono */
@media (min-width: 900px) {
  .asistente-ancla { display: block; margin-top: var(--e3); }
  .asistente-boton { width: 100%; }
  html[data-menu="icono"] .asistente-boton { width: auto; min-width: 2.75rem; padding: 0; border-radius: 50%; }
  html[data-menu="icono"] .asistente-boton .asistente-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Pantallas angostas: el lanzador es fijo y compacto (44 × 44 px, con el nombre para el lector de pantalla). Su posición la elige web/asistente.js
   (data-lugar): abajo a la derecha, por encima de un pie fijo, abajo a la izquierda o en el borde a media altura. Respeta las zonas seguras del
   celular (notch, barra del sistema) y el teclado virtual. Con el panel abierto, el lanzador se oculta: el panel es la única tarea. */
@media (max-width: 899px) {
  .asistente-ancla {
    display: block; position: fixed; z-index: 90; margin: 0;
    right: max(var(--e4), env(safe-area-inset-right, 0px));
    bottom: calc(max(var(--e4), env(safe-area-inset-bottom, 0px)) + var(--lanz-teclado, 0px));
    transition: top 0.22s var(--salida), right 0.22s var(--salida), bottom 0.22s var(--salida), left 0.22s var(--salida), translate 0.22s var(--salida);
  }
  .asistente-ancla[data-lugar="sobre-pie"] { bottom: calc(var(--lanz-pie, 0px) + max(var(--e4), env(safe-area-inset-bottom, 0px)) + var(--lanz-teclado, 0px)); }
  .asistente-ancla[data-lugar="abajo-izq"] { left: max(var(--e4), env(safe-area-inset-left, 0px)); right: auto; }
  .asistente-ancla[data-lugar="lateral-der"] { top: 50%; bottom: auto; right: env(safe-area-inset-right, 0px); translate: 0 -50%; }
  .asistente-ancla[data-lugar="lateral-der-alto"] { top: 30%; bottom: auto; right: env(safe-area-inset-right, 0px); translate: 0 -50%; }
  .asistente-ancla[data-lugar="lateral-der-bajo"] { top: 70%; bottom: auto; right: env(safe-area-inset-right, 0px); translate: 0 -50%; }
  .asistente-ancla[data-lugar^="lateral-izq"] { right: auto; left: env(safe-area-inset-left, 0px); bottom: auto; translate: 0 -50%; }
  .asistente-ancla[data-lugar="lateral-izq-alto"] { top: 30%; }
  .asistente-ancla[data-lugar="lateral-izq-bajo"] { top: 70%; }
  .asistente-boton { position: relative; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
  .asistente-ancla[data-lugar^="lateral-der"] .asistente-boton { border-radius: 99px 0 0 99px; }
  .asistente-ancla[data-lugar^="lateral-izq"] .asistente-boton { border-radius: 0 99px 99px 0; }
  /* El nombre queda para el lector de pantalla con la misma técnica que .solo-lectores (clip-path): no ocupa espacio ni desborda el botón */
  .asistente-boton .asistente-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .asistente-boton[aria-expanded="true"] { visibility: hidden; }
}
/* Mientras un panel modal tapa la página, el botón no se ve (sin mover el diseño) y el panel no se superpone. El chat a pantalla completa
   no lo oculta: el lanzador se mueve por encima del campo de escribir */
html.inspector-bloquea .asistente-boton { visibility: hidden; }
html.inspector-bloquea .asistente-panel, html.hilos-abierto .asistente-panel { display: none; }
.asistente-panel {
  position: fixed; inset: auto calc(var(--e4) + var(--insp-ocupado, 0px)) var(--e4) auto; margin: 0; padding: 0; z-index: 96;
  width: min(28rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100dvh - 6rem));
  border: 1px solid var(--tx-2); border-radius: var(--radio); background: var(--fondo); color: var(--tx); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; translate: 0 0.75rem; transition: opacity 0.22s var(--salida), translate 0.22s var(--salida), right 0.3s var(--salida);
}
.asistente-panel[open] { display: flex; }
.asistente-panel.abierto { opacity: 1; translate: 0 0; }
.asistente-caja { display: flex; flex-direction: column; min-height: 0; max-height: inherit; width: 100%; }
.asistente-cabeza { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); padding: var(--e4) var(--e4) var(--e3); border-bottom: 1px solid var(--ln); }
.asistente-cabeza h2 { margin: 0.15rem 0 0; font-size: 1.25rem; line-height: 1.15; outline: none; }
.asistente-contexto { margin: 0.3rem 0 0; line-height: 1.4; }
.asistente-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--e3) var(--e4); }
.asistente-chat { max-height: none; min-height: 12rem; padding-right: 0; }
.asistente-chat .burbuja.asistente-dice { max-width: 100%; }
.asistente-chat .burbuja.yo { max-width: 88%; }
.asistente-pie { flex: none; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4) var(--e4); border-top: 1px solid var(--ln); background: var(--fondo); }
.asistente-sugerencias { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: thin; }
.asistente-sugerencias .boton.chico { flex: none; white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.6; }
.asistente-sugerencias .boton.chico, .asistente-opciones .boton.chico { font-weight: 600; }
.asistente-opciones .boton.chico { white-space: normal; text-align: left; line-height: 1.3; }
.asistente-opciones { gap: 0.35rem; margin-top: 0.35rem; }
.asistente-regla { margin: 0; line-height: 1.45; }
.asistente-bloques { margin: 0; display: grid; gap: 0.6rem; }
.asistente-bloques > div { display: grid; gap: 0.15rem; }
.asistente-bloques dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-2); }
.asistente-bloques dd { margin: 0; line-height: 1.5; }
.asistente-bloques dd p { margin: 0; }
.asistente-bloques dd p + p { margin-top: 0.3rem; }
.asistente-bloques ul, .asistente-bloques ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.asistente-bloques ul.asistente-lista { padding-left: 0; list-style: none; }
.asistente-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.asistente-fila > span:first-child, .asistente-fila > a:first-child { min-width: 0; overflow-wrap: anywhere; }
.asistente-fila .chip { flex: none; }
.asistente-bloques blockquote { margin: 0.25rem 0 0; padding: 0.55rem 0.75rem; border-left: 3px solid var(--celeste); background: var(--sup); border-radius: 0.5rem; white-space: pre-wrap; line-height: 1.5; }
.asistente-previa { border: 1px solid var(--ln); border-radius: 0.75rem; padding: 0.5rem 0.75rem; display: grid; gap: 0.4rem; }
.asistente-previa summary { cursor: pointer; font-weight: 700; }
.asistente-confirmar { padding: 0.6rem 0.75rem; border: 1.5px solid var(--tx); border-radius: 0.75rem; }
.asistente-confirmar .fila-flex { gap: var(--e2); margin-top: 0.4rem; }
.asistente-falta dd { color: var(--tx); }
.asistente-enlaces { gap: 0.35rem; }
.asistente-origen { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--tx-3); }
/* Pantallas menores de 900 px: el panel ocupa el ancho disponible (con el margen y las zonas seguras), sin salirse de la ventana */
@media (max-width: 899px) {
  .asistente-panel { inset: auto max(var(--e3), env(safe-area-inset-right, 0px)) max(var(--e3), env(safe-area-inset-bottom, 0px)) max(var(--e3), env(safe-area-inset-left, 0px)); width: auto; max-width: none; max-height: calc(100dvh - 2 * var(--e3)); translate: 0 1.5rem; }
  .asistente-panel.abierto { translate: 0 0; }
  .asistente-cabeza, .asistente-cuerpo, .asistente-pie { padding-inline: var(--e4); }
  /* La conversación es lo principal: el botón «Cerrar» es solo el ícono (su nombre queda en aria-label) y el atajo de Esc no hace falta al tacto */
  .asistente-cabeza .boton { position: relative; }
  .asistente-cerrar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .asistente-cabeza .atajo { display: none; }
}
/* Una pantalla baja (un celular en horizontal, o 1440 px con zoom al 200 %) no cabe el encabezado, las sugerencias y el pie: las sugerencias son atajos
   opcionales (el campo de escribir sigue), así que se ocultan y la conversación conserva su espacio */
@media (max-height: 640px) {
  .asistente-sugerencias { display: none; }
}
@media (max-width: 899px), (pointer: coarse) { .asistente-sugerencias .boton.chico, .asistente-opciones .boton.chico, .asistente-confirmar .boton { min-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .asistente-panel, .asistente-boton, .asistente-ancla { transition: none; translate: none; } .asistente-panel.abierto { translate: none; } }
@media print { .asistente-boton, .asistente-panel { display: none !important; } }
/* ---------- Varios buzones de correo (web/vistas/ajustesCorreo.js; «De» en hilos.js y «Desde» en bandeja.js) ---------- */
.buzones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.buzon { display: grid; gap: var(--e2); min-width: 0; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; background: var(--sup); }
.buzon[data-estado="autorizacion"], .buzon[data-estado="sin_respuesta"] { border-color: var(--bd); }
.buzon-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); min-width: 0; }
.buzon-titulo { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-width: 0; font-size: var(--paso-0, 1rem); font-weight: 600; }
.buzon-titulo > .icono { flex: none; width: 1.1rem; height: 1.1rem; color: var(--tx-2); }
.buzon-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.buzon-nombre .apagado { font-weight: 500; font-size: 0.88rem; }
.buzon-pred { flex: none; }
.buzon-estado, .buzon-recepcion { margin: 0; }
.buzon-recepcion { line-height: 1.45; overflow-wrap: anywhere; }
.buzon-acciones { gap: var(--e2); }
.buzon .confirmar-envio { animation: buzon-entra 0.2s var(--salida, ease-out) both; }
.buzon-alta { padding: var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; }
.buzon-alta h3 { margin: 0; }
/* La aplicación de acceso (Ajustes → Correo): la dirección de regreso con su botón «Copiar» en la misma línea */
.acceso-correo fieldset { margin: 0; }
.acceso-copiar { flex-wrap: nowrap; align-items: center; gap: var(--e2); }
.acceso-copiar input { flex: 1 1 auto; min-width: 0; }
.acceso-copiar .boton { flex: none; }
.acceso-retorno { overflow-wrap: anywhere; }
@keyframes buzon-entra { from { opacity: 0; transform: translateY(-4px); } }
/* «De» en el editor: la misma línea compacta que Para y Asunto (sin caja), con su flecha */

/* en escritorio el selector de marca (web/selector.js) toma su lugar: también es una línea compacta, sin caja */

@media (max-width: 899px), (pointer: coarse) {
  .buzon-acciones .boton, .buzon .confirmar-envio .boton, .buzon-alta .boton { min-height: 2.75rem; }
}
@media (max-width: 520px) {
  .buzon { padding: var(--e3); }
  .buzon-acciones .boton { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .buzon .confirmar-envio { animation: none; } }

/* ---------- Compras y Comercio Exterior (web/vistas/compras-*.js) ---------- */
.cifras-compras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); margin: 0; }
.cifras-compras > div { padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.cifras-compras dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.cifras-compras dd { margin: 0.2rem 0 0; font-size: clamp(1.1rem, 1.35vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifras-compras > div[data-alerta="true"] { border-color: var(--tx); }
.embarques-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e3); }
.embarque-tarjeta { min-width: 0; }
.embarque-enlace { display: grid; gap: var(--e2); height: 100%; padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; color: inherit; text-decoration: none; transition: border-color 0.2s, translate 0.2s; }
.embarque-enlace:hover { border-color: var(--tx); translate: 0 -2px; }
.embarque-enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.embarque-tarjeta[data-urgente="true"] .embarque-enlace { border-color: var(--tx); }
.embarque-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.embarque-codigo { font-size: 1.35rem; font-weight: 800; margin-right: auto; }
.embarque-palabras { margin: 0; line-height: 1.5; }
.fases-barra { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.fases-barra > span { height: 0.4rem; border-radius: 99px; background: var(--ln); }
.fases-barra > span[data-estado="hecha"] { background: var(--celeste); }
.fases-barra > span[data-estado="actual"] { background: var(--amarillo); }
.fases-compras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); counter-reset: fase; }
.fases-compras > li { counter-increment: fase; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem 0.25rem 0.3rem; border: 1px solid var(--ln); border-radius: 99px; font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }
.fases-compras > li::before { content: counter(fase); display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--r2); font-weight: 800; font-size: 0.75rem; }
.fases-compras > li[data-estado="hecha"]::before { background: var(--celeste); color: #000; }
.fases-compras > li[data-estado="actual"] { border-color: var(--tx); color: var(--tx); }
.fases-compras > li[data-estado="actual"]::before { background: var(--amarillo); color: #000; }
.segmentos-compras { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 100%; }
@media (min-width: 1100px) { .segmentos-compras { grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); } }
.materia-comparativo { display: grid; gap: var(--e2); padding-block: var(--e4); border-top: 1px solid var(--ln); min-width: 0; }
.materia-comparativo:first-of-type { border-top: 0; }
.materia-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.materia-cabeza h3 { margin: 0; font-size: var(--paso-0, 1rem); overflow-wrap: anywhere; }
.tabla tr[data-cumple="false"] td { color: var(--tx-2); }
.recomendacion { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; padding: var(--e3) var(--e4); border-radius: 1rem; background: var(--r2); line-height: 1.5; }
.recomendacion > .icono { flex: none; margin-top: 0.2em; }
.recomendacion[data-hay="false"] { border: 1px dashed var(--tx-2); background: transparent; }
.variacion { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.variacion[data-signo="sube"] { color: var(--tx); }
.variacion[data-signo="baja"] { color: var(--tx-2); }
.aprobacion-barra { display: grid; gap: var(--e3); padding: var(--e4); border: 1.5px solid var(--tx); border-radius: 1.1rem; }
.aprobacion-barra p { margin: 0; }
.ordenes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.orden { display: grid; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.orden-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.orden-cabeza > span:not(.chip) { margin-right: auto; color: var(--tx-2); }
.orden p { margin: 0; overflow-wrap: anywhere; }
.documentos-proveedor { display: grid; gap: var(--e2); padding-block: var(--e3); border-top: 1px solid var(--ln); }
.documentos-proveedor:first-of-type { border-top: 0; }
.documentos-proveedor .lista > li { flex-wrap: wrap; }
.plan-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--e3) var(--e4); margin: 0; }
.plan-fechas dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.plan-fechas dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.hoja-interna { padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; }
.hoja-interna h3 { margin: 0; }
.apilar-chico { display: grid; gap: 0.3rem; min-width: 6rem; }
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bitacora > li { display: grid; gap: 0.15rem; padding-left: var(--e3); border-left: 2px solid var(--ln); overflow-wrap: anywhere; }
@media (max-width: 899px), (pointer: coarse) {
  .orden .boton, .documentos-proveedor .boton, .aprobacion-barra .boton { min-height: 2.75rem; }
  details.mini > summary { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .embarque-enlace { transition: none; } .embarque-enlace:hover { translate: none; } }
/* Las tablas de Compras responden al ancho de SU tarjeta: con espacio, columnas con aire (el precio nunca se pega a la variación y lo que no cumple
   se lee en varias líneas); angostas, cada fila se vuelve una ficha apilada, como en el resto de la aplicación. */
.tabla-compras { container: compras / inline-size; }
.tabla-compras .tabla .num { padding-right: var(--e4); white-space: nowrap; }
.tabla-compras .tabla.ancha th:last-child, .tabla-compras .tabla.ancha td:last-child { width: auto; white-space: normal; }
.tabla-compras td[data-etiqueta="Cumple"] { min-width: 13rem; }
.tabla-compras td[data-etiqueta="Escala"], .tabla-compras td[data-etiqueta="Variación"], .tabla-compras td[data-etiqueta="Tránsito"] { white-space: nowrap; }
.tabla-compras td[data-etiqueta="Proveedor"] .chip { margin-top: 0.2rem; }
@container compras (max-width: 899px) {
  .tabla-compras .tabla.ancha { min-width: 0; display: block; }
  .tabla-compras .tabla.ancha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-compras .tabla.ancha tbody { display: block; }
  .tabla-compras .tabla.ancha tr { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) 0; border-bottom: 1px solid var(--ln); }
  .tabla-compras .tabla.ancha td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem var(--e3); padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal; }
  .tabla-compras .tabla.ancha tbody tr:hover td { background: transparent; }
  .tabla-compras .tabla.ancha td[data-etiqueta]::before { content: attr(data-etiqueta); flex: 0 0 6.5rem; color: var(--tx-2); font-size: var(--paso--1); font-weight: 700; }
  .tabla-compras .tabla.ancha td:first-child { min-width: 0; }
  .tabla-compras .tabla.ancha td > * { min-width: 0; }
}
/* La marca dHapwork Comprar es más larga que «Hapwork Comprar»: en el celular, Aromacom arriba y el nombre en una sola línea */
@media (max-width: 899px) {
  .lateral-cabeza .marca { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .lateral-cabeza .marca-nombre { font-size: 1.3rem; white-space: nowrap; }
}
@media (max-width: 359px) { .lateral-cabeza .marca-nombre { font-size: 1.1rem; } }

/* ---------- Compras por vía: lista de control, cobertura de inventario y costo de importación ---------- */
.hitos > .hito { display: flex; align-items: flex-start; gap: var(--e3); flex-wrap: wrap; }
.hito-marca { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; border-radius: 50%; border: 1.5px solid var(--tx-2); }
.hito[data-estado="hecho"] .hito-marca { background: var(--celeste); border-color: var(--celeste); color: #000; }
.hito[data-estado="no_aplica"] .hito-marca { border-style: dashed; }
.hito[data-estado="no_aplica"] .crecer > span:first-child { color: var(--tx-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.hito .crecer { min-width: min(100%, 16rem); flex: 1 1 16rem; line-height: 1.45; }
.hito-acciones { flex: none; }
.hoja-interna h4 { margin: 0; font-size: var(--paso-0, 1rem); }
.cobertura { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e3); }
.cobertura-item { display: grid; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: 1.1rem; min-width: 0; }
.cobertura-item[data-alerta="true"] { border-color: var(--tx); }
.cobertura-item p { margin: 0; }
.cobertura-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.cobertura-barra { position: relative; height: 0.55rem; border-radius: 99px; background: var(--ln); }
.cobertura-barra > span { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--celeste); }
.cobertura-item[data-alerta="true"] .cobertura-barra > span { background: var(--amarillo); }
.cobertura-barra > i { position: absolute; top: -0.25rem; bottom: -0.25rem; left: var(--m); width: 2px; background: var(--tx); border-radius: 2px; }
.costo-importacion { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; padding: var(--e3) var(--e4); border-radius: 1rem; background: var(--r2); line-height: 1.5; }
.costo-importacion > .icono { flex: none; margin-top: 0.2em; }
.costo-importacion[data-alto="true"] { background: transparent; border: 1.5px solid var(--tx); }
@media (max-width: 899px), (pointer: coarse) { .hito .boton { min-height: 2.75rem; } }

/* ---------- Mensajes de Compras: lista a la izquierda, detalle a la derecha (una sola columna en el celular) ---------- */
.msj-rejilla { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--e4); align-items: start; margin-top: var(--e4); }
.msj-columna-lista { display: grid; gap: var(--e3); min-width: 0; }
.msj-columna-detalle { min-width: 0; }
.msj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.msj-item { width: 100%; display: grid; gap: 0.2rem; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; background: var(--sup); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s; }
.msj-item:hover { border-color: var(--bd); }
.msj-item:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.msj-item[aria-current="true"] { border-color: var(--tx); box-shadow: inset 3px 0 0 var(--tx); }
.msj-item[data-sin-leer="true"] strong { font-weight: 800; }
.msj-item-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--e2); min-width: 0; }
.msj-item-cabeza strong { min-width: 0; overflow-wrap: anywhere; padding-top: 0.2rem; }
.msj-nuevos { font-weight: 700; }
.msj-canal { display: inline-flex; align-items: center; gap: 0.3rem; }
.msj-canal .icono { width: 0.95em; height: 0.95em; }
.msj-resumen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msj-estado[data-estado="fallido"], .msj-estado[data-estado="en_duda"] { color: var(--tx); font-weight: 700; }
.msj-vacio { margin: 0; padding: var(--e4); border: 1px dashed var(--ln); border-radius: 1rem; }
.msj-detalle, .msj-nada { display: grid; gap: var(--e3); }
.msj-detalle-cabeza { display: grid; gap: 0.25rem; }
.msj-detalle-cabeza h2, .msj-detalle-cabeza p { margin: 0; overflow-wrap: anywhere; }
.msj-volver { display: none; justify-self: start; }
.msj-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.msj-traza { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e2) var(--e4); margin: 0; }
.msj-traza dt { font-size: var(--paso--1); color: var(--tx-2); }
.msj-traza dd { margin: 0; overflow-wrap: anywhere; }
.msj-texto { margin: 0; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 0.9rem; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.msj-sugerencia { display: grid; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px dashed var(--tx); border-radius: 1rem; }
.msj-sugerencia p { margin: 0; }
.msj-acciones { padding-top: var(--e2); border-top: 1px solid var(--ln); }
.msj-eventos summary { cursor: pointer; font-weight: 600; }
.msj-asociacion { display: grid; gap: var(--e2); }
.msj-asociacion p { margin: 0; }
.msj-buscar { flex: 1 1 14rem; min-width: 0; }
.msj-hilo { list-style: none; margin: 0; padding: var(--e2); display: grid; gap: var(--e2); max-height: min(28rem, 60vh); overflow-y: auto; border: 1px solid var(--ln); border-radius: 1rem; }
.msj-hilo .burbuja { max-width: 88%; }
.msj-hilo .burbuja[data-dir="saliente"] { justify-self: end; }
.msj-cita { display: block; padding-left: var(--e2); border-left: 2px solid var(--bd); }
.msj-adjunto { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.msj-adjunto .icono { width: 1em; height: 1em; }
@media (max-width: 860px) {
  .msj-rejilla { grid-template-columns: minmax(0, 1fr); }
  .msj-rejilla[data-abierto="true"] .msj-columna-lista { display: none; }
  .msj-rejilla[data-abierto="false"] .msj-columna-detalle { display: none; }
  .msj-volver { display: inline-flex; }
}
@media (max-width: 899px), (pointer: coarse) { .msj-item { min-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .msj-item { transition: none; } }

/* ---------- Catálogos editables ---------- */
.tabla tr[data-inactivo="true"] td { color: var(--tx-2); }
.tabla tr[data-inactivo="true"] td:first-child { text-decoration: none; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.sin-borde > legend { padding: 0; margin-bottom: var(--e2); font-weight: 600; }
.casillas-grupo .fila-flex { gap: var(--e2) var(--e4); }
.catalogo-activo, .catalogo-homologaciones { display: grid; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--ln); }
.catalogo-activo p, .catalogo-homologaciones p, .catalogo-homologaciones h3 { margin: 0; }
.catalogo-homologacion { align-items: center; gap: var(--e3); }
.catalogo-homologacion .campo { margin: 0; min-width: 12rem; }
.catalogo-historial summary { cursor: pointer; font-weight: 600; }
.catalogo-cambios li { padding-block: var(--e2); }
@media (max-width: 480px) { .catalogo-homologacion { flex-wrap: wrap; } .catalogo-homologacion .campo { min-width: 0; width: 100%; } }
/* En las tablas de Compras un chip (RL9, estado, vía) no se parte letra por letra cuando la columna se angosta */
.tabla-compras .chip { white-space: nowrap; overflow-wrap: normal; }

/* ---------- Solicitudes de compra ---------- */
.enlace-boton { all: unset; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; border-radius: 0.3rem; display: inline-flex; align-items: center; min-height: 24px; }   /* al menos 24 px de alto para el dedo (lo midió la revisión del corte final: antes 22 px) */
.enlace-boton:hover { text-decoration-thickness: 2px; }
.enlace-boton:focus-visible { outline: 2px solid var(--foco, var(--tx)); outline-offset: 2px; }
.solicitud-linea { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(5.5rem, 0.8fr) minmax(0, 1.3fr) auto; gap: var(--e2); align-items: end; }
.solicitud-linea .campo { margin: 0; min-width: 0; }
.solicitud-quitar { align-self: end; margin-bottom: 0.15rem; }
.solicitud-decision, .solicitud-embarque { padding-top: var(--e3); border-top: 1px solid var(--ln); }
.solicitud-embarque h3 { margin: 0; }
@media (max-width: 560px) {
  .solicitud-linea { grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.45fr) auto; }
  .solicitud-linea .campo:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
}
/* En el panel lateral una tabla no sangra fuera del panel (el margen negativo es para las hojas) */
.inspector .tabla-caja { margin: 0; padding: 0; }

/* ---------- Recepción en almacén ---------- */
.hoja-interna { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--ln); }
.hoja-interna h3 { margin: 0; }
.tabla-compras tr[data-clase="faltante"] td:first-child, .tabla-compras tr[data-clase="sobrante"] td:first-child { box-shadow: inset 3px 0 0 var(--tx); }
.recepcion-confirmar { border-color: var(--tx); }

/* ---------- Archivos con versiones ---------- */
.archivo-enlace { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; overflow-wrap: anywhere; }
.archivo-enlace .icono { flex: none; width: 1em; height: 1em; }
.archivos-seccion h3 { margin: 0; }
.archivos-subir { align-items: end; }
.archivos-subir .campo { margin: 0; min-width: 12rem; }
.catalogo-archivos { padding-top: var(--e3); border-top: 1px solid var(--ln); }
.archivo-versiones li { align-items: flex-start; }
@media (max-width: 480px) { .archivos-subir .campo { min-width: 0; flex: 1 1 100%; } }

/* ---------- Reportes ---------- */
.reportes-lista { display: flex; flex-wrap: wrap; gap: var(--e2); }
.reportes-periodo { align-items: end; }
.reportes-periodo .campo { margin: 0; min-width: 10rem; }
.reporte-tabla tfoot td { border-top: 2px solid var(--tx); padding-top: var(--e2); }
.reporte-caja { overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 480px) { .reportes-periodo .campo { min-width: 0; flex: 1 1 8rem; } }

/* ---------- Mensajes: bandeja por contacto (lista · conversación · contexto) ----------
   Escritorio: tres zonas. Tableta: lista y conversación (el contexto se pliega arriba de la conversación). Celular: una zona a la vez, con «Volver».
   La bandeja mide lo que queda de pantalla y cada zona se desplaza por dentro: el compositor queda siempre a la vista. */
.bz {
  --bz-alto: max(26rem, calc(100dvh - var(--zona-top, 13rem) - 1rem));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); margin-top: var(--e3);
  height: var(--bz-alto); min-height: 0;
}
.bz > * { min-width: 0; min-height: 0; }
.bz-conv { container: bzconv / inline-size; }
.bz-lista, .bz-conv, .bz-ctx { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--ln); border-radius: var(--radio); background: var(--fondo); overflow: hidden; }
.bz-ctx { display: none; }
.bz[data-modo="lista"] .bz-conv { display: none; }
.bz[data-modo="detalle"] .bz-lista { display: none; }
@container principal (min-width: 640px) {
  .bz { grid-template-columns: minmax(15.5rem, 19rem) minmax(0, 1fr); }
  .bz[data-modo] .bz-lista, .bz[data-modo] .bz-conv { display: flex; }
  .bz-volver { display: none !important; }
}
@container principal (min-width: 1040px) {
  .bz { grid-template-columns: minmax(15rem, 18.5rem) minmax(0, 1fr) minmax(14rem, 17.5rem); }
  .bz-ctx { display: flex; }
  .bz-ctx-plegable { display: none; }
}

/* Lista */
.bz-lista-cabeza { display: grid; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--ln); }
.bz-buscar { position: relative; display: flex; align-items: center; }
.bz-buscar .icono { position: absolute; left: 0.85rem; width: 1rem; height: 1rem; color: var(--tx-3); pointer-events: none; }
.bz-buscar input { width: 100%; min-height: 2.6rem; padding: 0.5rem 0.9rem 0.5rem 2.4rem; border: 1px solid var(--bd); border-radius: 99px; background: var(--fondo); color: var(--tx); font: inherit; }
.bz-pestanas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bz-pestana { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.3rem 0.75rem; border: 1px solid var(--ln); border-radius: 99px; background: transparent; color: var(--tx-2); font: inherit; font-size: var(--paso--1); font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.bz-pestana b { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 99px; background: var(--sup); color: var(--tx); text-align: center; }
.bz-pestana b:empty { display: none; }
.bz-pestana[aria-selected="true"] { background: var(--tx); color: var(--fondo); }
.bz-pestana[aria-selected="true"] { border-color: var(--tx); }
.bz-pestana[aria-selected="true"] b { background: var(--fondo); color: var(--tx); }
.bz-pestana:focus-visible, .bz-item:focus-visible, .bz-opcion:focus-visible, .bz-canal-boton:focus-visible, .bz-quitar:focus-visible, .bz-hilo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.bz-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.bz-fila > * { min-width: 0; }
.bz-select { flex: 1 1 9rem; min-width: 0; }
.bz-select select, .bz-filtros select, .bz-filtros input { width: 100%; min-height: 2.5rem; padding: 0.35rem 0.6rem; border: 1px solid var(--bd); border-radius: 0.8rem; background: var(--fondo); color: var(--tx); font: inherit; font-size: var(--paso--1); }
.bz-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--e2); padding: var(--e2); border: 1px dashed var(--bd); border-radius: 1rem; }
.bz-nuevos .boton { flex: 1 1 auto; }
.bz-items-caja { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bz-items { list-style: none; margin: 0; padding: var(--e2); display: grid; gap: 0.3rem; }
.bz-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start; padding: 0.65rem 0.7rem; border: 1px solid transparent; border-radius: 1rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.18s, border-color 0.18s; }
.bz-item:hover { background: var(--sup); }
.bz-item[aria-current="true"] { background: var(--sup); border-color: var(--tx); box-shadow: inset 3px 0 0 var(--tx); }
.bz-item[data-sin-leer="true"] .bz-item-nombre { font-weight: 800; }
.bz-item-cuerpo { display: grid; gap: 0.2rem; min-width: 0; }
.bz-item-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); min-width: 0; }
.bz-item-nombre { min-width: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.bz-item-hora { flex: none; font-size: var(--paso--1); color: var(--tx-3); white-space: nowrap; }
.bz-item-texto { display: flex; gap: 0.35rem; align-items: flex-start; min-width: 0; font-size: var(--paso--1); color: var(--tx-2); line-height: 1.4; }
.bz-item-texto .icono { flex: none; width: 0.95em; height: 0.95em; margin-top: 0.2em; }
.bz-item-texto > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bz-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-width: 0; }
.chip.bz-chip { padding: 0.08rem 0.55rem 0.08rem 0.5rem; font-size: 0.75rem; line-height: 1.45; }
.chip.bz-chip[data-c="ya"] { background: var(--tx); color: var(--fondo); border-color: var(--tx); }
.chip.bz-chip[data-c="ya"]::before { background: var(--amarillo); }
.bz-canales { display: inline-flex; gap: 0.25rem; margin-left: auto; color: var(--tx-3); }
.bz-canales .icono { width: 0.95rem; height: 0.95rem; }
.bz-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--sup); border: 1px solid var(--ln); color: var(--tx); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; }
.bz-avatar[data-tipo="proveedor"] { background: var(--celeste); border-color: var(--celeste); color: #000; }
.bz-avatar[data-tipo="agente"] { background: var(--beige); border-color: var(--beige); color: #000; }
.bz-avatar[data-tipo="grupo"], .bz-avatar[data-tipo="campana"] { background: var(--amarillo); border-color: var(--amarillo); color: #000; }
.bz-avatar .icono { width: 1.1rem; height: 1.1rem; }
.bz-progreso { display: block; height: 0.35rem; border-radius: 99px; background: var(--ln); overflow: hidden; }
.bz-progreso > span { display: block; width: var(--x, 0%); height: 100%; background: var(--celeste); border-radius: inherit; }
.bz-progreso-grande { height: 0.6rem; }
.bz-vacio { margin: var(--e3); padding: var(--e4); border: 1px dashed var(--ln); border-radius: 1rem; }

/* Paneles en línea (nuevo mensaje, llamada, ficha, adjuntar, reenviar) */
.bz-panel { display: grid; gap: var(--e2); padding: var(--e3); border: 1px solid var(--bd); border-radius: 1rem; background: var(--sup); animation: bz-entra 0.22s var(--salida); }
.bz-panel-ancho { margin: var(--e3) var(--e3) 0; }
.bz-panel p { margin: 0; }
.bz-panel input:not([type="checkbox"]):not([type="file"]), .bz-panel select, .bz-panel textarea, .bz-compositor input:not([type="checkbox"]):not([type="file"]), .bz-compositor textarea, .bz-campana-forma input:not([type="checkbox"]):not([type="file"]), .bz-campana-forma select, .bz-campana-forma textarea, .bz-ctx input, .bz-revision input, .bz-revision textarea {
  width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--bd); border-radius: 0.8rem; background: var(--fondo); color: var(--tx); font: inherit;
}
.bz-panel textarea, .bz-compositor textarea, .bz-campana-forma textarea, .bz-revision textarea { resize: vertical; line-height: 1.5; }
.bz-rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--e2); }
.bz-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; max-height: 14rem; overflow-y: auto; }
.bz-opcion { width: 100%; display: grid; gap: 0.1rem; padding: 0.5rem 0.7rem; border: 1px solid var(--ln); border-radius: 0.8rem; background: var(--fondo); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.bz-opcion:hover { border-color: var(--bd); }
@keyframes bz-entra { from { opacity: 0; transform: translateY(-4px); } }

/* Conversación */
.bz-conv-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: 0.6rem var(--e4); border-bottom: 1px solid var(--ln); }
.bz-conv-quien { display: flex; align-items: center; gap: var(--e3); flex: 1 1 14rem; min-width: 0; }
.bz-conv-titulo { flex: 1 1 auto; min-width: 0; }
.bz-conv-titulo h2 { margin: 0; font-size: var(--paso-1, 1.15rem); line-height: 1.25; overflow-wrap: anywhere; }
.bz-conv-titulo h2:focus { outline: none; }
.bz-conv-titulo p { margin: 0.1rem 0 0; overflow-wrap: anywhere; }
.bz-conv-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.bz-mas { position: relative; }
.bz-mas > summary { list-style: none; cursor: pointer; }
.bz-mas > summary::-webkit-details-marker { display: none; }
.bz-mas-menu { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 5; display: grid; gap: 0.3rem; min-width: 13rem; padding: 0.45rem; border: 1px solid var(--bd); border-radius: 1rem; background: var(--fondo); box-shadow: 0 10px 30px rgb(0 0 0 / 0.28); }
.bz-mas-menu .boton { justify-content: flex-start; }
.bz-volver { flex: none; }
.bz-conv-vacia { justify-content: center; }
.bz-nada { display: grid; justify-items: center; gap: var(--e2); padding: var(--e6) var(--e4); text-align: center; }
.bz-nada p { margin: 0; max-width: 32rem; }
.bz-nada > .icono { width: 2.2rem; height: 2.2rem; color: var(--tx-3); }
.bz-hilo { flex: 1 1 auto; min-height: 7rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--e3) var(--e4); }
.bz-hilo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.bz-hilo > .bz-panel { margin-top: var(--e3); }
.bz-dia { display: flex; justify-content: center; }
.bz-dia span { padding: 0.15rem 0.75rem; border: 1px solid var(--ln); border-radius: 99px; font-size: var(--paso--1); color: var(--tx-2); background: var(--fondo); }
.bz-burbuja, .bz-llamada { display: grid; gap: 0.35rem; max-width: min(40rem, 86%); padding: 0.6rem 0.8rem; border: 1px solid var(--ln); border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; background: var(--sup); overflow-wrap: anywhere; justify-self: start; }
.bz-burbuja[data-dir="saliente"] { justify-self: end; border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; background: var(--fondo); border-color: var(--bd); box-shadow: inset 3px 0 0 var(--celeste); }
.bz-borrador[data-estado="por_revisar"] { border-style: dashed; border-color: var(--tx); box-shadow: inset 3px 0 0 var(--amarillo); }
.bz-borrador[data-estado="descartado"] { opacity: 0.78; box-shadow: none; }
.bz-borrador:has(.bz-revision) { max-width: min(46rem, 100%); width: 100%; }
.bz-llamada { justify-self: center; max-width: min(36rem, 96%); border-radius: 1rem; box-shadow: inset 3px 0 0 var(--beige); background: var(--fondo); }
.bz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; font-size: var(--paso--1); color: var(--tx-2); }
.bz-meta .icono { width: 0.95rem; height: 0.95rem; }
.bz-asunto { font-weight: 800; line-height: 1.35; }
.bz-texto { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.bz-burbuja-acciones { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.2rem; }
.bz-adjunto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; border: 1px solid var(--ln); border-radius: 0.8rem; font-size: var(--paso--1); }
.bz-adjunto > .icono { width: 1rem; height: 1rem; flex: none; }
.bz-adjunto-nombre { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.bz-error { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0; color: var(--tx); font-weight: 700; }
.bz-error .icono { flex: none; width: 1em; height: 1em; margin-top: 0.15em; }
.bz-romper { overflow-wrap: anywhere; }
.bz-revision { display: grid; gap: var(--e2); }
.bz-revision p { margin: 0; }
.bz-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }

/* Compositor: siempre al pie */
.bz-compositor { display: grid; gap: 0.4rem; padding: 0.6rem var(--e4) calc(0.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ln); background: var(--fondo); }
.bz-compositor .campo { gap: 0; }
.bz-compositor input:not([type="checkbox"]):not([type="file"]) { min-height: 2.3rem; }
.bz-compositor p { margin: 0; }
.bz-comp-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.bz-comp-fila .bz-select { flex: 1 1 7rem; }
.bz-canal-elegir { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem; border: 1px solid var(--ln); border-radius: 99px; }
.bz-canal-boton { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.2rem; padding: 0.25rem 0.8rem; border: 0; border-radius: 99px; background: transparent; color: var(--tx-2); font: inherit; font-size: var(--paso--1); font-weight: 700; cursor: pointer; }
.bz-canal-boton .icono { width: 1rem; height: 1rem; }
.bz-canal-boton[aria-checked="true"] { background: var(--tx); color: var(--fondo); }
.bz-canal-boton:disabled { cursor: not-allowed; color: var(--tx-3); text-decoration: line-through; }
.bz-comp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.bz-comp-estado { flex: 1 1 8rem; min-width: 0; text-align: right; line-height: 1.3; }
.bz-firma { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--paso--1); font-weight: 600; cursor: pointer; min-height: 2.4rem; }
.bz-cita { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 0.3rem 0.4rem 0.3rem 0.7rem; border-left: 3px solid var(--celeste); background: var(--sup); border-radius: 0.6rem; }
.bz-adjuntos-elegidos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bz-quitar { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.bz-quitar .icono { width: 0.85rem; height: 0.85rem; }
.bz-comp-nota { line-height: 1.45; }
.bz-subir { cursor: pointer; }
.bz-subir:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Contexto */
.bz-ctx-cuerpo { display: grid; align-content: start; gap: var(--e4); padding: var(--e4); }
.bz-ctx .bz-ctx-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bz-ctx-seccion { display: grid; gap: var(--e2); }
.bz-ctx-seccion h3 { margin: 0; font-size: var(--paso--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx-2); }
.bz-ctx-seccion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.bz-ctx-seccion li { display: grid; gap: 0.1rem; font-size: var(--paso--1); line-height: 1.4; overflow-wrap: anywhere; }
.bz-ctx-seccion li .boton { justify-self: start; margin-top: 0.2rem; }
.bz-ctx-seccion a { color: inherit; font-weight: 700; }
.bz-ctx-plegable { border-bottom: 1px solid var(--ln); }
.bz-ctx-plegable > summary { padding: var(--e2) var(--e4); cursor: pointer; font-weight: 700; font-size: var(--paso--1); min-height: 2.6rem; display: flex; align-items: center; }
.bz-ctx-plegable[open] > .bz-ctx-cuerpo { max-height: 40vh; overflow-y: auto; border-top: 1px solid var(--ln); }

/* Campañas */
.bz-campana-resumen { display: grid; gap: var(--e2); margin-bottom: var(--e3); }
.bz-campana-resumen p { margin: 0; }
.bz-destinatarios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.bz-destinatario { display: grid; gap: 0.35rem; padding: 0.6rem 0.8rem; border: 1px solid var(--ln); border-radius: 1rem; }
.bz-destinatario[data-estado="por_revisar"] { border-style: dashed; border-color: var(--bd); }
.bz-destinatario-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; min-width: 0; }
.bz-destinatario-cabeza strong { overflow-wrap: anywhere; }
.bz-destino { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.bz-destino > span { overflow-wrap: anywhere; }
.bz-destino .icono { width: 0.95rem; height: 0.95rem; flex: none; }
.bz-destinatario summary { cursor: pointer; font-size: var(--paso--1); font-weight: 700; min-height: 2rem; display: flex; align-items: center; }
.bz-resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bz-resultados li { display: flex; gap: 0.4rem; align-items: flex-start; font-size: var(--paso--1); overflow-wrap: anywhere; }
.bz-resultados .icono { flex: none; width: 1rem; height: 1rem; margin-top: 0.1em; }
.bz-campana-forma { display: grid; align-content: start; gap: var(--e3); }
.bz-fieldset { display: grid; gap: var(--e2); margin: 0; padding: var(--e3); border: 1px solid var(--ln); border-radius: 1rem; min-width: 0; }
.bz-fieldset legend { padding: 0 0.4rem; font-weight: 800; }
.bz-elegir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.3rem; max-height: 16rem; overflow-y: auto; }
.bz-check { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.45rem 0.6rem; border: 1px solid var(--ln); border-radius: 0.8rem; cursor: pointer; min-height: 2.75rem; }
.bz-check input { margin-top: 0.25rem; flex: none; width: 1.05rem; height: 1.05rem; }
.bz-check > span { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.bz-campana-pie { position: sticky; bottom: calc(-1 * var(--e3)); padding: var(--e2) 0; background: var(--fondo); }

@media (max-width: 899px), (pointer: coarse) {
  .bz-item { min-height: 3rem; }
  .bz-burbuja-acciones .boton, .bz-conv-acciones .boton, .bz-comp-acciones .boton { min-height: 2.75rem; }
  .bz-quitar { width: 2.75rem; height: 2.75rem; }
}
@container principal (max-width: 520px) {
  .bz-burbuja, .bz-llamada { max-width: 94%; }
  .bz-conv-cabeza { padding: var(--e2) var(--e3); }
  .bz-hilo { padding: var(--e2) var(--e3); }
  .bz-compositor { padding-inline: var(--e3); }
  .bz-comp-estado { flex-basis: 100%; text-align: left; order: 3; }
}
/* Conversación angosta: las acciones quedan como íconos (el nombre sigue para el lector de pantalla y como pista) */
@container bzconv (max-width: 560px) {
  .bz-conv-cabeza { gap: 0.4rem 0.6rem; }
  .bz-conv-quien > .bz-avatar { width: 2.1rem; height: 2.1rem; }
  .bz-conv-acciones .boton, .bz-volver, .bz-comp-acciones [data-accion="adjuntar"] { padding-inline: 0.7rem; }
  .bz-conv-acciones .bz-et, .bz-volver .bz-et, [data-accion="adjuntar"] .bz-et, .bz-canal-boton .bz-et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bz-canal-boton { padding-inline: 0.75rem; }
  .bz-comp-estado { display: none; }
}
/* Pantallas chicas: con una conversación abierta, la cabecera de la página deja el espacio a la conversación */
@container principal (max-width: 1039px) { .vista[data-bandeja] .encabezado p { display: none; } }
@container principal (max-width: 639px) { .vista[data-bandeja="detalle"] .encabezado { display: none; } .vista[data-bandeja="detalle"] .bz { margin-top: 0; } }
/* En celular y tableta, con una conversación abierta, el lanzador del asistente se aparta: la conversación y su compositor son la tarea */
@media (max-width: 899px) { html.bandeja-detalle .asistente-ancla { display: none; } }
/* Celular: «Volver» y las acciones arriba; quién es, debajo, con todo el ancho */
@container bzconv (max-width: 420px) {
  .bz-volver { order: 0; }
  .bz-conv-acciones { order: 1; margin-left: auto; }
  .bz-conv-quien { order: 2; flex-basis: 100%; gap: var(--e2); }
}
/* Fuera de lo angosto, «Preparar borrador» se lee entero; en lo angosto queda «Preparar» (el lector de pantalla oye las dos palabras) */
@container bzconv (max-width: 400px) { button[type="submit"] .bz-et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .bz-item { transition: none; } .bz-panel { animation: none; } }

/* Órdenes: corregir crea una versión nueva (una caja por materia) */
.orden-linea { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--e2); margin: 0; padding: var(--e2) var(--e3); border: 1px solid var(--ln); border-radius: 0.8rem; min-width: 0; }
.orden-linea legend { padding: 0 0.3rem; font-weight: 700; overflow-wrap: anywhere; }
.orden details.mini > summary { min-height: 2.4rem; padding: 0.3rem 0.95rem; border: 1.5px solid var(--bd); border-radius: 99px; font-size: var(--paso--1); list-style: none; }
.orden details.mini > summary::-webkit-details-marker { display: none; }
.orden details.mini[open] { flex-basis: 100%; }

/* ---------- Seguimiento operacional: ruta esquemática por vía (sin GPS), lo que sigue, faltantes e incidencias ---------- */
.seguimiento { display: grid; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: var(--radio); background: var(--fondo); min-width: 0; }
.seguimiento[data-retraso="true"] { border-color: var(--tx); box-shadow: inset 4px 0 0 var(--amarillo); }
.seguimiento p { margin: 0; }
.seguimiento-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.seguimiento-cabeza a { color: inherit; }
.ruta { list-style: none; margin: var(--e2) 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ruta-paso { position: relative; display: grid; justify-items: center; gap: 0.35rem; text-align: center; min-width: 0; }
.ruta-paso::before { content: ""; position: absolute; top: 0.5rem; left: -50%; right: 50%; height: 3px; background: var(--ln); }
.ruta-paso:first-child::before { display: none; }
.ruta-paso[data-estado="hecho"]::before, .ruta-paso[data-estado="actual"]::before { background: var(--celeste); }
.ruta-punto { position: relative; z-index: 1; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid var(--ln); background: var(--fondo); }
.ruta-paso[data-estado="hecho"] .ruta-punto { border-color: var(--celeste); background: var(--celeste); }
.ruta-paso[data-estado="actual"] .ruta-punto { border-color: var(--tx); background: var(--amarillo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarillo) 35%, transparent); }
.ruta-texto { font-size: var(--paso--1); line-height: 1.25; color: var(--tx-2); overflow-wrap: anywhere; hyphens: auto; }
.ruta-paso[data-estado="actual"] .ruta-texto { color: var(--tx); font-weight: 800; }
.seguimiento-retraso { display: flex; gap: 0.4rem; align-items: flex-start; }
.seguimiento-retraso .icono { flex: none; width: 1rem; height: 1rem; margin-top: 0.15em; }
.seguimiento-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e3); }
.seguimiento h4 { margin: 0 0 0.3rem; font-size: var(--paso--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx-2); }
.lista-chica { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: var(--paso--1); overflow-wrap: anywhere; }
.lista-chica li[data-urgente="true"] { font-weight: 700; }
.seguimiento-tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--e3); }
.seguimiento-titulo { justify-content: space-between; }
.seguimiento-titulo h2 { margin: 0; }
.respuesta-dia { padding: var(--e3) var(--e4); border: 1px dashed var(--bd); border-radius: 1rem; }
.respuesta-dia p { margin: 0 0 0.3rem; }
@container principal (max-width: 520px) { .ruta { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.3rem; } .ruta-paso { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; } .ruta-paso::before { display: none; } }

/* ---------- Calidad y decisiones de Aromacom ---------- */
.calidad-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--e3); }
.calidad-muestra { display: grid; gap: var(--e2); padding: var(--e4); border: 1px solid var(--ln); border-radius: var(--radio); min-width: 0; }
.calidad-muestra[data-estado="recibida"] { border-color: var(--tx); box-shadow: inset 4px 0 0 var(--amarillo); }
.calidad-muestra p { margin: 0; overflow-wrap: anywhere; }
.calidad-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.calidad-cabeza h3 { margin: 0; font-size: var(--paso-0); overflow-wrap: anywhere; }
.calidad-recibir { align-items: flex-end; }
.calidad-recibir .campo { flex: 1 1 10rem; }
.calidad-subir { cursor: pointer; }
.calidad-subir:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.calidad-lote { min-width: 12rem; }
.decision { display: grid; gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--ln); }
.decision h3 { margin: 0; font-size: var(--paso-0); }
.decision p { margin: 0; overflow-wrap: anywhere; }

/* ---------- Listas mensuales de precios ---------- */
.listas-referencias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.3rem; max-height: 22rem; overflow-y: auto; }
.listas-precio { width: 7.5rem; max-width: 100%; }
.listas-sube { font-weight: 700; }
.listas-baja { font-weight: 700; color: var(--tx-2); }
.listas-filtro { max-width: 12rem; margin-left: auto; }
.listas-detalle header { align-items: center; }
.listas-detalle h2 { margin: 0; }
tr[aria-current="true"] td { background: var(--sup); }

/* ---------- Costos: estimado contra real ---------- */
.costos header { align-items: center; }
.costos h3 { margin: 0; }
.costos-fuera { font-weight: 800; }
.costos-explicar { flex: 1 1 10rem; min-width: 0; }
.costos-registros li[data-anulado="true"] { color: var(--tx-3); }
.costos-anular { margin-top: 0.3rem; }
.costos-anular .campo { flex: 1 1 10rem; }

/* ---------- Catálogos auxiliares ---------- */
.catalogos-elegir { max-width: 22rem; }
.catalogos-subir { cursor: pointer; }
.catalogos-subir:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.drive-carpeta { flex: 1 1 14rem; min-width: 0; }
/* Una pestaña de reporte con nombre largo se parte en dos líneas en vez de salirse a lo ancho (defecto a 375 px) */
.reportes-lista .pestana { white-space: normal; max-width: 100%; text-align: left; }
/* Lo que falta de cada integración puede traer palabras largas (direcciones, identificadores): se parten en vez de salirse a 320 px */
.integracion-falta li { overflow-wrap: anywhere; }

/* ---------- Hoy: centro de control (indicadores que abren su lista, lo que requiere atención, hitos, integraciones y actividad) ---------- */
.centro-cifras { list-style: none; padding: 0; }
.centro-cifras > li { min-width: 0; }
.centro-cifras > li > a { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; color: inherit; text-decoration: none; transition: border-color 0.2s ease; }
.centro-cifras > li > a:hover { border-color: var(--tx); }
.centro-cifras .cifra-texto { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.centro-cifras .cifra-valor { font-size: clamp(1.1rem, 1.35vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.centro-cifras > li[data-alerta="true"] > a { border-color: var(--tx); }
.centro-cifras > li[data-alerta="true"] .cifra-valor::after { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.4rem; border-radius: 50%; background: var(--amarillo); vertical-align: middle; }
.centro-rejilla { display: grid; gap: var(--gap-seccion, 2.25rem); align-items: start; }
.centro-principal, .centro-lado { display: flex; flex-direction: column; gap: var(--gap-seccion, 2.25rem); min-width: 0; }
@media (min-width: 1100px) { .centro-rejilla { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); } }
.centro-atencion > header { justify-content: space-between; align-items: center; }
.atencion-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atencion-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--ln); }
.atencion-item:last-child { border-bottom: 0; padding-bottom: 0; }
.atencion-icono { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln); color: var(--tx-2); }
.atencion-item[data-prioridad="alta"] .atencion-icono { border-color: var(--tx); color: var(--tx); background: color-mix(in srgb, var(--amarillo) 22%, transparent); }
.atencion-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.atencion-texto p { margin: 0; overflow-wrap: anywhere; }
.atencion-titulo { font-weight: 600; }
.atencion-titulo .chip { margin-right: 0.25rem; vertical-align: 0.1em; }
@media (max-width: 560px) { .atencion-item { grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); padding: var(--e2) 0; } .atencion-item > .boton { grid-column: 2; justify-self: start; } .atencion-icono { width: 1.75rem; height: 1.75rem; } .atencion-icono .icono { width: 1rem; height: 1rem; } }
.centro-vacio { padding: var(--e3) 0 0; }
.centro-vacio p { margin: 0 0 var(--e1); }
.hitos-lista, .integ-lista, .actividad-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hitos-lista > li, .integ-lista > li, .actividad-lista > li { padding: var(--e2) 0; border-bottom: 1px solid var(--ln); }
.hitos-lista > li:last-child, .integ-lista > li:last-child, .actividad-lista > li:last-child { border-bottom: 0; }
.hitos-lista > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--e3); align-items: baseline; }
.hitos-lista time { font-weight: 800; font-variant-numeric: tabular-nums; }
.hitos-lista a { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.hitos-lista a:hover .hito-titulo { text-decoration: underline; }
.hito-titulo { font-weight: 600; overflow-wrap: anywhere; }
.integ-lista > li { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.actividad-lista > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); }
.actividad-lista .crecer { flex: 1 1 16rem; overflow-wrap: anywhere; }

/* ---------- Decisiones de Aromacom: los datos de cada una (quién decide, evidencia, impacto y fuente) ---------- */
.decisiones-resumen { margin: 0; }
.decision-datos { display: grid; gap: var(--e2) var(--e5); margin: var(--e2) 0 0; }
@media (min-width: 900px) { .decision-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.decision-datos > div { min-width: 0; }
.decision-datos dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.decision-datos dd { margin: 0.1rem 0 0; font-size: var(--paso--1); overflow-wrap: anywhere; }

/* ---------- Ficha del embarque: responsable, proveedores, ruta, ETA, próximo hito y riesgo ---------- */
.ficha-embarque { padding-block: var(--e4); }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--e3) var(--e5); margin: 0; }
.ficha-datos > div { min-width: 0; }
.ficha-datos dt { font-size: var(--paso--1); font-weight: 700; color: var(--tx-2); }
.ficha-datos dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ficha-datos dd .chip { vertical-align: 0.05em; }
.ficha-datos details.mini { margin-top: var(--e1); font-weight: 400; }
.ficha-datos details.mini form { align-items: flex-end; margin-top: var(--e2); }

.ficha-datos details.mini > summary { font-size: var(--paso--1); font-weight: 600; color: var(--tx-2); }

.columnas-elegir fieldset { border: 0; padding: var(--e2) 0 0; margin: 0; }
.explicacion-recomendacion { display: grid; gap: var(--e2) var(--e5); margin: var(--e2) 0 0; font-size: var(--paso--1); }
@media (min-width: 900px) { .explicacion-recomendacion { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.explicacion-recomendacion > div { min-width: 0; padding-left: var(--e3); border-left: 2px solid var(--ln); }
.explicacion-recomendacion > div[data-hay="true"] { border-left-color: var(--amarillo); }
.explicacion-recomendacion dt { font-weight: 700; color: var(--tx-2); }
.explicacion-recomendacion dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.explicacion-recomendacion ul { margin: 0; padding-left: 1.1rem; }

/* Materias primas: el texto del RL9 y el código arancelario se parten para que la tabla quepa en su hoja a 1440 px (defecto de la auditoría) */
.tabla-compras td[data-etiqueta="RL9"] { max-width: 9.5rem; }
.tabla-compras td[data-etiqueta="RL9"] .chip { white-space: normal; }
.tabla-compras td[data-etiqueta="Arancel"] { overflow-wrap: anywhere; }
.recorrido-muestra { margin: var(--e2) 0; }

/* ---------- Costos: diferencia contra el estimado por concepto (barras divergentes validadas para daltonismo en claro y oscuro) ---------- */
.costos-grafico { margin: 0; display: flex; flex-direction: column; gap: var(--e2); --costo-mas: #b88a0c; --costo-menos: #2898b8; }
html[data-efectivo="claro"] .costos-grafico { --costo-mas: #b8860b; --costo-menos: #0b87ad; }
.costos-barras { position: relative; display: flex; flex-direction: column; gap: 2px; }
.costos-barra-fila { display: grid; grid-template-columns: minmax(7rem, 14rem) minmax(0, 1fr) 4.5rem; gap: var(--e3); align-items: center; min-height: 1.75rem; }
.costos-barra-nombre { font-size: var(--paso--1); color: var(--tx-2); overflow-wrap: anywhere; }
.costos-barra-fila[data-fuera="true"] .costos-barra-nombre { color: var(--tx); font-weight: 700; }
.costos-barra-pista { position: relative; height: 0.75rem; }
.costos-barra { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.costos-barra[data-signo="mas"] { background: var(--costo-mas); border-radius: 0 4px 4px 0; }
.costos-barra[data-signo="menos"] { background: var(--costo-menos); border-radius: 4px 0 0 4px; }
.costos-barra-valor { font-size: var(--paso--1); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* El cero (línea continua) y el umbral (punteadas) en la pista de cada barra */
.costos-umbral { position: absolute; top: -0.4rem; bottom: -0.4rem; border-left: 1px dashed var(--bd); pointer-events: none; }
.costos-barra-pista::before { content: ''; position: absolute; left: 50%; top: -0.4rem; bottom: -0.4rem; border-left: 1px solid var(--tx-2); }
@media (max-width: 560px) { .costos-barra-fila { grid-template-columns: minmax(0, 1fr) 4rem; } .costos-barra-nombre { grid-column: 1 / -1; } }

/* ---------- Expediente: avance de los documentos requeridos y lo recibido sin archivo ---------- */
.expediente-resumen { display: flex; flex-direction: column; gap: var(--e3); }
.expediente-resumen h3 { margin: 0; }
.expediente-avance { height: 0.5rem; border-radius: 99px; background: var(--ln); overflow: hidden; }
.expediente-avance > span { display: block; height: 100%; border-radius: 99px; background: var(--celeste); }
.ficha-datos > div[data-alerta="true"] dd { color: var(--tx); }
.ficha-datos > div[data-alerta="true"] dd::after { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.4rem; border-radius: 50%; background: var(--amarillo); vertical-align: middle; }
.doc-sin-archivo { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--tx-2); }
.doc-sin-archivo .icono { width: 1em; height: 1em; margin-right: 0.25rem; vertical-align: -0.12em; }

.recorrido-orden { margin: var(--e2) 0 var(--e1); }
/* Enlaces cortos (códigos como «T9») en listas y tablas: al menos 24 × 24 px para el dedo (WCAG 2.2; lo marcó la auditoría a 390 y 320 px) */
.lista a, .tabla td a { display: inline-block; min-width: 24px; min-height: 24px; }

/* ---------- Hoy (corte UX): foco arriba, cinco tareas y secciones que se abren y se cierran ---------- */
.hoy-foco .centro-cifras { margin: 0; }
.atencion-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.atencion-cabeza h2 { margin: 0; flex: 1 1 auto; }
.hoy-filtro { flex: none; }
.hoy-fecha { white-space: nowrap; }
/* En celular el primer vistazo manda: sin repetir el perfil (ya está en el menú) y con el botón de crear más bajo; los títulos con la palabra de «rayas» ganan altura, y aun así la primera tarea tiene que asomar */
@media (max-width: 480px) { .hoy-perfil { display: none; } .hoy-nuevo { min-height: 2.5rem; } }
@media (max-width: 560px) {
  .centro-atencion { padding-top: var(--e4); gap: var(--e3); }
  .centro-atencion h2 { font-size: 1.2rem; flex-basis: 100%; }
  .centro-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .centro-cifras > li > a { padding: var(--e2) var(--e3); }
  .centro-cifras .cifra-texto { font-size: 0.78rem; }
}
.atencion-meta:empty { display: none; }
.plegable { padding-block: var(--e3); gap: var(--e3); }
.plegable-titulo { margin: 0; font-size: inherit; }
.plegable-boton { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.plegable-texto { flex: 1 1 auto; font-size: var(--paso-2, 1.5rem); font-weight: 300; line-height: 1.15; }
.plegable-texto b { font-weight: 800; }
.plegable-flecha { width: 1.1rem; height: 1.1rem; transition: transform 0.2s ease; flex: none; }
.plegable-boton[aria-expanded="true"] .plegable-flecha { transform: rotate(90deg); }   /* cerrada apunta a la derecha; abierta, hacia abajo */
.plegable-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 0.5rem; }
.plegable-cuerpo { display: flex; flex-direction: column; gap: var(--e3); }
.plegable-cuerpo[hidden] { display: none; }
.plegable-sub { margin: var(--e2) 0 0; font-size: var(--paso-0); font-weight: 700; }
.inventario-cifras { margin-bottom: var(--e1); }
@media (prefers-reduced-motion: reduce) { .plegable-flecha { transition: none; } }

/* ---------- Comparativo como maestro/detalle ---------- */
.comp { display: flex; flex-direction: column; gap: var(--e4); }
.comp-superior { display: flex; flex-direction: column; gap: var(--e3); }
.comp-resumen { display: flex; flex-direction: column; gap: var(--e2); }
.comp-cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.comp-conjunta ul { list-style: none; margin: var(--e2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); font-size: var(--paso--1); }
.comp-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.comp-filtros .campo { min-width: 9rem; flex: 0 1 12rem; }
.comp-filtros .comp-buscar { flex: 1 1 14rem; }
.comp-cuerpo { display: grid; gap: var(--e4); align-items: start; }
.comp-lista-caja { min-width: 0; }
.comp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.comp-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; width: 100%; padding: var(--e3); text-align: left; background: transparent; color: var(--tx); border: 1px solid var(--ln); border-radius: 1rem; cursor: pointer; font: inherit; min-height: 2.75rem; }
.comp-fila:hover { border-color: var(--tx-2); }
.comp-fila[aria-current="true"] { border-color: var(--tx); box-shadow: inset 4px 0 0 var(--amarillo); background: color-mix(in srgb, var(--amarillo) 8%, transparent); }
.comp-fila:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.comp-fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.comp-fila-nombre { font-weight: 700; overflow-wrap: anywhere; }
.comp-fila-datos, .comp-fila-aviso { color: var(--tx-2); overflow-wrap: anywhere; }
.comp-fila-aviso { display: flex; align-items: flex-start; gap: 0.3rem; color: var(--tx); }
.comp-fila-aviso .icono { width: 1em; height: 1em; margin-top: 0.2em; flex: none; }
.comp-vacio { padding: var(--e4); border: 1px dashed var(--ln); border-radius: 1rem; }
.comp-vacio p { margin: 0 0 var(--e1); }
.comp-detalle { min-width: 0; }
.comp-det { display: flex; flex-direction: column; gap: var(--e4); }
.comp-det-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.comp-det-cab h3 { margin: 0; flex: 1 1 14rem; font-size: var(--paso-1, 1.25rem); overflow-wrap: anywhere; }
.comp-det-cab h3:focus { outline: none; }
.comp-det-cab h3:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 0.4rem; }
.comp-volver { display: none; }
.comp-sec { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--ln); }
.comp-sec h4 { margin: 0; font-size: var(--paso-0); font-weight: 800; }
/* Una tabla de verdad para comparar (con su propio desplazamiento si no cabe): solo en celular se vuelve una tarjeta por proveedor */
.comp-tabla-caja { overflow-x: auto; }
.tabla.ancha.comp-tabla { min-width: 36rem; }
.comp-tabla .chip { white-space: nowrap; }
.comp-tabla th, .comp-tabla td { vertical-align: top; padding-left: var(--e1); padding-right: var(--e1); }
.comp-tabla th:first-child, .comp-tabla td:first-child { padding-left: 0; }
.sin-partir { white-space: nowrap; }
.comp-tabla th { white-space: normal; }
.comp-tabla th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.comp-tabla th[scope="row"] .chip { margin-left: var(--e1); }
.comp-tabla tr[data-elegida="true"] th, .comp-tabla tr[data-elegida="true"] td { background: color-mix(in srgb, var(--amarillo) 14%, transparent); }
.comp-tabla tr[data-cumple="false"] td, .comp-tabla tr[data-cumple="false"] th { opacity: 0.8; }
.comp-tabla [data-extra] { display: none; }
.comp-tabla[data-extras~="credito"] [data-extra="credito"], .comp-tabla[data-extras~="disponible"] [data-extra="disponible"], .comp-tabla[data-extras~="escala"] [data-extra="escala"],
.comp-tabla[data-extras~="grado"] [data-extra="grado"], .comp-tabla[data-extras~="observaciones"] [data-extra="observaciones"] { display: table-cell; }
.columnas-elegir fieldset { border: 0; padding: var(--e2) 0 0; margin: 0; }
.columnas-elegir legend { padding: 0; margin-bottom: var(--e2); }
.explicacion-recomendacion { display: grid; gap: var(--e2) var(--e5); margin: var(--e2) 0 0; font-size: var(--paso--1); }
.explicacion-recomendacion > div { min-width: 0; padding-left: var(--e3); border-left: 2px solid var(--ln); }
.explicacion-recomendacion > div[data-hay="true"] { border-left-color: var(--amarillo); }
.explicacion-recomendacion dt { font-weight: 700; color: var(--tx-2); }
.explicacion-recomendacion dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.explicacion-recomendacion ul { margin: 0; padding-left: 1.1rem; }
.comp-accion { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e3) var(--e4); border: 2px solid var(--tx); border-radius: 1rem; background: var(--fondo); }
.comp-accion-texto { margin: 0; overflow-wrap: anywhere; }
.comp-accion-botones { align-items: flex-start; }
.comp-accion details.mini form { margin-top: var(--e2); }
/* Pantalla ancha: la lista a la izquierda (con su propio desplazamiento) y el detalle a la derecha */
@media (min-width: 1100px) {
  .explicacion-recomendacion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comp-cuerpo { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .comp-lista-caja { position: sticky; top: var(--e3); max-height: calc(100dvh - 2 * var(--e3)); overflow-y: auto; padding-right: var(--e1); }
}
/* Tableta: la lista arriba, con altura limitada, y el detalle debajo */
@media (min-width: 700px) and (max-width: 1099px) {
  .explicacion-recomendacion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comp-lista-caja { max-height: 20rem; overflow-y: auto; padding-right: var(--e1); }
}
/* Celular: o la lista o el detalle de una materia (con «Volver al comparativo»); la acción de decidir queda fija abajo, sin tapar el contenido */
@media (max-width: 699px) {
  .comp[data-hay-materia="true"] .comp-superior, .comp[data-hay-materia="true"] .comp-filtros, .comp[data-hay-materia="true"] #comp-estado, .comp[data-hay-materia="true"] .comp-lista-caja { display: none; }
  .comp[data-hay-materia="false"] .comp-detalle { display: none; }
  .comp-volver { display: inline-flex; }
  .comp-accion { position: sticky; bottom: var(--e2); z-index: 5; padding-right: 4.5rem; box-shadow: 0 -0.5rem 1rem var(--fondo); }
}
/* Tabla de proveedores en celular: una tarjeta por proveedor, con cada dato rotulado */
@media (max-width: 699px) {
  .comp-tabla-caja { overflow-x: visible; }
  .tabla.ancha.comp-tabla { min-width: 0; }
  .comp-tabla, .comp-tabla tbody, .comp-tabla tr, .comp-tabla th[scope="row"], .comp-tabla td { display: block; }
  .comp-tabla thead, .comp-tabla thead tr, .comp-tabla thead th { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .comp-tabla tr { padding: var(--e3) 0; border-bottom: 1px solid var(--ln); }
  .comp-tabla th[scope="row"] { padding: 0 0 var(--e2); border: 0; }
  .comp-tabla td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem var(--e2); padding: var(--e1) 0; border: 0; white-space: normal; text-align: right; }
  .comp-tabla td::before { content: attr(data-etiqueta); margin-right: auto; text-align: left; font-weight: 600; color: var(--tx-2); font-size: var(--paso--1); }
  .comp-tabla [data-extra] { display: none; }
  .comp-tabla[data-extras~="credito"] td[data-extra="credito"], .comp-tabla[data-extras~="disponible"] td[data-extra="disponible"], .comp-tabla[data-extras~="escala"] td[data-extra="escala"],
  .comp-tabla[data-extras~="grado"] td[data-extra="grado"], .comp-tabla[data-extras~="observaciones"] td[data-extra="observaciones"] { display: flex; }
}


/* ---------- Calidad en colas: una lista corta por cola y el detalle en el panel lateral ---------- */
.calidad-cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.calidad-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--ln); border-radius: 1rem; }
.calidad-item[data-estado="recibida"] { border-color: var(--tx); box-shadow: inset 4px 0 0 var(--amarillo); }
.calidad-item-cuerpo { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.calidad-item-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.calidad-item-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.calidad-item-acciones { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); }
.calidad-item-acciones .calidad-recibir { align-items: flex-end; }
.calidad-buscar { max-width: 28rem; }
.calidad-detalle { gap: var(--e3); }

/* Solicitudes: responsable, versiones (corte UX) */
.sol-filtros { align-items: center; margin: var(--e2) 0 var(--e3); }
.sol-versiones { padding-top: var(--e3); border-top: 1px solid var(--ln); }
.sol-versiones h3 { margin: 0; display: flex; align-items: center; gap: var(--e2); }
.sol-sub { margin: var(--e2) 0 0; font-size: var(--paso-0); }
.sol-ver-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.sol-ver { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start; width: 100%; padding: var(--e3); text-align: left; background: transparent; color: var(--tx); border: 1px solid var(--ln); border-radius: 1rem; cursor: pointer; font: inherit; min-height: 2.75rem; }
.sol-ver:hover { border-color: var(--tx-2); }
.sol-ver[aria-pressed="true"] { border-color: var(--tx); box-shadow: inset 4px 0 0 var(--amarillo); background: color-mix(in srgb, var(--amarillo) 8%, transparent); }
.sol-ver:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.sol-ver-texto { min-width: 0; overflow-wrap: anywhere; }
.sol-resp-form { align-items: flex-end; }
.sol-resp-form .campo { flex: 1 1 14rem; margin: 0; }

/* Listas: subir con vista previa y duplicados por contenido (corte UX) */
.carga-zona { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e4); border: 2px dashed var(--bd); border-radius: 1rem; transition: border-color 0.15s, background-color 0.15s; }
.carga-zona[data-activa="true"] { border-color: var(--tx); background: color-mix(in srgb, var(--amarillo) 10%, transparent); }
.carga-zona p { margin: 0; overflow-wrap: anywhere; }
.carga-zona-acciones { gap: var(--e2); }
.carga-progreso { display: flex; flex-direction: column; gap: var(--e2); }
.carga-barra { height: 0.5rem; border-radius: 99px; background: var(--ln); overflow: hidden; }
.carga-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--celeste); transition: width 0.2s ease; }
.carga-previa { padding-top: var(--e3); border-top: 1px solid var(--ln); }
.carga-previa h3 { margin: 0; outline: none; }
.carga-resumen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e2); }
.carga-resumen li { padding: var(--e2) var(--e3); border: 1px solid var(--ln); border-radius: 0.75rem; font-size: var(--paso--1); color: var(--tx-2); }
.carga-resumen li strong { display: block; font-size: var(--paso-2); color: var(--tx); font-weight: 700; }
.carga-resumen li[data-alerta="true"] { border-color: var(--tx-2); box-shadow: inset 4px 0 0 var(--amarillo); }
.carga-cambios { margin: 0; overflow-wrap: anywhere; }
.carga-acciones { gap: var(--e2); }
@media (prefers-reduced-motion: reduce) { .carga-zona, .carga-barra > span { transition: none; } }
.carga-zona p.carga-zona-texto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

/* Vigencia de los documentos (corte UX): el estado va con palabras; el chip puede partirse en celular */
.chip-vigencia { white-space: normal; text-align: left; line-height: 1.25; }