/* =====================================================================
   Control de Taller · TracksIndustry · v2
   Sistema visual de www.tracksindustry.com: grafito + azul del servicio "Control de taller",
   Archivo (títulos), IBM Plex Sans (texto), IBM Plex Mono (etiquetas y datos).
   Layout: menú lateral grafito fijo, contenido sobre papel; en celular el menú se despliega.
   ===================================================================== */
:root {
  --ink: #1b1c1e; --ink-2: #222427; --ink-3: #2c2f33; --line-dk: #34383d; --ink-txt: #e8ebed; --ink-tenue: #9aa1a8;
  --bg: #f3f5f3; --sup: #ffffff; --sup-2: #f7f9f8; --texto: #1b1c1e; --tenue: #5f666d; --borde: #dde2de; --borde-2: #c9d1cc;
  --acento: #2f80ed; --acento-hi: #64a8ff; --acento-dk: #1f63c4; --acento-suave: rgba(47,128,237,.10); --acento-glow: rgba(47,128,237,.28);
  --marca: #00a83c; --marca-dk: #009235; --wa: #1f9d55;
  --ok-bg: #e3f6ea; --ok-tx: #0b6b2b; --aviso-bg: #fff3d6; --aviso-tx: #7a5200; --error-bg: #fbe5e2; --error-tx: #9a2b22;
  --info-bg: #e5effc; --info-tx: #1c4a8a; --lila-bg: #eee8fb; --lila-tx: #5b3a9e; --turq-bg: #ddf3f1; --turq-tx: #0f6b63; --gris-bg: #eceeef; --gris-tx: #4d5358;
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 6px; --r-2: 10px; --lateral: 248px;
  --sombra: 0 1px 2px rgba(27,28,30,.05), 0 4px 14px rgba(27,28,30,.04);
  --serie-1: #2f80ed; --serie-2: #eb6834;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141517; --sup: #1e2023; --sup-2: #24272b; --texto: #e6e8ea; --tenue: #9aa1a8; --borde: #33373c; --borde-2: #43484e;
  --acento: #3d8af0; --acento-dk: #2f80ed; --acento-suave: rgba(100,168,255,.12);
  --ok-bg: rgba(47,208,107,.14); --ok-tx: #5fdc8e; --aviso-bg: rgba(255,184,60,.14); --aviso-tx: #f6c561; --error-bg: rgba(255,105,90,.14); --error-tx: #ff8f80;
  --info-bg: rgba(100,168,255,.14); --info-tx: #8fc0ff; --lila-bg: rgba(170,140,255,.15); --lila-tx: #c3aeff; --turq-bg: rgba(60,210,195,.14); --turq-tx: #6fdccf; --gris-bg: rgba(255,255,255,.07); --gris-tx: #b6bcc2;
  --serie-1: #3d8af0; --serie-2: #d95926;
  --sombra: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #141517; --sup: #1e2023; --sup-2: #24272b; --texto: #e6e8ea; --tenue: #9aa1a8; --borde: #33373c; --borde-2: #43484e;
  --acento: #3d8af0; --acento-dk: #2f80ed; --acento-suave: rgba(100,168,255,.12);
  --ok-bg: rgba(47,208,107,.14); --ok-tx: #5fdc8e; --aviso-bg: rgba(255,184,60,.14); --aviso-tx: #f6c561; --error-bg: rgba(255,105,90,.14); --error-tx: #ff8f80;
  --info-bg: rgba(100,168,255,.14); --info-tx: #8fc0ff; --lila-bg: rgba(170,140,255,.15); --lila-tx: #c3aeff; --turq-bg: rgba(60,210,195,.14); --turq-tx: #6fdccf; --gris-bg: rgba(255,255,255,.07); --gris-tx: #b6bcc2;
  --serie-1: #3d8af0; --serie-2: #d95926;
  --sombra: 0 1px 2px rgba(0,0,0,.3); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--f-body); color: var(--texto); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.1; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
