/* Panel interno · Certificada Online. Tema claro por defecto; oscuro con el interruptor o el del sistema. */
:root {
  --fondo: #f6f6f3; --superficie: #ffffff; --superficie-2: #f0efe9; --borde: #dcdad2; --borde-fuerte: #b9b6aa;
  --texto: #1d1c19; --tenue: #66635a; --enlace: #1b4fa8;
  --brand: #f5c400; --brand-deep: #8a6d00; --brand-suave: #fff6cc;
  --bien: #1f7a3a; --bien-suave: #e3f3e7; --mal: #b3261e; --mal-suave: #fbe7e5;
  --atencion: #8a5300; --atencion-suave: #fff1d6; --info-suave: #e6eefb;
  --radio: 8px; --sombra: 0 1px 2px rgb(0 0 0 / .06);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fondo: #131311; --superficie: #1c1c19; --superficie-2: #252521; --borde: #3a3934; --borde-fuerte: #57554d;
  --texto: #ecebe6; --tenue: #a6a398; --enlace: #8fb4ff;
  --brand: #f5c400; --brand-deep: #f5c400; --brand-suave: #3a3210;
  --bien: #6fcf8b; --bien-suave: #183322; --mal: #ff8a80; --mal-suave: #3d1b18;
  --atencion: #ffc266; --atencion-suave: #3a2a10; --info-suave: #1d2a40;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --fondo: #131311; --superficie: #1c1c19; --superficie-2: #252521; --borde: #3a3934; --borde-fuerte: #57554d;
    --texto: #ecebe6; --tenue: #a6a398; --enlace: #8fb4ff; --brand-deep: #f5c400; --brand-suave: #3a3210;
    --bien: #6fcf8b; --bien-suave: #183322; --mal: #ff8a80; --mal-suave: #3d1b18;
    --atencion: #ffc266; --atencion-suave: #3a2a10; --info-suave: #1d2a40; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--enlace); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; margin-top: 1rem; }
h1 small { font-size: .9rem; color: var(--tenue); font-weight: 400; margin-left: .4rem; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.tenue { color: var(--tenue); } .malo { color: var(--mal); font-weight: 600; } .nowrap { white-space: nowrap; }
.bueno { color: var(--bien); font-weight: 600; } .sin-vinetas { list-style: none; margin: 0; padding: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }

/* ── barra superior ─────────────────────────────────────────── */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1.2rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--texto); text-decoration: none; }
.marca small { font-weight: 400; color: var(--tenue); }
.marca__punto { width: .8rem; height: .8rem; border-radius: 50%; background: var(--brand); border: 2px solid var(--brand-deep); display: inline-block; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem; min-width: 0; }
.nav a { padding: .35rem .7rem; border-radius: 6px; text-decoration: none; color: var(--texto); }
.nav a:hover { background: var(--superficie-2); }
.nav a[aria-current] { background: var(--brand-suave); box-shadow: inset 0 -2px 0 var(--brand-deep); font-weight: 600; }
.busqueda { flex: 1 1 8rem; max-width: 20rem; min-width: 8rem; }
.busqueda input { width: 100%; }
.sistema { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; }
.chip { display: inline-block; padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--borde); color: var(--tenue); background: var(--superficie-2); text-decoration: none; }
.chip--bien { color: var(--bien); background: var(--bien-suave); border-color: transparent; }
.chip--mal { color: var(--mal); background: var(--mal-suave); border-color: var(--mal); font-weight: 600; }
.menu { position: relative; }
.ayuda { margin-left: auto; padding: .3rem .6rem; border-radius: 6px; font-size: .9rem; text-decoration: none; border: 1px solid var(--borde); color: var(--texto); }
.ayuda:hover, .ayuda[aria-current] { background: var(--brand-suave); border-color: var(--brand-deep); }
.menu summary { cursor: pointer; padding: .3rem .6rem; border-radius: 6px; list-style: none; }
.menu summary::after { content: " ▾"; color: var(--tenue); }
.menu summary:hover { background: var(--superficie-2); }
.menu__panel { position: absolute; right: 0; top: 2.2rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12); padding: .4rem; display: grid; min-width: 12rem; }
.menu__panel a, .menu__panel .enlace { display: block; padding: .45rem .6rem; text-align: left; border-radius: 6px; text-decoration: none; color: var(--texto); }
.menu__panel a:hover, .menu__panel .enlace:hover { background: var(--superficie-2); }
.menu__panel form { margin: 0; }
.enlace { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; color: inherit; }

