/* Ocamaq Flota — interfaz. Móvil primero: se usa en terreno, en el celular.

   Identidad: blanco, naranja y negro, como el logo de la empresa.
   El tema es claro a propósito y no sigue el modo oscuro del sistema:
   con guantes y a pleno sol, el fondo blanco se lee mucho mejor. */

:root {
  color-scheme: light;          /* selects y calendarios nativos en claro */

  --ground: #ffffff;            /* la página es papel blanco */
  --surface: #ffffff;           /* tarjetas y campos */
  --surface-2: #f1f5f9;         /* encabezados de tabla y zonas hundidas */
  --ink: #0f172a;               /* negro del logo */
  --ink-2: #475569;
  --ink-3: #64748b;
  --rule: #e2e8f0;
  --rule-soft: #f1f5f9;

  --accent: #d9622b;            /* naranja Ocamaq */
  --accent-fuerte: #a8410f;     /* para texto naranja sobre blanco */
  --accent-ink: #ffffff;
  --accent-soft: #fbeade;

  /* La navegación tiene su propia familia, del mismo gris azulado que el
     resto pero un tono más oscuro. Se separa del contenido por valor y no
     por color: el menú es la zona gris y la página es el papel blanco. Un
     panel teñido de naranja competía con el naranja de las acciones, que es
     el único que debería llamar la atención. */
  --menu-fondo: #eef2f7;
  --menu-linea: #dbe3ec;
  --menu-canto: #cbd5e1;
  --menu-hover: #dfe7f0;

  --negro: #0f172a;             /* barra superior y piezas de marca */
  --negro-2: #1e293b;

  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #a16207;
  --warn-soft: #fef3c7;
  --crit: #be2f24;
  --crit-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* Figtree: humanista de remates redondeados y letra estrecha. Lo
     segundo importa tanto como lo primero: en una lista de órdenes, una
     tipografía ancha parte la descripción en dos líneas y la pantalla se
     llena de escalones. DM Mono solo para lo que es un código: patentes,
     números de OT, horómetros y cifras. */
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "DM Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* Cuanto se separa el texto de la linea que divide dos columnas. Vive en
     una variable porque lo piden dos reglas -la celda y su titulo- y si se
     cambia solo una, las columnas dejan de calzar. A 0,9 rem el texto se
     leia pegado a la raya. */
  --aire-celda: 1.05rem;
  /* El ancho fijo de la monoespaciada sirve para alinear una columna de
     cifras. En el telefono no hay columnas -todo se apila- y lo unico que
     queda de ella es el trazo cuadrado de maquina de escribir, que en una
     patente grande se come la pantalla. Ver el bloque de mas abajo. */

  /* Esquinas: la chica para lo que se toca, la grande para las tarjetas.
     Redondear de más infantiliza; 10 y 16 es el punto en que la pantalla
     se siente blanda sin dejar de ser una herramienta de trabajo. */
  --radius: 13px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  /* Dos capas: una línea casi imperceptible que asienta la pieza y una
     sombra ancha y muy tenue que la levanta. Una sola sombra dura marca
     un borde sucio contra el fondo claro. */
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04),
            0 10px 26px -18px rgba(15, 23, 42, 0.22);
}

* { box-sizing: border-box; }
/* Lo marcado como oculto se oculta, sin importar que display
   traiga su clase. Sin esto, esconder un campo con el atributo
   hidden no hacia nada y quedaban dos formularios encimados. */
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }

/* Los items de grid y flex traen min-width:auto, asi que un texto largo
   ensancha su contenedor y hace que la pagina se desplace de lado en el
   celular. Se anula en toda la cadena de contenedores. */
.wrap, .card, .rows, .kpis, .kpi, .row-item, .row-top, .row-top > *,
.grid-2 > *, .grid-3 > *, .lat-item, .page-head > *, .fs-row,
.card-head > *, .filters > * { min-width: 0; }

/* iPhone sin marco (la "pantalla infinita").
   Con viewport-fit=cover la pagina se pinta por debajo de la muesca y de la
   barra del gesto. El <html> no tenia fondo, asi que al llegar al final y
   rebotar aparecia una franja blanca del navegador contra el crema de la
   pagina: eso era el fondo raro. Se le pone fondo al <html>, se apaga el
   rebote y se usa dvh, que es el alto que de verdad se ve cuando la barra
   de Safari esta desplegada; con 100vh la pagina quedaba siempre mas larga
   que la pantalla y sobraba una franja abajo. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
  overscroll-behavior-y: none;
}

/* Y la franja de la muesca se pinta del negro de la barra superior, para
   que arriba no aparezca el crema por debajo del reloj. */
body.app::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface);
  z-index: 50;
  pointer-events: none;
}
@media (min-width: 1000px) { body.app::before { display: none; } }

/* Con el menu abierto el body queda fijo: si no, el dedo arrastra la pagina
   de atras por debajo del menu, que es el otro defecto tipico del iPhone. */
body.con-menu {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  /* El suavizado del sistema engorda el trazo en pantallas Retina y deja
     la letra con un borde sucio. Antialiased la adelgaza y la deja limpia,
     que es la diferencia que se nota al leer en el celular. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}

/* Manrope trae la negrita de verdad dentro del archivo variable, así que
   nunca hay que dejar que el navegador la invente. */
h1, h2, h3, h4 { line-height: 1.25; }

b, strong { font-weight: 600; }

a { color: var(--accent-fuerte); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Una fila entera que se puede tocar sigue siendo un enlace, pero su texto
   es texto: pintarlo de naranja convierte la lista en un cartel y deja al
   naranja sin trabajo, porque ya no señala nada. El color de acento queda
   para los enlaces sueltos dentro de una frase y para los botones. */
a.card, a.ot-card, a.acta-card, a.eq-card, a.row-item, a.kpi,
a.ra-item, a.fs-row, a.accion-grande {
  color: var(--ink);
}
a.card:hover, a.ot-card:hover, a.acta-card:hover, a.eq-card:hover,
a.row-item:hover, a.kpi:hover, a.ra-item:hover, a.fs-row:hover,
a.accion-grande:hover { text-decoration: none; }

.mono { font-family: var(--f-mono); }
/* Nunca dejar que el navegador invente la negrita: la fuente ya la trae. */
* { font-synthesis-weight: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------- menú lateral ---------------- */
:root { --lateral-w: 244px; --topbar-h: 56px; }

.lateral {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--lateral-w);
  z-index: 60;
  background: var(--menu-fondo);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  /* Curva de resorte suave: sale rapido y frena al llegar, que es como se
     mueven las cosas de verdad. La lineal se siente de maqueta. */
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  padding-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 999px) {
  .lateral {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-right: 1px solid var(--menu-canto);
  }
}
.lateral.visible { transform: translateX(0); }
/* Mientras el dedo arrastra, el menu va pegado al dedo. */
.lateral.arrastrando { transition: none; }
.lateral.arrastrando ~ .velo { transition: none; }

.lat-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--menu-linea);
}
.marca { display: block; line-height: 0; flex: none; }
.marca:hover { text-decoration: none; opacity: 0.88; }
.marca-logo { width: 158px; height: auto; display: block; }
.topbar-marca { display: block; line-height: 0; }
.topbar-marca img { height: 30px; width: auto; display: block; }

.lat-cerrar, .abrir-menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.16s ease;
}
.lat-cerrar { color: var(--ink-3); }
.lat-cerrar:hover { background: var(--menu-hover); color: var(--accent-fuerte); }

/* Buscador del menú */
.lat-buscar {
  position: relative;
  flex: none;
  margin: 0 0.6rem 0.3rem;
}
.lat-buscar input[type="search"] {
  width: 100%;
  min-height: 40px;
  padding: 0.45rem 2.2rem 0.45rem 2.15rem;
  font-size: 16px;   /* 16px o iOS hace zoom al enfocar */
  border: 1px solid var(--menu-canto);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.lat-buscar input[type="search"]::placeholder { color: var(--ink-3); }
.lat-buscar input[type="search"]:focus {
  background: var(--surface);
  border-color: var(--accent);
  outline: none;
}
.lb-lupa {
  position: absolute; left: 0.7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  width: 17px; height: 17px;
}
.lb-limpiar {
  position: absolute; right: 0.3rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.lb-limpiar:hover { background: var(--menu-hover); color: var(--accent-fuerte); }
.lb-limpiar .ic { width: 15px; height: 15px; }
/* Mientras se busca no se ven los rótulos de sector: estorban más de lo que
   ayudan cuando lo que importa es la coincidencia, venga de donde venga. */
.lat-nav.buscando .lat-grupo { display: none; }
.lat-sin-resultado {
  margin: 0 0.9rem;
  color: var(--ink-3);
  font-size: 0.84rem;
}
/* En la franja de iconos del computador no cabe un campo de texto. */
@media (min-width: 1000px) {
  .menu-plegado .lat-buscar, .menu-plegado .lat-sin-resultado { display: none; }
}

.lat-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.7rem 0.6rem 1rem;
  display: grid;
  gap: 1px;
  align-content: start;
}
.lat-grupo {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 1rem 0.7rem 0.4rem;
}
.lat-grupo:first-child { padding-top: 0.3rem; }

.lat-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.25;
  transition: background 0.16s ease, color 0.16s ease;
}
/* Al pasar el cursor, la opción se enciende en naranja y suelta un
   resplandor suave por debajo. Es lo que le da vida al menú: sin eso, una
   lista de treinta enlaces grises no responde a nada. */
.lat-item:hover {
  background: var(--menu-hover);
  color: var(--accent-fuerte);
  text-decoration: none;
  box-shadow: 0 4px 14px -6px rgba(217, 98, 43, 0.55);
}
.lat-item:hover .ic { color: var(--accent); opacity: 1; }
.lat-item .ic { flex: none; opacity: 0.85; transition: opacity 0.16s ease; }
.lat-item:hover .ic { opacity: 1; }

.lat-item.on {
  /* Se levanta en blanco por sobre el gris del panel, con la sombra justa
     para que se lea como una pieza encima y no como un hueco. */
  background: var(--surface);
  color: var(--accent-fuerte);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07),
              0 6px 14px -8px rgba(15, 23, 42, 0.4);
}
.lat-item.on .ic { opacity: 1; color: var(--accent); }
.lat-item.on:hover { background: var(--surface); }
/* La marca naranja del ítem activo entra deslizándose desde la izquierda. */
.lat-item.on::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 55%;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
}

.lat-pie {
  border-top: 1px solid var(--menu-linea);
  padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lat-usuario {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 auto; min-width: 0;
  padding: 0.35rem 0.4rem; border-radius: var(--radius);
  transition: background 0.16s ease;
}
a.lat-usuario:hover {
  background: var(--menu-hover);
  text-decoration: none;
  box-shadow: 0 4px 14px -6px rgba(217, 98, 43, 0.45);
}
a.lat-usuario.on { background: var(--surface); }
.lat-avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.lat-datos { display: grid; min-width: 0; }
.lat-datos b { color: var(--ink); font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-datos small { color: var(--ink-3); font-size: 0.72rem; }
.lat-salir-forma { display: block; flex: none; }
.lat-salir {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--ink-3);
  font-family: inherit;
  border: 0;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.lat-salir:hover { background: var(--menu-hover); color: var(--accent-fuerte); }
.lat-salir:hover { color: var(--accent); text-decoration: none; }

/* Velo que apaga el fondo cuando el menú se abre en el celular */
.velo {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 20, 15, 0.5);
  opacity: 0;
  transition: opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.velo.visible { opacity: 1; }

/* ---------------- barra superior (solo celular) ---------------- */
.principal {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.abrir-menu { color: var(--ink-2); }
.abrir-menu:hover { background: var(--surface-2); }
.abrir-menu:active { transform: scale(0.92); }
/* La barra del celular lleva la marca; el titulo de la seccion ya va en la
   pagina, y repetirlo gastaba una linea entera de pantalla. */


/* En pantalla grande el menú queda fijo y desaparece la barra superior */
@media (min-width: 1000px) {
  /* El menú es una tarjeta con aire alrededor, no un bloque pegado al
     borde. Ese aire gris entre el menú y la página es lo que hace que se
     distingan: dos piezas blancas pegadas se leen como una sola mancha. */
  .lateral {
    transform: translateX(0);
    top: 12px; left: 12px; bottom: 12px;
    border-radius: var(--radius-lg);
    /* El canto del panel. Ya no hace falta que el borde grite: el menú se
       separa por ser la zona gris frente al papel blanco de la página, y el
       borde solo remata ese canto. Cuando el borde era naranja sobre un
       panel blanco quedaba colgado, sin nada que lo justificara. */
    border: 1px solid var(--menu-canto);
    box-shadow: var(--sombra);
    overflow: hidden;
  }
  .lat-cerrar, .topbar, .velo { display: none; }
  .principal { margin-left: calc(var(--lateral-w) + 24px); }
}

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- contenedor ---------------- */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  /* En el telefono el texto quedaba a 14 px del canto y se leia pegado al
     marco. 1,15 rem son 18 px: alcanza para que la letra respire sin comerse
     ancho de pantalla, que en 390 px es lo unico que sobra poco. */
  padding: 1rem 1.15rem 2.5rem;
  display: grid;
  gap: 1.1rem;
  /* Que ocupe el ancho de verdad: sin esto quedaba un cantito sin usar a la
     derecha y el aire salia distinto en cada lado. */
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 800px) {
  .wrap { padding: 1.6rem 1.6rem 3rem; gap: 1.5rem; }
}
/* Sin barra superior en el computador, el contenido necesita su propio aire. */
@media (min-width: 1000px) {
  .wrap { padding: 2.2rem 2.2rem 3.5rem; }
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
h1 {
  font-size: 1.55rem;
  line-height: 1.18;
  letter-spacing: -0.028em;
  margin: 0;
  font-weight: 650;
}
@media (min-width: 900px) { h1 { font-size: 1.7rem; } }
h2 {
  font-size: 1.02rem;
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.012em;
}
h3 {
  font-size: 0.78rem;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-3);
}
p { margin: 0; }
.muted { color: var(--ink-3); font-size: 0.85rem; }

/* ---------------- tarjetas ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
  display: grid;
  /* Cuando la tarjeta se estira para igualar a su vecina, el espacio que
     sobra no se reparte entre el encabezado y el contenido: el encabezado
     llegaba a medir 163 px y dejaba un hueco antes de la primera fila. */
  align-content: start;
}
/* El relleno de una tarjeta lo ponen sus hijos -el encabezado, el cuerpo, la
   tabla-, no ella. Eso funciona mientras todo lo que va adentro sea uno de
   esos; cualquier parrafo o lista puesto directo quedaba a CERO pixeles del
   borde, literalmente pegado a la raya. Pasaba en el panel, en la ficha de
   un plan y en control.

   Se arregla aca y no en cada plantilla: son mas de veinte tarjetas, y la
   proxima que alguien escriba volveria a nacer pegada. */
.card > p,
.card > dl,
.card > ul,
.card > ol,
.card > form,
.card > img,
.card > .reg-lista,
.card > .barra-uso,
.card > .fa-cola,
.card > .sol-qr,
.card > .av-bloque,
.card > .helptext,
.card > .muted {
  padding-left: 1rem;
  padding-right: 1rem;
}
/* Y lo ultimo de la tarjeta necesita suelo: sin esto el texto queda a tres
   pixeles del canto de abajo. */
.card > p:last-child,
.card > dl:last-child,
.card > ul:last-child,
.card > .reg-lista:last-child,
.card > .fa-cola:last-child { padding-bottom: 0.9rem; }

.card > .card-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.card > .card-body { padding: 1rem; display: grid; gap: 0.7rem; }
.card > .card-foot {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--surface-2);
}

/* ---------------- KPIs ---------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
@media (min-width: 620px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.kpi {
  background: var(--surface);
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.1rem;
  align-content: start;
  color: inherit;
}
a.kpi:hover { background: var(--surface-2); text-decoration: none; }
.kpi .k {
  font-size: 0.72rem;
  letter-spacing: 0.005em;
  color: var(--ink-3);
  font-weight: 600;
}
.kpi .v {
  font-size: 2rem;
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi .s { font-size: 0.74rem; color: var(--ink-3); line-height: 1.35; }
.kpi.alert .v { color: var(--crit); }
.kpi.warn .v { color: var(--warn); }
.kpi.good .v { color: var(--ok); }

/* ---------------- listas de filas ---------------- */
.rows { display: grid; align-content: start; }
.row-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  color: inherit;
}
.row-item:last-child { border-bottom: 0; }
a.row-item:hover { background: var(--surface-2); text-decoration: none; }
.row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.row-title { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.row-sub { font-size: 0.84rem; color: var(--ink-2); line-height: 1.45;
  overflow-wrap: anywhere; }
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  }

/* ---------------- pills ---------------- */
.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.24em 0.62em;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.accent { background: var(--accent-soft); color: var(--accent-fuerte); }

/* ---------------- el informe de recepcion, en una pantalla ---------------- */
/* Un hallazgo ocupa varias lineas -componente, tres columnas de texto y sus
   fotos-, asi que se separa de los de al lado con una linea, o al agregar
   el cuarto ya no se sabe donde empieza cada uno. */
