/* 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) ──────────────────────────────── */
.grupo-tanda { margin: 1.2rem 0 .5rem; font-size: 1.05rem; }
.grupo-tanda:first-of-type { margin-top: .4rem; }
.armar__especial { margin-top: .6rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.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); }
/* Visor del comprobante al costado de la revisión (pantallas anchas); en las angostas, el enlace. */
.comp-visor { display: none; }
@media (min-width: 1200px) {
  /* sale del ancho del contenido para que la tabla no se apriete: ocupa la pantalla menos un margen */
  .comp-revision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 36%); gap: 1rem; align-items: start;
    margin-left: calc(50% - 50vw + 1.5rem); margin-right: calc(50% - 50vw + 1.5rem); }
  .comp-visor:not([hidden]) { display: block; position: sticky; top: .75rem; }
  .comp-visor__titulo { margin: 0 0 .35rem; display: flex; gap: .75rem; align-items: baseline; }
  .comp-visor iframe { width: 100%; height: calc(100vh - 6rem); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
  .comp-tabla tr[data-ver] { cursor: pointer; }
  .comp-tabla tr.comp--viendo td { outline: 2px solid var(--enlace); outline-offset: -2px; }
}
.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%; }
}

/* ── cuentas empresa: formularios de carga (26/10) ─────────── */
.form-carta { display: grid; gap: 1rem; max-width: 56rem; }
.form-carta fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem 1rem; align-items: start;
  border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem 1rem; margin: 0; background: var(--superficie); }
.form-carta fieldset[hidden] { display: none; }
.form-carta legend { font-weight: 700; padding: 0 .3rem; }
.form-carta .ancho { grid-column: 1 / -1; }
.form-carta .acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.pasos-carga { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.pasos-carga li { margin: .35rem 0; }
.perfil { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--borde-fuerte); }
.perfil--torpedo { border-color: var(--brand-deep); background: var(--brand-suave); }
.form-carta--ancho { max-width: none; }
.ensayo form.en-linea { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.ensayo select { min-height: 0; padding: .1rem .4rem; font-size: .85rem; }
.ensayo .enlace { width: auto; padding: 0; text-decoration: underline; font-weight: 600; }

/* ── cuentas empresa: Mis cartas con descargas y manual (26/10) ─────────── */
.atajos { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin: -.3rem 0 .8rem; font-size: .9rem; color: var(--tenue); }
.atajos a[aria-current] { font-weight: 700; color: var(--texto); text-decoration: none; border-bottom: 2px solid var(--brand-deep); }
.barra-descarga { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; padding: .6rem .8rem; margin-bottom: .6rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); position: sticky; top: 3.4rem; z-index: 4; }
.barra-descarga [data-resumen] { font-weight: 600; margin-right: auto; }
.barra-descarga .enlace { width: auto; }
.casilla-col { width: 2rem; text-align: center; }
.casilla-col input { width: 1.05rem; height: 1.05rem; }
.paginas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin: .8rem 0; }
.partes { list-style: none; padding: 0; display: grid; gap: .5rem; }
.manual-empresa { max-width: 52rem; }
.manual-empresa h2 { margin-top: 2rem; scroll-margin-top: 4rem; }
.manual-empresa h3 { margin-bottom: .3rem; }
.manual-empresa .indice { columns: 2 16rem; padding-left: 1.2rem; }
.manual-empresa dl.datos dt { font-weight: 600; }
@media (max-width: 640px) {
  .barra-descarga { position: static; }
  .barra-descarga .boton { width: 100%; }
}

/* Boletas y facturas (28/10) */
.tributario { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: .8rem 1rem; }
.tributario h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.tributario h2 small { font-weight: 400; }
.tabla--datos th { width: 13rem; white-space: nowrap; vertical-align: top; }
.tabla--datos td { vertical-align: top; }
.copiable { width: 100%; min-width: 16rem; border: 0; background: transparent; color: inherit; font: inherit; resize: vertical; padding: 0; field-sizing: content; }
.oculto-visual { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fila-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: .6rem 0; }
.fila-form label { display: flex; flex-direction: column; gap: .2rem; }
.fila-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.boton--chico { padding: .2rem .6rem; min-height: 1.8rem; font-size: .85rem; }
.menu__usuario { margin: 0 0 .3rem; padding: .3rem .6rem .5rem; border-bottom: 1px solid var(--borde); font-weight: 600; }
.menu__panel a[aria-current="page"] { background: var(--superficie-2); }

