/* OXEN MOBILITY — identidad: negro ejecutivo con dorado (y su modo día) */
:root {
  --negro:        #0a0a0a;
  --negro-suave:  #141312;
  --carta:        #17160f;
  --linea:        #2e2a20;
  --dorado:       #d4b46a;
  --dorado-alto:  #f0e0a8;
  --dorado-bajo:  #b8985a;
  --texto:        #ece5d6;
  --tenue:        #9c9182;
  --verde:        #7fb77e;
  --rojo:         #c96a5f;
  --rojo-claro:   #e8a79c;
  --campo:        #0f0e0b;
  --barra-caja:   #13120d;
  --hueco:        #0b0a08;
  --sobre-dorado: #15120a;
  --apagado:      #5d5649;
  --sombra:        rgba(0,0,0,.6);
  --resalte:       rgba(212,180,106,.12);
  --resalte-suave: rgba(212,180,106,.06);
  --alerta:        rgba(201,106,95,.09);
  --alerta-fuerte: rgba(201,106,95,.14);
}

/* modo día: la misma marca, con la luz prendida */
html[data-tema="dia"] {
  --negro:        #f2eee4;
  --negro-suave:  #ffffff;
  --carta:        #ffffff;
  --linea:        #ded5c2;
  --dorado:       #8a6a22;
  --dorado-alto:  #6b5219;
  --dorado-bajo:  #b8985a;
  --texto:        #2b2721;
  --tenue:        #7b7366;
  --verde:        #3f7d3e;
  --rojo:         #b0433a;
  --rojo-claro:   #8c332c;
  --campo:        #fffdf8;
  --barra-caja:   #faf7ef;
  --hueco:        #ebe5d7;
  --sobre-dorado: #fffaf0;
  --apagado:      #a79e8d;
  --sombra:       rgba(90,78,52,.18);
  --resalte:      rgba(138,106,34,.12);
  --resalte-suave: rgba(138,106,34,.06);
  --alerta:       rgba(176,67,58,.09);
  --alerta-fuerte: rgba(176,67,58,.15);
}

* { box-sizing: border-box; }

/* Lo marcado como oculto se oculta, aunque su clase traiga otro display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 50% -120px, var(--resalte), transparent 70%),
    var(--negro);
  color: var(--texto);
  font-family: "Segoe UI", -apple-system, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--dorado); text-decoration: none; }
a:hover { color: var(--dorado-alto); }

.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 18px 60px; }

/* ----------------------------------------------------------- encabezado */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 26px;
}
.barra .marcas { display: flex; align-items: center; gap: 18px; }
.barra img.oxen { height: 82px; }
.barra img.cliente { height: 48px; opacity: .95; }
.barra .divisoria { width: 1px; height: 52px; background: var(--linea); }
.barra .sesion { font-size: 13px; color: var(--tenue); text-align: right; }
.barra .sesion strong { color: var(--texto); display: block; font-weight: 600; }

.titulo-pagina {
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dorado); margin: 0 0 22px;
}

/* ----------------------------------------------------------- tarjetas */
.rejilla { display: grid; gap: 16px; }
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla.dos    { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.carta {
  background: linear-gradient(180deg, transparent, transparent), var(--carta);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 24px 26px;
}
.carta h2 {
  margin: 0 0 14px; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dorado); font-weight: 600;
}

.dato .etiqueta {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue);
}
.dato .cifra {
  font-size: 30px; font-weight: 300; color: var(--dorado-alto); margin-top: 6px;
  letter-spacing: .01em;
}
.dato .pie { font-size: 12px; color: var(--tenue); margin-top: 4px; }
.dato .pie.aviso-corto { color: var(--dorado); font-weight: 600; }
.dato.acento { border-color: var(--dorado-bajo); }
.dato.acento .cifra { color: var(--dorado); }

.contador { display: flex; align-items: baseline; gap: 8px; }
.contador .grande { font-size: 44px; font-weight: 300; color: var(--dorado-alto); }
.contador .de { font-size: 15px; color: var(--tenue); }

.riel { height: 6px; background: var(--hueco); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.riel span { display: block; height: 100%; background: linear-gradient(90deg, var(--dorado-bajo), var(--dorado-alto)); }

/* ----------------------------------------------------------- tablas */
.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
  text-align: left; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dorado); font-weight: 600; padding: 12px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--dorado-bajo);
}
td { padding: 15px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }

/* --- divisiones por paquete dentro de la lista de traslados --- */
tr.division td {
  background: linear-gradient(90deg, var(--resalte), transparent);
  border-top: 1px solid var(--dorado-bajo);
  border-bottom: 1px solid var(--dorado-bajo);
  padding: 13px 14px;
}
tr.division:hover td { background: linear-gradient(90deg, var(--resalte), transparent); }
tr.division .nombre {
  font-size: 13.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dorado-alto);
}
tr.division .detalle {
  font-size: 12.5px; color: var(--tenue); margin-left: 14px; letter-spacing: .04em;
  text-transform: none; font-weight: 400;
}
tr.division.seccion td { border-color: var(--linea); }
tr.division.seccion .nombre { color: var(--dorado); }
tr.division + tr td { border-top: none; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.centro, th.centro { text-align: center; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--resalte-suave); }
.vacio { color: var(--tenue); font-style: italic; padding: 18px 14px; }

.sello {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 99px; border: 1px solid var(--linea); color: var(--tenue);
  white-space: nowrap;          /* "PAQUETE 11" no se parte ni se sale del ovalo */
  line-height: 1.2; text-align: center;
}
.sello.ok      { color: var(--verde);  border-color: color-mix(in srgb, var(--verde) 55%, transparent); }
.sello.espera  { color: var(--dorado); border-color: var(--dorado-bajo); }
.sello.malo    { color: var(--rojo);   border-color: color-mix(in srgb, var(--rojo) 55%, transparent); }
.sello.paquete { color: var(--dorado-alto); border-color: var(--dorado-bajo); }

/* ----------------------------------------------------------- formularios */
label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
        color: var(--tenue); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; background: var(--campo); border: 1px solid var(--linea); border-radius: 8px;
  color: var(--texto); padding: 9px 11px; font-family: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dorado-bajo); }
.campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.campos .ancho { grid-column: 1 / -1; }

.boton {
  display: inline-block; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, var(--dorado-alto), var(--dorado-bajo));
  color: var(--sobre-dorado); border: none; border-radius: 8px;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.boton:hover { filter: brightness(1.08); }
.boton.fantasma {
  background: transparent; border: 1px solid var(--dorado-bajo); color: var(--dorado);
  font-weight: 600;
}
.boton.chico { padding: 5px 12px; font-size: 11px; letter-spacing: .06em; }
.boton.peligro { background: transparent; border: 1px solid color-mix(in srgb, var(--rojo) 60%, transparent); color: var(--rojo); }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* ------------------------ captura por pasos (una cosa a la vez) ------------ */
.paso {
  border-top: 1px solid var(--linea); padding: 20px 0 4px; margin: 0;
}
.paso:first-of-type { border-top: none; padding-top: 4px; }
.paso-titulo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto); font-weight: 600;
}
.paso-titulo .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--resalte); border: 1px solid var(--dorado-bajo);
  color: var(--dorado-alto); font-size: 13px; letter-spacing: 0;
}
.paso-titulo .opcional {
  font-size: 11px; letter-spacing: .08em; color: var(--tenue);
  text-transform: none; font-weight: 400; font-style: italic;
}
details.paso > summary { cursor: pointer; list-style: none; }
details.paso > summary::-webkit-details-marker { display: none; }
details.paso > summary::after {
  content: "▾"; margin-left: auto; color: var(--dorado); font-size: 14px;
}
details.paso[open] > summary::after { content: "▴"; }

.pista { font-size: 11.5px; color: var(--tenue); margin-top: 6px; min-height: 14px; }

/* cada paso aprovecha el ancho: lo importante mas grande */
.campos.quien { grid-template-columns: 2fr 1fr 1fr; }
.campos.ruta  { grid-template-columns: 1fr 1fr 170px; }
@media (max-width: 820px) {
  .campos.quien, .campos.ruta { grid-template-columns: 1fr; }
}