.hz-fila,
.sg-fila,
.pr-fila {
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.hz-fila:first-child,
.sg-fila:first-child,
.pr-fila:first-child { border-top: 0; }

.hz-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.hz-foto {
  position: relative;
  width: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
}
.hz-foto img { width: 100%; height: 72px; object-fit: cover; display: block; }
.hz-foto span {
  display: block;
  padding: 0.15rem 0.3rem;
  font-size: 0.68rem;
  background: var(--surface-2);
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La linea del presupuesto: seis casillas que en el computador entran en una
   fila y en el telefono se apilan solas. La descripcion se lleva el espacio
   que sobra, porque es la unica que no es un numero corto. */
.pr-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.pr-desc { grid-column: span 2; }
.pr-total {
  display: block;
  padding: 0.45rem 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pr-suma {
  margin-top: 0.6rem;
  text-align: right;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pr-suma b { color: var(--ink-1); }
.pr-planilla { margin-top: 0.8rem; }
.pr-subir { margin-top: 1rem; }
.pr-subir input[type="file"] { margin: 0.4rem 0; }

@media (max-width: 640px) {
  /* En el telefono la descripcion no comparte fila con nadie: con dos
     columnas de 130px quedaba una caja donde no cabe «Cristal parabrisas». */
  .pr-desc { grid-column: 1 / -1; }
}

/* ---------------- barra de progreso ---------------- */
.bar {
  height: 7px;
  margin: 0.15rem 0;
  /* El gris del riel tiene que verse contra el blanco de la tarjeta:
     con surface-2 la barra parecía una línea fantasma. */
  background: var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}
/* En una fila de lista la barra no debe cruzar la tarjeta entera. */
.bar.corta { width: 150px; flex: none; }
.avance-fila {
  display: flex; align-items: center; gap: 0.65rem;
  flex-wrap: wrap; margin-top: 0.25rem;
}
.avance-txt { font-size: 0.78rem; color: var(--ink-3); }
.avance-txt b { color: var(--ink); font-family: var(--f-mono); font-size: 0.79rem; }
.bar i { display: block; height: 100%; background: var(--ok); }
.bar i.warn { background: var(--warn); }
.bar i.crit { background: var(--crit); }

/* ---------------- botones ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 42px;
  text-align: center;
  white-space: normal;
}
.btn { box-shadow: var(--sombra); }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-fuerte); }
.btn.negro { background: var(--negro); border-color: var(--negro); color: #fff; }
.btn.sm { min-height: 34px; padding: 0.3rem 0.7rem; font-size: 0.78rem; }
.btn.block { width: 100%; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------------- filtros ---------------- */
.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.filters input[type="search"], .filters select {
  flex: 1 1 160px;
  min-width: 0;
}
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@media (max-width: 999px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Se sale de los márgenes del contenido para que el primero y el
       último chip lleguen al borde de la pantalla, y no queden cortados
       a media palabra. */
    margin-inline: -0.9rem;
    padding-inline: 0.9rem;
    scroll-padding-inline: 0.9rem;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
}
.chip {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------------- formularios ---------------- */
form { display: grid; gap: 0.9rem; }
.field { display: grid; gap: 0.25rem; }
.field > label, .flabel {
  font-size: 0.76rem;
  letter-spacing: 0.005em;
  color: var(--ink-3);
  font-weight: 600;
}
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
input[type="password"], input[type="email"], input[type="file"], select, textarea {
  font-family: inherit;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  width: 100%;
  min-height: 44px;
}
textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
/* El desplegable, con la misma pinta que los demas campos.
   Con «appearance: auto» cada sistema dibuja lo suyo: Android una flecha
   gris pegada al canto, iOS otra cosa, y al lado de un campo de texto
   redondeado se veian dos controles distintos en la misma columna. Acá se
   apaga el dibujo del sistema y se pone una flecha propia.

   La lista que se abre al tocarlo la dibuja el telefono y no se puede
   cambiar desde la pagina; lo que si se puede es que el control se vea
   bien, que el texto largo no se meta debajo de la flecha y que se toque
   sin apuntar. */
select {
  appearance: none;
  -webkit-appearance: none;
  /* Espacio a la derecha para la flecha, para que una opcion larga se
     corte con puntos suspensivos y no por debajo del icono. */
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 18px 18px;
  text-overflow: ellipsis;
}
/* El sistema pinta un fondo propio al desplegable cerrado en algunos
   telefonos; este lo deja igual que un campo de texto. */
select::-ms-expand { display: none; }
select:disabled { background-color: var(--surface-2); color: var(--ink-3); }

@media (max-width: 760px) {
  /* En el telefono el desplegable es lo que mas se toca: un poco mas alto
     y con la flecha mas separada del canto. */
  select {
    min-height: 48px;
    background-position: right 0.85rem center;
    padding-right: 2.6rem;
  }
  input[type="text"], input[type="number"], input[type="date"],
  input[type="search"], input[type="password"], input[type="email"],
  input[type="file"], textarea { min-height: 48px; }
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.helptext { font-size: 0.75rem; color: var(--ink-3); }
.errorlist {
  margin: 0.2rem 0 0;
  padding-left: 1.05rem;
  color: var(--crit);
  font-size: 0.78rem;
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--crit);
}
ul.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
ul.checks li { display: flex; align-items: center; gap: 0.45rem; }
ul.checks label { font-size: 0.88rem; color: var(--ink-2); font-family: var(--f-body);
  text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); flex: none;
}
.grid-2 { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
fieldset {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin: 0;
  display: grid;
  gap: 0.8rem;
  background: var(--surface);
}
legend {
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  color: var(--accent);
  font-weight: 600;
  padding: 0 0.4rem;
}

/* filas de formset */
.fs-row {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 0.7rem;
  display: grid;
  gap: 0.6rem;
  background: var(--ground);
}
.fs-row .del {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; color: var(--ink-3);
}

/* ---------------- tablas ---------------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td {
  text-align: left;
  /* Mismo motivo que en las celdas de las listas: a 0,85 rem el texto se
     leia pegado a la linea de la columna de al lado. Y arriba y abajo lo
     mismo con la raya que separa una fila de la siguiente. */
  padding: 0.78rem var(--aire-celda);
  font-variant-numeric: tabular-nums;
  /* La misma raya que separa un renglon del siguiente en las listas. Antes
     era --rule-soft y dos pantallas con los mismos datos se veian con
     distinto peso de linea. */
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
/* Lo que hace que una columna se lea como columna. Es la misma linea de
   .of-celda + .of-celda: solo entre celda y celda, nunca en el canto de
   afuera, que ya lo dibuja la tarjeta. */
th + th, td + td { border-left: 1px solid var(--rule); }
thead th {
  font-size: 0.76rem;
  letter-spacing: 0.005em;
  color: var(--ink-3);
  background: var(--surface-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.14s ease; }
tbody tr:hover { background: var(--accent-soft); }

/* ---------------- pestañas de la ficha ---------------- */
.tabs {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tab {
    font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}
.tab:hover { text-decoration: none; border-color: var(--accent); }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------------- mensajes ---------------- */
.msgs { display: grid; gap: 0.5rem; }
.msg {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--ink);
  font-size: 0.87rem;
}
.msg.success { border-left-color: var(--ok); background: var(--ok-soft); }
.msg.error { border-left-color: var(--crit); background: var(--crit-soft); }
.msg.warning { border-left-color: var(--warn); background: var(--warn-soft); }

/* ---------------- vacío ---------------- */
.empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.87rem;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

/* ---------------- botón flotante ---------------- */
/* Campos: el foco se nota sin dar un salto */
input, select, textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Los avisos ya no entran deslizando: aparecian con un salto en cada
   pantalla que trae uno, y ese movimiento en la carga es justo lo que
   cansa. El movimiento queda para lo que responde a un dedo. */

.tab, .chip { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.pill { transition: background 0.15s ease; }

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  a.row-item:hover { padding-left: 0.9rem; }
}


/* ---------------- impresión de la OT ---------------- */
@media print {
  .topbar, .lateral, .velo, .paso-nav, .no-print { display: none !important; }
  .principal { margin-left: 0; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .wrap { padding: 0; max-width: none; }
  .print-sheet { border: 1px solid #000; }
  .print-sheet th, .print-sheet td { border: 1px solid #000; }
  a { color: #000; text-decoration: none; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* =================================================================
   MODO TERRENO
   El mecanico usa esto con guantes, a contraluz y con una sola mano.
   Todo mas grande, menos elementos por pantalla y una accion clara.
   ================================================================= */

body.terreno { font-size: 16px; }
body.terreno .wrap { gap: 1.3rem; }
body.terreno h1 { font-size: 1.6rem; }
body.terreno .lat-item { font-size: 0.95rem; padding: 0.72rem 0.75rem; }
body.terreno .lat-item .ic { width: 22px; height: 22px; }

.saludo { display: grid; gap: 0.15rem; }


/* Accion principal: un boton del ancho de la pantalla, imposible de errar */
.accion-grande {
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 46px 1fr 16px;
  align-items: center;
  gap: 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  min-height: 74px;
}
.accion-grande:hover { text-decoration: none; filter: brightness(1.06); }
.accion-grande.secundaria {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.accion-grande .ag-ic {
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
}
.accion-grande.secundaria .ag-ic { background: var(--accent-soft); color: var(--accent-fuerte); }
.accion-grande .ag-txt { display: grid; gap: 0.1rem; }
.accion-grande .ag-txt b { font-size: 1.02rem; font-weight: 700; }
.accion-grande .ag-txt small { font-size: 0.8rem; opacity: 0.85; line-height: 1.35; }
.accion-grande .ag-flecha { opacity: 0.65; display: grid; place-items: center; }
.accion-grande .ag-ic .ic { width: 24px; height: 24px; }
.accion-grande:hover .ag-flecha { opacity: 1; }
.vacio-grande .vg-ic .ic { width: 40px; height: 40px; stroke-width: 1.4; }

.bloque { display: grid; gap: 0.7rem; }
.bloque-titulo {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink-3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bloque-titulo .cuenta {
  background: var(--accent-soft);
  color: var(--accent-fuerte);
  border-radius: 20px;
  padding: 0.1em 0.6em;
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* Tarjeta de acta: una por trabajo, se lee de un vistazo */
.cards { display: grid; gap: 0.7rem; }
.acta-card {
  display: grid;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  color: inherit;
}
.acta-card { box-shadow: var(--sombra); }
.acta-card:hover { text-decoration: none; border-color: var(--accent); }
.acta-card.cerrada { border-left-color: var(--ok); opacity: 0.85; }
.ac-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.ac-num { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3); font-weight: 600; }
.ac-equipo { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.ac-tipo { font-size: 0.8rem; color: var(--ink-3); }
.ac-desc { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; margin: 0.25rem 0 0; }
.ac-pie {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
  font-size: 0.78rem; color: var(--ink-3);
  margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--rule-soft);
}

/* Formulario por pasos numerados: se sabe cuanto falta */
.acta-form { gap: 1.2rem; }
.paso {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.paso-cab {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.paso-cab h2 { font-size: 1rem; font-weight: 700; }
.paso-n {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700; font-size: 0.85rem;
  font-family: var(--f-mono);
}
.paso-cuerpo { padding: 1rem; display: grid; gap: 0.9rem; }
.paso .field > label { font-size: 0.72rem; color: var(--ink-2); }
.paso input, .paso select, .paso textarea { min-height: 48px; }
.err { color: var(--crit); font-size: 0.8rem; }

.tareas { display: grid; gap: 0.5rem; }
.tarea-fila { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 0.6rem; }
.tarea-fila input[type="checkbox"] { width: 26px; height: 26px; }

.consumos { display: grid; gap: 0.45rem; }
.consumo {
  display: grid;
  grid-template-columns: 1fr 84px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background: var(--ground);
}
.consumo.doble { grid-template-columns: 1fr 74px 74px; }
.consumo .cs-nom { font-size: 0.9rem; color: var(--ink-2); }
.consumo input { min-height: 42px; text-align: center; padding: 0.3rem; }

.tres-estados { display: grid; gap: 0.7rem; }
@media (min-width: 560px) { .tres-estados { grid-template-columns: repeat(3, 1fr); } }

/* Barra de guardado: siempre al alcance del pulgar */
.barra-guardar { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.btn.grande { min-height: 54px; font-size: 1rem; }

.resumen-acta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 620px) { .resumen-acta { grid-template-columns: repeat(4, 1fr); } }
.ra-item { background: var(--surface); padding: 0.75rem 0.9rem; display: grid; gap: 0.1rem; }
.ra-k { font-size: 0.72rem;
  letter-spacing: 0.005em; color: var(--ink-3);
  font-weight: 600;
}
.ra-v { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }

.vacio-grande {
  display: grid; justify-items: center; gap: 0.6rem;
  padding: 2.5rem 1.2rem; text-align: center;
  background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radius-sm);
}
.vacio-grande .vg-ic { font-size: 2.2rem; color: var(--ink-3); }
.vacio-grande b { font-size: 1.05rem; }
.vacio-grande p { color: var(--ink-3); font-size: 0.88rem; max-width: 32ch; }

.aviso {
  background: var(--warn-soft);
  color: var(--ink);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* ---------------- niveles de acceso y log ---------------- */
.niveles { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .niveles { grid-template-columns: repeat(3, 1fr); } }
.nivel { display: grid; gap: 0.35rem; align-content: start; }
.nivel p { font-size: 0.83rem; color: var(--ink-2); line-height: 1.5; }

.log-fila { gap: 0.3rem; }
.cambios {
    font-size: 0.73rem;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

/* =================================================================
   FICHA DE LA ORDEN DE TRABAJO
   ================================================================= */

.ot-cabecera { display: grid; gap: 0.55rem; }
.ot-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ot-numero {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-fuerte);
  letter-spacing: 0.02em;
}
.ot-cabecera h1 { font-size: 1.35rem; line-height: 1.28; }
/* Lo que falta para cerrar es una frase, no una etiqueta. El nowrap que
   .pill necesita para «Cerrada» o «Prioridad alta» la dejaba en una sola
   linea y estiraba la pagina entera a 665px en un telefono de 390. */
.pill.ot-falta {
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  max-width: 100%;
}

.ot-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.ot-acciones .ic { width: 16px; height: 16px; }

/* Los cuatro datos que se miran primero */
.ot-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ot-dato {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  color: inherit;
  transition: background 0.15s ease;
}
a.ot-dato:hover { background: var(--accent-soft); text-decoration: none; }
.od-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-fuerte);
}
.od-txt { display: grid; gap: 0.05rem; min-width: 0; }
.od-txt small { font-size: 0.72rem;
  letter-spacing: 0.005em; color: var(--ink-3);
  font-weight: 600;
}
.od-txt b { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.od-txt em { font-style: normal; font-size: 0.76rem; color: var(--ink-3); }

.ot-columnas { display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 900px) {
  .ot-columnas { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.3rem; }
}
.ot-principal, .ot-lado { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }

/* Informes de recepcion: siete columnas de contenido no caben junto a la
   tarjeta del resumen. Repartidas en la mitad de la pantalla, «VR-PC-41» se
   partia en tres renglones y la columna «Estado» quedaba fuera del borde de
   la tarjeta. Aca la tabla se lleva la fila entera hasta que la pantalla da
   para las dos cosas. */
@media (max-width: 1499px) {
  .ot-columnas.dm-ancha { grid-template-columns: minmax(0, 1fr); }
}
/* Y si aun asi no cabe, que se corra de lado: `table { width: 100% }` hace
   que la tabla se encoja siempre, asi que el `overflow-x` del envoltorio no
   llega a usarse nunca. Con un minimo, se usa. */
.dm-tabla { min-width: 44rem; }

.card.destacada { border-color: #f0d68a; }

/* Avance de tareas, en la cabecera de la tarjeta */
.avance-chip {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--ink-2);
}
.ac-barra {
  display: block; width: 70px; height: 6px;
  background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden;
}
.ac-barra i {
  display: block; height: 100%; background: var(--ok);
  transform-origin: left center;
}

.tareas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.tarea {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
}
.tarea:last-child { border-bottom: 0; }
.tk {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--ink-3);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tarea.hecha .tk { background: var(--ok); border-color: var(--ok); color: #fff; }
.tt { font-size: 0.9rem; line-height: 1.45; display: grid; gap: 0.1rem; }
.tt em {
  font-style: normal;   font-size: 0.7rem; color: var(--ink-3);
}
.tarea.hecha .tt { color: var(--ink-2); }

/* Filtros y aceites como fichas, no como filas de tabla */
.insumos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem; }
.insumo {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ground);
}
.in-cant {
  display: grid; place-items: center;
  min-width: 36px; height: 36px; flex: none; padding: 0 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-fuerte);
  font-family: var(--f-mono); font-weight: 700; font-size: 0.95rem;
}
.insumo.aceite .in-cant { background: var(--info-soft); color: var(--info); font-size: 0.82rem; }
.in-cant small { font-size: 0.62rem; margin-left: 1px; }
.in-nom { font-size: 0.83rem; display: grid; gap: 0.05rem; min-width: 0; }
.in-nom em {
  font-style: normal;   font-size: 0.68rem; color: var(--ink-3);
}

.personas { display: grid; gap: 0.55rem; }
.persona { display: flex; align-items: center; gap: 0.6rem; }
.pe-avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--negro); color: #fff;
  font-weight: 700; font-size: 0.82rem;
}
.pe-nom { font-size: 0.88rem; display: grid; gap: 0.05rem; }
.pe-nom em { font-style: normal; font-size: 0.72rem; color: var(--ink-3); }

.costos { display: grid; gap: 0.4rem; }
.co-linea {
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-size: 0.87rem; color: var(--ink-2);
}
.co-linea b { font-family: var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.co-linea.total {
  border-top: 1px solid var(--rule); padding-top: 0.45rem; margin-top: 0.2rem;
  font-weight: 600; color: var(--ink);
}
.co-linea.total b { font-size: 1.05rem; color: var(--accent-fuerte); }

.firmas-ot { display: grid; gap: 0.75rem; }
@media (min-width: 420px) { .firmas-ot { grid-template-columns: 1fr 1fr; } }
.firma {
  display: grid; gap: 0.1rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
.firma small { font-size: 0.72rem;
  letter-spacing: 0.005em; color: var(--ink-3);
  font-weight: 600;
}
.firma b { font-size: 0.9rem; overflow-wrap: anywhere; }
.firma em { font-style: normal; font-size: 0.74rem; color: var(--ink-3); }

/* =================================================================
   LISTAS: tarjetas con jerarquia, en vez de filas planas
   ================================================================= */

.page-head { align-items: flex-start; }
.ph-txt { display: grid; gap: 0.15rem; }
.page-head .btn .ic { width: 16px; height: 16px; }

/* Buscador con lupa dentro del campo */
.buscador { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Buscar es un apoyo del campo que tiene al lado, no la acción de la
   pantalla: va en gris para que el naranja siga significando algo. */
.buscador .btn {
  background: var(--surface);
  border-color: var(--rule);
  color: var(--ink-2);
}
.buscador .btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.bu-campo { position: relative; flex: 1 1 240px; min-width: 0; display: block; }
.bu-campo input { padding-left: 2.35rem; }
.bu-lupa {
  position: absolute; left: 0.7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.buscador select { flex: 0 1 200px; }

@media (max-width: 560px) {
  /* Se midio: el buscador ocupaba 156 px -tres renglones- y dejaba la
     primera fila de equipos a 432 px del borde, contra 201 en mantenciones.
     Eran tres porque cada lista desplegable pedia 200 px de base y no
     cabian dos juntas, y porque «Buscar» se llevaba un renglon entero para
     el solo.

     En dos: arriba el campo con su boton al lado -el boton es de ese campo,
     las listas se aplican solas al cambiarlas-, y debajo las dos listas
     repartiendose el ancho. */
  .buscador { align-items: stretch; }
  .bu-campo { order: 1; flex: 1 1 auto; }
  .buscador .btn { order: 2; flex: 0 0 auto; }
  .buscador select { order: 3; flex: 1 1 calc(50% - 0.35rem); min-width: 0; }
}

/* Rejilla de equipos: una columna en el celular, dos en pantalla ancha */
.rejilla { display: grid; gap: 0.6rem; }
@media (min-width: 780px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.eq-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.22, 0.8, 0.3, 1),
              box-shadow 0.18s ease, border-color 0.18s ease;
}
.eq-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(20, 20, 15, 0.1);
}
.eq-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-fuerte);
}
.eq-card:hover .eq-ic { background: var(--accent); color: #fff; }
.eq-cuerpo { display: grid; gap: 0.1rem; min-width: 0; }
.eq-linea { display: flex; align-items: center; gap: 0.45rem; }
.eq-codigo {
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.eq-tipo { font-size: 0.85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.eq-pie {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem;
  font-size: 0.73rem; color: var(--ink-3);
}
.eq-medida { display: grid; gap: 0.1rem; text-align: right; justify-items: end; }
.eq-medida b {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eq-medida em {
  font-style: normal; font-size: 0.68rem; color: var(--ink-3);
  white-space: nowrap;
}
/* Un dato que falta no debe verse tan firme como uno que existe. */
.sin-dato { font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; }
/* La tarjeta mantiene su alto aunque el nombre del equipo sea largo. */
.eq-tipo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Punto de estado: color sin gastar una etiqueta entera */
.punto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ink-3);
}
.punto.ok { background: var(--ok); }
.punto.warn { background: var(--warn); }
.punto.crit { background: var(--crit); }

/* Tarjeta de orden de trabajo */
.lista-ot { display: grid; gap: 0.6rem; }
.ot-card {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.22, 0.8, 0.3, 1),
              box-shadow 0.18s ease, border-color 0.18s ease;
}
.ot-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 20, 15, 0.1);
}
.ot-card.anulada { opacity: 0.7; }

.oc-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.oc-izq { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.oc-num {
  font-family: var(--f-mono); font-size: 0.82rem;
  color: var(--accent-fuerte); font-weight: 700;
}
.oc-eq { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.oc-desc { font-size: 0.87rem; color: var(--ink-2); line-height: 1.5; }
.oc-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
}
.oc-meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem;
  font-size: 0.78rem; color: var(--ink-3);
}
.oc-gente { display: flex; align-items: center; gap: 0.3rem; }
.mini-avatar {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--negro); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  border: 2px solid var(--surface);
  margin-left: -8px;
}
.mini-avatar:first-child { margin-left: 0; }

/* =================================================================
   ENTRADA AL SISTEMA
   Dos mitades en el computador: la marca a la izquierda, el formulario
   a la derecha. En el celular solo el formulario, que es lo que urge.
   ================================================================= */

body.pagina-entrar { padding: 0; }
.entrar { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 900px) { .entrar { grid-template-columns: 1.05fr 1fr; } }

.entrar-marca {
  display: none;
  position: relative;
  background: var(--negro);
  color: #fff;
  padding: 3rem 3.2rem;
  align-content: center;
  overflow: hidden;
}
@media (min-width: 900px) { .entrar-marca { display: grid; } }

.em-contenido { position: relative; z-index: 1; display: grid; gap: 1.1rem; max-width: 30rem; }
.em-logo { width: 190px; height: auto; display: block; margin-bottom: 0.4rem; }
.entrar-marca h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 0.6rem;
}
.entrar-marca p { color: rgba(255, 255, 255, 0.66); font-size: 0.98rem; line-height: 1.6; }
.em-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.em-lista li { display: flex; align-items: flex-start; gap: 0.8rem; }
.em-lista .ic {
  width: 34px; height: 34px; flex: none; padding: 7px;
  border-radius: var(--radius-sm);
  background: rgba(234, 106, 18, 0.16);
  color: var(--accent);
}
.em-lista span { display: grid; gap: 0.1rem; }
.em-lista b { color: #fff; font-size: 0.92rem; font-weight: 600; }
.em-lista span span, .em-lista li > span { color: rgba(255, 255, 255, 0.6); font-size: 0.84rem; }
/* Luz naranja en diagonal: el único gesto gráfico de la página. Se difumina
   por los dos extremos para que no aparezca el borde recto del rectángulo. */
.em-franja {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(108deg,
      transparent 38%,
      rgba(234, 106, 18, 0.14) 62%,
      rgba(234, 106, 18, 0.05) 78%,
      transparent 92%),
    radial-gradient(60% 50% at 88% 12%, rgba(234, 106, 18, 0.16), transparent 70%);
  pointer-events: none;
}

.entrar-forma {
  display: grid;
  place-items: center;
  padding: 1.6rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
}
.ef-caja {
  width: 100%;
  max-width: 23rem;
  display: grid;
  gap: 1.05rem;
}
.ef-logo { width: 215px; height: auto; justify-self: center; margin-bottom: 0.7rem; }
@media (min-width: 900px) { .ef-logo { display: none; } }

.ef-titulo { display: grid; gap: 0.2rem; }
.ef-titulo h2 { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; }
.ef-titulo p { color: var(--ink-3); font-size: 0.87rem; }
.ef-caja .field > label { font-size: 0.68rem; }
.ef-caja input { min-height: 48px; }
.ef-pie {
  font-size: 0.8rem; color: var(--ink-3); text-align: center;
  line-height: 1.5; margin-top: 0.2rem;
}


/* Campo con icono al costado y ojo para revelar la contraseña */
.campo-ic { position: relative; display: block; }
.campo-ic > .ic {
  position: absolute; left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  width: 18px; height: 18px;
}
.campo-ic input { padding-left: 2.5rem; padding-right: 2.9rem; }
.ver-clave {
  position: absolute; right: 0.35rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: var(--radius);
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.ver-clave:hover { background: var(--surface-2); color: var(--ink); }
.ver-clave.activo { color: var(--accent-fuerte); }

/* =================================================================
   BODEGA, LECTOR Y CHECKLISTS
   ================================================================= */

/* El campo del lector: grande y evidente, es lo único que se toca */
.escaner-caja {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.2rem;
  box-shadow: var(--sombra);
  display: grid;
  gap: 0.9rem;
}
.escaner-caja.entrada { border-top-color: var(--ok); }
.escaner-caja.salida { border-top-color: var(--crit); }
.escaner-caja form { gap: 0.9rem; }
.es-titulo {
  font-size: 0.8rem;
  letter-spacing: 0.005em;
  color: var(--ink-3);
  font-weight: 600;
}
.es-campo { position: relative; display: block; }
.es-campo > .ic {
  position: absolute; left: 0.85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-fuerte);
  width: 22px; height: 22px;
  pointer-events: none;
}
.es-campo input {
  padding-left: 3rem;
  min-height: 62px;
  font-size: 1.2rem;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}

.resultado-escaner { border-color: #a7dbb9; }
.re-desc { font-size: 1rem; font-weight: 600; }
.re-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.7rem;
  margin: 0.4rem 0 0.2rem;
}
.re-datos > div { display: grid; gap: 0.1rem; }
.re-datos small { font-size: 0.72rem;
  letter-spacing: 0.005em; color: var(--ink-3);
  font-weight: 600;
}
.re-datos b { font-size: 0.95rem; overflow-wrap: anywhere; }

/* Los tres pasos de una solicitud, para ver dónde va */
.pasos-estado {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
@media (min-width: 700px) { .pasos-estado { grid-template-columns: repeat(3, 1fr); } }
.pe-paso {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}
.pe-n {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--ink-3);
}
.pe-paso.hecho .pe-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.pe-paso.malo .pe-n { background: var(--crit); border-color: var(--crit); color: #fff; }
.pe-txt { display: grid; gap: 0.05rem; min-width: 0; }
.pe-txt b { font-size: 0.9rem; }
.pe-txt em { font-style: normal; font-size: 0.75rem; color: var(--ink-3); }

/* Armado del pedido */
.pedidos { display: grid; gap: 0.55rem; }
.pedido-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 40px;
  gap: 0.5rem;
  align-items: center;
}
.pf-quitar {
  display: grid; place-items: center;
  width: 40px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pf-quitar:hover { color: var(--crit); border-color: var(--crit); }

/* Checklist: tres botones grandes por punto, para el pulgar */
.cl-cuerpo { gap: 0.5rem; }
.cl-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ground);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cl-item.con-falla { border-color: var(--crit); background: var(--crit-soft); }
.cl-texto {
  font-size: 0.92rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.cl-opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.cl-op { position: relative; display: block; }
.cl-op input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.cl-op span {
  display: grid; place-items: center;
  min-height: 44px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cl-op input:checked + span { color: #fff; }
.cl-op.bueno input:checked + span { background: var(--ok); border-color: var(--ok); }
.cl-op.regular input:checked + span { background: var(--warn); border-color: var(--warn); }
.cl-op.malo input:checked + span { background: var(--crit); border-color: var(--crit); }
.cl-op.na input:checked + span { background: var(--ink-3); border-color: var(--ink-3); }
.cl-op input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-obs { min-height: 38px; font-size: 0.86rem; }

/* El contador de avance del checklist, arriba */
#contador-avance.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------------- escaneo con la cámara ---------------- */
.camara-zona { display: grid; gap: 0.7rem; }
.cam-video {
  position: relative;
  background: var(--negro);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.cam-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La mira ayuda a encuadrar: la gente apunta al centro por instinto. */
.cam-mira {
  position: absolute; inset: 22% 12%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 100vmax rgba(20, 20, 15, 0.35);
  pointer-events: none;
}
.camara-zona.activa .cam-mira { border-color: var(--accent); }
.cam-destello {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.cam-destello.ok { background: rgba(31, 122, 61, 0.45); opacity: 1; }
.cam-destello.malo { background: rgba(179, 39, 26, 0.45); opacity: 1; }
.cam-estado {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(20, 20, 15, 0.82);
  color: #fff;
  font-size: 0.86rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.cam-estado.ok { background: rgba(31, 122, 61, 0.92); }
.cam-estado.malo { background: rgba(179, 39, 26, 0.92); }
.cam-barra { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.cam-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--ink-2); }

/* Botón de atrás en la barra del celular: fija, así que no se pierde al bajar */
.topbar-atras {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 38px;
  padding: 0 0.7rem 0 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  flex: none;
  transition: background 0.16s ease, transform 0.12s ease;
}
.topbar-atras:hover { background: var(--accent); text-decoration: none; }
.topbar-atras:active { transform: scale(0.94); }
.topbar-atras .ic { width: 18px; height: 18px; stroke-width: 2.2; }

/* En pantalla grande la barra no se ve, así que el atrás va sobre el contenido */
@media (min-width: 1000px) {
  .topbar { display: flex; background: transparent; border-bottom: 0;
    height: auto; padding: 1.6rem 2.2rem 0; }
  .topbar .abrir-menu, .topbar .topbar-marca { display: none; }
  .topbar-atras {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    box-shadow: var(--sombra);
  }
  .topbar-atras:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .principal > .wrap { padding-top: 1rem; }
}

/* Los botones secundarios tenían muy poco contraste sobre el fondo claro */
.btn.ghost {
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
  font-weight: 600;
}
.btn.ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-fuerte);
}

.topbar-seccion {
  /* Toma el ancho que sobra: sin el flex se encogía hasta desaparecer. */
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1000px) { .topbar-seccion { display: none; } }




/* =================================================================
   ENTRADA DESDE EL CELULAR
   Sobrio a proposito: fondo claro, el logo tal como es (negro y naranja,
   sin invertir) y el formulario directo. Sin tarjeta, sin sombras y sin
   listas de beneficios: en el celular lo unico que se viene a hacer aca
   es entrar.
   ================================================================= */

.entrar-cabecera { display: none; }
.ef-puntos { display: none; }

@media (max-width: 899px) {
  .entrar {
    background: var(--surface);
    align-content: center;
    padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
  }

  .entrar-cabecera {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 0 0 2.2rem;
    background: transparent;
  }
  .ec-logo { width: 235px; height: auto; }
  .ec-bajada {
    color: var(--ink-3);
    font-size: 0.86rem;
    text-align: center;
    max-width: 20rem;
    line-height: 1.5;
  }

  .entrar-forma { background: transparent; padding: 0; align-items: start; }
  .ef-caja {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: 24rem;
    gap: 1.1rem;
  }
  .ef-titulo { text-align: center; }
  .ef-titulo h2 { font-size: 1.3rem; }
  .ef-pie { margin-top: 0.4rem; }
}

/* ---------------- situacion de la flota ---------------- */
/* Cada situacion tiene su color para leer la flota de un vistazo. */
.eq-sit {
  justify-self: start;
  font-size: 0.72rem;
  letter-spacing: 0.005em;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  font-weight: 600;
}
.sit-disponible { background: var(--ok-soft); color: var(--ok); }
.sit-arriendo { background: var(--accent-soft); color: var(--accent-fuerte); }
.sit-contrato { background: var(--info-soft); color: var(--info); }
.sit-sstt { background: var(--warn-soft); color: var(--warn); }
.chip.sit-disponible.on, .chip.sit-arriendo.on,
.chip.sit-contrato.on, .chip.sit-sstt.on {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* Ingreso o salida: dos botones grandes, no un desplegable mas. */
.opciones-momento { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.op-mom { flex: 1 1 8rem; margin: 0; cursor: pointer; }
.op-mom input { position: absolute; opacity: 0; pointer-events: none; }
.op-mom span {
  display: block;
  text-align: center;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.82rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.op-mom input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.op-mom input:focus-visible + span { outline: 2px solid var(--accent-fuerte); outline-offset: 2px; }

/* ---------------- compras ---------------- */
/* Un boton de formulario que va junto a otros en la fila de acciones: sin
   esto el form se lleva todo el ancho y rompe la linea. */
.en-linea { display: inline; margin: 0; }
.en-linea button { margin: 0; }

/* En la comparacion de cotizaciones, la fila que se esta mirando. */
.fila-destacada { background: var(--accent-soft); }
.texto-crit { color: var(--crit); }
.texto-warn { color: var(--warn); }

/* Campo numerico dentro de una celda de tabla: angosto y alineado a la
   derecha, para escribir cantidades sin salir del renglon. */
.celda-num {
  width: 6.5rem;
  text-align: right;
  font-family: var(--f-mono);
}
tr.apagada { opacity: 0.55; }

/* ---------------- tablas que se apilan en el celular ---------------- */
/* Una tabla de siete columnas en un telefono obliga a arrastrarla de lado y
   a perder de vista la primera columna, que es la que dice de que fila se
   trata. Con .apilable cada fila pasa a ser una tarjeta y cada dato lleva
   delante el nombre de su columna, tomado del atributo data-col.
   Sobre 1000 px --donde aparece el menu lateral-- vuelve a ser tabla. */
@media (max-width: 999px) {
  .apilable thead { display: none; }
  .apilable, .apilable tbody, .apilable tr, .apilable td { display: block; width: 100%; }
  .apilable tr {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.7rem;
    background: var(--surface);
  }
  .apilable tr:hover { background: var(--surface); }
  .apilable td {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.68rem 0;
    border-bottom: 1px solid var(--rule-soft);
    text-align: left;
  }
  .apilable td:last-child { border-bottom: 0; }
  /* Apilada, la fila es una tarjeta y cada dato un renglon: una linea a la
     izquierda ya no separa columnas, es una raya suelta. */
  .apilable td + td, .apilable th + th { border-left: 0; }
  .apilable td { border-bottom: 1px solid var(--rule-soft); }
  .apilable td.r { text-align: left; white-space: normal; }
  .apilable td[data-col]::before {
    content: attr(data-col);
    flex: 0 0 8.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.005em;
    font-weight: 600;
    color: var(--ink-3);
  }
  /* La celda marcada como titulo encabeza la tarjeta, sin etiqueta y en
     grande: es el codigo o el nombre por el que se reconoce la fila. */
  .apilable td.titulo {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.7rem 0 0.6rem;
    border-bottom: 1px solid var(--rule);
  }
  .apilable td.titulo::before { content: none; }
  /* Un campo dentro de la celda ocupa el resto del ancho, para escribir
     comodo con el pulgar. */
  .apilable td input, .apilable td select { flex: 1 1 auto; min-width: 0; }
  .apilable .celda-num { width: auto; text-align: right; }
  /* La fila vacia y el pie de totales no son tarjetas. */
  .apilable td[colspan] { display: block; border: 0; padding: 0.6rem 0; }
  .apilable td[colspan]::before { content: none; }
  .apilable tfoot tr { border: 0; padding: 0; margin: 0; background: none; }
  .apilable tfoot th { display: none; }
  .apilable tfoot td { border-bottom: 1px solid var(--rule-soft); }
  .apilable tfoot td::before {
    content: attr(data-col);
    flex: 0 0 8.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.005em;
    font-weight: 600;
    color: var(--ink-3);
  }
}

/* Los controles del menú se tocan con el pulgar mientras el menú es un
   cajón; en el computador se compactan más abajo. */
@media (max-width: 999px) {
  .lat-item { min-height: 44px; }
  .lat-salir, .lat-cerrar, .abrir-menu { min-height: 44px; }

  /* El menu se adapta a la pantalla (pedido del duenio, 14/10/2026): si con
     la medida comoda no cabe entero, el script le pone «apretado» y las
     opciones bajan a 40 px, el minimo de toque de este sistema. Los rotulos
     de las secciones se quedan en 44: son lo que se toca para moverse. Si
     cabe, no se aprieta nada. */
  .lat-nav.apretado { gap: 0; }
  .lat-nav.apretado .lat-item { min-height: 40px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .lat-nav.apretado .lat-seccion:not(.cerrada) > .lat-items > .lat-items-caja { padding-bottom: 3px; }
}

/* ---------------- tamano de toque en el celular ---------------- */
/* En el computador se apunta con el mouse y conviene la densidad; en un
   telefono, y mas con guantes de taller, un boton de 34 px se falla. Bajo
   los 1000 px todo lo que se toca sube a 44 px, que es la medida que
   recomiendan tanto Apple como Google. */
@media (max-width: 999px) {
  .btn.sm { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  /* Un monto largo partia el numero en dos lineas dentro del indicador. */
  .kpi .v { font-size: 1.55rem; }
  .chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.74rem;
  }
  /* Las casillas nacen de 13 px: se agrandan y se les da aire alrededor. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .del, .row-meta label, .cam-check {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  /* Los enlaces sueltos dentro de una tabla apilada se vuelven tocables. */
  .apilable td a:not(.btn) { display: inline-block; padding: 0.35rem 0; }
}

/* El boton flotante es fijo y tapaba la ultima fila de la lista: se le deja
   sitio al final del contenido. Sobre 1000 px el boton no existe. */
@media (max-width: 999px) {
  main { padding-bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px)); }
}

/* Una casilla de si/no no necesita su etiqueta arriba y la casilla abajo:
   en el celular van en una sola linea, que se toca entera. */
@media (max-width: 999px) {
  .field:has(> input[type="checkbox"]) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
  }
  .field:has(> input[type="checkbox"]) > label { margin: 0; flex: 1 1 auto; }
  .field:has(> input[type="checkbox"]) > .helptext { flex: 1 1 100%; }
}

/* ================================================================
   LISTAS EN EL COMPUTADOR
   ================================================================
   Las tarjetas grandes son para el pulgar. En una pantalla de
   escritorio dejan ver seis equipos donde caben veinte, y obligan a
   bajar por una lista que deberia entrar de una sola mirada.

   Sobre los 1000 px --el mismo ancho en que aparece el menu lateral--
   la misma tarjeta se reacomoda en una fila: los bloques que en el
   celular van uno debajo del otro se ponen en columnas, el marco de
   cada tarjeta se cambia por una linea divisoria y la lista completa
   pasa a leerse como una tabla. El HTML no cambia.
   ================================================================ */
@media (min-width: 1000px) {

  /* ---- listas de equipos ---- */
  .rejilla {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow: hidden;
  }
  .eq-card {
    grid-template-columns: 34px minmax(0, 1fr) 13rem;
    gap: 0.9rem;
    padding: 0.5rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
    box-shadow: none;
  }
  .rejilla .eq-card:last-child { border-bottom: 0; }
  /* En una fila el realce es el fondo, no el relieve: veinte tarjetas
     levantandose al pasar el mouse marean. */
  .eq-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: var(--accent-soft);
  }
  .eq-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); }
  .eq-ic .ic { width: 17px; height: 17px; }
  .eq-cuerpo {
    grid-template-columns: 8rem minmax(0, 1fr) 7.5rem 13rem;
    align-items: center;
    gap: 0 1.1rem;
  }
  .eq-codigo { font-size: 0.88rem; }
  /* En la fila el nombre va en una linea; si no cabe, se corta. */
  .eq-tipo {
    -webkit-line-clamp: 1;
    font-size: 0.82rem;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }
  .eq-sit { justify-self: start; }
  .eq-pie { flex-wrap: nowrap; overflow: hidden; }
  .eq-pie > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eq-medida {
    grid-auto-flow: column;
    grid-template-columns: 6rem 6.5rem;
    align-items: baseline;
    justify-items: end;
    gap: 0.7rem;
  }

  /* ---- listas de ordenes, checklists, cotizaciones y compras ---- */
  .lista-ot {
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow: hidden;
  }
  .ot-card {
    /* La columna de la derecha ya no manda: con un ancho fijo de 30rem le
       comia a la descripcion todo lo que sobraba y la dejaba en «Revision
       de fug...», que no dice nada. */
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(0, 26rem);
    align-items: center;
    gap: 0 1.3rem;
    padding: 0.55rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--rule-soft);
    /* El color del estado se conserva, pero como una marca fina a la
       izquierda de la fila y no como un borde de tarjeta. */
    border-left: 3px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
  }
  .lista-ot .ot-card:last-child { border-bottom: 0; }
  .ot-card:hover { transform: none; box-shadow: none; background: var(--accent-soft); }
  /* En la lista de checklists los tres botones van al costado y le comen
     ancho a la fila: la columna de la derecha, pensada para una fila que
     ocupa toda la pantalla, dejaba la descripcion en «Ingr...». Aca la
     columna cede y los botones se ponen uno al lado del otro, que es donde
     se pidieron, en vez de apilarse y estirar la fila a lo alto. */
  .cl-fila > .ot-card {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(0, 12rem);
  }
  .cl-lado { grid-auto-flow: column; align-content: center; }
  /* El pie de una orden lleva tres datos y por eso reserva tres columnas;
     el de un checklist lleva dos, y la tercera reservada le robaba el ancho
     justo a «30 puntos». */
  .cl-fila .oc-meta {
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: flex-end;
  }
  /* En una fila nada se parte en dos lineas: lo que no cabe se corta. */
  .oc-cabeza { justify-content: flex-start; gap: 0.55rem; min-width: 0; }
  .oc-izq { min-width: 0; }
  .oc-cabeza > .pill { flex: none; }
  .oc-eq {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .oc-num { font-size: 0.76rem; white-space: nowrap; flex: none; }
  .oc-desc {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sin esto el texto no acepta achicarse por debajo de su largo natural
       y se monta sobre la columna siguiente en vez de cortarse. */
    min-width: 0;
  }
  .oc-pie {
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .oc-meta {
    display: grid;
    /* Anchos tope, no fijos: si la fila se estrecha las columnas ceden en
       vez de desbordarse por la izquierda sobre la descripcion. */
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 8rem) minmax(0, 7rem);
    align-items: center;
    gap: 0 0.9rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .oc-meta > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* La barra de avance ocupaba una fila entera; en la fila el
     porcentaje ya viene escrito en el pie. */
  /* El bloque de personas mide siempre lo mismo, para que la columna de
     al lado no se corra segun cuantos tecnicos tenga cada orden. */
  .oc-gente { min-width: 6.5rem; justify-content: flex-end; }
  /* El monto al final de la fila ocupa siempre lo mismo, para que la
     columna de cifras quede a plomo. */
  .oc-pie > b { min-width: 6.5rem; text-align: right; }
  .ot-card > .bar { display: none; }
}

/* ================================================================
   MENU LATERAL EN EL COMPUTADOR
   ================================================================
   En el celular el menu es un cajon que se desliza y sus items miden
   44 px para el pulgar: eso se queda tal cual. En el computador ese
   mismo alto hacia que los diecisiete items midieran 929 px dentro de
   un espacio de 731 px, asi que el menu se cortaba y habia que
   deslizarlo para llegar a Usuarios o al Log.

   Sobre los 1000 px el menu se compacta hasta entrar entero, y ademas
   se puede plegar a una franja de iconos. La eleccion se recuerda.
   ================================================================ */
@media (min-width: 1000px) {
  .lat-item {
    /* Sin el min-height tactil: aca se apunta con el mouse. */
    min-height: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.855rem;
    gap: 0.65rem;
  }
  .lat-item .ic { width: 18px; height: 18px; }
  .lat-grupo { padding: 0.7rem 0.7rem 0.2rem; font-size: 0.6rem; }
  .lat-nav { padding: 0.5rem 0.6rem 0.8rem; }
  .lat-pie { padding: 0.6rem 0.9rem; gap: 0.45rem; }
  .lat-avatar { width: 30px; height: 30px; font-size: 0.82rem; }
  .lat-salir { min-height: 0; padding: 0.35rem 0.15rem; }

  .lat-plegar {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
  }
  .lat-plegar:hover { background: var(--accent); color: #fff; }
  .lat-plegar:active { transform: scale(0.92); }
  .lat-plegar .ic { transition: transform 0.2s ease; }

  /* ---- franja de iconos ---- */
  .menu-plegado { --lateral-w: 68px; }
  .menu-plegado .lat-txt,
  .menu-plegado .lat-grupo,
  .menu-plegado .lat-datos,
  .menu-plegado .marca-logo { display: none; }
  .menu-plegado .lat-item,
  .menu-plegado .lat-salir { justify-content: center; padding: 0.5rem; }
  .menu-plegado .lat-marca { justify-content: center; padding-left: 0; padding-right: 0; }
  .menu-plegado .lat-usuario { justify-content: center; }
  .menu-plegado .lat-plegar .ic { transform: rotate(180deg); }
  /* Sin los rotulos de grupo, una linea fina marca donde empieza cada uno. */
  .menu-plegado .lat-grupo + .lat-item {
    border-top: 1px solid var(--menu-linea);
    margin-top: 0.4rem;
    padding-top: 0.55rem;
  }
  .menu-plegado .lat-nav > .lat-grupo:first-child + .lat-item {
    border-top: 0; margin-top: 0; padding-top: 0.5rem;
  }
  /* La marca activa se corre al borde de la franja. */
  .menu-plegado .lat-item.on::before { left: -0.5rem; }

  /* El ancho lo lee tanto la barra como el contenido, asi que ambos se
     mueven juntos al plegar. */
  .lateral, .principal { transition: width 0.18s ease, margin-left 0.18s ease; }
}

/* En el celular el boton de plegar no tiene sentido: el menu es un cajon. */
@media (max-width: 999px) { .lat-plegar { display: none; } }

/* ---------------- secciones plegables del menú ---------------- */
/* Con diecisiete opciones, encontrar una obliga a recorrer la lista entera.
   Cada grupo se abre y se cierra, y la elección se recuerda: quien trabaja
   todo el día en bodega deja cerrado el resto y tiene lo suyo a la mano.
   La sección donde estás parado se abre sola, para no perder el rastro. */
.lat-seccion { display: grid; }

button.lat-grupo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 36px;
  padding: 0.45rem 0.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* Antes iban en mayúsculas monoespaciadas y con las letras separadas.
     Eso se lee como una etiqueta de máquina: duro y, en el celular,
     apretado. En minúscula y con la fuente del sistema el menú se lee de
     un vistazo y se siente más blando. */
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-align: left;
  border-radius: var(--radius);
  transition: color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease;
}
button.lat-grupo > span:first-child { flex: 1 1 auto; min-width: 0; }
button.lat-grupo:hover {
  color: var(--accent-fuerte);
  background: var(--menu-hover);
  box-shadow: 0 4px 14px -6px rgba(217, 98, 43, 0.45);
}
button.lat-grupo:hover .lat-flecha { color: var(--accent); }
button.lat-grupo:active { background: var(--menu-canto); }
/* El grupo donde estás parado se marca con el color, no con una caja. */
.lat-seccion.contiene-activa > button.lat-grupo { color: var(--ink); }
button.lat-grupo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


/* Una flecha fina y sin caja. La de antes vivia en un circulo con fondo
   propio y pesaba mas que el rotulo al que acompañaba. */
.lat-flecha {
  flex: none;
  box-sizing: border-box;
  width: 16px; height: 16px;
  color: #94a3b8;
  transform: rotate(90deg);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), color 0.18s ease;
}
.lat-seccion.cerrada .lat-flecha { transform: rotate(0deg); }

/* El despliegue anima la altura con grid: no hay que medir nada en
   JavaScript ni fijar un alto máximo que después quede corto. */
.lat-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.lat-items > * { min-height: 0; }
.lat-seccion.cerrada .lat-items { grid-template-rows: 0fr; }
/* El contenedor interno es el que recorta: sin él los enlaces asoman. */
.lat-items-caja { overflow: hidden; display: grid; gap: 1px; }
.lat-seccion:not(.cerrada) > .lat-items > .lat-items-caja { padding-bottom: 7px; }

/* Una sección cerrada que contiene la pantalla activa se marca en el rótulo,
   para no perder de vista dónde estás cuando la vuelves a cerrar. */
.lat-seccion.cerrada.contiene-activa > button.lat-grupo { color: var(--accent); }

/* Al cargar la pagina el menu no se mueve: aparece ya acomodado. La clase
   se saca en el primer cuadro y a partir de ahi si hay animacion, pero solo
   cuando el usuario aprieta un sector. Sin esto, cada clic del menu abria y
   cerraba grupos a la vista, que es lo que hace incomodo moverse. */
.lat-nav.ajustando .lat-items,
.lat-nav.ajustando .lat-flecha,
.lat-nav.ajustando .lat-item,
.lat-nav.ajustando button.lat-grupo { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .lat-items, .lat-flecha { transition: none; }
}

/* En la franja de iconos no hay rótulos que plegar: los grupos desaparecen
   y todos los items quedan visibles. */
@media (min-width: 1000px) {
  .menu-plegado .lat-seccion.cerrada .lat-items { grid-template-rows: 1fr; }
  .menu-plegado .lat-items-caja { overflow: visible; }
}

/* Registrar un pago se hace desde la misma fila: fecha, referencia y botón
   en línea, para no abrir una pantalla por cada factura cobrada. */
.pago-forma {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.pago-forma input { min-width: 0; }
.pago-forma input[type="date"] { width: 8.5rem; }
.pago-forma input[type="text"] { width: 9rem; }
@media (max-width: 999px) {
  .pago-forma { width: 100%; }
  .pago-forma input { flex: 1 1 8rem; }
  .pago-forma button { flex: 1 1 100%; }
}

/* ---------------- fotografías de la orden ---------------- */
/* Miniaturas cuadradas para que la fila quede pareja aunque las fotos
   vengan del celular en horizontal y en vertical mezcladas. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
  padding: 0.9rem;
}
.foto {
  position: relative;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface-2);
}
.foto figcaption {
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.74rem;
}
.foto-txt { color: var(--ink-2); overflow-wrap: anywhere; }
/* El botón de quitar se apoya sobre la esquina de la foto. */
.foto form { display: contents; }
.foto-quitar {
  position: absolute;
  top: 0.35rem; right: 0.35rem;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 15, 0.6);
  color: #fff;
  cursor: pointer;
}
.foto-quitar:hover { background: var(--crit); }
.foto-quitar .ic { width: 15px; height: 15px; }
@media (max-width: 999px) {
  /* Se toca con el pulgar y ademas es destructivo: no baja de 44 px. */
  .foto-quitar { width: 44px; height: 44px; }
  .foto-quitar .ic { width: 18px; height: 18px; }
}
.subir-fotos input[type="file"] {
  padding: 0.6rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  width: 100%;
}


/* ---------------- barras de desplazamiento ---------------- */
/* La barra gris del sistema es ancha, dura y rompe la linea del diseño.
   Esta es fina, del color del borde, y se oscurece solo al usarla.
   El gutter estable evita que el contenido salte de lado al pasar de una
   pantalla corta a una larga, que es la parte que se siente mal hecha. */
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Dentro del menú oscuro la barra va en claro, o no se ve. */
/* El menú ya es claro: la barra fina del resto del sistema le sirve igual. */


/* El rótulo del grupo es un botón y en el celular se toca con el pulgar.
   Va al final del archivo a propósito: la definición base del rótulo está
   más arriba y, con la misma especificidad, gana la última que se lee. */
@media (max-width: 999px) {
  button.lat-grupo {
    /* 44 px es el minimo que recomiendan Apple y Google para algo que se
       toca. Con ocho grupos, cada pixel de mas empuja el ultimo rotulo
       fuera de la pantalla. */
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
  }
  .lat-flecha { width: 27px; height: 27px; padding: 5px; }
}

/* En el celular, la marca de arriba y el pie de abajo son adorno: cada
   pixel que se lleven es una opcion del menu que queda bajo el borde. Se
   aprietan lo justo para que el menu completo entre en la pantalla sin
   desplazar, que es lo unico que se pide de un menu. */
@media (max-width: 999px) {
  .lat-marca { padding: 0.55rem 0.85rem 0.6rem; }
  .marca-logo { width: 120px; }
  /* Un respiro entre grupos: pegados, el último enlace de la sección
     abierta y el rótulo de la siguiente se leen como una sola lista. */
  .lat-nav { padding: 0.5rem 0.6rem 0.6rem; gap: 3px; }
  .lat-pie {
    padding: 0.45rem 0.9rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    gap: 0.25rem;
  }
  .lat-avatar { width: 30px; height: 30px; font-size: 0.82rem; }
  .lat-salir { padding: 0.35rem 0.15rem; }
}

/* Portátil de pantalla baja. Con nueve grupos, un menú pensado para un
   monitor de escritorio se pasa unos veinte píxeles del borde y aparece la
   barra de desplazamiento. Ahí los rótulos se aprietan un poco y el menú
   vuelve a entrar entero, que es lo que hace que no haya que bajar hasta el
   final para encontrar algo. */
@media (min-width: 1000px) and (max-height: 800px) {
  button.lat-grupo {
    min-height: 30px;
    padding: 0.3rem 0.6rem;
  }
  .lat-flecha { width: 20px; height: 20px; padding: 3px; }
}

/* ---------------- registro informático ---------------- */
.texto-ok { color: var(--ok); }
/* Una cifra que resume una tarjeta entera: el gasto en software. */
.cifra-grande {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.3rem;
}
/* La clave del producto no se muestra entera: es larga y no aporta leerla
   completa en la ficha. Se ve al pasar el mouse o al seleccionarla. */
.clave-oculta {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  filter: blur(3px);
  transition: filter 0.15s ease;
}
.clave-oculta:hover, .clave-oculta:focus { filter: none; }

/* La foto del daño se muestra a un tamaño que deja ver lo que pasó, sin
   ocupar la ficha entera. */
.foto-evidencia {
  display: block;
  width: 100%;
  max-height: 380px;
  /* Entera: en un incidente, lo que se recorta es lo que despues nadie
     puede comprobar. */
  object-fit: contain;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

/* =================================================================
   CARPETA PÚBLICA DEL EQUIPO
   La página que se abre con el QR. La mira alguien que no es de la
   empresa, muchas veces de pie al lado de la carretera y con el sol
   encima: letra grande, contraste alto y nada que distraiga.
   ================================================================= */
body.publico { background: var(--ground); }

.pub-cabecera {
  background: var(--negro);
  color: #fff;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.1rem 1rem;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
}
.pub-logo { width: 168px; height: auto; }
.pub-cabecera p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }

.pub-cuerpo {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 0.9rem calc(2rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 0.9rem;
}

.pub-ficha {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1rem;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  text-align: center;
}
/* La patente es lo primero que busca quien fiscaliza: va del tamaño de una
   placa de verdad, para comparar de un vistazo con la del vehículo. */
.pub-patente {
  font-family: var(--f-mono);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
}
.pub-ficha h1 { font-size: 1.05rem; font-weight: 600; }

.pub-datos {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  justify-content: center;
}
.pub-datos > div { display: grid; gap: 0.05rem; text-align: center; }
.pub-datos dt { font-size: 0.72rem; color: var(--ink-3); }
.pub-datos dd { margin: 0; font-size: 0.92rem; font-weight: 500; }

.pub-alerta {
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.2rem;
  font-size: 0.88rem;
}
.pub-alerta.crit { background: var(--crit-soft); color: var(--crit); }
.pub-alerta.warn { background: var(--warn-soft); color: var(--warn); }
.pub-alerta.ok { background: var(--ok-soft); color: var(--ok); }

/* Los puntos que no salieron buenos, en la ficha que abre el QR. El resto no
   se lista: quien escanea en la carretera quiere saber si hay algo malo, no
   leer setenta y seis lineas para descubrir que estaban todas bien. */
.pub-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pub-puntos li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
}
.pub-puntos li.malo { background: var(--crit-soft); color: var(--crit); }
.pub-puntos li.regular { background: var(--warn-soft); color: var(--warn); }
.pp-estado { font-size: 0.72rem; font-weight: 700; padding-top: 0.1rem; }
.pp-txt { color: var(--ink); }
.pub-puntos li.malo .pp-txt { color: var(--crit); }
.pub-puntos li.regular .pp-txt { color: var(--warn); }
.pp-txt em { display: block; font-style: normal; font-size: 0.8rem; opacity: 0.85; }
.pub-obs { display: grid; gap: 0.2rem; }
.pub-obs dt { font-size: 0.72rem; color: var(--ink-3); }
.pub-obs p { margin: 0; font-size: 0.88rem; }

.pub-doc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: grid;
  gap: 0.7rem;
}
.pub-doc.alterado { border-color: var(--crit); }
.pd-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pd-cab h2 { font-size: 1rem; }
.pub-doc .pub-datos { justify-content: flex-start; }
.pub-doc .pub-datos > div { text-align: left; }

/* El sello de firma. Va separado del resto por una línea, como en un
   documento en papel: arriba lo que dice el documento, abajo quién
   responde por él. */
.pub-sello {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--rule);
}
.ps-firma {
  flex: none;
  width: 96px; height: 52px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--ink-3);
}
.ps-firma img { max-width: 100%; max-height: 100%; }
.ps-txt { display: grid; gap: 0.05rem; font-size: 0.78rem; color: var(--ink-3); min-width: 0; }
.ps-txt b { color: var(--ink); font-size: 0.88rem; }
.ps-huella { font-family: var(--f-mono); font-size: 0.7rem; overflow-wrap: anywhere; }

.pub-vacio {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.1rem;
  display: grid;
  gap: 0.5rem;
}
.pub-vacio p { margin: 0; color: var(--ink-3); font-size: 0.88rem; }

.pub-pie {
  color: var(--ink-3);
  font-size: 0.76rem;
  text-align: center;
  display: grid;
  gap: 0.2rem;
  padding-top: 0.6rem;
}
.pub-pie p { margin: 0; overflow-wrap: anywhere; }

/* ---------------- lienzo de firma ---------------- */
.lienzo-firma {
  width: 100%;
  height: 190px;
  background: var(--surface);
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  touch-action: none;   /* o el dedo desplaza la página en vez de firmar */
  cursor: crosshair;
  display: block;
}

/* ---------------- adhesivo con el QR ---------------- */
.credencial {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.1rem 1.1rem;
  max-width: 22rem;
  margin: 0 auto;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  color: var(--ink);
}
.cr-marca {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-fuerte);
}
.cr-qr svg { display: block; width: 100%; height: auto; max-width: 15rem; }
.cr-patente {
  font-family: var(--f-mono);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.cr-equipo { font-size: 0.9rem; font-weight: 600; }
.cr-instruccion { font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }
.cr-url { font-size: 0.62rem; color: var(--ink-3); overflow-wrap: anywhere; }

@media print {
  .credencial { border-width: 1.5px; box-shadow: none; page-break-inside: avoid; }
}

/* Fila de documento con su sello y sus botones: deja de ser un enlace
   entero, porque ahora hay dos acciones distintas dentro. */
.doc-fila { display: grid; gap: 0.35rem; }
.doc-sello { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; }
.doc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; }

/* Un campo con algo que el sistema no reconoce: se avisa mientras se
   escribe, no al llegar al final del formulario. */
.campo-malo { border-color: var(--crit); background: var(--crit-soft); }

/* La pauta que eligió el sistema. No es un campo: es el sistema diciendo
   qué va a usar, para que el usuario no tenga que saberlo ni elegirlo. */
.pauta-auto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.88rem;
}
.pa-et { color: var(--ink-3); font-size: 0.76rem; font-weight: 600; }
.pauta-auto b { flex: 1 1 auto; min-width: 0; }
.pa-cambiar {
  border: 0;
  background: transparent;
  color: var(--accent-fuerte);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem;
  text-decoration: underline;
}

.ph-acciones { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---------------- checklist paso a paso ---------------- */
/* Barra fija con el paso en que va, cuánto falta y hacia dónde seguir.
   Se apoya justo encima de la barra de navegación del celular. */
.paso-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* El relleno de abajo va despues del atajo, o el atajo lo pisa y la barra
     queda debajo del gesto de inicio del iPhone. */
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 26px -20px rgba(15, 23, 42, 0.6);
}
.pn-flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.pn-flecha:disabled { opacity: 0.35; cursor: default; }
.pn-txt { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
.pn-txt b {
  font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-txt small { font-size: 0.74rem; color: var(--ink-3); }
/* Cuando quedan puntos sin marcar se dice ahí mismo, no al final. */
.pn-txt small.pendiente { color: var(--accent-fuerte); font-weight: 600; }
.paso-nav .btn { flex: none; min-height: 42px; }

/* El contenido deja sitio para las dos barras. */
body.con-pasos main { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1000px) {
  .paso-nav {
    left: calc(var(--lateral-w) + 24px);
    bottom: 0;
  }
  body.con-pasos main { padding-bottom: 6.5rem; }
}

/* ---------------- checklist: la grilla del Excel ----------------
   El punto a la izquierda y las cuatro casillas a la derecha, igual que la
   hoja de papel. Quien pasó del papel al teléfono no aprende nada nuevo. */
.cl-grilla { display: grid; }
.cl-encabezado,
.cl-linea {
  display: grid;
  /* Tres casillas, las del papel: bueno, malo y no aplica. Con cuatro
     quedaba una columna de 38px reservada para «regular», que ya no se
     ofrece, y los tres tickets se veian corridos a la izquierda. */
  grid-template-columns: 1fr repeat(3, 38px);
  align-items: center;
  gap: 0 2px;
}
.cl-encabezado {
  background: var(--surface-2);
  border-block: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  padding: 0.35rem 0.9rem;
}
.cl-encabezado span + span { text-align: center; }

.cl-linea {
  padding: 0.3rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.cl-linea:last-child { border-bottom: 0; }
.cl-punto {
  font-size: 0.88rem;
  line-height: 1.3;
  padding: 0.35rem 0.5rem 0.35rem 0;
  cursor: pointer;
}
.cl-punto em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--crit);
  margin-left: 0.3rem;
}

/* Una casilla que se toca con el pulgar: 38 de ancho por 40 de alto, con el
   ticket dentro. Es la misma casilla del papel, pero del tamaño de un dedo. */
.cl-casilla {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.cl-casilla.ancha { min-width: 62px; }
.cl-casilla input { position: absolute; opacity: 0; pointer-events: none; }
.cl-casilla span {
  font-size: 0.95rem;
  font-weight: 700;
  color: transparent;
  line-height: 1;
}
.cl-casilla.ancha span { font-size: 0.8rem; }
.cl-casilla:has(input:checked) { border-width: 2px; }
.cl-casilla.b:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); }
.cl-casilla.b:has(input:checked) span { color: var(--ok); }
.cl-casilla.r:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); }
.cl-casilla.r:has(input:checked) span { color: var(--warn); }
.cl-casilla.m:has(input:checked) { background: var(--crit-soft); border-color: var(--crit); }
.cl-casilla.m:has(input:checked) span { color: var(--crit); }
.cl-casilla.na:has(input:checked) { background: var(--surface-2); border-color: var(--ink-3); }
.cl-casilla.na:has(input:checked) span { color: var(--ink-3); }
.cl-casilla:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La nota solo aparece cuando el punto no salió bueno: si no, cada fila
   arrastraría un campo de texto vacío y la pantalla sería el doble de larga. */
.cl-nota {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.85rem !important;
  min-height: 38px !important;
  display: none;
}
.cl-linea:has(.m input:checked) .cl-nota,
.cl-linea:has(.r input:checked) .cl-nota,
.cl-linea:has(.cl-nota:not(:placeholder-shown)) .cl-nota { display: block; }

.cl-grilla.fatiga .cl-encabezado { display: none; }
.cl-grilla.fatiga .cl-linea { grid-template-columns: 1fr 62px 62px; }

/* ---------------- pie de firmas ---------------- */
.firmas-par { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .firmas-par { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.fp-lado { display: grid; gap: 0.5rem; align-content: start; }
.fp-tit {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
}
.fp-firma { display: grid; gap: 0.25rem; }
.fp-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-3);
}
/* La firma que ya estaba guardada se ve encima del recuadro, para saber que
   existe sin tener que abrir el PDF. */
.fp-hecha {
  max-height: 70px;
  align-self: center;
  justify-self: center;
  filter: grayscale(1);
}

/* Fila de la lista de checklists: la tarjeta ocupa el ancho y al costado
   van sus botones. No pueden ir dentro porque la tarjeta ya es un enlace, y
   un enlace no vive dentro de otro. */
.cl-fila { display: flex; align-items: stretch; gap: 0.5rem; }
/* La tarjeta ya no es un enlace: no se levanta al pasar el cursor ni
   cambia el puntero, porque tocarla no hace nada. Y el texto se puede
   seleccionar, que antes tampoco se podia. */
.cl-fila > .ot-card { cursor: default; }
.cl-fila > .ot-card:hover { transform: none; box-shadow: var(--sombra); }
.cl-fila > .ot-card { flex: 1 1 auto; min-width: 0; }
.cl-lado { flex: none; display: grid; gap: 0.4rem; align-content: center; }
/* Botones compactos, no dos cajas del alto de la tarjeta: con dos, estirarlos
   a lo alto le come el ancho a la tarjeta y el código del equipo se parte en
   dos líneas. */
.cl-boton {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  width: 58px;
  padding: 0.4rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.cl-boton .ic { width: 17px; height: 17px; }
.cl-boton:hover {
  text-decoration: none;
  color: var(--accent-fuerte);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ph-acciones { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---------------- checklist paso a paso ---------------- */
/* Barra fija con el paso en que va, cuánto falta y hacia dónde seguir.
   Se apoya justo encima de la barra de navegación del celular. */
.paso-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* El relleno de abajo va despues del atajo, o el atajo lo pisa y la barra
     queda debajo del gesto de inicio del iPhone. */
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 26px -20px rgba(15, 23, 42, 0.6);
}
.pn-flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.pn-flecha:disabled { opacity: 0.35; cursor: default; }
.pn-txt { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
.pn-txt b {
  font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-txt small { font-size: 0.74rem; color: var(--ink-3); }
/* Cuando quedan puntos sin marcar se dice ahí mismo, no al final. */
.pn-txt small.pendiente { color: var(--accent-fuerte); font-weight: 600; }
.paso-nav .btn { flex: none; min-height: 42px; }

/* El contenido deja sitio para las dos barras. */
body.con-pasos main { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1000px) {
  .paso-nav {
    left: calc(var(--lateral-w) + 24px);
    bottom: 0;
  }
  body.con-pasos main { padding-bottom: 6.5rem; }
}

/* ---------------- checklist: la grilla del Excel ----------------
   El punto a la izquierda y las cuatro casillas a la derecha, igual que la
   hoja de papel. Quien pasó del papel al teléfono no aprende nada nuevo. */
.cl-grilla { display: grid; }
.cl-encabezado,
.cl-linea {
  display: grid;
  /* Tres casillas, las del papel: bueno, malo y no aplica. Con cuatro
     quedaba una columna de 38px reservada para «regular», que ya no se
     ofrece, y los tres tickets se veian corridos a la izquierda. */
  grid-template-columns: 1fr repeat(3, 38px);
  align-items: center;
  gap: 0 2px;
}
.cl-encabezado {
  background: var(--surface-2);
  border-block: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  padding: 0.35rem 0.9rem;
}
.cl-encabezado span + span { text-align: center; }

.cl-linea {
  padding: 0.3rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.cl-linea:last-child { border-bottom: 0; }
.cl-punto {
  font-size: 0.88rem;
  line-height: 1.3;
  padding: 0.35rem 0.5rem 0.35rem 0;
  cursor: pointer;
}
.cl-punto em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--crit);
  margin-left: 0.3rem;
}

/* Una casilla que se toca con el pulgar: 38 de ancho por 40 de alto, con el
   ticket dentro. Es la misma casilla del papel, pero del tamaño de un dedo. */
.cl-casilla {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.cl-casilla.ancha { min-width: 62px; }
.cl-casilla input { position: absolute; opacity: 0; pointer-events: none; }
.cl-casilla span {
  font-size: 0.95rem;
  font-weight: 700;
  color: transparent;
  line-height: 1;
}
.cl-casilla.ancha span { font-size: 0.8rem; }
.cl-casilla:has(input:checked) { border-width: 2px; }
.cl-casilla.b:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); }
.cl-casilla.b:has(input:checked) span { color: var(--ok); }
.cl-casilla.r:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); }
.cl-casilla.r:has(input:checked) span { color: var(--warn); }
.cl-casilla.m:has(input:checked) { background: var(--crit-soft); border-color: var(--crit); }
.cl-casilla.m:has(input:checked) span { color: var(--crit); }
.cl-casilla.na:has(input:checked) { background: var(--surface-2); border-color: var(--ink-3); }
.cl-casilla.na:has(input:checked) span { color: var(--ink-3); }
.cl-casilla:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La nota solo aparece cuando el punto no salió bueno: si no, cada fila
   arrastraría un campo de texto vacío y la pantalla sería el doble de larga. */
.cl-nota {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.85rem !important;
  min-height: 38px !important;
  display: none;
}
.cl-linea:has(.m input:checked) .cl-nota,
.cl-linea:has(.r input:checked) .cl-nota,
.cl-linea:has(.cl-nota:not(:placeholder-shown)) .cl-nota { display: block; }

.cl-grilla.fatiga .cl-encabezado { display: none; }
.cl-grilla.fatiga .cl-linea { grid-template-columns: 1fr 62px 62px; }

/* ---------------- pie de firmas ---------------- */
.firmas-par { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .firmas-par { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.fp-lado { display: grid; gap: 0.5rem; align-content: start; }
.fp-tit {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
}
.fp-firma { display: grid; gap: 0.25rem; }
.fp-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-3);
}
/* La firma que ya estaba guardada se ve encima del recuadro, para saber que
   existe sin tener que abrir el PDF. */
.fp-hecha {
  max-height: 70px;
  align-self: center;
  justify-self: center;
  filter: grayscale(1);
}

/* Los dos botones de la fila de checklist. La tarjeta ya no es un enlace:
   se entra por «Abrir», no por rozar cualquier parte de la fila. */
.cl-acciones {
  display: flex;
  gap: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-soft);
}
.cl-acciones .btn { flex: 1 1 0; }

/* ---------------- filtro por periodo y descargas ----------------
   Van en la misma pieza a propósito: lo que se descarga es exactamente lo
   que se está mirando, y verlos juntos lo hace evidente. */
.filtro-periodo {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.7rem;
}
.fp-campos { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.fp-campos .field { flex: 1 1 8.5rem; min-width: 8.5rem; }
.fp-campos .field.crece { flex: 1 1 12rem; }
.fp-campos .btn { flex: none; }
.fp-descargas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-soft);
}
.fp-et { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); margin-right: 0.2rem; }
.fp-descargas .btn .ic { width: 16px; height: 16px; }