/* ── estructura ─────────────────────────────────────────────── */
.principal { max-width: 78rem; margin: 0 auto; padding: 1.3rem 1.2rem 4rem; }
.principal--angosto { max-width: 26rem; padding-top: 12vh; }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.encabezado--ficha { align-items: flex-start; }
.bloque { margin: 1.6rem 0; }
.bloque__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.nota { color: var(--tenue); font-size: .85rem; margin: .4rem 0; }
.vacio { padding: 1.4rem; text-align: center; color: var(--tenue); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.tarjeta--atencion { background: var(--atencion-suave); border-color: var(--atencion); }
#garantia + .filtros { margin-top: 1rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.pila { display: grid; gap: .75rem; }
.en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.crece { flex: 1 1 14rem; }

/* ── formularios ────────────────────────────────────────────── */
label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; }
label small { font-weight: 400; color: var(--tenue); }
input, select { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: .45rem .6rem; min-height: 2.3rem; }
input.corto { width: 6rem; }
label.casilla { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
input[type="checkbox"] { min-height: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-deep); }
.boton { font: inherit; font-weight: 600; cursor: pointer; padding: .5rem .95rem; min-height: 2.3rem; border-radius: 6px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie-2); color: var(--texto); }
.boton:hover { border-color: var(--texto); }
.boton--primario { background: var(--brand); border-color: var(--brand-deep); color: #1d1c19; }
.boton--peligro { background: var(--superficie); border-color: var(--mal); color: var(--mal); }
.filtros { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .8rem; margin-bottom: 1rem; }
.filtros__q { flex: 1 1 18rem; }

/* ── avisos y cajas ─────────────────────────────────────────── */
.aviso { padding: .65rem .9rem; border-radius: var(--radio); margin: 0 0 1rem; border-left: 4px solid; }
.aviso--ok { background: var(--bien-suave); border-color: var(--bien); }
.aviso--error { background: var(--mal-suave); border-color: var(--mal); }
.aviso--atencion { background: var(--atencion-suave); border-color: var(--atencion); }
.caja { border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio); padding: .9rem 1.1rem; margin: 1rem 0; background: var(--superficie); }
.caja ul { margin: .2rem 0 .8rem; padding-left: 1.2rem; }
.caja--atencion { background: var(--atencion-suave); border-color: var(--atencion); }
.caja--pausa { background: var(--info-suave); border-left-color: var(--enlace); }