/* los campos grandes se leen mejor al capturar (en todas las pestanas) */
.paso .campos, .comodo .campos { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.paso input, .paso select, .comodo input, .comodo select { padding: 12px 13px; font-size: 15px; }
.paso label, .comodo label { font-size: 11.5px; margin-bottom: 7px; }
.comodo input[type="file"] { padding: 10px 12px; }

/* el total se calcula a la vista mientras se escribe */
.resumen-vivo {
  font-size: 14px; color: var(--tenue); display: flex; align-items: center; gap: 8px;
}
.resumen-vivo strong { color: var(--dorado-alto); font-size: 17px; font-weight: 400; }

/* "del paquete" o "independiente": dos botones grandes, no una lista */
.opciones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.opcion { margin: 0; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion .cara {
  display: block; border: 1px solid var(--linea); border-radius: 10px;
  padding: 14px 18px; background: var(--campo);
}
.opcion .cara strong {
  display: block; font-size: 15px; color: var(--texto); font-weight: 600;
  letter-spacing: .02em;
}
.opcion .cara small { display: block; font-size: 12px; color: var(--tenue); margin-top: 3px; }
.opcion:hover .cara { border-color: var(--dorado-bajo); }
.opcion input:checked + .cara {
  border-color: var(--dorado); background: var(--resalte);
}
.opcion input:checked + .cara strong { color: var(--dorado-alto); }
.opcion input:focus-visible + .cara { outline: 2px solid var(--dorado); outline-offset: 2px; }

.boton.grande { padding: 15px 34px; font-size: 14px; }

.aviso {
  border: 1px solid var(--dorado-bajo); background: var(--resalte-suave);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px;
}
.aviso.malo { border-color: color-mix(in srgb, var(--rojo) 60%, transparent); background: var(--alerta); }
.aviso { position: relative; padding-right: 44px; }
.cerrar-aviso {
  position: absolute; top: 6px; right: 10px; background: transparent; border: none;
  color: var(--tenue); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px;
  border-radius: 6px; font-family: inherit;
}
.cerrar-aviso:hover { color: var(--dorado-alto); background: var(--resalte); }

/* --------------------------------------------- buscador de direcciones */
.buscador { position: relative; }
.sugerencias {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: var(--barra-caja); border: 1px solid var(--dorado-bajo); border-top: none;
  border-radius: 0 0 10px 10px; overflow: hidden;
  box-shadow: 0 18px 36px var(--sombra);
}
.sugerencias:empty { display: none; }
.sugerencias button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--linea);
  color: var(--texto); font-family: inherit; font-size: 13.5px; padding: 9px 12px;
}
.sugerencias button:last-child { border-bottom: none; }
.sugerencias button:hover { background: var(--resalte); }
.sugerencias button strong { display: block; font-weight: 600; color: var(--dorado-alto); }
.sugerencias button span { font-size: 12px; color: var(--tenue); }

/* --------------------------------- edicion renglon por renglon (la pluma) */
.pluma {
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: var(--apagado); font-size: 17px; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.pluma:hover { color: var(--dorado-alto); background: var(--resalte); }
tr.editando { background: var(--resalte-suave); }
tr.editando td { border-color: var(--dorado-bajo); }
.acciones-fila { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* ------------------------------------------- filtros de la lista de traslados */
.filtros { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.filtros a {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--tenue); border: 1px solid var(--linea); border-radius: 99px;
  padding: 5px 13px; white-space: nowrap;
}
.filtros a:hover { color: var(--dorado); border-color: var(--dorado-bajo); }
.filtros a.activo {
  color: var(--dorado-alto); border-color: var(--dorado-bajo);
  background: var(--resalte);
}

/* --------------------------------------- visor de documentos (encima de todo) */
.visor {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 28px;
  background: rgba(0,0,0,.82); backdrop-filter: blur(3px);
}
.visor-caja {
  width: min(1000px, 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--dorado-bajo); border-radius: 12px;
  overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.visor-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--linea); background: var(--barra-caja);
}
.visor-titulo {
  flex: 1; min-width: 150px; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dorado-alto); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visor-cuerpo { flex: 1; background: var(--hueco); overflow: auto; display: flex; }
.visor-cuerpo iframe { flex: 1; border: none; width: 100%; height: 100%; }
.visor-cuerpo img { margin: auto; max-width: 100%; max-height: 100%; display: block; }
@media (max-width: 640px) { .visor { padding: 10px; } }

/* --------------- paquetes e independientes: se abren al darles clic ---------- */
.titulo-grupo {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--dorado); font-weight: 600; margin: 24px 0 12px;
}
.titulo-grupo:first-of-type { margin-top: 8px; }