/* ---------------- marcador de fotos del informe ---------------- */
/* La foto y el dibujo encima. El SVG va con viewBox de 0 a 1 para que las
   coordenadas que se guardan sean las mismas que se dibujan: una marca
   puesta en el telefono sale en el mismo lugar en el PDF. */
.marcador { display: grid; gap: 0.8rem; }
.mk-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.mk-grupo { display: flex; gap: 0.4rem; }
.mk-ayuda { font-size: 0.8rem; color: var(--ink-3); flex: 1 1 12rem; }
.mk-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.mk-boton.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-fuerte);
}
.mk-lienzo {
  position: relative;
  display: block;
  max-width: 900px;
  margin: 0 auto;
  border: 3px solid var(--negro);
  border-radius: 4px;
  overflow: hidden;
  /* Sin esto el navegador se lleva el arrastre como si fuera un scroll y no
     se puede dibujar con el dedo. */
  touch-action: none;
}
.mk-lienzo img { display: block; width: 100%; height: auto; }
.mk-lienzo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* ---------------- valorizacion del informe ---------------- */
/* Las lineas salen de la planilla que se subio, asi que esto solo las
   muestra: no hay nada editable, y por eso se lee como una tabla y no como
   un formulario. */
.val-seccion { margin-top: 0.7rem; }
.vs-cab {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.6rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}
.val-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.val-tabla td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.val-tabla tr:last-child td { border-bottom: 0; }
.vt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.val-total {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}
.val-total span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.val-total .vt-grande {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 0.3rem;
  border-top: 1px solid var(--rule-soft);
}