/* ── tablas ─────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: .5rem .7rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); background: var(--superficie-2); font-weight: 600; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.motivos { color: var(--atencion); font-size: .85rem; max-width: 28rem; }
.codigo { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.punto--atencion { background: var(--atencion); }
.paginas { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }

/* ── insignias ──────────────────────────────────────────────── */
.estado, .plan, .marca-dt, .imp { display: inline-block; font-size: .76rem; font-weight: 600; padding: .1rem .5rem; border-radius: 4px; white-space: nowrap; border: 1px solid transparent; }
.estado { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); }
.estado--pendiente_pago, .estado--pago_declarado { background: var(--atencion-suave); color: var(--atencion); border-color: transparent; }
.estado--pagado, .estado--en_preparacion { background: var(--info-suave); color: var(--enlace); border-color: transparent; }
.estado--impreso, .estado--en_proceso_de_envio { background: var(--brand-suave); color: var(--texto); border-color: var(--brand-deep); }
.estado--enviado { background: var(--bien-suave); color: var(--bien); border-color: transparent; }
.estado--pausado { background: var(--info-suave); color: var(--texto); border-color: var(--enlace); }
.estado--cancelado, .estado--expirado, .estado--reembolsado { background: var(--mal-suave); color: var(--mal); border-color: transparent; }
.plan { border-color: var(--borde-fuerte); color: var(--texto); }
.plan--ultra { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.plan--express { border-color: var(--brand-deep); background: var(--brand-suave); }
.marca-dt { background: var(--superficie-2); color: var(--tenue); border-color: var(--borde); font-weight: 500; }
.imp--importado { background: var(--bien-suave); color: var(--bien); }
.imp--omitido { background: var(--superficie-2); color: var(--tenue); }
.imp--error { background: var(--mal-suave); color: var(--mal); }

/* ── hoy ────────────────────────────────────────────────────── */
.cortes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.corte { background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .3rem .7rem; font-size: .85rem; }
.corte span { color: var(--tenue); margin-left: .3rem; }
.corte--pronto { border-color: var(--atencion); background: var(--atencion-suave); }
.corte--cerrado { opacity: .6; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.contadores a { display: block; padding: .7rem .9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; color: var(--tenue); font-size: .85rem; }
.contadores a:hover { border-color: var(--borde-fuerte); }
.contadores b { display: block; font-size: 1.5rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.contadores .contador--atencion { border-color: var(--atencion); background: var(--atencion-suave); }
.cuenta { display: inline-block; min-width: 1.6rem; text-align: center; font-size: .85rem; padding: .05rem .45rem; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); margin-left: .3rem; }
.cuenta--atencion { background: var(--atencion-suave); border-color: var(--atencion); color: var(--atencion); }

/* ── ficha ──────────────────────────────────────────────────── */
.miga { margin: 0 0 .2rem; font-size: .85rem; }
.codigo-grande { font-family: var(--mono); font-size: 2rem; letter-spacing: .04em; margin: 0 0 .4rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.resumen, .datos { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font-size: .9rem; }
.resumen dt, .datos dt { color: var(--tenue); }
.resumen dd, .datos dd { margin: 0; overflow-wrap: anywhere; }
.datos dd.num { text-align: right; }
.editar { margin-top: .9rem; border-top: 1px solid var(--borde); padding-top: .6rem; }
.editar summary { cursor: pointer; color: var(--enlace); font-weight: 600; font-size: .9rem; }
.editar[open] summary { margin-bottom: .7rem; }
.archivos, .hermanos { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.archivos small { display: block; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.accion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem; }
.accion--peligro { border-color: var(--mal); }
.historial { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde); }
.historial > li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; padding: .45rem 0 .45rem .9rem; font-size: .9rem; position: relative; }
.historial > li::before { content: ""; position: absolute; left: -.38rem; top: .8rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--borde-fuerte); }
.historial time { color: var(--tenue); font-variant-numeric: tabular-nums; }
.cambios { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--tenue); }
.cambios li { padding: .1rem 0; }
.cambios del { color: var(--mal); }

/* ── importaciones ──────────────────────────────────────────── */
.pestanas { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.pestanas a { padding: .35rem .8rem; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); text-decoration: none; color: var(--texto); font-size: .9rem; }
.pestanas a[aria-current] { background: var(--brand-suave); border-color: var(--brand-deep); font-weight: 600; }
.pestanas .pestana--mal { border-color: var(--mal); color: var(--mal); }

/* ── pagos ──────────────────────────────────────────────────── */
.pestanas--sin-margen { margin: 0; }
.cobro { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio);
  padding: .9rem 1.1rem; margin: 0 0 .9rem; box-shadow: var(--sombra); }