.grupo-plegable {
  border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 10px;
  background: var(--barra-caja); overflow: hidden;
}
.grupo-plegable > summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; cursor: pointer; list-style: none;
}
.grupo-plegable > summary::-webkit-details-marker { display: none; }
.grupo-plegable > summary:hover { background: var(--resalte-suave); }
.grupo-plegable .flecha {
  color: var(--dorado); font-size: 11px; transition: transform .15s; display: inline-block;
}
.grupo-plegable[open] .flecha { transform: rotate(90deg); }
.grupo-plegable .nombre {
  font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dorado-alto);
}
.grupo-plegable .detalle { font-size: 13px; color: var(--tenue); }
.grupo-plegable .importe {
  margin-left: auto; font-size: 16px; color: var(--texto);
}
.grupo-plegable[open] > summary { border-bottom: 1px solid var(--linea); }
.grupo-plegable .tabla-caja { padding: 0 6px 6px; }

/* el que debe se ve distinto; el pagado se queda como siempre */
.grupo-plegable.debe { border-color: color-mix(in srgb, var(--rojo) 55%, transparent); }
.grupo-plegable.debe > summary { background: var(--alerta); }
.grupo-plegable.debe > summary:hover { background: var(--alerta-fuerte); }
.grupo-plegable.debe .nombre { color: var(--rojo-claro); }

/* ------------------- factura y su complemento, uno al lado del otro ---------- */
table.relacion .folio {
  display: inline-block; font-weight: 700; color: var(--dorado-alto);
  letter-spacing: .08em; margin-right: 10px; min-width: 42px;
}
table.relacion .concepto {
  font-size: 12.5px; color: var(--tenue); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
table.relacion .rep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
table.relacion .rep + .rep { margin-top: 8px; }
table.relacion .fecha-rep { font-size: 13px; color: var(--tenue); }
table.relacion .monto-rep { font-size: 13px; color: var(--texto); margin-right: 4px; }
table.relacion .nota-rep { font-size: 12.5px; color: var(--tenue); font-style: italic; }

/* la que todavía no tiene su complemento salta a la vista */
tr.falta-rep td { background: var(--alerta); }
tr.falta-rep:hover td { background: var(--alerta-fuerte); }
tr.falta-rep td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }

/* ----------------------------------------------------------- pestanas */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.pestanas button {
  background: transparent; border: 1px solid var(--linea); color: var(--tenue);
  border-radius: 99px; padding: 7px 16px; cursor: pointer; font-family: inherit;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.pestanas button.activa { border-color: var(--dorado-bajo); color: var(--dorado); background: var(--resalte-suave); }
.hoja { display: none; }
.hoja.activa { display: block; }

.apilado > * + * { margin-top: 22px; }

footer.pie {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linea);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue);
  text-align: center;
}

/* ----------------------------------------------------------- entrada */
.acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.acceso .caja { width: 100%; max-width: 380px; text-align: center; }
.acceso img { width: 220px; margin-bottom: 8px; }
.acceso .caja form { text-align: left; margin-top: 22px; }
.acceso .caja form > * + * { margin-top: 14px; }

@media (max-width: 640px) {
  .barra img.oxen { height: 62px; }
  .contador .grande { font-size: 36px; }
  .dato .cifra { font-size: 24px; }
}