/* ---------------- ordenes de trabajo ---------------- */
/* La fila de una orden: cuatro columnas y dos datos en cada una. Seis datos
   en una sola linea no se leen; de a dos, con el importante arriba y el que
   lo explica abajo, la lista se recorre de un vistazo.

   Lo que diferencia una fila de otra no es el color de una pastilla: es el
   peso. Una orden en curso pesa, una cerrada se aparta. */
/* La retícula la comparten la fila y su encabezado: si se cambia una
   columna acá, el título de arriba se mueve con ella. Tenerlas separadas
   era la forma segura de que un día dejaran de calzar. */
.ot-fila, .of-titulos {
  display: grid;
  /* La ultima es el sector de acciones: columna propia y no colgando del
     estado, porque son dos cosas distintas y mezcladas no se leia ninguna. */
  /* La flexible -el trabajo- lleva un minimo, por lo mismo que en la lista
     de revisiones: en un portatil de 1280 las cinco fijas se comian el
     ancho y la descripcion del trabajo quedaba en «Revisio de...», que es
     justo lo que se viene a leer. De paso la fecha lleva lo suyo, que
     cortada en «20/09/20...» no dice el año. */
  grid-template-columns: 5.5rem 8rem 9.5rem minmax(9rem, 1fr) 10.5rem 13rem;
  gap: 0;
  align-items: stretch;
}
.ot-fila {
  padding: 0.95rem 0.9rem 0.95rem 0.2rem;
  background: transparent;
  color: var(--ink-2);
}
.ot-fila:hover { text-decoration: none; }
.ot-fila.estado-cerrada .of-titulo,
.ot-fila.estado-cerrada .of-patente { color: var(--ink-2); }
.ot-fila.estado-cerrada .of-celda > span { opacity: 0.82; }