.cobro--ultra { border-left-color: var(--texto); }
.cobro--declarado { border-left-color: var(--atencion); background: var(--atencion-suave); }
.cobro__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; }
.cobro__titulo { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; font-size: 1.05rem; margin-bottom: .35rem; }
.cobro__monto { text-align: right; display: grid; font-size: .85rem; }
.cobro__monto b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cobro__cartas { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .35rem; font-size: .9rem; }
.cobro__acciones { display: grid; gap: 0; }
.cobro__acciones .editar { margin-top: .6rem; }
.rejilla-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; align-items: end; }
.rejilla-form .ancho { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.rejilla-form label.ancho { display: grid; }
.mensaje { width: 100%; font: .9rem/1.45 var(--mono); color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 6px; padding: .6rem; resize: vertical; }
.contador { display: block; padding: .7rem .9rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--tenue); font-size: .85rem; }
.contador b { display: block; font-size: 1.5rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.fila--anulada td, li.fila--anulada { color: var(--tenue); }
.editar--compacto { margin-top: 0; border-top: 0; padding-top: 0; }
.tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.tramos li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem; font-size: .85rem; color: var(--tenue); }
.tramos li b { display: block; font-size: 1.15rem; color: var(--texto); }
.tramos li.tramo--listo { border-color: var(--bien); background: var(--bien-suave); }
.tramos progress { width: 100%; height: .5rem; margin-top: .3rem; accent-color: var(--brand-deep); }
.tabla--links td { vertical-align: middle; }
.cubre { font-size: .82rem; color: var(--tenue); max-width: 20rem; }
.mas summary { cursor: pointer; color: var(--enlace); display: inline; }
.link-form { flex-wrap: nowrap; min-width: 24rem; }
.link-form input[name="url"] { min-width: 12rem; }
.bien { color: var(--bien); font-weight: 600; }
td small.bien, td small.tenue { display: block; margin-top: .2rem; }

/* ── ingreso ────────────────────────────────────────────────── */
.ingreso h1 { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; margin-bottom: 1rem; }

@media (max-width: 640px) {
  .barra { padding: .5rem 1rem; }
  .nav { order: 9; width: 100%; }
  .nav a { padding: .3rem .55rem; }
  .principal { padding: 1rem 1rem 3rem; }
  .historial > li { grid-template-columns: 1fr; gap: .1rem; }
  .codigo-grande { font-size: 1.6rem; }
  .cobro__monto { text-align: left; }
  .link-form { min-width: 0; flex-wrap: wrap; }
}
a.boton { display: inline-block; text-decoration: none; }

/* ── correos ────────────────────────────────────────────────── */
.correo { display: inline-block; font-size: .76rem; font-weight: 600; padding: .1rem .5rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--tenue); }
.correo--pendiente, .correo--enviando { background: var(--info-suave); color: var(--enlace); border-color: transparent; }
.correo--enviado, .correo--entregado { background: var(--bien-suave); color: var(--bien); border-color: transparent; }
.correo--retenido { background: var(--atencion-suave); color: var(--atencion); border-color: transparent; }
.correo--fallido, .correo--rebotado { background: var(--mal-suave); color: var(--mal); border-color: var(--mal); }
.vista-correo { width: 100%; height: 70vh; min-height: 28rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #f6f6f3; }
.texto-correo { white-space: pre-wrap; font-family: var(--mono); font-size: .85rem; background: var(--superficie-2); padding: .8rem; border-radius: var(--radio); overflow-x: auto; }
.lista-correos { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .9rem; }
.lista-correos small { display: block; }

/* ── equipos y cola de impresión (etapa 3.1) ───────────────── */
.comando { font-family: var(--mono); font-size: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; margin: .4rem 0 0; }
.enlace-nuevo .codigo-grande { letter-spacing: .12em; }
.agente--revocado { opacity: .7; }
.agente h3 { margin: 0; }
.tabla--impresoras { margin: .6rem 0; }
.tabla--impresoras td:nth-child(2) { overflow-wrap: anywhere; }
.agente { min-width: 0; }
.enlazar, .pruebas { margin-top: .8rem; }
.enlazar label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; max-width: 24rem; }
.acciones-trabajo { white-space: nowrap; }
.acciones-trabajo form { display: inline-block; margin: 0 .25rem .25rem 0; }
.acciones-trabajo .boton { padding: .3rem .6rem; min-height: 2rem; font-size: .85rem; }
.tabla--cola td small { display: block; }
.imp--pendiente, .imp--tomado, .imp--imprimiendo, .imp--retenido { color: var(--enlace); font-weight: 600; }
.imp--impreso { color: var(--bien); font-weight: 600; }
.imp--cancelado { color: var(--tenue); }
.imp--fallido, .imp--incierto { color: var(--mal); font-weight: 700; }
tr.trabajo--incierto, tr.trabajo--fallido { background: var(--mal-suave); }