/* --------------------------------- el interruptor de día y noche ----------- */
.interruptor {
  background: transparent; border: 1px solid var(--linea); color: var(--tenue);
  border-radius: 99px; padding: 6px 14px; cursor: pointer; font-family: inherit;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.interruptor:hover { border-color: var(--dorado-bajo); color: var(--dorado); }

/* Los dos logos son dorado y blanco: en modo día la barra se queda oscura
   para que se sigan viendo, como el membrete de una hoja. */
html[data-tema="dia"] .barra {
  background: #17160f; border-radius: 0 0 14px 14px; padding: 16px 22px;
  border-bottom: 1px solid #2e2a20; margin-left: -4px; margin-right: -4px;
}
html[data-tema="dia"] .barra .sesion { color: #9c9182; }
html[data-tema="dia"] .barra .sesion strong { color: #ece5d6; }
html[data-tema="dia"] .barra a { color: #d4b46a; }
html[data-tema="dia"] .barra .divisoria { background: #2e2a20; }
html[data-tema="dia"] .barra .interruptor { border-color: #2e2a20; color: #9c9182; }

/* en modo día el fondo no lleva el resplandor dorado de la noche */
html[data-tema="dia"] body { background: var(--negro); }

/* la pantalla de entrada mantiene su fondo oscuro siempre */
.acceso { background: #0a0a0a; color: #ece5d6; }


/* ==========================================================================
   EN CELULAR: las tablas no caben, así que cada renglón se vuelve una tarjeta
   ========================================================================== */
@media (max-width: 760px) {

  html, body { overflow-x: hidden; }
  .carta, .grupo-plegable, table.apilable { max-width: 100%; }

  /* más ancho útil: los márgenes se comían la pantalla */
  .envoltura { padding: 0 12px 48px; }
  .carta { padding: 16px 14px; border-radius: 10px; }
  .carta h2 { font-size: 11.5px; }

  /* el botón de estado de cuenta ya no cuelga de la orilla */
  .pestanas { gap: 8px; }
  .pestanas .boton {
    width: 100%; margin-left: 0 !important; text-align: center; padding: 12px 18px;
  }

  /* --- cada renglón, una tarjeta --- */
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td {
    display: block; width: 100%;
  }
  table.apilable thead { display: none; }
  table.apilable tr {
    border: 1px solid var(--linea); border-radius: 10px;
    margin-bottom: 12px; padding: 6px 0; background: var(--barra-caja);
  }
  table.apilable tr:last-child { margin-bottom: 0; }
  table.apilable td {
    border: none; padding: 9px 14px; text-align: left !important;
    white-space: normal; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;                 /* si no cabe, baja de renglón */
    overflow-wrap: anywhere;         /* los UUID largos no estiran la tarjeta */
  }
  /* nada dentro de la tarjeta puede ser más ancho que la pantalla */
  table.apilable td > * { min-width: 0; max-width: 100%; }
  .tabla-caja { overflow-x: visible; }
  table.apilable td::before {
    content: attr(data-etiqueta);
    flex: 0 0 34%; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tenue); line-height: 1.35;
  }
  /* las celdas sin nombre de columna (botones) ocupan su propio renglón */
  table.apilable td:not([data-etiqueta]) { justify-content: flex-start; flex-wrap: wrap; }
  table.apilable td:not([data-etiqueta])::before { content: none; }
  table.apilable .vacio { display: block; }

  /* los botones de PDF y XML dejan de encimarse: fila propia y con aire */
  table.apilable .boton.chico, table.apilable .pluma {
    padding: 9px 16px; font-size: 12px;
  }
  table.apilable .rep {
    flex-direction: column; align-items: flex-start; gap: 6px;
    width: 100%; padding: 8px 0;
  }
  table.apilable .rep + .rep { border-top: 1px solid var(--linea); margin-top: 6px; }
  table.apilable .concepto { white-space: normal; max-width: 100%; }
  table.apilable form { width: auto; }
  table.apilable select, table.apilable input { min-width: 0; }

  /* la división de paquetes dentro de la lista de traslados */
  tr.division td, tr.division td::before { display: block; }
  tr.division .detalle { margin-left: 0; display: block; margin-top: 4px; }

  /* los grupos plegables se leen mejor apilados */
  .grupo-plegable > summary { gap: 8px; padding: 14px 16px; }
  .grupo-plegable .importe { margin-left: 0; width: 100%; }
  .grupo-plegable .nombre { font-size: 14px; }

  /* encabezado y tarjetas de arriba */
  .barra img.oxen { height: 54px; }
  .barra img.cliente { height: 32px; }
  .barra .divisoria { height: 36px; }
  .contador .grande { font-size: 38px; }
  .dato .cifra { font-size: 26px; }

  /* el visor de documentos, a pantalla casi completa */
  .visor { padding: 8px; }
  .visor-barra { padding: 10px 12px; gap: 6px; }
  .visor-titulo { flex: 1 0 100%; margin-bottom: 4px; }
}