/* Cada columna: arriba el dato, abajo el que lo acompana. Y una raya fina
   entre una y otra: sin ella, cuatro datos seguidos se leen como una frase
   en vez de como cuatro columnas. */
/* La celda ocupa todo el alto de la fila y su contenido va centrado: asi
   la linea que la separa de la de al lado llega de arriba abajo y se
   encuentra con la que separa las filas. Media linea no hace una rejilla. */
.of-celda {
  display: grid;
  align-content: center;
  align-self: stretch;
  gap: 0.12rem;
  min-width: 0;
  padding: 0 var(--aire-celda);
}
.of-celda + .of-celda { border-left: 1px solid var(--rule); }
.of-celda > b {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.of-celda > span {
  font-size: 0.76rem;
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El micro-rotulo dice que es el dato de al lado. Estaba en el color de las
   lineas y no se leia: tiene que ser discreto, no invisible. */
.of-celda > span em, .of-mecanicos em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--ink-3);
  opacity: 0.75;
  margin-right: 0.35rem;
}
.of-celda.derecha { justify-items: end; text-align: right; }
.of-celda .vacio { font-style: italic; opacity: 0.75; }

.of-fecha { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.of-num { font-family: var(--f-mono); letter-spacing: -0.02em; }
.of-patente {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.93rem;
}
/* La prioridad alta es un punto al lado de la patente, no una pastilla. */
.of-urge { width: 6px; height: 6px; border-radius: 50%; background: var(--crit); flex: none; }

.of-titulo { line-height: 1.35; }
.of-mecanicos {
  font-size: 0.76rem;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.of-mecanicos em { color: var(--ink-3); }
.of-mecanicos.vacio { color: var(--ink-3); font-style: italic; }

.of-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.of-estado i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.of-estado.abierta { color: var(--info); }
.of-estado.abierta i { background: var(--info); }
.of-estado.andando { color: var(--accent-fuerte); font-weight: 600; }
.of-estado.andando i { background: var(--accent); }
.of-estado.ok { color: var(--ink-3); font-weight: 400; }
.of-estado.ok i { background: var(--ok); opacity: 0.55; }

/* El encabezado de columnas, con la misma reticula que las filas. */
/* El encabezado y la lista, en una caja: el contenedor de la pagina
   separa a sus hijos con aire y ahi quedaba una franja en blanco entre los
   titulos y el primer renglon. */
.ot-tabla { display: block; }

/* El encabezado y la lista son una sola caja: van pegados, con el canto
   redondeado arriba en el encabezado y abajo en la lista. Separados se veia
   un salto entre los titulos y el primer renglon. */
.ot-encabezado {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  /* Las filas llevan 3px de canto de color a la izquierda; el encabezado
     lleva 1px de borde. Sin estos 3px de relleno la reticula de arriba
     empieza antes que la de abajo y los titulos quedan corridos. */
  padding: 0.55rem 0 0.55rem 3px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.ot-encabezado + .lista-ot {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}
.of-titulos { padding: 0 0.9rem 0 0.2rem; }
.of-titulos > span {
  padding: 0 var(--aire-celda);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Los titulos se separan con la misma linea que las columnas de abajo:
   asi se ve donde empieza y termina cada una, tambien en el encabezado. */
.of-titulos > span + span { border-left: 1px solid var(--rule); }
.of-titulos > span:last-child { text-align: right; }

/* En el telefono se apila: fecha y estado arriba, patente y trabajo debajo.
   Cuatro columnas en 390 px no son cuatro columnas, son cuatro palabras
   cortadas. */
@media (max-width: 860px) {
  /* Apilada no hay columnas que titular: el encabezado se va y cada dato
     lleva su propio rotulo al lado, que es lo que lo hace reconocible sin
     una fila de titulos arriba. */
  .ot-encabezado { display: none; }
  .ot-tabla {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .of-celda { padding: 0; }
  .of-celda + .of-celda { border-left: 0; }
  .ot-linea { border-bottom: 1px solid var(--rule); }
  .ot-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.8rem;
    align-items: start;
    padding: 1rem 1rem 1.05rem 0.6rem;
  }
  /* Numero y fecha en la primera linea, el estado al costado; despues el
     equipo, y abajo el trabajo con sus mecanicos. */
  .ot-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ot-fila > .of-celda:nth-child(2) { grid-column: 1; grid-row: 1; justify-self: end; padding-right: 0.6rem; }
  .ot-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 2; }
  .ot-fila > .of-celda:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .ot-fila > .of-celda:nth-child(5) { grid-column: 2; grid-row: 1 / 3; align-content: start; }
  .of-titulo { white-space: normal; }
  .of-mecanicos { white-space: normal; }
  /* El numero y la fecha comparten renglon: el numero pesa, la fecha
     acompana. */
  .of-num { font-size: 0.86rem; }
  .of-fecha { font-size: 0.8rem; font-weight: 400; color: var(--ink-3); }
}


/* Marcar ordenes para bajarlas. La casilla va al costado de la fila y no
   dentro, porque la fila es un enlace y un enlace no vive dentro de otro. */
/* Entre el filtro y la lista: lo que se marca a la izquierda, lo que se
   crea a la derecha, y las dos cosas a la misma altura. */
.ot-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.ot-todos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Alto de dedo: con guantes de taller, 37 px no se aciertan. */
  min-height: 40px;
  padding: 0.45rem 0.7rem;
  font-size: 0.84rem;
  color: var(--ink-2);
  cursor: pointer;
}
.ot-todos input { width: 17px; height: 17px; accent-color: var(--accent); }
.ot-elegidas {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fuerte);
  font-size: 0.76rem;
  font-weight: 600;
}
.ot-linea {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: stretch;
  /* La linea entre fila y fila, visible: sin ella los renglones se pegan y
     no se sabe donde termina uno y empieza el otro. */
  border-bottom: 1px solid var(--rule);
  /* Un solo borde a la izquierda, y es este. Antes la casilla traia el
     suyo y la fila el de color: se veian dos cantos haciendo un escalon. */
  border-left: 3px solid transparent;
  background: var(--surface);
  overflow: hidden;
  transition: background 0.14s ease;
}
.ot-linea:has(.estado-abierta) { border-left-color: var(--info); }
.ot-linea:has(.estado-en_ejecucion) { border-left-color: var(--accent); }
.ot-linea:has(.urgente) { border-left-color: var(--crit); }
/* La primera fila ya no redondea arriba: ese canto lo pone el encabezado. */
.ot-linea:first-child { border-radius: 0; }
/* Sin franjas alternas: la separacion la hacen las lineas. Con lineas y
   franjas a la vez la tabla se ensucia, y una planilla seria usa una cosa o
   la otra. */
.ot-linea:hover { background: var(--accent-soft); }
.ot-linea:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.ot-linea > .ot-fila { border-bottom: 0; border-radius: 0; }
/* Marcada se dice con una barra al canto, no con un fondo: el fondo ya
   está ocupado diciendo en qué estado va la orden. */
.ot-linea.marcada { box-shadow: inset 4px 0 0 var(--accent); }
.ot-linea.marcada .ot-marca { background: var(--accent-soft); }
.ot-marca {
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ot-marca input { width: 17px; height: 17px; accent-color: var(--accent); }

@media (max-width: 760px) {
  .ot-linea { grid-template-columns: 2rem minmax(0, 1fr); }
  .ot-marca { align-items: start; padding-top: 1rem; }
}

/* ---------------------------------------------------------------- avisos
   La vista previa del correo. Es una lista de cosas para leer de corrido,
   no un tablero: sin colores de estado ni pastillas. Lo unico que separa
   los bloques es el titulo, igual que en el correo de texto que sale. */
.av-bloque + .av-bloque { margin-top: 1.1rem; }
.av-titulo {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
.av-lineas { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.av-lineas li {
  padding: 0.45rem 0 0.45rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
}
.av-lineas li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}
.av-lineas li:last-child { border-bottom: 0; }
.av-mas { margin: 0.4rem 0 0; font-size: 0.82rem; }

/* ------------------------------------------------- listas de checklists
   La misma reticula de las ordenes de trabajo, con las columnas de una
   revision. Que las pantallas se lean igual no es coqueteria: quien aprendio
   a recorrer una lista no tiene que volver a aprender la otra.

   El prefijo es «rev-» y no «cl-» porque «cl-» ya es del formulario de
   llenado: .cl-linea es cada punto de la pauta, con su relleno y su
   separacion, y reusar el nombre metia ese relleno en los renglones de la
   lista y descuadraba las columnas. */

/* Equipos: cuando, que, con que pauta, que salio y como quedo. La ancha es
   la cuarta, que es lo que se viene a buscar. */
.rev-fila, .rev-titulos {
  /* La flexible lleva un minimo. Con minmax(0, 1fr) las cinco columnas fijas
     sumaban mas que el ancho util de un portatil de 1280, y la reticula le
     quitaba el sobrante a la unica que podia encoger: la pauta quedaba en
     un dedo de ancho y el titulo salia como «C...». Con un minimo, la pauta
     nunca desaparece. */
  grid-template-columns: 8rem 8rem minmax(8rem, 1fr) 10.5rem 8.5rem 13rem;
}

/* Herramientas: una columna menos, porque una herramienta no entra ni sale
   del taller. Lo que sobra se lo lleva el nombre de la herramienta, que es
   como la pide la gente en bodega. */
.herr-fila, .herr-titulos {
  /* La ultima es el sector de acciones, igual que en las otras dos listas. */
  grid-template-columns: 7rem 15rem minmax(0, 1fr) 10rem 14rem;
}

.rev-fila.estado-conforme .of-titulo,
.rev-fila.estado-conforme .of-patente,
.herr-fila.estado-conforme .of-titulo,
.herr-fila.estado-conforme .of-patente { color: var(--ink-2); }
.rev-fila.estado-conforme .of-celda > span,
.herr-fila.estado-conforme .of-celda > span { opacity: 0.82; }

/* El canto de color dice de un vistazo cual hay que mirar: azul la que quedo
   a medias, nada la que esta bien. */
.rev-linea:has(.estado-borrador) { border-left-color: var(--info); }
/* Y si aparecio un punto critico malo manda el rojo, este cerrada o no: una
   revision a medias que ya encontro un freno malo es la fila mas urgente de
   la pantalla, no una mas que falta llenar. Va despues a proposito. */
.rev-linea:has(.estado-noconforme),
.rev-linea:has(.con-falla) { border-left-color: var(--crit); }

/* Lo que salio, en la columna ancha: el mismo peso que el trabajo en una
   orden, porque es lo que se lee primero. */
.of-hallazgo { line-height: 1.35; }
.of-hallazgo.malo { color: var(--crit); font-weight: 600; }
.of-hallazgo.ojo { color: var(--warn); font-weight: 600; }
.of-estado.mala { color: var(--crit); font-weight: 600; }
.of-estado.mala i { background: var(--crit); }

@media (max-width: 860px) {
  /* Apilada, como la orden: fecha y estado en la primera linea, y abajo lo
     demas. La segunda celda hereda de la orden un «pegado a la derecha» que
     alla sirve -es la fecha al costado del numero- y aca dejaria el equipo
     corrido a la mitad del renglon. */
  .rev-fila, .herr-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .rev-fila > .of-celda:nth-child(1),
  .herr-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rev-fila > .of-celda:nth-child(2),
  .herr-fila > .of-celda:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    padding-right: 0;
  }
  .rev-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .rev-fila > .of-celda:nth-child(4) { grid-column: 1 / -1; grid-row: 4; }
  .rev-fila > .of-celda:nth-child(5) { grid-column: 2; grid-row: 1 / 3; align-content: start; }
  .herr-fila > .of-celda:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .herr-fila > .of-celda:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-content: start; }
  .of-hallazgo { white-space: normal; }
}

/* ------------------------------------------------- carga desde planilla
   La vista previa de una carga masiva: una fila por renglon de la planilla,
   con lo que va a pasar y que campo cambia. Se apoya en la reticula de las
   listas, que es la que la gente ya sabe recorrer. */
.ph-botones { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Estas filas no llevan casilla para marcar: no se baja nada de aca, se
   mira. Sin esto heredan de las listas la columna de la casilla, la fila no
   se estira a lo ancho y la ultima columna queda en cero -o sea,
   invisible-. Toda lista sin casillas tiene que estar en esta linea. */
.imp-linea, .imp-cabeza, .pl-linea, .eq-linea, .dcl-linea, .log-linea, .seg-linea {
  grid-template-columns: minmax(0, 1fr);
}
.imp-fila, .imp-titulos {
  grid-template-columns: 5rem 14rem 9rem minmax(0, 1fr);
}
/* El canto de color dice de un vistazo que hace cada fila: verde lo que
   nace, azul lo que cambia, rojo lo que se queda fuera. */
.imp-crear { border-left-color: var(--ok); }
.imp-actualizar { border-left-color: var(--info); }
.imp-saltada { border-left-color: var(--crit); }
.imp-fila { cursor: default; }

.imp-cambios { display: grid; gap: 0.15rem; }
.imp-c { font-size: 0.82rem; color: var(--ink-2); }
.imp-c em {
  font-style: normal;
  color: var(--ink-3);
  font-size: 0.72rem;
  margin-right: 0.35rem;
}
.imp-c s { color: var(--ink-3); }
.imp-c b { color: var(--ink); font-weight: 600; }

/* El recuento de arriba: cuantas nacen, cuantas cambian, cuantas no. */
.res-cuenta { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.rc-dato { font-size: 0.88rem; color: var(--ink-2); }
.rc-dato b { font-size: 1.3rem; color: var(--ink); margin-right: 0.3rem; }
.rc-dato.malo, .rc-dato.malo b { color: var(--crit); }

.col-lista {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.col-lista li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.mt { margin-top: 0.9rem; }

@media (max-width: 860px) {
  .imp-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .imp-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .imp-fila > .of-celda:nth-child(2) {
    grid-column: 1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .imp-fila > .of-celda:nth-child(3) { grid-column: 2; grid-row: 1; }
  .imp-fila > .of-celda:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}
/* El aviso de «esto se parece a algo que ya existe»: no frena la carga, la
   decision es de quien conoce la flota, pero tiene que verlo. */
.imp-aviso {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--warn);
}

/* ------------------------------------------------- mantenciones hechas
   El historial de un plan: cada mantencion con el papel que la respalda. La
   reticula es la de las listas, con las columnas de una mantencion. */
.mant-fila, .mant-titulos {
  grid-template-columns: 7rem 10rem minmax(0, 1fr) 11rem;
}
/* Cuantas tienen comprobante, en la lista de mantenciones. Una que no lo
   tiene no se puede demostrar, y eso se dice ahi mismo. */
.mant-papel { color: var(--ok); }
.mant-papel.falta { color: var(--warn); }

/* La barra de avance del ciclo en la ficha del plan. */
.barra-uso {
  height: 8px;
  border-radius: 999px;
  background: var(--rule-soft);
  overflow: hidden;
  margin: 0.2rem 0 0.8rem;
}
.bu-relleno { display: block; height: 100%; background: var(--ok); }
.bu-relleno.est-vencido { background: var(--crit); }
.bu-relleno.est-proximo { background: var(--warn); }

@media (max-width: 860px) {
  .mant-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .mant-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mant-fila > .of-celda:nth-child(2) {
    grid-column: 1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .mant-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .mant-fila > .of-celda:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-content: start; }
}

/* ------------------------------------------------- lista de mantenciones
   La misma reticula que las ordenes y los checklists. Antes cada plan era
   una tarjeta del ancho de la pantalla, y para comparar dos equipos habia
   que recorrerlas de arriba abajo en vez de leer una columna. */
.pl-fila, .pl-titulos {
  grid-template-columns: 10rem minmax(0, 1fr) 9rem 10rem 7.5rem;
}
/* Las dos primeras celdas son enlaces a la ficha, no la fila entera: a la
   derecha vive el boton de registrar y un enlace no puede vivir dentro de
   otro. */
.pl-enlace { color: inherit; text-decoration: none; }
.pl-fila:hover .pl-enlace .of-patente { color: var(--accent-fuerte); }
.pl-linea.est-vencido { border-left-color: var(--crit); }
.pl-linea.est-proximo { border-left-color: var(--warn); }
.of-num.pasado { color: var(--crit); }
/* Dentro de la celda la barra vale lo que la celda: los 150px fijos que usa
   en el panel se salian por encima de la columna de al lado. */
.pl-fila .bar.corta { width: auto; margin-top: 0.3rem; }

/* Las filas de «resolver esto»: que es, cuanto, y el boton. Se usan en el
   panel para las vencidas y en la lista para las que no tienen lectura. */
.reg-lista { display: grid; gap: 0.15rem; margin-top: 0.5rem; }
.reg-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--rule-soft);
}
.reg-fila:last-child { border-bottom: 0; }
.reg-que { display: grid; gap: 0.1rem; min-width: 0; }
.reg-que b { font-size: 0.92rem; color: var(--ink); }
.reg-que > span {
  font-size: 0.8rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-cuanto { text-align: right; display: grid; gap: 0.1rem; }
.reg-cuanto b { color: var(--crit); font-size: 0.92rem; font-weight: 600; }
.reg-cuanto > span { font-size: 0.74rem; color: var(--ink-3); }

/* La tarjeta de lo vencido pesa un poco mas que las demas: es lo unico del
   panel que hay que resolver hoy. */
.card.urgente { border-color: var(--crit-soft); }
.card.urgente .card-head h2 { color: var(--crit); }

@media (max-width: 860px) {
  .pl-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .pl-fila > .of-celda:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .pl-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .pl-fila > .of-celda:nth-child(4) { grid-column: 2; grid-row: 1; }
  .pl-fila > .of-celda:nth-child(5) { grid-column: 2; grid-row: 3; justify-self: end; }
  .reg-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .reg-cuanto { grid-column: 1; grid-row: 2; text-align: left; }
}

/* ------------------------------------------------- registrar mantencion
   Una sola tarjeta y cuatro casillas. Antes eran dos «pasos» numerados para
   cinco campos: el andamiaje pesaba mas que el formulario. */
.reg-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.4rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.rc-bloque { display: grid; gap: 0.1rem; }
.rc-bloque em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ink-3);
}
.rc-bloque b { font-size: 1rem; color: var(--ink); font-weight: 600; }
/* Con la clase sobre el propio <b>: «.rc-bloque b» es mas especifica que
   «.rc-mal» a secas y se comia el color. */
.rc-mal, .rc-bloque b.rc-mal { color: var(--crit); }
.rc-ojo, .rc-bloque b.rc-ojo { color: var(--warn); }

/* En el computador las casillas cortas van de a dos; el comprobante y la
   observacion, enteras. En el telefono se apila todo. */
.reg-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.45rem 1.1rem;
  align-items: start;
}
.reg-campos .field.ancha { grid-column: 1 / -1; }
.reg-form .barra-guardar { margin-top: 0.6rem; }