/* ── manual ────────────────────────────────────────────────── */
.manual { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.manual__indice { position: sticky; top: 6rem; font-size: .92rem; }
.manual__indice ol { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .1rem; }
.manual__indice a { display: block; padding: .35rem .6rem; border-radius: 6px; text-decoration: none; color: var(--texto); }
.manual__indice a:hover { background: var(--superficie-2); }
.manual__indice a[aria-current] { background: var(--brand-suave); box-shadow: inset 3px 0 0 var(--brand-deep); font-weight: 600; }
.manual__rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; margin: 0 0 .4rem .6rem; }
.manual__texto { max-width: 46rem; line-height: 1.6; min-width: 0; }
.manual__texto h2 { margin-top: 2rem; padding-top: .4rem; border-top: 1px solid var(--borde); scroll-margin-top: 6rem; }
.manual__texto h3 { margin-top: 1.4rem; scroll-margin-top: 6rem; }
.manual__texto li { margin: .25rem 0; }
.manual__texto .tabla-envoltura { margin: .8rem 0; }
.manual__en-esta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; padding: 0; list-style: none; font-size: .88rem; margin: 0 0 1rem; }
@media (max-width: 800px) {
  .manual { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .manual__indice { position: static; }
  .manual__indice ol { display: flex; flex-wrap: wrap; gap: .3rem; }
  .ayuda__contexto { display: none; }
}

/* ── tanda en Hoy (etapa 3.2) ──────────────────────────────── */
.armar { border: 1px solid var(--borde); border-left: 4px solid var(--brand-deep); border-radius: var(--radio); background: var(--superficie); padding: .8rem 1rem; margin: 0 0 1rem; }
.armar__titulo { margin: 0 0 .4rem; font-weight: 600; }
.armar__salidas { margin: 0 0 .8rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.armar__salidas small { display: block; }
.armar .aviso { margin: 0 0 .8rem; }
.tanda { border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem 1rem; margin: 0 0 .8rem; background: var(--superficie); min-width: 0; }
.tanda h3 { margin: 0 0 .2rem; font-family: var(--mono); }
.tanda h3 small { font-family: system-ui, sans-serif; font-weight: 400; }
.tanda--anulada { opacity: .75; }
.tanda__resumen { margin: 0 0 .4rem; }
.tanda__trabajos { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; font-size: .92rem; overflow-wrap: anywhere; }
.tanda__trabajos small { display: block; }

/* ── ensobrado y salida a Correos (etapa 3.3) ─────────────────── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font-family: var(--mono); font-size: .8em; padding: .05rem .35rem; border: 1px solid currentColor; border-radius: 4px; margin-left: .3rem; opacity: .8; }
.boton--grande { font-size: 1.1rem; padding: .75rem 1.4rem; min-height: 3rem; }
.boton--salida { background: var(--bien); border-color: var(--bien); color: #fff; }
:root[data-theme="dark"] .boton--salida { color: #10210f; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.enlace--texto { width: auto; color: var(--enlace); text-decoration: underline; padding: 0; }
.previa__numero { font-size: 1.25rem; font-weight: 700; }
.previa ul { margin: .3rem 0; }

.ens { display: grid; gap: .8rem; min-width: 0; }
.ens__barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .92rem; }
.ens__progreso { height: 6px; background: var(--borde); border-radius: 99px; overflow: hidden; }
.ens__progreso i { display: block; height: 100%; background: var(--bien); }
.ens__teclas { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; color: var(--tenue); font-size: .86rem; }
.ens__teclas kbd { margin-left: 0; }
/* El carril: dos columnas visibles; la izquierda es la carta de la bandeja (o la que se revisa). */
.ens__ventana { overflow: hidden; border-radius: var(--radio); padding: 6px; margin: -6px; }
.ens__carril { display: flex; gap: 14px; column-gap: 14px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.ens__carril--quieto { transition: none; }
.ens__carta { flex: 0 0 calc((100% - 14px) / 2); min-width: 0; background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio);
  padding: 1rem 1.1rem 1.1rem; display: grid; gap: .65rem; align-content: start; opacity: .55; overflow-wrap: anywhere;
  transition: opacity .3s, border-color .3s, box-shadow .3s; }
.ens__carta[data-fase="siguiente"] { opacity: .8; }
.ens__carta[data-fase="actual"] { opacity: 1; border-color: var(--enlace); box-shadow: 0 0 0 4px var(--info-suave); }
.ens__carta--revisando { opacity: 1; outline: 2px dashed var(--tenue); outline-offset: 3px; }
.ens__carta--aviso { animation: ens-sacudir .3s; }
@keyframes ens-sacudir { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .ens__carril, .ens__carta { transition: none; } .ens__carta--aviso { animation: none; outline: 3px solid var(--atencion); } }
@media (max-width: 52rem) { .ens__carta { flex-basis: 86%; } }
.ens__rotulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; }
.ens__fase { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 99px; background: var(--superficie-2); }
.ens__carta[data-fase="actual"] .ens__fase { background: var(--enlace); color: var(--superficie); }
.ens__carta[data-fase="lista"] .ens__fase { background: var(--bien-suave); color: var(--bien); }
.ens__carta[data-fase="fuera"] .ens__fase { background: var(--mal-suave); color: var(--mal); }
.ens__n { font: 600 .95rem var(--mono); color: var(--tenue); }
.ens__codigo { margin: 0; font: 800 clamp(2rem, 4.5vw, 3.2rem)/1 var(--mono); letter-spacing: .03em; }
.ens__dest { margin: 0; font-size: 1.2rem; font-weight: 700; }
.ens__datos { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; font-size: .93rem; }
.ens__datos dt { color: var(--tenue); }
.ens__datos dd { margin: 0; min-width: 0; }
.ens__comuna { font-weight: 700; letter-spacing: .03em; }
.ens__oficio { background: var(--atencion-suave); outline: 2px solid var(--atencion); font-weight: 800; padding: 0 .35rem; border-radius: 4px; }
.ens__piezas { display: grid; gap: .35rem; border-top: 1px solid var(--borde); padding-top: .6rem; font-size: .9rem; }
.ens__pieza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; }
.ens__pieza b { font-weight: 600; }
.ens__pieza span { color: var(--tenue); }
.ens__pieza--sale span { color: var(--enlace); font-weight: 600; }
.ens__pieza--ok span { color: var(--bien); font-weight: 600; }
.ens__pieza--mal span, .ens__pieza--ojo span { color: var(--mal); font-weight: 700; }
.ens__estado { margin: 0; padding: .7rem .9rem; border-radius: 6px; border-left: 4px solid; font-weight: 600; }
.ens__estado p { margin: 0 0 .5rem; font-weight: 400; } .ens__estado p:last-child { margin-bottom: 0; }
.ens__estado--espera { background: var(--info-suave); border-color: var(--enlace); }
.ens__estado--mal { background: var(--mal-suave); border-color: var(--mal); }
.ens__estado--mano { background: var(--atencion-suave); border-color: var(--atencion); }
.ens__docs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ens__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.ens__botones form, .ens__secundarias form { margin: 0; }
.ens__confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.ens__confirmar .nota { flex: 1 1 12rem; margin: 0; }
.ens__secundarias { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.ens__solo-actual { margin: 0; }
.ens__volver { margin: 0; text-align: center; }
.ens__volver [hidden] { display: none; }
.ens__maquinas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .88rem; color: var(--tenue); }
.ens__maquinas .malo { color: var(--mal); }