/* ── segundo factor (29/10) ─────────────────────────────────── */
.codigo-6 { font-size: 1.35rem; letter-spacing: .25em; max-width: 9.5rem; text-align: center; }
.sf-activar { max-width: 40rem; }
.sf-pasos { display: grid; gap: 1.1rem; padding-left: 1.3rem; margin: 0 0 1rem; }
.sf-qr { width: 13rem; max-width: 70vw; margin: .7rem 0 .4rem; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: #fff; }
.sf-qr svg { display: block; width: 100%; height: auto; }
.sf-secreto { font-size: 1.05rem; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.sf-codigos { max-width: 36rem; }
.sf-lista { columns: 2; column-gap: 2rem; font-size: 1.15rem; padding-left: 1.6rem; margin: 1rem 0; }
.sf-lista li { margin: .2rem 0; }
@media print {
  .barra, .ayuda, .acciones, .sf-codigos .nota { display: none !important; }
  .sf-codigos { box-shadow: none; border: 0; }
}
.sf-ahora-no { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; border-top: 1px solid var(--borde); padding-top: .8rem; }
/* ── Hoy: hay cambios (29/10) ───────────────────────────────── */
.hay-cambios { position: sticky; top: .5rem; z-index: 5; margin: 0 0 1rem; padding: .55rem .9rem; border-radius: var(--radio); background: var(--atencion-suave); border: 1px solid var(--atencion); font-size: .92rem; box-shadow: var(--sombra); }
.hay-cambios a { font-weight: 600; }
.hay-cambios[hidden] { display: none; }

/* Varios documentos por carta en la revisión de la planilla (2/11) */
.docs-fila select { display: block; width: 100%; margin-bottom: .3rem; }
.docs-fila select[data-otro] { opacity: .75; }

/* Pedir corrección al cliente (ficha, 3/11) */
.correccion-pedir textarea { width: 100%; font: inherit; }
.correccion-pedir > label { display: block; margin-top: .6rem; }
.correccion-pedir details { margin-top: .6rem; }

/* ── 4/11: flujo de la tanda (imprimir al ensobrar, reimprimir hojas y etiquetas, vuelta a Hoy) ── */
.aviso--info { background: var(--info-suave); border-color: var(--enlace); }
.previa__aviso { font-size: 1.05rem; }
.previa__pieza { border-top: 1px solid var(--borde); padding-top: .8rem; margin-top: .8rem; }
.previa__pieza h3 { margin-bottom: .3rem; }
.previa__trabajos { list-style: none; padding: 0; margin: .2rem 0 .6rem; }
.previa__trabajos li { margin: .15rem 0; }
.previa__trabajos form { display: inline-flex; margin-left: .4rem; }
.previa__hojas ol { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .25rem; }
.previa__codigos { font-family: var(--mono); font-size: .9em; color: var(--tenue); margin-left: .4rem; }
.previa__reimprimir { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.previa__comenzar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }
.etiquetas-reimp { margin: .3rem 0; }
.etiquetas-reimp__botones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.etiquetas-reimp__botones small { font-weight: 400; opacity: .75; }
.vuelta-hoy { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.vuelta-hoy[hidden] { display: none; }
.vuelta-hoy__caja { max-width: 34rem; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.vuelta-hoy__cuenta { font-size: 1.15rem; }
.vuelta-hoy__cuenta b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.vuelta-hoy__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.config-indice { margin: -.4rem 0 1.2rem; line-height: 1.9; }
.config-caja { margin-bottom: 1rem; max-width: 46rem; }
.config-caja--ancha { max-width: none; }
.config-caja textarea { width: 100%; }
.config-caja__pie { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 0; }
.config-precios input[type="time"] { width: auto; }
.config-rige { font-size: 1.1rem; }
.config-antes { text-decoration: line-through; }
.config-estado { list-style: none; padding: 0; display: grid; gap: .3rem; }

/* ── Panel en el teléfono (PWA, 4/11): barra de abajo, cabecera compacta y tablas como tarjetas ── */
.barra__icono, .abajo, .solo-app, .solo-telefono { display: none; }
/* Imprimir queda en el PC: en el teléfono no se ven las acciones que mandan algo a una impresora. */
@media (max-width: 640px) {
  .solo-telefono { display: block; }
  .solo-pc, .etiquetas-reimp,
  form[action="/tanda/armar"], form[action$="/ensobrado/imprimir"], form[action^="/tanda/"][action$="/anular"],
  form[action^="/equipos"], form[action^="/impresion/"], a.boton[href$="/ensobrado"] { display: none !important; }
}
@media (display-mode: standalone) { .solo-app.barra__icono { display: inline-grid; } }
@media (hover: none) and (pointer: coarse) { .solo-escritorio { display: none !important; } }
.abajo svg, .barra__icono svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  body { padding-bottom: calc(4.1rem + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px; }             /* sin el zoom de iPhone al tocar un campo */
  input[type="file"] { max-width: 100%; min-width: 0; }
  .boton, input, select { min-height: 2.75rem; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.3rem; height: 1.3rem; }
  label.casilla { min-height: 2.4rem; }
  .boton--chico { min-height: 2.3rem; }

  .barra { padding: calc(.45rem + env(safe-area-inset-top)) .8rem .45rem; gap: .4rem; }
  .barra > .nav, .barra > .menu, .barra > .ayuda { display: none; }
  /* Panel de empresa: no tiene la barra de abajo, así que el menú de secciones y el del usuario siguen arriba. */
  body[data-zona="empresa"] .barra > .nav, body[data-zona="empresa"] .barra > .menu { display: flex; }
  body[data-zona="empresa"] { padding-bottom: env(safe-area-inset-bottom); }
  .marca { margin-right: auto; font-size: 1rem; }
  .barra__icono:not(.solo-app) { display: inline-grid; }
  .barra__icono { place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 8px;
    border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); cursor: pointer; }
  .barra__icono svg { width: 1.3rem; height: 1.3rem; }
  .barra__icono[aria-expanded="true"] { background: var(--brand-suave); border-color: var(--brand-deep); }
  .busqueda { display: none; order: 10; flex: 1 1 100%; max-width: none; }
  .barra--buscando .busqueda { display: block; }
  .sistema { order: 11; width: 100%; }
  .sistema .chip:not(.chip--mal) { display: none; }       /* en el teléfono, solo lo que pide atención */
  .sistema:not(:has(.chip--mal)) { display: none; }

  .abajo { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--superficie);
    border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
  .abajo > a, .mas > summary { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .12rem; min-height: 3.7rem; padding: .35rem .1rem; font-size: .66rem; letter-spacing: -.01em; line-height: 1.1; color: var(--tenue); text-decoration: none;
    position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .abajo > a span, .mas > summary span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abajo svg { width: 1.45rem; height: 1.45rem; }
  .abajo > a[aria-current], .mas > summary[aria-current], .mas[open] > summary { color: var(--texto); font-weight: 600; box-shadow: inset 0 3px 0 var(--brand-deep); }
  .abajo__n { position: absolute; top: .3rem; left: calc(50% + .35rem); min-width: 1.15rem; padding: 0 .3rem; border-radius: 99px;
    background: var(--mal); color: #fff; font-size: .66rem; line-height: 1.15rem; text-align: center; font-weight: 700; }
  .mas { flex: 1 1 0; min-width: 0; display: flex; }
  .mas > summary { list-style: none; }
  .mas > summary::-webkit-details-marker { display: none; }
  .mas[open]::before { content: ""; position: fixed; inset: 0 0 calc(3.7rem + env(safe-area-inset-bottom)); background: rgb(0 0 0 / .35); }
  .mas__panel { position: fixed; left: .5rem; right: .5rem; bottom: calc(4.1rem + env(safe-area-inset-bottom)); max-height: calc(100vh - 8rem);
    overflow-y: auto; overscroll-behavior: contain; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
    box-shadow: 0 -8px 30px rgb(0 0 0 / .2); padding: .5rem; display: grid; }
  .mas__panel a, .mas__panel .enlace { display: block; padding: .7rem .7rem; border-radius: 8px; text-decoration: none; color: var(--texto); text-align: left; font-size: .98rem; }
  .mas__panel a[aria-current] { background: var(--brand-suave); }
  .mas__panel form { margin: 0; }
  .mas__panel .menu__usuario { padding: .5rem .7rem; }
  .mas__secciones { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding-bottom: .5rem; margin-bottom: .3rem; border-bottom: 1px solid var(--borde); }
  .mas__secciones a { background: var(--superficie-2); font-weight: 600; }

  /* Tablas como tarjetas: panel.js copia el encabezado de cada columna a su celda (data-etiqueta). */
  .tabla-envoltura:has(> .tabla:not(.tabla--tal-cual)) { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tabla:not(.tabla--tal-cual), .tabla:not(.tabla--tal-cual) > tbody, .tabla:not(.tabla--tal-cual) > tbody > tr,
  .tabla:not(.tabla--tal-cual) > tbody > tr > td, .tabla:not(.tabla--tal-cual) > tbody > tr > th { display: block; width: 100%; }
  .tabla:not(.tabla--tal-cual) > thead { display: none; }
  .tabla:not(.tabla--tal-cual) > tbody > tr { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    margin: 0 0 .6rem; padding: .35rem 0; box-shadow: var(--sombra); }
  .tabla:not(.tabla--tal-cual) > tbody > tr:hover { background: var(--superficie); }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td, .tabla:not(.tabla--tal-cual) > tbody > tr > th { border: 0; padding: .3rem .8rem; text-align: left; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td[data-etiqueta] { position: relative; padding-left: 8rem; min-height: 1.9rem; overflow-wrap: anywhere; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td[data-etiqueta]::before { content: attr(data-etiqueta); position: absolute; left: .8rem; top: .45rem;
    width: 6.6rem; font-size: .68rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td:empty { display: none; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > th { width: auto; background: none; padding-bottom: 0; }
  .tabla:not(.tabla--tal-cual) td.nowrap { white-space: normal; }
  .tabla:not(.tabla--tal-cual) form.en-linea { align-items: stretch; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td:first-child { font-size: 1rem; }
  /* Tarjetas compactas (entrega C): lo principal a la vista, el resto con «Ver todo». */
  .tabla > tbody > tr:not(.abierta) > td.pl, .tabla > tbody > tr > td.vacia { display: none; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td.cab { display: inline-block; width: auto; padding: .35rem .2rem .35rem .8rem; min-height: 0; vertical-align: middle; }
  .tabla:not(.tabla--tal-cual) > tbody > tr > td.cab::before { content: none; }
  .tabla > tbody > tr > td.cab .codigo { font-size: 1.1rem; }
  .tabla > tbody > tr > td.tabla__mas { display: block; padding: .2rem .8rem .3rem; }
  .tabla__mas .enlace { width: auto; padding: .45rem 0; color: var(--enlace); font-size: .9rem; text-decoration: underline; }
}
.tabla td.tabla__mas { display: none; }

/* Facturación empresas (4/11): los pasos de un mes */
.pasos-fact { list-style: none; counter-reset: paso; padding: 0; margin: 1rem 0; }
.pasos-fact > li { counter-increment: paso; position: relative; padding: .9rem 1rem .9rem 3rem; border: 1px solid var(--borde); border-radius: 10px; margin: 0 0 .6rem; background: var(--superficie); }
.pasos-fact > li::before { content: counter(paso); position: absolute; left: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--superficie-2); border: 1px solid var(--borde); display: grid; place-items: center; font-size: .85rem; font-weight: 600; }
.pasos-fact > li p { margin: .4rem 0; }
.pasos-fact .fila-form { margin-top: .5rem; }
/* ── Foto del comprobante Ultra desde el teléfono (entrega B, 4/11) ── */
.ultra-foto__elegir { display: grid; gap: .6rem; }
.ultra-foto__elegir[hidden] { display: none; }
.ultra-foto__boton { display: flex; align-items: center; justify-content: center; min-height: 3.2rem; font-size: 1.05rem; text-align: center; cursor: pointer; }
.ultra-foto__vista { margin: 0; }
.ultra-foto__vista img { display: block; max-width: 100%; max-height: 22rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.ultra-foto__numero { font-size: 1.25rem; letter-spacing: .06em; }
.ultra-foto__lectura { font-weight: 600; color: var(--texto); }
.ultra-foto__propuestas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ultra-foto__propuestas .nota { flex-basis: 100%; margin: 0; }
.ultra-foto__confirmar { border: 2px solid var(--brand-deep); border-radius: var(--radio); background: var(--brand-suave); padding: .9rem 1rem; }
.ultra-foto__confirmar[hidden] { display: none; }
.ultra-foto__que-pasa { font-size: 1.05rem; font-weight: 600; margin: 0 0 .6rem; }
.ultra-foto__botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ultra-foto [hidden], .ultra-cola[hidden] { display: none !important; }
.ultra-cola .aviso .boton { margin-left: .4rem; vertical-align: middle; }
@media (max-width: 640px) {
  .ultra-caja > summary { font-size: 1.05rem; padding: .5rem 0; }
  .ultra-foto__botones .boton { flex: 1 1 100%; min-height: 3rem; }
}

/* Listas con opciones largas (motivo de la carta, 5/11): no ensanchan el formulario en el teléfono. */
.pila, .form-carta fieldset { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-carta fieldset { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.pila select, .form-carta select { max-width: 100%; min-width: 0; }

/* ── Estadísticas (5/11): cifras, gráficos SVG sin JavaScript y paleta categórica validada (claro y oscuro) ── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin: 1rem 0; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; }
.cifra__nombre { color: var(--tenue); font-size: .85rem; }
.cifra__valor { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--tenue); font-size: .8rem; }
.pestanas--chicas { margin: .4rem 0 .6rem; }
.pestanas--chicas a { font-size: .82rem; padding: .25rem .6rem; }
.grafico__svg { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.g-texto { fill: var(--tenue); font-size: 11px; font-family: inherit; }
.g-texto--valor { fill: var(--texto); }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-marca { stroke: var(--superficie); stroke-width: 1; }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-linea.g-s1 { fill: none; stroke: var(--g1); }
.g-punto { stroke: var(--superficie); stroke-width: 1.5; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0; margin: 0 0 .5rem; font-size: .85rem; color: var(--texto); }
.leyenda li { display: flex; align-items: center; gap: .35rem; }
.leyenda__marca { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; background: var(--g1); }
:root { --g1: #2a78d6; --g2: #eb6834; --g3: #1baf7a; --g4: #eda100; --g5: #e87ba4; --g6: #008300; --g7: #6250d6; --g8: #e34948; }
:root[data-theme="dark"] { --g1: #3987e5; --g2: #d95926; --g3: #199e70; --g4: #c98500; --g5: #d55181; --g6: #008300; --g7: #9085e9; --g8: #e66767; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { --g1: #3987e5; --g2: #d95926; --g3: #199e70; --g4: #c98500; --g5: #d55181; --g6: #008300; --g7: #9085e9; --g8: #e66767; }
}
.g-s1 { fill: var(--g1); } .g-s2 { fill: var(--g2); } .g-s3 { fill: var(--g3); } .g-s4 { fill: var(--g4); }
.g-s5 { fill: var(--g5); } .g-s6 { fill: var(--g6); } .g-s7 { fill: var(--g7); } .g-s8 { fill: var(--g8); }
.leyenda__marca.g-s1 { background: var(--g1); } .leyenda__marca.g-s2 { background: var(--g2); } .leyenda__marca.g-s3 { background: var(--g3); }
.leyenda__marca.g-s4 { background: var(--g4); } .leyenda__marca.g-s5 { background: var(--g5); } .leyenda__marca.g-s6 { background: var(--g6); }
.graficos { display: grid; gap: 0 1.5rem; }
@media (min-width: 960px) { .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g-texto { font-size: 15px; } }
/* Insumos (5/11) */
.fila--atencion td { background: var(--atencion-suave); }
.lista-simple { margin: .4rem 0; padding-left: 1.1rem; font-size: .9rem; }
#stock input.corto, #compra input.corto, #conteo input.corto { width: 6.5rem; }
#compra .tabla input, #compra .tabla select, #aviso input[type="email"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 600px) { #compra .tabla input.corto, #conteo input.corto, #stock input.corto { width: 100%; } #aviso form { flex-wrap: wrap; } }
.g-vacio { fill: var(--superficie-2); }

/* Línea de tiempo de entrega en la ficha (E9, 6/11). */
.linea-entrega { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.linea-entrega__paso { flex: 1 1 10rem; display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie-2); color: var(--tenue); position: relative; }
.linea-entrega__paso b { color: var(--texto); font-size: .9rem; }
.linea-entrega__paso.hecho { background: var(--superficie); border-color: var(--bien, #1baf7a); color: var(--texto); }
.linea-entrega__paso.hecho b::before { content: "✓ "; color: var(--bien, #1baf7a); }
.linea-entrega__paso.dudoso { border-style: dashed; border-color: var(--tenue); }
.linea-entrega__paso.dudoso b::before { content: "? "; color: var(--tenue); }
.linea-entrega__paso.evidencia { border-width: 2px; }