/* «obligatorio» dicho en la etiqueta y no solo con un asterisco: sin el
   comprobante no se registra nada, y eso conviene saberlo antes de llenar
   el resto. */
.obliga {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--crit-soft);
  color: var(--crit);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------- lista de proveedores
   El correo y el telefono son enlaces: desde la lista se escribe o se
   llama, que es para lo que se abre esta pantalla. */
.pv-dato { color: var(--ink); text-decoration: none; }
.pv-dato:hover { color: var(--accent-fuerte); text-decoration: underline; }
/* El giro del SII y la direccion son largos: se recortan en la celda y el
   texto entero queda en el titulo emergente. */
.pv-giro, .pv-dir, .pv-dato {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El correo se lleva el ancho y el giro lo cede: el correo se copia y se
   lee entero, el giro del SII es una descripcion larga que nadie termina
   de leer. Los dos guardan el texto completo en el titulo emergente. */
/* Los topes bajan lo que subio el aire de las celdas: el correo sigue
   entrando entero y la tabla sigue cabiendo sin barra de desplazamiento. */
.pv-dato { max-width: 12.5rem; }
.pv-giro, .pv-dir { max-width: 7.5rem; }
/* El telefono entero en una linea: partido en dos renglones deja de
   leerse como un numero y no se puede copiar de un vistazo. */
.pv-dato.mono { white-space: nowrap; max-width: none; }
/* El alfiler de la direccion: lleva al mapa y ocupa lo que ocupa un icono.
   Escribir la direccion entera en la celda gastaba media columna en algo
   que nadie lee: lo que se hace con una direccion es ir. */
.pv-donde { display: inline-flex; align-items: center; gap: 0.4rem; }
.pv-mapa {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  flex: none;
}
.pv-mapa:hover { background: var(--accent-soft); color: var(--accent-fuerte); }
.pv-mapa .ic { width: 16px; height: 16px; }

@media (max-width: 520px) {
  /* En un telefono angosto, el repuesto solo se lee si tiene el renglon
     entero: con el desplegable, la cantidad y la equis en una linea, el
     nombre quedaba en «Elige el repue...» y no se sabia cual se eligio. */
  .pedido-fila {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 0.4rem 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .pedido-fila > select { grid-column: 1 / -1; }
  .pedido-fila > .pf-quitar { grid-row: 2; grid-column: 2; }
}

/* ------------------------------------------- firma y QR de la solicitud */
.sol-firma {
  display: block;
  width: 100%;
  max-width: 260px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.sol-qr {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
}
.sol-qr-img { flex: none; line-height: 0; }
.sol-qr-txt { display: grid; gap: 0.3rem; justify-items: start; min-width: 0; }
.sol-qr-txt b { font-size: 0.9rem; }
.sol-qr-txt .muted { font-size: 0.78rem; word-break: break-all; }
/* Quien retira es de una contratista: se dice, porque en bodega cambia a
   quien se le entrega el material. */
.sol-tercero {
  font-style: normal;
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* ------------------------------------------------- tipografia en el movil
   En el telefono los codigos, las patentes y las fechas van con la misma
   tipografia que el texto. La monoespaciada se puso para que una columna de
   cifras quede alineada, y en el telefono no hay columnas: todo se apila.
   Lo unico que sobrevive ahi de DM Mono es el trazo cuadrado, y como una
   patente en el celular es el texto mas grande de la fila, la pantalla
   entera se ve cuadrada.

   Se cambia la variable y no cada regla: son mas de veinte sitios los que
   piden --f-mono, y una lista de veinte clases se queda corta el dia que
   aparezca la veintiuna.

   Los numeros quedan de ancho fijo con «tabular-nums», que es lo que de
   verdad se necesitaba: que 03/09 y 11/12 ocupen lo mismo. */
@media (max-width: 760px) {
  :root {
    --f-mono: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  }
  .mono, .of-num, .of-patente, .of-fecha, .oc-num, .ac-num, .num,
  .row-title, .avance-txt b {
    font-variant-numeric: tabular-nums;
    /* Sin el espaciado de la monoespaciada, que separaba las letras para
       llenar el ancho fijo de cada una. */
    letter-spacing: 0;
  }
}

/* ------------------------------------------------- la pantalla de faena
   Es la unica que anda sin señal, y se usa con guantes en una tablet: todo
   mas grande y con mas aire que en el resto del sistema. */
.fa-estado {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.fa-luz { width: 14px; height: 14px; border-radius: 50%; flex: none;
          background: var(--ink-3); }
.fa-luz.ok { background: var(--ok); }
.fa-luz.espera { background: var(--warn); }
.fa-luz.sin { background: var(--crit); }
.fa-txt { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.fa-txt b { font-size: 1rem; }
.fa-txt .muted { font-size: 0.82rem; }

.fa-botones { display: grid; gap: 0.6rem; margin-bottom: 1.1rem; }

.fa-cola { display: grid; gap: 0.35rem; }
.fa-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--rule-soft);
}
.fa-fila:last-child { border-bottom: 0; }
.fa-fila-que { display: grid; gap: 0.1rem; min-width: 0; }
.fa-fila-que b { font-size: 0.9rem; }
.fa-fila-que > span { font-size: 0.78rem; color: var(--ink-3); }
.fa-fila-espera { font-size: 0.78rem; color: var(--warn); flex: none; }
.fa-fila-error { font-size: 0.78rem; color: var(--crit); text-align: right; }

/* La hoja de llenado: tapa la pantalla entera. En una tablet en faena no
   hay lugar para dos cosas a la vez. */
.fa-hoja {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--fondo, var(--surface));
}
body.fa-abierta { overflow: hidden; }
.fa-hoja-cab, .fa-hoja-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.fa-hoja-pie { border-bottom: 0; border-top: 1px solid var(--rule); }
.fa-hoja-cab b { font-size: 1.05rem; }
.fa-hoja-cuerpo {
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.fa-pauta { font-size: 0.82rem; color: var(--ink-3); margin: 0; }

/* Un punto de la pauta: el texto arriba y los cuatro botones abajo, de
   ancho completo. Con guantes no se acierta un boton de 40px. */
.fa-puntos { display: grid; gap: 0.5rem; }
.fa-punto {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fa-punto-txt { font-size: 0.92rem; color: var(--ink); }
.fa-punto-txt em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--crit);
  text-transform: none;
}
.fa-opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.fa-op { position: relative; }
.fa-op input { position: absolute; opacity: 0; pointer-events: none; }
.fa-op span {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
}
.fa-op input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* Si la tablet quedo lista para trabajar sin señal, o no. Es lo primero que
   hay que saber antes de subirse a la camioneta. */
.fa-listo {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.fa-listo b { font-size: 0.95rem; }
.fa-listo span { font-size: 0.82rem; }
.fa-listo.si { background: var(--ok-soft); border-color: var(--ok); }
.fa-listo.si b { color: var(--ok); }
.fa-listo.casi { background: var(--warn-soft); border-color: var(--warn); }
.fa-listo.casi b { color: var(--warn); }
.fa-listo.no { background: var(--crit-soft); border-color: var(--crit); }
.fa-listo.no b { color: var(--crit); }
/* La misma tira de datos, cuando va dentro de una tarjeta: sin su propio
   marco ni su propio fondo, que la tarjeta ya los pone. */
.reg-cabecera.en-tarjeta {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0 1rem 1rem;
}
.rc-pie { font-size: 0.74rem; color: var(--ink-3); }

/* ------------------------------------------------- lista de equipos
   La misma reticula que los checklists, las ordenes y las mantenciones.
   Antes cada equipo era una tarjeta suelta y las pastillas de situacion
   corrian las columnas: el mismo dato caia en otro sitio en cada renglon. */
.eq-fila, .eq-titulos {
  grid-template-columns: 9.5rem minmax(0, 1fr) 11rem 8.5rem 9rem 8.5rem;
}
/* Las celdas que son enlace tienen que verse y comportarse como celda: sin
   subrayado, con el color del texto normal y ocupando el alto entero, o el
   renglon se parte en cinco cajitas de distinta altura. */
.eq-enlace { color: inherit; text-decoration: none; }

/* Los cuatro botones del renglon, solo con el icono: cuarenta renglones con
   la palabra «Asignar a faena» repetida tapan la lista. La palabra esta en
   el title, y los mismos cuatro salen con texto en la ficha del equipo. */
.eq-botones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
}
.eq-bot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34 px: el minimo con el que un dedo acierta sin apretar el de al lado. */
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--ink-3);
  transition: background 0.14s ease, color 0.14s ease;
}
.eq-bot .ic { width: 17px; height: 17px; }
.eq-bot:hover { background: var(--accent-soft); color: var(--accent-fuerte); }
.eq-bot.peligro:hover { background: var(--crit); color: #fff; }
/* El canto de color dice como esta la maquina, sin leer: rojo detenida,
   naranja en taller, nada si esta operando -que es lo normal y no necesita
   llamar la atencion-. */
.eq-linea.est-detenido { border-left-color: var(--crit); }
.eq-linea.est-en_taller { border-left-color: var(--warn); }
.eq-linea.est-fuera_servicio,
.eq-linea.est-baja { border-left-color: var(--ink-3); }
.eq-fila .eq-sit {
  font-size: 0.78rem;
  /* Se medio: «Comprometido en contrato» se salia 11 px de su columna y
     pisaba la linea de la siguiente. El tope va aca y no en el texto para
     que ninguna situacion que se agregue despues pueda desbordar. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* Se midio: el renglon de equipos ocupaba 277 px en el telefono, contra
     156 de las ordenes y 177 de las mantenciones. Cada dato se llevaba dos
     lineas -el valor y su detalle, uno debajo del otro- y con cinco datos
     salian nueve lineas por equipo: no cabia ni uno entero en pantalla.

     Cuatro renglones, como las ordenes:
       patente y estado          lo que se busca
       marca, modelo y año       de que maquina se trata
       faena y contador          donde esta y cuanto lleva, lado a lado
       los cuatro botones        lo que se le puede hacer */
  .eq-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .eq-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .eq-fila > .of-celda:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .eq-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  /* El contador comparte renglon con la faena en vez de comerse el suyo. */
  .eq-fila > .of-celda:nth-child(4) {
    grid-column: 2; grid-row: 3; text-align: right; justify-items: end;
  }
  .eq-fila > .of-celda:nth-child(5) { grid-column: 2; grid-row: 1; }
  /* Dentro de cada celda, el valor y su detalle van uno al lado del otro y
     no uno debajo del otro: es lo que duplicaba el alto. */
  .eq-fila > .of-celda:nth-child(1),
  .eq-fila > .of-celda:nth-child(3),
  .eq-fila > .of-celda:nth-child(4) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.45rem;
  }
  .eq-fila > .of-celda:nth-child(4) { justify-content: flex-end; }
  /* Los botones bajan a su propio renglon y se reparten el ancho: apretados
     contra el borde derecho, con el pulgar se acierta el de al lado. */
  .eq-fila > .eq-botones {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: flex-start;
    gap: 0.4rem;
    border-left: 0;
    padding-top: 0.15rem;
  }
}

/* ------------------------- listas de documentos
   Cotizaciones, ordenes de compra, estados de pago, solicitudes, tomas de
   inventario e incidentes son el mismo papel: un numero, con quien, de que
   se trata, en que quedo y cuanto. Estaban como tarjetas apiladas y cada
   dato caia en un sitio distinto segun el largo del texto de arriba: para
   comparar dos ordenes habia que recorrerlas enteras en vez de bajar la
   vista por una columna. Una sola reticula para las siete. */
.dcl-fila, .dcl-titulos {
  grid-template-columns: 9.5rem minmax(0, 1fr) 11rem 11rem 8rem;
}
/* La toma de inventario no tiene monto: cuatro columnas, no cinco. */
.toma-fila, .toma-titulos {
  grid-template-columns: 10rem minmax(0, 1fr) 11rem 8rem;
}

/* El canto de color dice en que quedo el papel sin leer nada: rojo lo que
   esta mal o atrasado, naranja lo que espera a alguien, nada lo que ya se
   cerro -que es lo normal y no necesita llamar la atencion-. */
.dcl-linea.est-borrador { border-left-color: var(--warn); }
.dcl-linea.est-pendiente,
.dcl-linea.est-solicitada,
.dcl-linea.est-emitida,
.dcl-linea.est-negociacion { border-left-color: var(--accent); }
.dcl-linea.est-aprobada,
.dcl-linea.est-presentado,
.dcl-linea.est-enviada,
.dcl-linea.est-parcial,
.dcl-linea.est-en_curso,
.dcl-linea.est-investigacion { border-left-color: var(--info); }
.dcl-linea.est-rechazada,
.dcl-linea.est-rechazado,
.dcl-linea.est-vencida,
.dcl-linea.atrasada,
.dcl-linea.urgente,
.dcl-linea.grav-grave,
.dcl-linea.grav-fatal { border-left-color: var(--crit); }

/* Lo que ya se cerro, anulo o descarto: se deja ver, pero mas apagado. No
   se esconde -a veces se busca justo una anulada- pero no compite con lo
   que si hay que hacer hoy. */
.dcl-linea.est-anulada,
.dcl-linea.est-descartada,
.dcl-linea.est-cerrada { opacity: 0.72; }
.of-estado.apagada { color: var(--ink-3); font-weight: 400; }
.of-estado.apagada i { background: var(--ink-3); opacity: 0.5; }

@media (max-width: 860px) {
  /* En el telefono no son cinco columnas: son cinco palabras cortadas.
     Arriba el numero y el estado, que es lo que se busca; debajo de que se
     trata, quien y cuanto. */
  .dcl-fila, .toma-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .dcl-fila > .of-celda:nth-child(1),
  .toma-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dcl-fila > .of-celda:nth-child(2),
  .toma-fila > .of-celda:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .dcl-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .dcl-fila > .of-celda:nth-child(4) { grid-column: 1; grid-row: 4; }
  .dcl-fila > .of-celda:nth-child(5) { grid-column: 2; grid-row: 1; }
  .toma-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .toma-fila > .of-celda:nth-child(4) { grid-column: 2; grid-row: 1; }
}

/* ------------------------------ registro de actividad
   Se lee siempre igual: quien, que, cuando. Por eso va en columnas como las
   demas listas, y no en tarjetas donde esos tres datos caen a distinta
   altura en cada renglon. */
.log-fila, .log-titulos {
  grid-template-columns: 8.5rem minmax(0, 1fr) 13rem 8.5rem;
}
/* Lo que borra alguien y los ingresos rechazados llevan canto rojo: son los
   dos motivos por los que se abre esta pantalla. */
.log-linea.acc-eliminar,
.log-linea.acc-fallido { border-left-color: var(--crit); }
.log-linea.acc-editar { border-left-color: var(--warn); }
.log-cambios {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .log-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .log-fila > .of-celda:nth-child(1) { grid-column: 1; grid-row: 1; }
  .log-fila > .of-celda:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-right: 0;
  }
  .log-fila > .of-celda:nth-child(3) { grid-column: 1; grid-row: 3; }
  .log-fila > .of-celda:nth-child(4) { grid-column: 2; grid-row: 1; }
}