h2 { font-size: 1.2rem; font-weight: 800; font-stretch: 104%; margin: 2rem 0 .9rem; display: flex; align-items: center; gap: .5rem; }
h3 { font: 600 11.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--tenue); margin: 0 0 1rem; display: flex; align-items: center; gap: 10px; }
h3::before { content: ""; width: 22px; height: 3px; background: var(--acento); flex: none; }
p { margin: 0 0 .8rem; }
small { font-size: .82em; }
code { font-family: var(--f-mono); font-size: .88em; }
.tenue { color: var(--tenue); }
.centro { text-align: center; }
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.mayus { text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Estructura: menú lateral + contenido ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--ink); color: var(--ink-txt); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--line-dk); z-index: 40; }
.marca { display: flex; align-items: center; justify-content: center; padding: 18px 16px; color: #fff; text-decoration: none; border-bottom: 1px solid var(--line-dk); transition: background .15s; }
.marca:hover { text-decoration: none; background: var(--ink-2); }
.marca-logo { width: 100%; max-width: 216px; height: auto; display: block; }
/* Logo del taller: se guarda como JPG con fondo blanco, así que va sobre una placa blanca */
.marca-logo-taller { display: flex; align-items: center; justify-content: center; width: 100%; height: 92px; padding: 8px 12px; background: #fff; border-radius: var(--r-2); }
.marca-logo-taller img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.nav { flex: 1; overflow-y: auto; padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.nav-sec { font: 600 10px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #6c737a; padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r); color: #c4c9ce; font-weight: 500; font-size: 14.5px; position: relative; }
.nav a:hover { background: var(--ink-3); color: #fff; text-decoration: none; }
.nav a.activo { background: var(--ink-3); color: #fff; }
.nav a.activo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento-hi); }
.nav svg, .ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a.activo svg { color: var(--acento-hi); }
.nav .cuenta { margin-left: auto; font: 600 11px/1 var(--f-mono); background: var(--acento); color: #fff; border-radius: 999px; padding: 3px 7px; }
.lateral-pie { border-top: 1px solid var(--line-dk); padding: 14px 16px 16px; display: grid; gap: 10px; }
.yo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line-dk); display: grid; place-items: center; font: 700 13px/1 var(--f-display); color: var(--acento-hi); flex: none; }
.yo-txt { min-width: 0; line-height: 1.25; }
.yo-txt b { display: block; font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-txt small { color: var(--ink-tenue); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-acciones { display: flex; gap: 6px; }
.btn-lat { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: var(--r); border: 1px solid var(--line-dk); background: transparent; color: #c4c9ce; font: 500 12.5px/1 var(--f-body); cursor: pointer; }
.btn-lat:hover { border-color: var(--acento-hi); color: #fff; background: var(--ink-2); text-decoration: none; }
.btn-lat svg { width: 15px; height: 15px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--borde); }
.cabecera-in { display: flex; align-items: center; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); max-width: 1320px; }
.btn-menu { display: none; }
.buscador { flex: 1; max-width: 460px; position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tenue); width: 17px; height: 17px; }
.cabecera .buscador input[type=search] { margin: 0; padding-left: 38px; background: var(--sup); }
.cabecera .acciones { margin-left: auto; }
.contenido { width: 100%; max-width: 1320px; padding-block: 1.6rem 3rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); flex: 1; }
@media (min-width: 900px) { .contenido, .cabecera-in { padding-left: 32px; padding-right: 32px; } }
.angosto { max-width: 780px; }
.angosto > h1 { margin-bottom: 1.2rem; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.encabezado .eyebrow { display: block; margin-bottom: 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--acento); }
.miga { margin: 0 0 .7rem; font-size: .88rem; }
.miga a { color: var(--tenue); }
.contador { font: 600 12px/1 var(--f-mono); background: var(--acento-suave); color: var(--acento); border-radius: 999px; padding: 4px 9px; letter-spacing: 0; }
.pie { color: var(--tenue); font-size: .8rem; padding: 1.2rem 32px 1.6rem; border-top: 1px solid var(--borde); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.pie a { color: var(--tenue); }

/* ---------- Superficies ---------- */
.tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); padding: 1.3rem 1.4rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.tarjeta.destacada { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.columnas > .tarjeta { margin-bottom: 0; }
.columnas > .tarjeta.ancha { grid-column: 1 / -1; }
.vacio { background: var(--sup); border: 1.5px dashed var(--borde-2); border-radius: var(--r-2); padding: 2.2rem 1rem; text-align: center; color: var(--tenue); }
.vacio p { margin: 0 0 .8rem; } .vacio p:last-child { margin: 0; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--acento); color: #fff; border: 1.5px solid var(--acento);
  border-radius: var(--r); padding: 10px 16px; font: 600 14px/1.2 var(--f-body); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--acento-dk); border-color: var(--acento-dk); color: #fff; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-borde { background: var(--sup); color: var(--texto); border-color: var(--borde-2); }
.btn-borde:hover { background: var(--sup-2); color: var(--texto); border-color: var(--acento); }
.btn-peligro { background: var(--sup); color: var(--error-tx); border-color: var(--borde-2); }
.btn-peligro:hover { background: var(--error-bg); color: var(--error-tx); border-color: var(--error-tx); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover { background: #17824a; border-color: #17824a; }
.btn-marca { background: var(--marca); border-color: var(--marca); }
.btn-marca:hover { background: var(--marca-dk); border-color: var(--marca-dk); }
.btn-chico { padding: 6px 11px; font-size: 13px; }
.btn-ancho { width: 100%; }
.btn-x { background: none; border: 0; color: var(--tenue); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--r); }
.btn-x:hover { color: var(--error-tx); background: var(--error-bg); }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones form { margin: 0; }
.en-linea { display: inline-flex; gap: .35rem; margin: 0; align-items: center; }
.enlace-chico { font-size: .8rem; font-weight: 600; margin-left: .4rem; }
.menu-mas { position: relative; display: inline-flex; }
.menu-mas > summary { list-style: none; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas[open] > summary { border-color: var(--acento); }
.menu-mas-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 260px; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; display: grid; }
.menu-mas-lista a, .menu-mas-lista button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); color: var(--texto); font: 500 14px/1.3 var(--f-body); background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.menu-mas-lista a:hover, .menu-mas-lista button:hover { background: var(--sup-2); text-decoration: none; }
.menu-mas-lista .peligro { color: var(--error-tx); }
.menu-mas-lista hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }
.menu-mas-lista form { margin: 0; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 500; font-size: 13.5px; margin-bottom: .95rem; color: var(--texto); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; width: 100%; margin-top: 6px; font: 15px/1.4 var(--f-body); color: var(--texto); background: var(--sup);
  border: 1px solid var(--borde-2); border-radius: var(--r); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-glow); }
input[type=file] { padding: 8px; background: var(--sup-2); }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: .8; }
textarea { resize: vertical; }
.grilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grilla3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
.grilla4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
label.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
label.check input { margin-top: .25rem; accent-color: var(--acento); }
.segmentado { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.segmentado label { display: flex; align-items: center; gap: .45rem; margin: 0; border: 1px solid var(--borde-2); border-radius: var(--r); padding: 8px 12px; cursor: pointer; font-weight: 500; background: var(--sup); font-size: 14px; }
.segmentado label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.segmentado input { accent-color: var(--acento); margin: 0; }
.segmentado.chico label { padding: 6px 10px; font-size: 13px; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.filtros input, .filtros select { width: auto; flex: 1 1 190px; margin: 0; max-width: 340px; }
.filtros label.check { margin: 0; }
.fila-input { display: flex; gap: .5rem; margin-bottom: .8rem; }
.fila-input input { margin: 0; }
fieldset { border: 1px solid var(--borde); border-radius: var(--r-2); padding: .9rem 1.1rem .1rem; margin: 0 0 1rem; }
legend { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); padding: 0 .4rem; }
details summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
details.tarjeta summary { margin: 0; }
details.tarjeta[open] summary { margin-bottom: .8rem; }
.bloque-token { border: 1px solid var(--borde); border-radius: var(--r-2); padding: .8rem 1rem .2rem; margin: 0 0 1rem; }
.token-oculto { font-family: var(--f-mono); letter-spacing: .1em; }

/* ---------- Mensajes ---------- */
.flash { border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .93rem; border: 1px solid transparent; }
.flash-ok { background: var(--ok-bg); color: var(--ok-tx); }
.flash-error { background: var(--error-bg); color: var(--error-tx); }
.flash-aviso { background: var(--aviso-bg); color: var(--aviso-tx); }
.flash-info { background: var(--info-bg); color: var(--info-tx); }
.invitacion { border-left: 4px solid var(--acento); }
.copiar { display: flex; gap: .4rem; flex-wrap: wrap; }
.copiar input { flex: 1 1 260px; margin: 0; font-size: .85rem; background: var(--sup-2); }
.clave-temp input { font-family: var(--f-mono); font-size: 1.15rem; letter-spacing: .08em; font-weight: 600; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-scroll > .tabla { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tarjeta .tabla-scroll > .tabla { border: 0; border-radius: 0; background: transparent; }
.tabla th { text-align: left; font: 600 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); padding: 11px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; background: var(--sup-2); }
.tarjeta .tabla th { background: transparent; }
.tabla th a { color: inherit; }
.tabla td { padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th.der, .tabla td.der { text-align: right; }
.tabla td.num, .tabla .num { font-variant-numeric: tabular-nums; }
.tabla-ordenes tbody tr { cursor: pointer; }
.tabla-ordenes tbody tr:hover td { background: var(--sup-2); }
.recorte { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.num-orden { font: 600 13px/1 var(--f-mono); color: var(--texto); }

/* ---------- Estados ---------- */
.estado { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-presupuesto, .estado-proximo, .estado-pendiente { background: var(--aviso-bg); color: var(--aviso-tx); }
.estado-aprobado, .estado-programado, .estado-confirmado { background: var(--info-bg); color: var(--info-tx); }
.estado-en_proceso { background: var(--lila-bg); color: var(--lila-tx); }
.estado-esperando { background: var(--aviso-bg); color: var(--aviso-tx); }
.estado-terminado { background: var(--turq-bg); color: var(--turq-tx); }
.estado-entregado, .estado-hecho, .estado-cumplido { background: var(--ok-bg); color: var(--ok-tx); }
.estado-rechazado, .estado-vencido, .estado-cancelado { background: var(--error-bg); color: var(--error-tx); }
h1 .estado { font-size: 11px; }
select.estado-select { width: auto; margin: 0; padding: 5px 26px 5px 9px; font: 600 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; border: 0; cursor: pointer; }
.barra-estados { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); padding: .7rem 1rem; margin-bottom: 1rem; }
.barra-estados > span { font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); margin-right: .3rem; }
.btn-estado { color: var(--texto); background: var(--sup); border-color: var(--borde-2); }
.btn-estado:hover { color: var(--texto); background: var(--sup-2); border-color: var(--acento); }
.pasos { display: flex; gap: 0; margin: 0 0 1.2rem; overflow-x: auto; }
.paso { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; font: 600 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); padding: 0 14px 0 0; white-space: nowrap; }
.paso::after { content: ""; flex: 1; min-width: 14px; height: 2px; background: var(--borde); }
.paso:last-child::after { display: none; }
.paso i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borde-2); display: grid; place-items: center; font-style: normal; font-size: 10px; background: var(--sup); }
.paso.hecho { color: var(--texto); } .paso.hecho i { background: var(--acento); border-color: var(--acento); color: #fff; } .paso.hecho::after { background: var(--acento); }
.paso.actual { color: var(--acento); } .paso.actual i { border-color: var(--acento); color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

/* ---------- Patente argentina ---------- */
.patente { display: inline-block; font: 700 .9rem/1.25 var(--f-mono); letter-spacing: .1em; background: #fff; color: #111; border: 2px solid #111; border-top: 6px solid #1d4f9a; border-radius: 5px; padding: 0 .45rem; }
.patente-chica { font-size: .72rem; border-width: 1.5px; border-top-width: 4px; padding: 0 .35rem; }
.patente-grande { font-size: 1.15rem; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.kpi { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); padding: 1rem 1.1rem; color: var(--texto); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
a.kpi:hover { border-color: var(--acento); text-decoration: none; }
.kpi span { font: 600 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--tenue); }
.kpi b { font: 800 1.65rem/1.15 var(--f-display); font-stretch: 104%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi.kpi-dinero { grid-column: span 2; }
.kpi.kpi-dinero b { font-size: 1.5rem; }
.kpi small { color: var(--tenue); }
.kpi.alerta { border-color: var(--error-tx); } .kpi.alerta b { color: var(--error-tx); }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); opacity: 0; }
a.kpi:hover::after { opacity: 1; }

/* ---------- Datos y totales ---------- */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.1rem; margin: 0; font-size: .93rem; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.nota { background: var(--sup-2); border-radius: var(--r); padding: .7rem .9rem; font-size: .9rem; margin-top: 1rem; border-left: 3px solid var(--borde-2); }
.nota-interna { background: var(--aviso-bg); color: var(--aviso-tx); border-left-color: var(--aviso-tx); }
.totales { display: grid; grid-template-columns: 1fr auto; gap: .35rem 0; max-width: 360px; margin: 1.1rem 0 0 auto; font-size: .95rem; }
.totales dt { color: var(--tenue); text-align: right; }
.totales dd { margin: 0; padding-left: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.totales .total { font: 800 1.25rem/1.2 var(--f-display); color: var(--texto); border-top: 2px solid var(--texto); padding-top: .45rem; }
.total-grande { font: 800 1.6rem/1.1 var(--f-display); }
.tipo-item { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.tipo-mano_obra { background: var(--info-bg); color: var(--info-tx); }
.tipo-repuesto { background: var(--gris-bg); color: var(--gris-tx); }
.form-item { border-top: 1px solid var(--borde); margin-top: 1.1rem; padding-top: 1.1rem; }
.grilla-item { display: grid; grid-template-columns: 2.6fr 1.1fr .8fr 1.1fr .7fr .7fr auto; gap: .5rem; align-items: end; }
.grilla-item label { margin: 0; font-size: 12px; color: var(--tenue); }
.grilla-item input { margin-top: 4px; }
.form-item.es-mo .solo-repuesto { visibility: hidden; }
.id-rastreador { font-family: var(--f-mono); font-size: .88em; background: var(--sup-2); border: 1px solid var(--borde); border-radius: 5px; padding: .05rem .4rem; }
.medidor { display: flex; gap: 3px; align-items: center; }
.medidor i { width: 14px; height: 10px; border-radius: 2px; background: var(--borde); }
.medidor i.on { background: var(--acento); }

/* ---------- Vehículos y fotos ---------- */
.tarjetas-vehiculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.vehiculo { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-2); padding: 1rem; display: flex; flex-direction: column; gap: .4rem; color: var(--texto); align-items: flex-start; }
.vehiculo:hover { border-color: var(--acento); text-decoration: none; }
.vehiculo img { width: calc(100% + 2rem); margin: -1rem -1rem .3rem; height: 130px; object-fit: cover; border-radius: var(--r-2) var(--r-2) 0 0; max-width: none; }
.vehiculo small { color: var(--tenue); }
.foto-vehiculo { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r); margin-bottom: 1rem; }
.logo-taller { max-height: 90px; max-width: 240px; display: block; margin-bottom: 1rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.galeria figure { margin: 0; position: relative; }
.galeria img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--r); display: block; border: 1px solid var(--borde); }
.galeria form { position: absolute; top: 4px; right: 4px; margin: 0; }
.galeria .btn-x { background: rgba(255,255,255,.92); color: #333; border-radius: 50%; width: 26px; height: 26px; }
.subir-fotos { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.subir-fotos input { flex: 1 1 220px; margin: 0; }
.historial { list-style: none; padding: 0; margin: 0; font-size: .87rem; }
.historial li { padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.historial small { color: var(--tenue); margin-right: .3rem; font-family: var(--f-mono); }
.recordatorios { list-style: none; margin: 0 0 1rem; padding: 0; }
.recordatorios li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.recordatorios li:last-child { border-bottom: 0; }
.recordatorios li span { color: var(--tenue); }
.recordatorios li.vencido { color: var(--error-tx); }
.recordatorios li.vencido em { color: var(--error-tx); font-style: normal; font-weight: 700; }
.recordatorios form { margin-left: auto; }
.form-recordatorio { border-top: 1px solid var(--borde); padding-top: .9rem; }
.form-recordatorio input { margin: 0 0 .5rem; }
.fila-enlace { display: flex; align-items: center; gap: .8rem; padding: .7rem .4rem; border-bottom: 1px solid var(--borde); color: var(--texto); border-radius: var(--r); }
.fila-enlace:last-child { border-bottom: 0; }
.fila-enlace:hover { text-decoration: none; background: var(--sup-2); }
.fila-enlace > span:nth-child(2) { flex: 1; }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 2.5rem; gap: .7rem; align-items: center; padding: .4rem 0; font-size: .92rem; }
.ranking li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking b { text-align: right; font-variant-numeric: tabular-nums; }
.barrita { display: block; height: 8px; background: var(--sup-2); border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.barrita i { display: block; height: 100%; background: var(--acento); }
.barrita.grande { height: 12px; margin-bottom: .8rem; }
.pestanas { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde-2); background: var(--sup); color: var(--texto); font-weight: 500; font-size: 13.5px; }
.pestanas a.activo { background: var(--ink); border-color: var(--ink); color: #fff; }
.pestanas a:hover { text-decoration: none; border-color: var(--acento); }

/* ---------- Agenda ---------- */
.cal-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-cabecera h2 { margin: 0 .4rem 0 0; text-transform: capitalize; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--borde); border-radius: var(--r-2); overflow: hidden; background: var(--borde); gap: 1px; }
.cal-dia-sem { background: var(--sup-2); font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); padding: 10px 8px; text-align: center; }
.cal-dia { background: var(--sup); min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-dia.otro-mes { background: var(--sup-2); }
.cal-dia.otro-mes .cal-num { color: var(--tenue); opacity: .6; }
.cal-num { font: 600 12px/1 var(--f-mono); color: var(--texto); padding: 3px 4px; display: flex; justify-content: space-between; align-items: center; }
.cal-num a { color: var(--tenue); font-size: 15px; line-height: 1; padding: 0 3px; border-radius: 4px; }
.cal-num a:hover { background: var(--acento-suave); color: var(--acento); text-decoration: none; }
.cal-dia.hoy .cal-num span { background: var(--acento); color: #fff; border-radius: 999px; padding: 3px 7px; }
.turno { display: block; font-size: 12px; line-height: 1.3; padding: 4px 6px; border-radius: 5px; background: var(--info-bg); color: var(--info-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid currentColor; }
.turno:hover { text-decoration: none; filter: brightness(.97); }
.turno b { font-family: var(--f-mono); font-weight: 600; }
.turno.t-confirmado { background: var(--lila-bg); color: var(--lila-tx); }
.turno.t-cumplido { background: var(--ok-bg); color: var(--ok-tx); }
.turno.t-cancelado { background: var(--gris-bg); color: var(--gris-tx); text-decoration: line-through; }
.lista-turnos { display: none; }

/* ---------- Acceso (login) ---------- */
.sin-sesion { background: var(--ink); color: var(--ink-txt); display: flex; flex-direction: column; min-height: 100vh; }
.acceso { width: 100%; max-width: 980px; margin: auto; padding: 4vh max(16px, env(safe-area-inset-right, 0px)) 4vh max(16px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 5vw, 64px); align-items: center; }
.acceso-marca { display: grid; gap: 18px; }
.acceso-marca .marca-fila { display: flex; align-items: center; gap: 12px; }
.acceso-marca .marca-fila img { width: 220px; height: auto; display: block; }
.acceso-marca h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 900; font-stretch: 108%; color: #fff; line-height: 1.04; }
.acceso-marca h1 em { font-style: normal; color: var(--acento-hi); }
.acceso-marca p { color: #c9ced2; font-size: 1.05rem; max-width: 46ch; margin: 0; }
.acceso-marca .eyebrow { color: var(--acento-hi); }
.acceso-marca .eyebrow::before { background: var(--acento-hi); }
.acceso-puntos { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; color: #c9ced2; font-size: .95rem; }
.acceso-puntos li { display: flex; gap: 10px; align-items: center; }
.acceso-puntos li::before { content: ""; width: 8px; height: 8px; background: var(--acento-hi); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); flex: none; }
.acceso-caja { display: grid; gap: 1rem; }
.acceso-form { background: var(--sup); color: var(--texto); border-radius: 12px; padding: 1.7rem; border: 1px solid var(--line-dk); }
.acceso-form h2 { margin: 0 0 1rem; font-size: 1.4rem; }
.acceso-nota { text-align: center; color: var(--ink-tenue); font-size: .88rem; margin: 0; }
.acceso-nota a { color: var(--acento-hi); }
.sin-sesion .pie { border-top-color: var(--line-dk); color: var(--ink-tenue); }
.sin-sesion .pie a { color: var(--ink-tenue); }
.sin-sesion .contenido { max-width: none; padding: 0; display: flex; flex-direction: column; }
.sin-sesion .contenido > .flash { width: calc(100% - 32px); max-width: 420px; margin: 24px auto 0; }
.acceso-solo { grid-template-columns: minmax(0, 420px); justify-content: center; }
.acceso-solo .tarjeta { margin: 0; }

/* ---------- Demo pública ---------- */
.aviso-demo { background: var(--acento); color: #fff; font-size: .85rem; text-align: center; padding: .5rem 16px; }
.aviso-demo a, .aviso-demo button { color: #fff; font-weight: 700; text-decoration: underline; margin-left: .6rem; white-space: nowrap; }
.aviso-demo form { display: inline; margin: 0; }
.aviso-demo button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.aviso-como { background: var(--aviso-bg); color: var(--aviso-tx); padding: .6rem 16px; display: flex; gap: .8rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .9rem; }
.aviso-como form { margin: 0; }
.demo-roles { background: var(--ink-2); border: 1px solid var(--line-dk); border-radius: 12px; padding: 1.2rem; color: var(--ink-txt); }
.demo-roles h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.1rem; }
.demo-roles .tenue { color: var(--ink-tenue); }
.demo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .9rem 0; }
.demo-rol { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; font: inherit; cursor: pointer; background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r); padding: .7rem .8rem; color: #fff; }
.demo-rol:hover, .demo-rol:focus-visible { border-color: var(--acento-hi); background: var(--ink); outline: none; }
.demo-rol b { font-size: .92rem; }
.demo-botones-lista { grid-template-columns: 1fr; }
.demo-cambiar { display: inline; position: relative; }
.demo-cambiar > summary { display: inline; list-style: none; margin: 0 0 0 .6rem; color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.demo-cambiar > summary::-webkit-details-marker { display: none; }
.demo-pop { position: absolute; left: 50%; top: calc(100% + .6rem); transform: translateX(-50%); z-index: 100; width: 340px; text-align: left;
  background: var(--ink-2); color: var(--ink-txt); border: 1px solid var(--line-dk); border-radius: 12px; padding: .9rem; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.demo-pop p { margin: 0 0 .6rem; color: var(--ink-tenue); font-size: .85rem; }
.demo-pop .demo-botones { margin: 0; }
.demo-rol[disabled] { cursor: default; border-color: var(--acento-hi); opacity: .75; }
.aviso-demo .demo-pop .demo-rol { width: 100%; margin: 0; text-decoration: none; white-space: normal; font-weight: 400; background: var(--ink-3); border: 1px solid var(--line-dk); padding: .7rem .85rem; }
.aviso-demo .demo-pop .demo-rol:hover, .aviso-demo .demo-pop .demo-rol:focus-visible { border-color: var(--acento-hi); background: var(--ink); }
.aviso-demo .demo-pop .demo-rol[disabled] { border-color: var(--acento-hi); background: var(--ink-3); }
.demo-botones-lista .demo-rol { padding: .85rem 1rem; }
.demo-rol small { color: var(--ink-tenue); }
.demo-credenciales { font-size: .78rem; margin: 0; overflow-wrap: anywhere; }
.demo-credenciales code { background: var(--ink); padding: 0 .25rem; border-radius: 4px; color: #d5dade; }

/* ---------- Celular y tablet ---------- */
/* ---------- Inventario (v2 · Etapa 2) ---------- */
[hidden] { display: none !important; }
.nav .cuenta.cuenta-alerta { background: #e5534b; }
.stock-bajo { color: var(--error-tx); font-weight: 600; }
.stock-entra { color: var(--ok-tx); }
.stock-sale { color: var(--error-tx); }
.col-check { width: 34px; padding-right: 0 !important; }
.col-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); }
.tabla-permisos td.centro input, .tabla-permisos th input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.tabla-permisos thead th { vertical-align: bottom; min-width: 110px; }
.tabla-permisos thead th:first-child { min-width: 220px; }
.tabla-permisos .fila-grupo th { background: var(--sup-2); color: var(--tenue); font: 600 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding-top: 1rem; }
.input-rol { width: 100%; min-width: 100px; max-width: 150px; text-align: center; font-weight: 600; padding: 4px 6px; }
.permiso-excepcion { margin-left: .4rem; }
.boton-enlace { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; font-family: inherit; }
.boton-enlace:hover { text-decoration: underline; }
label .boton-enlace { display: inline-block; margin: .35rem 0 0; }
.enlace-inv { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 4px; margin-left: .35rem;
  background: var(--turq-bg); color: var(--turq-tx); white-space: nowrap; }
.enlace-inv:hover { text-decoration: none; filter: brightness(.95); }
.catalogo { position: relative; }
.catalogo-lista { position: absolute; left: 0; right: 0; top: calc(100% - .5rem); z-index: 30; background: var(--sup); border: 1px solid var(--borde-2);
  border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto; min-width: 260px; }
td.catalogo .catalogo-lista { top: 100%; }
.catalogo-op { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--borde); padding: .55rem .8rem;
  cursor: pointer; color: var(--texto); font: inherit; }
.catalogo-op:last-child { border-bottom: 0; }
.catalogo-op:hover, .catalogo-op:focus-visible { background: var(--acento-suave); outline: none; }
.catalogo-op b { display: block; font-weight: 600; }
.catalogo-op small { color: var(--tenue); }
.catalogo-op small.stock-bajo { color: var(--error-tx); }
.catalogo-elegido { margin: -.2rem 0 .8rem; padding: .45rem .7rem; border-radius: var(--r); background: var(--turq-bg); color: var(--turq-tx); font-size: .9rem; }
.catalogo-elegido .boton-enlace { margin-left: .6rem; font-size: .8rem; font-weight: 600; }
.tabla-compra td { padding: 6px 6px; vertical-align: top; }
.tabla-compra input { margin: 0; }
.tabla-compra td:first-child { min-width: 260px; }
.tabla-compra .input-codigo { width: 120px; }
.tabla-compra .input-num { width: 100px; text-align: right; }
.tabla-compra [data-campo=importe] { padding-top: 14px; }
.tabla-compra small[data-campo=info] { display: block; margin-top: 3px; color: var(--turq-tx); }
.input-iva { width: 64px !important; display: inline-block; margin: 0 !important; padding: 4px 6px !important; text-align: right; }
.tabla tfoot td { border-bottom: 0; border-top: 2px solid var(--borde-2); }
.en-linea-ancha { margin: 0; }
.en-linea-ancha input { min-width: 0; }
.form-masivo .segmentado { margin-bottom: 1rem; }
.filtros label.check { white-space: nowrap; flex: none; }
.filtros label.check input { flex: none; width: auto; margin-top: 0; }
.filtros label.check { align-items: center; }
[data-totales-compra] dt { white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
/* ---------- Métricas: gráficos de barras (HTML + CSS) y tooltip ---------- */
.ranking-dinero li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "barra barra"; gap: .15rem .8rem; padding: .45rem 0; }
.ranking-dinero li > :first-child { grid-area: nombre; }
.ranking-dinero .barrita { grid-area: barra; height: 6px; }
.ranking-dinero b { grid-area: valor; white-space: nowrap; display: grid; text-align: right; line-height: 1.25; }
.ranking-dinero b small { font-weight: 400; color: var(--tenue); font-size: .78rem; }
.ranking-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variacion { font: 600 12px/1.2 var(--f-mono); color: var(--tenue); }
.variacion.sube { color: var(--ok-tx); } .variacion.baja { color: var(--error-tx); }
.graf-leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--tenue); margin: -.3rem 0 .8rem; }
.graf-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.graf-leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.graf-caja { container-type: inline-size; }
.graf { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: .6rem; }
.graf-y { position: relative; min-width: 3.2rem; }
.graf-y span { position: absolute; right: 0; transform: translateY(50%); font: 500 11px/1 var(--f-mono); color: var(--tenue); white-space: nowrap; }
.graf-area { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--borde-2); }
.graf-guia { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--borde); pointer-events: none; }
.graf-col { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: flex-end; position: relative; outline: none; border-radius: var(--r) var(--r) 0 0; }
.graf-col:hover, .graf-col:focus-visible { background: var(--acento-suave); }
.graf-pila { width: 62%; max-width: 38px; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.graf-pila i { display: block; flex: none; min-height: 2px; }
.graf-pila i:last-child { border-radius: 4px 4px 0 0; }
.s1 { background: var(--serie-1); } .s2 { background: var(--serie-2); }
.graf-x { grid-column: 2; display: flex; }
.graf-x span { flex: 1 1 0; min-width: 0; text-align: center; font: 500 11px/1.3 var(--f-mono); color: var(--tenue); padding-top: 6px; display: grid; }
.graf-x b { font-weight: 500; }
.graf-x small { font-size: 10px; opacity: .8; }
.graf-tabla { margin-top: 1rem; }
.graf-tabla summary { cursor: pointer; color: var(--acento); font-weight: 600; font-size: .88rem; }
.graf-tabla .tabla-scroll { margin-top: .6rem; }
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: #fff; border-radius: var(--r); padding: 8px 10px; font: 500 12.5px/1.45 var(--f-body);
  white-space: pre-line; box-shadow: 0 6px 20px rgba(0,0,0,.22); max-width: 260px; font-variant-numeric: tabular-nums; }
.tip::first-line { font-weight: 700; }
.kpis-chicos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1rem; }
.kpis-chicos .kpi b { font-size: 1.3rem; }
@media print {
  .graf-pila i, .barrita i, .graf-leyenda i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .graf-tabla, .tip { display: none; }
  .columnas { grid-template-columns: 1fr 1fr; }
  .tarjeta, .kpi { break-inside: avoid; box-shadow: none; }
}
@media (max-width: 600px) {
  .graf { grid-template-rows: 170px auto; }
}
@container (max-width: 560px) {
  .graf.muchos .graf-x span:nth-child(even) b { visibility: hidden; }
  .graf.muchos .graf-pila { width: 70%; }
  .graf-y { min-width: 2.6rem; }
}
@media (max-width: 600px) { .kpi.kpi-dinero b { font-size: 1.15rem; overflow-wrap: anywhere; } }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); transform: translateX(-102%); transition: transform .22s ease; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); }
  .menu-abierto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .btn-menu { display: inline-flex; background: var(--sup); color: var(--texto); border: 1px solid var(--borde-2); border-radius: var(--r); padding: 8px; cursor: pointer; }
  .btn-menu svg { width: 20px; height: 20px; }
  .cabecera { top: 0; }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-puntos { display: none; }
}
@media (max-width: 760px) {
  .kpi.kpi-dinero { grid-column: auto; }
  .grilla2, .grilla3, .grilla4 { grid-template-columns: 1fr; }
  .grilla-item { grid-template-columns: 1fr 1fr; }
  .grilla-item .ancho-total { grid-column: 1 / -1; }
  .form-item.es-mo .solo-repuesto { display: none; }
  .tarjeta { padding: 1rem; }
  .totales { max-width: none; }
  .datos { grid-template-columns: 1fr 1.6fr; }
  .cabecera .acciones .txt { display: none; }
  .calendario { display: none; }
  .lista-turnos { display: block; }
  .demo-botones { grid-template-columns: 1fr; }
  .demo-pop { position: fixed; left: 16px; right: 16px; top: 3.2rem; transform: none; width: auto; }
  .menu-mas-lista { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Impresión / PDF ---------- */
.impresion { background: #e7eae8; display: block; color: #1b1c1e; color-scheme: light; }
.barra-impresion { max-width: 840px; margin: 1rem auto; padding: 0 16px; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.barra-impresion small { color: #5f666d; }
.hoja { background: #fff; color: #1b1c1e; max-width: 840px; margin: 0 auto 2rem; padding: 40px 44px; box-shadow: 0 2px 12px rgba(0,0,0,.08); font: 13px/1.5 var(--f-body); }
.hoja h4 { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: #5f666d; margin: 18px 0 7px; }
.hoja-cab { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #2f80ed; padding-bottom: 16px; }
.hoja-taller { display: flex; gap: 14px; align-items: flex-start; }
.hoja-taller h1 { font-size: 21px; margin-bottom: 4px; color: #1b1c1e; display: block; }
.hoja-taller p { color: #5f666d; font-size: 12px; margin: 0; }
.hoja-logo { max-height: 64px; max-width: 140px; object-fit: contain; }
.hoja-num { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.hoja-num span { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: #1f63c4; }
.hoja-num b { font: 700 18px/1.2 var(--f-mono); }
.hoja-num small { color: #5f666d; font-size: 12px; }
.hoja-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hoja-datos p { margin: 0; }
.hoja-tabla { width: 100%; border-collapse: collapse; }
.hoja-tabla th { text-align: left; font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: #5f666d; border-bottom: 1px solid #c9d1cc; padding: 6px; }
.hoja-tabla td { padding: 6px; border-bottom: 1px solid #eceeef; }
.hoja-tabla .der { text-align: right; white-space: nowrap; }
.hoja .totales dt { color: #5f666d; }
.hoja .totales .total { color: #1b1c1e; border-top-color: #1b1c1e; }
.hoja-campos { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.hoja-campos b { color: #5f666d; font-weight: 500; }
.hoja-nota { color: #5f666d; font-size: 11px; margin-top: 24px; }
.hoja-pie { border-top: 1px solid #dde2de; margin-top: 24px; padding-top: 8px; font-size: 10px; color: #8a9096; text-align: center; }
@media print {
  @page { margin: 14mm; }
  .impresion { background: #fff; }
  .no-imprimir { display: none !important; }
  .hoja { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}
@media (max-width: 600px) {
  .hoja { padding: 20px 16px; }
  .hoja-cab, .hoja-datos { display: block; }
  .hoja-num { text-align: left; margin-top: 12px; }
}

/* ---------- Plata: cobros, caja, cuentas corrientes ---------- */
.estado-pago-pagado { background: var(--ok-bg); color: var(--ok-tx); }
.estado-pago-parcial { background: var(--info-bg); color: var(--info-tx); }
.estado-pago-pendiente { background: var(--aviso-bg); color: var(--aviso-tx); }
td .estado-pago-parcial, td .estado-pago-pendiente, td .estado-pago-pagado { margin-top: 3px; display: inline-block; }
.resumen-cobro { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.resumen-cobro > div { border: 1px solid var(--borde); border-radius: var(--r); padding: .6rem .8rem; display: flex; flex-direction: column; gap: 2px; }
.resumen-cobro span { font: 600 10px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); }
.resumen-cobro b { font: 700 1.15rem/1.2 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumen-cobro .falta { border-color: var(--aviso-tx); }
.resumen-cobro .falta b { color: var(--aviso-tx); }
.form-cobro { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 1rem; }
.tarjeta > .form-cobro:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.grilla-cobro { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0 .8rem; align-items: end; }
.grilla-cobro .btn { margin-bottom: 1rem; justify-self: start; }
tr.anulado td { color: var(--tenue); }
tr.anulado td.num { text-decoration: line-through; }
.saldo-debe { color: var(--aviso-tx); font-weight: 600; }
.saldo-favor { color: var(--ok-tx); font-weight: 600; }
.lista-simple { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-simple li { display: flex; gap: .4rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.lista-simple li .der { margin-left: auto; }
.franja-cuenta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.franja-cuenta .eyebrow { display: block; margin-bottom: 2px; }
.form-venta .input-iva { width: 70px !important; }
@media (max-width: 760px) {
  .resumen-cobro { grid-template-columns: 1fr; }
}
@media print {
  .con-sesion .lateral, .con-sesion .cabecera, .aviso-demo, .aviso-como, .encabezado .acciones, .miga, .form-cobro, .form-mov-caja, .btn-x, .filtros, .segmentado { display: none !important; }
  .con-sesion .app { display: block; }
  .con-sesion .principal { margin: 0 !important; }
  .con-sesion { background: #fff; }
}

/* ---------- Listas de precios y trabajadores ---------- */
.solo-imprimir { display: none; }
.aviso-lista { background: var(--info-bg); color: var(--info-tx); border-radius: var(--r); padding: .5rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
.tabla-lista .input-precio { width: 8.5rem; text-align: right; }
.estrellas { color: #e2a400; letter-spacing: 1px; white-space: nowrap; }
.estrellas .tenue { color: var(--borde); }
.calificar { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.calificar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calificar label { font-size: 1.9rem; line-height: 1; color: var(--borde); cursor: pointer; margin: 0; }
.calificar input:checked ~ label, .calificar label:hover, .calificar label:hover ~ label { color: #e2a400; }
.calificar input:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 2px; }
.puntaje { font: 700 1.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.barra-puntaje { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; margin-top: .4rem; min-width: 80px; }
.barra-puntaje span { display: block; height: 100%; background: var(--acento); }
@media print {
  .solo-imprimir { display: block; }
  .tabla-lista { font-size: 11px; }
}

/* ---------- Sesión y términos y condiciones ---------- */
label.check small { display: block; margin-top: 2px; font-size: 12px; }
.check-terminos { font-size: 13px; }
.check-terminos a { font-weight: 600; }
.demo-roles .check-terminos { color: var(--ink-txt); margin: 0; }
.demo-roles .check-terminos a { color: var(--acento-hi); }
.aviso-inactividad { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  width: min(520px, calc(100% - 32px)); display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  background: var(--sup); color: var(--texto); border: 1px solid var(--borde-2); border-left: 4px solid var(--aviso-tx); border-radius: var(--r-2); padding: .7rem .9rem; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .92rem; }
.aviso-inactividad[hidden] { display: none; }
.aviso-inactividad .btn { flex: none; }
.legal { font-size: 13.5px; line-height: 1.6; }
.legal-cab { display: flex; align-items: center; gap: 10px; border-bottom: 3px solid #2f80ed; padding-bottom: 12px; margin-bottom: 18px; }
.legal-cab img { width: 170px; height: auto; display: block; }
.legal h1 { font-size: 22px; line-height: 1.2; color: #1b1c1e; margin: 0 0 4px; }
.legal h2 { font-size: 15px; color: #1b1c1e; margin: 20px 0 6px; break-after: avoid; }
.legal p, .legal ul { margin: 0 0 8px; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 4px; }
.legal-version { font: 500 11px/1.4 var(--f-mono); color: #5f666d; text-transform: uppercase; letter-spacing: .08em; }
.legal-aaip { border: 1px solid #c9d1cc; border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.legal-pie { margin-top: 24px; border-top: 1px solid #dde2de; padding-top: 18px; }
.legal-pie h2 { margin-top: 0; }
.legal-pie label { color: #1b1c1e; }
@media (max-width: 600px) { .legal { font-size: 14px; } .aviso-inactividad { flex-direction: column; align-items: stretch; text-align: center; } }

/* Importar clientes */
.opciones-importar { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 10px; }
.opciones-importar p { margin: 0 0 .4rem; }
.aviso-fila { color: var(--aviso-tx); }