.resumen__cifras { font-size: 1.5rem; margin: 0 0 1rem; }
.salida__resumen { margin: 0 0 1rem; border-left: 4px solid var(--bien); }
.salida__sobres { font-size: 1.25rem; margin: 0 0 .3rem; }
.salida__avisos { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--atencion); font-weight: 600; }
.salida__avisos:empty { display: none; }
.salida__codigo { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.salida__tabla input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
.salida__fila--fuera td { opacity: .5; text-decoration: line-through; }
.salida__fila--fuera td:first-child { opacity: 1; text-decoration: none; }
.salida__confirmar { margin-top: 1rem; max-width: 34rem; }
.hoy-salida { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.hoy-salida .nota { margin: 0; }
.tanda__ensobrado { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .5rem 0; }
.tanda__ensobrado form { margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .boton--salida { color: #10210f; } }
.atencion { color: var(--atencion); }

/* ── salida a Correos por tanda (20/10) ────────────────────── */
.salida__tanda th { background: var(--superficie-2); text-align: left; font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; border-top: 2px solid var(--borde); }
.salida__tanda-resumen { font-weight: 400; color: var(--tenue); }
.salida__tanda-resumen b { color: var(--texto); }

/* ── modo ensayo (20/10) ───────────────────────────────────── */
.ensayo { background: #f2c200; color: #1d1c19; text-align: center; font-size: .9rem; padding: .35rem 1rem;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #1d1c19 0 10px, #f2c200 10px 20px) 6; }
.ensayo a { color: #1d1c19; font-weight: 600; }

/* ── comprobantes (3.4b) y cuentas (R) ─────────────────────────────────────── */
.comp-tabla td { vertical-align: top; }
.comp-tabla tr.comp--ambar td { background: var(--atencion-suave); }
.comp-tabla tr.comp--ambar td:first-child { box-shadow: inset 4px 0 0 var(--atencion); }
.comp-tabla tr.comp--falta td:first-child { box-shadow: inset 4px 0 0 var(--mal); }
.comp-tabla tr.comp--lista td:first-child { box-shadow: inset 4px 0 0 var(--bien); }
.comp-tabla tr.comp--aprobada td { color: var(--tenue); }
.comp-tabla tr.comp--propuesta .comp-numero { outline: 2px dashed var(--atencion); }
.comp-numero { width: 11.5rem; max-width: 100%; letter-spacing: .04em; }
input.seg--mal { border-color: var(--mal); background: var(--mal-suave); }
input.seg--bien { border-color: var(--bien); }
.comp-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .25rem; }
.comp-acciones .boton--grande { margin-left: auto; }
.comp-sueltos { list-style: none; padding: 0; display: grid; gap: .75rem; }
.comp-sueltos .tarjeta p { margin: .2rem 0; }
.comp-sueltos .en-linea { flex-wrap: wrap; gap: .5rem; }
.excepcion summary { color: var(--atencion); }
.avisos-admin { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .75rem; }
.avisos-admin form { margin-top: .4rem; }
.cuentas-tabla td { vertical-align: top; }
.cuentas-tabla details { margin-top: .3rem; }
.rol { display: inline-block; font-size: .8rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--borde); }
.rol--admin { background: var(--info-suave); }
.rol--operacion { background: var(--bien-suave); }
@media (max-width: 640px) {
  .comp-acciones .boton--grande { margin-left: 0; width: 100%; }
}