/* --------------------------------- acciones del equipo
   Las cuatro cosas que se le hacen a una maquina desde su ficha. Con icono
   y palabra: solo el icono obliga a adivinar, y de estas cuatro una borra.
   Borrar va apartado por un hueco para que no se apriete de pasada. */
.eq-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}
.eq-accion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.eq-accion:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.eq-accion .ic { width: 18px; height: 18px; flex: none; }
.eq-accion.peligro { margin-left: auto; color: var(--crit); }
.eq-accion.peligro .ic { color: var(--crit); }
.eq-accion.peligro:hover {
  background: var(--crit);
  border-color: var(--crit);
  color: #fff;
}

/* El boton del que no se vuelve, en la pantalla de confirmar. */
.btn.peligro { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.peligro:hover { filter: brightness(1.08); }

.lista-cuentas { margin: 0.6rem 0; padding-left: 1.1rem; }
.lista-cuentas li { margin: 0.25rem 0; }

/* La casilla con su texto al lado, alineados por el centro de la marca y no
   por la linea base, que dejaba el cuadrito flotando sobre el renglon. */
.casilla {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 400;
}
.casilla input { width: 1.05rem; height: 1.05rem; flex: none; margin: 0; }

@media (max-width: 560px) {
  /* En el telefono los cuatro no caben en una linea. Se reparten en dos y
     borrar deja de irse al extremo derecho, que ahi ya no significa nada. */
  .eq-acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .eq-accion { justify-content: center; }
  .eq-accion.peligro { margin-left: 0; }
}

/* ------------------------- renglon que se mira, no que se abre
   Tocar cualquier parte de un hallazgo o de un traslado abria el formulario
   de edicion. En el telefono eso es un campo minado: uno toca para leer lo
   que no cabe en la linea y acaba dentro de un formulario. El renglon se
   mira, y para cambiarlo esta su boton -el mismo patron que ya usaban los
   documentos de esa misma ficha-. */
.fila-con-boton { display: grid; gap: 0.35rem; }
.fila-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
}

/* ---------------- el sector de acciones de cada fila ---------------- */
.of-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 0.5rem;
}
.of-acciones .acc-fila { margin-top: 0; }

@media (max-width: 900px) {
  /* En el telefono la fila no da: cinco datos y cinco botones en 390px se
     montan unos sobre otros. La fila pasa a ser tarjeta -datos arriba,
     franja de acciones abajo- y los botones se reparten el ancho con 40px de
     alto, que es lo que se acierta con guantes de taller. */

  /* La caja de la lista suelta su borde y su recorte: si los mantiene, las
     esquinas de las tarjetas de adentro salen cuadradas. */
  .ot-tabla { border: 0; border-radius: 0; overflow: visible; background: none; }

  /* El :first-child y el :last-child de mas arriba cuadran las esquinas de la
     primera y la ultima fila, para que la lista se vea como una sola caja.
     Con tarjetas eso no corresponde, y esas dos reglas pesan mas que un
     .ot-linea suelto: hay que nombrarlas igual para poder deshacerlas. */
  .ot-linea, .rev-linea,
  .ot-linea:first-child, .ot-linea:last-child,
  .rev-linea:first-child, .rev-linea:last-child {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 0.65rem;
    overflow: hidden;
  }

  /* Una sola columna, y el sector de acciones al final. Hay que deshacer la
     colocacion a mano de los hijos 1 al 5 que hace la regla de mas arriba:
     con ella puesta, el sexto -las acciones- caia en un hueco y quedaba a
     282px dentro de una tarjeta de 341. */
  .ot-fila, .rev-fila, .herr-fila {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  /* Con .of-acciones a secas no alcanza: `.ot-fila > .of-celda:nth-child(5)`
     de mas arriba coloca el quinto hijo al costado, y en la lista de
     herramientas el sector de acciones ES el quinto -tiene cuatro datos, no
     cinco-. Por eso ahi salia de 217px al costado del estado en vez de a lo
     ancho. Nombrar las dos clases empata la especificidad, y gana esta por
     venir despues. */
  .ot-fila > .of-celda.of-acciones,
  .rev-fila > .of-celda.of-acciones,
  .herr-fila > .of-celda.of-acciones {
    grid-column: 1 / -1;
    grid-row: auto;
    /* Sin width: con «width: 100%» el ancho queda clavado al de la celda y
       los margenes negativos solo la corren de sitio en vez de estirarla. */
    /* Se sale de su celda para llegar a los dos bordes de la tarjeta: a la
       izquierda hay que cubrir la columna de la casilla de marcar, que mide
       2rem, mas el aire de la fila. */
    margin: 0.6rem -1rem -1.05rem calc(-2rem - 0.6rem);
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
    justify-content: stretch;
  }
  .of-acciones .acc-fila { width: 100%; flex-wrap: nowrap; }
  .of-acciones .acc-borrar { display: flex; flex: 1 1 0; }
  .of-acciones .btn,
  .of-acciones .acc-borrar > .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding-inline: 0.2rem;
  }
  /* Los cinco en un renglon: el texto se esconde y queda el icono, que es lo
     que cabe. El title sigue diciendo que hace cada uno. */
  .of-acciones .btn { font-size: 0; gap: 0; }
  .of-acciones .btn .ic { width: 19px; height: 19px; }

  /* El encabezado de columnas no tiene sentido sin columnas. */
  .ot-encabezado { display: none; }
}

/* ---------------- los botones de cada fila de una lista ---------------- */
/* Antes el renglon entero era un enlace y tocarlo en cualquier parte abria el
   registro: en el telefono se abria uno sin querer al desplazar, y para
   editar habia que pasar antes por la ficha. Ahora cada cosa tiene su boton.

   El prefijo acc- es propio: .fila-acciones ya existe para las filas de
   seguimiento del informe, y dos cosas distintas con el mismo nombre es como
   se rompen pantallas lejanas. */
.acc-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.acc-fila .btn { padding-inline: 0.5rem; }
.acc-fila .ic { width: 15px; height: 15px; }
.acc-borrar { display: contents; }

/* El rojo aparece con el dedo encima, no siempre: tres botones por fila en
   una lista de sesenta, con uno rojo macizo, es una pantalla que grita. */
.acc-peligro:hover,
.acc-peligro:focus-visible {
  background: var(--crit);
  border-color: var(--crit);
  color: #fff;
}
.acc-peligro:hover .ic, .acc-peligro:focus-visible .ic { color: #fff; }

@media (max-width: 640px) {
  /* En el telefono los tres botones ocupan la fila completa y se reparten
     el ancho: un boton de 40px entre dos textos no se acierta con guantes. */
  .acc-fila { justify-content: stretch; }
  .acc-fila > .btn, .acc-borrar > .btn { flex: 1 1 0; min-height: 40px; }
}

/* ------------------------ conclusion y seguimiento del informe
   Tres columnas que se editan en la misma reticula de las demas listas.
   La actividad manda, asi que se lleva el ancho que sobra. */
.seg-fila, .seg-titulos {
  grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
}
.seg-fila .of-celda { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.seg-fila input, .seg-fila select { width: 100%; min-width: 0; }

@media (max-width: 860px) {
  /* Apiladas: tres campos con su etiqueta, uno debajo del otro. */
  .seg-fila { grid-template-columns: minmax(0, 1fr); }
  .seg-fila > .of-celda { border-left: 0; }
}

/* La firma dibujada, en la ficha de la orden. Ancho limitado para que una
   firma larga no estire la tarjeta. */
.firma-vista {
  display: block;
  max-width: 190px;
  max-height: 46px;
  margin: 0.25rem 0;
}

/* El tick que abre un bloque entero del formulario. Se separa de lo que
   cuelga de el para que se lea como un interruptor y no como un campo mas. */
.casilla.interruptor {
  margin: 0 0 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* El presupuesto del informe de daños: las dos maneras de hacerlo, lado a
   lado, y lo que le falta a un borrador. Prefijo propio, ip-, porque pr- ya
   es de las líneas del presupuesto. */
.ip-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem; margin-bottom: 1rem; }
.ip-opcion { border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem;
  display: grid; gap: 0.4rem; align-content: start; }
.ip-titulo { font-weight: 700; }
.ip-opcion input[type="file"] { max-width: 100%; }
.ip-check label { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; }
.ip-faltan { border-left: 3px solid var(--warn); background: var(--warn-soft); padding: 0.4rem 0.8rem; }
.ip-faltan ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* ---------------- lista de informes de daños y mermas ---------------- */
/* Usa la fila de la lista de órdenes tal cual, columnas incluidas: se probó
   con una columna de acciones más ancha para los seis botones y le quitaba
   el ancho a la fecha y a lo que pasó, que salían cortados. Como en las
   órdenes, cuando una fila lleva todos los botones pasan a un segundo
   renglón. */
.dl-ranking { margin-top: 1.2rem; }
/* En el teléfono el costo va al costado del número y la fecha, y
   «estimado $1.107.801» en una línea le quitaba tanto ancho a esa columna
   que el número y la fecha quedaban pegados: «DM-00222/09/2026». Se deja
   partir en dos renglones. */
@media (max-width: 860px) {
  .ot-fila > .of-celda > .dl-costo { white-space: normal; text-align: right; max-width: 7rem; }
  /* La cifra no se corta: «$1.107.8» arriba y «01» abajo no es un monto. */
  .dl-costo .dl-monto { white-space: nowrap; }
}
/* Y la fecha baja a su propio renglón. En la orden va al lado del número,
   pero acá la columna del costo es más ancha y en 390 px no quedaba sitio:
   «DM-00222/09/2026». Sólo dentro de la media query, porque `.dl-fila` suma
   peso y afuera le ganaría a la retícula de pantalla ancha. */
@media (max-width: 860px) {
  .ot-fila.dl-fila > .of-celda:nth-child(2) { grid-row: 2; justify-self: start; padding-right: 0; }
  .ot-fila.dl-fila > .of-celda:nth-child(3) { grid-row: 3; }
  .ot-fila.dl-fila > .of-celda:nth-child(4) { grid-row: 4; }
  .ot-fila.dl-fila > .of-celda:nth-child(5) { grid-row: 1 / 4; }
}
/* El «N/A» de la recepción: una línea de casillas con su texto al lado,
   debajo de los campos que anulan. */
.ip-na { border: 0; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.ip-na legend { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.3rem; padding: 0; }
.ip-na label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; font-size: 0.9rem; }
.ip-na input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
/* El resumen del costo al final del informe: lo que mostraba la ficha. */
.ip-costos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem; margin: 0 0 1rem; }
.ip-costos > div { border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 0.8rem; }
.ip-costos dt { font-size: 0.72rem; color: var(--ink-3); }
.ip-costos dd { margin: 0.15rem 0 0; font-variant-numeric: tabular-nums; }
.ip-estados { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
/* La casilla del timbre de Servicio Técnico, con el timbre a la vista. */
.ip-timbre { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule); border-radius: 10px; margin: 0.8rem 0; cursor: pointer; }
.ip-timbre input { width: 20px; height: 20px; flex: none; }
.ip-timbre img { height: 56px; width: auto; flex: none; }
.ip-timbre span { display: grid; gap: 0.15rem; font-weight: 600; }
.ip-timbre em { font-style: normal; font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
/* La imagen de referencia de la portada: grande y a la vista. */
.ip-portada { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.ip-portada-foto { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface-2);
  display: grid; place-items: center; min-height: 12rem; overflow: hidden; }
.ip-portada-foto img { max-width: 100%; max-height: 22rem; display: block; }
.ip-portada-vacia { color: var(--ink-3); padding: 2rem 1rem; text-align: center; }
.ip-portada-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.ip-portada-botones .btn { cursor: pointer; }
.ip-check-linea { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; }

/* ---------------- lista de lecturas de horómetro y km ---------------- */
/* La fila de las órdenes con las columnas de una lectura: la fecha, el
   equipo, el valor, de dónde salió, quién y su nota, y el botón de ver el
   equipo. Dentro de la media query, porque `.ot-fila.lec-fila` pesa más que
   el `.ot-fila` del teléfono y afuera le ganaría a la tarjeta apilada. */
@media (min-width: 901px) {
  .ot-fila.lec-fila, .of-titulos.lec-titulos {
    grid-template-columns: 7.5rem 10rem 8rem 10rem minmax(9rem, 1fr) 7rem;
  }
}
/* Aceptar o rechazar cada fila de una carga masiva. */
.imp-eleccion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-2); }
.imp-eleccion span { flex: 1 1 16rem; }
.imp-acepta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--ink); min-height: 32px; cursor: pointer; }
.imp-acepta input { width: 18px; height: 18px; }
.imp-linea.imp-rechazada { opacity: 0.45; }
.imp-linea.imp-rechazada .imp-acepta { opacity: 1; }

/* =================================================================
   BODEGA — lo que el bodeguero tiene que ver antes de preparar
   Prefijo: bod-
   ================================================================= */

/* Píldora para solicitud aprobada sin firma: naranja de aviso */
.pill.bod-sin-firma {
  background: var(--warn-soft);
  color: var(--warn);
}

/* Campo de cantidad en entrega: en escritorio ancho fijo, en celular ocupa todo */
.bod-cantidad {
  width: 7rem;
  text-align: right;
  font-family: var(--f-mono);
}

@media (max-width: 999px) {
  .bod-cantidad {
    width: 100%;
  }
}

/* La casilla que confirma dar de baja un equipo: grande, para el dedo. */
.bj-seguro { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.9rem;
  font-size: 0.9rem; line-height: 1.35; cursor: pointer; }
.bj-seguro input { width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* =================================================================
   DOCUMENTOS SII — facturación electrónica propia
   Prefijo: dte-
   ================================================================= */
/* Seis columnas: documento, cliente (la que estira), fecha, total, estado y
   acciones. Dentro de la media query, igual que las otras listas, para que en
   el teléfono gane la tarjeta apilada. */
@media (min-width: 901px) {
  .ot-fila.dte-fila, .of-titulos.dte-titulos {
    grid-template-columns: 11rem minmax(12rem, 1fr) 8rem 9rem 9rem 11rem;
  }
}
.dte-aviso ul { margin: 0.35rem 0 0 1.1rem; }
.dte-aviso .en-linea { display: inline-block; margin-left: 0.6rem; }

/* La vista previa con forma de factura. */
/* min-width 0: sin esto la tabla del detalle (640 px) estiraba toda la hoja
   y en el telefono la pagina entera salia achicada a la mitad. */
.dte-hoja {
  min-width: 0; max-width: 100%;
  background: var(--surface, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.4rem; margin-top: 1rem;
  font-size: 0.9rem; max-width: 980px;
}
.dte-cabeza { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.dte-emisor { display: grid; gap: 0.15rem; }
.dte-emisor b { font-size: 1.05rem; }
/* El recuadro rojo de la derecha: el SII lo exige en todo documento. */
.dte-recuadro {
  border: 3px solid #c8102e; color: #c8102e; padding: 0.7rem 1rem;
  display: grid; gap: 0.25rem; text-align: center; min-width: 15rem; font-weight: 700;
}
.dte-recuadro b { font-size: 0.95rem; letter-spacing: 0.02em; }
.dte-recuadro small { font-weight: 600; }
.dte-receptor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.35rem 1.2rem; margin: 1.2rem 0; padding: 0.8rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dte-receptor div { display: flex; gap: 0.4rem; }
.dte-receptor dt { color: var(--ink-2); min-width: 5.5rem; }
.dte-receptor dd { margin: 0; font-weight: 600; }
.dte-hoja .table-wrap { overflow-x: auto; max-width: 100%; }
.dte-detalle { min-width: 640px; width: 100%; border-collapse: collapse; }
.dte-detalle th { text-align: left; font-size: 0.78rem; color: var(--ink-2);
  border-bottom: 2px solid var(--line); padding: 0.4rem; }
.dte-detalle td { border-bottom: 1px solid var(--line); padding: 0.45rem 0.4rem; vertical-align: top; }
.dte-detalle .r { text-align: right; }
.dte-pie { display: flex; gap: 1.5rem; justify-content: space-between; margin-top: 1rem; flex-wrap: wrap; }
.dte-refs ul { margin: 0.3rem 0 0.8rem 1rem; }
.dte-timbre {
  border: 1px dashed var(--line); border-radius: 8px; padding: 1rem;
  color: var(--ink-2); text-align: center; width: 15rem;
}
.dte-totales { margin: 0; min-width: 15rem; display: grid; gap: 0.25rem; }
.dte-totales div { display: flex; justify-content: space-between; gap: 1rem; }
.dte-totales dt { color: var(--ink-2); }
.dte-totales dd { margin: 0; font-family: var(--f-mono); }
.dte-total { border-top: 2px solid var(--ink, #111); padding-top: 0.35rem; font-weight: 700; font-size: 1.05rem; }
.dte-total dt { color: inherit; }

/* Una línea del formulario: el ítem estira, lo demás es angosto. */
.dte-linea-campos {
  display: grid; gap: 0.6rem;
  grid-template-columns: minmax(12rem, 1fr) 6rem 5rem 8rem 6rem;
}
@media (max-width: 700px) {
  .dte-cabeza { flex-direction: column-reverse; }
  .dte-recuadro { min-width: 0; width: 100%; }
  .dte-linea-campos { grid-template-columns: 1fr 1fr; }
  .dte-linea-campos .dte-nombre { grid-column: 1 / -1; }
}

/* Usuarios: editar y eliminar como dos botones del mismo porte. Eliminar va
   en rojo desde el principio, no solo al pasar el cursor: tiene que verse
   que es la accion que no se deshace. */
.usr-acciones { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.usr-acciones form { margin: 0; display: flex; }
.usr-acciones .btn { min-width: 5.5rem; justify-content: center; }
.btn.usr-eliminar { color: var(--crit); border-color: var(--crit); }
.btn.usr-eliminar:hover,
.btn.usr-eliminar:focus-visible { background: var(--crit); border-color: var(--crit); color: #fff; }
@media (max-width: 999px) {
  .usr-acciones { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .usr-acciones .btn { width: 100%; }
}

/* =================================================================
   DOCUMENTO SII EDITABLE — la hoja con forma de factura del formulario
   Prefijo: dh-  (dte- es la vista previa; aca se reusan sus piezas)
   ================================================================= */
.dh-hoja { max-width: 1040px; }
.dh-hoja h3 { font-size: 0.95rem; color: var(--ink-2); margin: 1.1rem 0 0.5rem; }
.dh-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* El tipo de documento se elige dentro del recuadro rojo, donde va impreso. */
.dh-recuadro select {
  border: 1px solid #c8102e; color: #c8102e; font-weight: 700; text-align: center;
  background: transparent; min-height: 40px; border-radius: 6px; padding: 0 0.4rem;
  font-size: 0.95rem; width: 100%;
}
.dh-receptor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem 1.1rem; margin: 1.1rem 0 0; padding: 0.9rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dh-guia .dh-receptor { margin-top: 0; border-top: 0; }
.dh-campo { display: grid; gap: 0.2rem; min-width: 0; }
.dh-campo label { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; }
.dh-campo input, .dh-campo select, .dh-campo textarea { width: 100%; min-height: 40px; }
.dh-ancho { grid-column: 1 / -1; }
.dh-envoltura { display: contents; }
.dh-envoltura[hidden] { display: none; }
.dh-con-boton { display: flex; gap: 0.4rem; }
.dh-con-boton input { flex: 1 1 auto; min-width: 0; }
.dh-con-boton .btn { flex: none; min-height: 40px; }
.dh-nota { font-size: 0.8rem; color: var(--ink-2); min-height: 1em; }
.dh-pista { margin: 0; font-size: 0.82rem; color: var(--ink-3); }
.dh-detalle .dte-linea { margin-bottom: 0.6rem; }
.dh-refs { flex: 1 1 22rem; min-width: 0; }
.dh-hoja .dte-totales { align-self: flex-end; }
.dh-observacion { max-width: 1040px; margin-top: 1rem; }