/* Concepto: marco fijo de taller (barra lateral + barra superior), cada sección con su propio scroll. Acento ámbar de overol sobre gris acero. */
:root {
  --fondo: #f3f4f6;
  --superficie: #ffffff;
  --elevada: #f8f9fb;
  --borde: #dfe2e8;
  --texto: #1c2129;
  --suave: #5b6472;
  --tenue: #8a93a1;
  --acento: #b8610f;
  --acento-fuerte: #9a500a;
  --sobre-acento: #ffffff;
  --acento-tinte: #fbeee0;
  --lateral: #15181d;
  --lateral-texto: #c9ced6;
  --lateral-activo: #262b33;
  --ok: #1f7a4d; --ok-tinte: #e2f3ea;
  --aviso: #8a5a00; --aviso-tinte: #fbf0d6;
  --peligro: #b3261e; --peligro-tinte: #fbe5e3;
  --info: #285ea8; --info-tinte: #e3ecf8;
  --gris-tinte: #eceef2;
  --sombra: 0 10px 40px rgba(15, 20, 30, .18);
  --f-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #14171c; --superficie: #1b1f26; --elevada: #222731; --borde: #2f3540; --texto: #e7eaef; --suave: #a3abb8; --tenue: #7c8594;
    --acento: #f0a04b; --acento-fuerte: #ffb565; --sobre-acento: #1b1206; --acento-tinte: #3a2a17;
    --lateral: #0f1115; --lateral-texto: #b9c0cb; --lateral-activo: #222731;
    --ok: #5fcf95; --ok-tinte: #183327; --aviso: #f2c260; --aviso-tinte: #3a2f14; --peligro: #ff8a80; --peligro-tinte: #3d1d1b;
    --info: #8fb8f2; --info-tinte: #1b2a40; --gris-tinte: #2a303a; --sombra: 0 10px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #14171c; --superficie: #1b1f26; --elevada: #222731; --borde: #2f3540; --texto: #e7eaef; --suave: #a3abb8; --tenue: #7c8594;
  --acento: #f0a04b; --acento-fuerte: #ffb565; --sobre-acento: #1b1206; --acento-tinte: #3a2a17;
  --lateral: #0f1115; --lateral-texto: #b9c0cb; --lateral-activo: #222731;
  --ok: #5fcf95; --ok-tinte: #183327; --aviso: #f2c260; --aviso-tinte: #3a2f14; --peligro: #ff8a80; --peligro-tinte: #3d1d1b;
  --info: #8fb8f2; --info-tinte: #1b2a40; --gris-tinte: #2a303a; --sombra: 0 10px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 var(--f-texto); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.dato { font-family: var(--f-dato); font-size: 12.5px; }
.suave { color: var(--suave); }
.tenue { color: var(--tenue); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Marco */
#app { height: 100%; display: grid; grid-template-columns: 236px 1fr; }
.lateral { background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column; min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.marca-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; }
.marca b { font-family: var(--f-titulo); color: #fff; font-size: 15px; display: block; }
.marca small { font-size: 11.5px; color: #8a93a1; }
.nav { flex: 1; overflow: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-grupo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6f7886; padding: 14px 10px 6px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.nav button:hover { background: var(--lateral-activo); }
.nav button[aria-current="page"] { background: var(--lateral-activo); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.nav .cuenta { margin-left: auto; font-size: 11.5px; background: #2b313b; color: #dfe3e9; border-radius: 99px; padding: 0 7px; }
.lateral-pie { padding: 12px; border-top: 1px solid #232831; display: flex; flex-direction: column; gap: 6px; }
.lateral-pie button { display: flex; align-items: center; gap: 8px; border: 1px solid #2c323c; background: transparent; color: inherit; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.lateral-pie button:hover { background: var(--lateral-activo); }
.lateral-pie .destacado { border-color: var(--acento); color: #fff; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.superior { height: 58px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.superior h1 { font-size: 18px; }
.superior .sub { color: var(--suave); font-size: 13px; }
.superior .der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.quien { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--elevada); border: 1px solid var(--borde); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--acento-tinte); color: var(--acento-fuerte); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.quien b { font-size: 13px; display: block; line-height: 1.1; }
.quien small { font-size: 11.5px; color: var(--suave); }
.vista { flex: 1; min-height: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }

/* Controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--elevada); }
.btn.prim { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn.prim:hover { background: var(--acento-fuerte); }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.chico { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.ico { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--suave); cursor: pointer; }
.ico:hover { background: var(--elevada); border-color: var(--borde); color: var(--texto); }
.ico:disabled { opacity: .3; cursor: not-allowed; }
.acciones { display: flex; gap: 2px; justify-content: flex-end; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: 12.5px; font-weight: 500; color: var(--suave); }
.campo label .ob { color: var(--peligro); }
.entrada, select.entrada, textarea.entrada { width: 100%; border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 8px 10px; min-height: 38px; }
textarea.entrada { resize: vertical; min-height: 70px; }
.entrada:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.entrada[aria-invalid="true"] { border-color: var(--peligro); }
.error-campo { color: var(--peligro); font-size: 12px; }
.ayuda { color: var(--tenue); font-size: 12px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra .espacio { flex: 1; }
.buscar { position: relative; min-width: 220px; flex: 0 1 300px; }
.buscar svg { position: absolute; left: 10px; top: 10px; color: var(--tenue); width: 16px; height: 16px; }
.buscar input { padding-left: 32px; }
.filtro, select.entrada.filtro { min-width: 150px; flex: 0 0 auto; width: auto; }

/* Pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); flex: none; overflow-x: auto; }
.pestanas button { border: 0; background: transparent; padding: 9px 12px; cursor: pointer; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.pestanas .cuenta { font-size: 11.5px; background: var(--gris-tinte); border-radius: 99px; padding: 0 7px; }

/* Tablas con scroll interno */
.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.caja.llena { flex: 1; }
.caja-tit { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); flex: none; }
.caja-tit h2 { font-size: 14.5px; }
.caja-tit .der { margin-left: auto; }
.tabla-scroll { overflow: auto; flex: 1; min-height: 0; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla th { position: sticky; top: 0; background: var(--elevada); z-index: 1; text-align: left; font-weight: 600; font-size: 12px; color: var(--suave); padding: 9px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 8px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--elevada) 70%, transparent); }
.tabla .der { text-align: right; }
.tabla td.num, .tabla td.dato, .tabla td .placa { white-space: nowrap; }
.tabla.rep td { white-space: nowrap; }
.tabla td.acc { width: 1%; white-space: nowrap; padding: 4px 8px; }
.tabla .inactivo td:not(.acc) { color: var(--tenue); }
.pie-tabla { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--borde); font-size: 12.5px; color: var(--suave); flex: none; }
.pie-tabla .der { margin-left: auto; }

/* Etiquetas de estado */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 1px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--gris-tinte); color: var(--suave); }
.chip.ok { background: var(--ok-tinte); color: var(--ok); }
.chip.aviso { background: var(--aviso-tinte); color: var(--aviso); }
.chip.peligro { background: var(--peligro-tinte); color: var(--peligro); }
.chip.info { background: var(--info-tinte); color: var(--info); }
.chip.acento { background: var(--acento-tinte); color: var(--acento-fuerte); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.propuesta { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--info); border: 1px dashed var(--info); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.placa { font-family: var(--f-dato); font-size: 12px; font-weight: 600; letter-spacing: .06em; border: 1.5px solid var(--texto); border-radius: 4px; padding: 0 6px; white-space: nowrap; background: var(--superficie); }

/* Inicio */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: none; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; }
.kpi:hover { border-color: var(--acento); }
.kpi .fila { display: flex; justify-content: space-between; color: var(--suave); font-size: 12.5px; }
.kpi .fila svg { color: var(--tenue); }
.kpi.alerta .fila svg { color: var(--acento); }
.kpi strong { font-family: var(--f-titulo); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--tenue); font-size: 12px; }
.dos { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }

/* Tablero por estatus */
.tablero { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 10px; overflow-x: auto; }
.columna { background: var(--elevada); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 0; }
.columna-tit { padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--borde); }
.columna-tit .cuenta { margin-left: auto; font-size: 12px; color: var(--suave); }
.columna-lista { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta .linea { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tarjeta .titulo { font-weight: 600; font-size: 13.5px; }
.tarjeta .meta { font-size: 12px; color: var(--suave); }
.tarjeta.alta { box-shadow: inset 3px 0 0 var(--peligro); }
.vacio { text-align: center; color: var(--tenue); padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.vacio svg { width: 26px; height: 26px; }

/* Ventanas */
.velo { position: fixed; inset: 0; background: rgba(10, 13, 18, .55); display: grid; place-items: center; z-index: 50; padding: 20px; }
.ventana { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); width: min(980px, 100%); max-height: min(92vh, 860px); display: flex; flex-direction: column; min-height: 0; }
.ventana.chica { width: min(460px, 100%); }
.ventana.media { width: min(720px, 100%); }
.ventana-tit { padding: 16px 18px 12px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--borde); flex: none; }
.ventana-tit h2 { font-size: 18px; }
.ventana-tit p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.ventana-tit .cerrar { margin-left: auto; }
.ventana .pestanas { padding: 0 14px; }
.ventana-cuerpo { padding: 16px 18px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.ventana-pie { padding: 12px 18px; border-top: 1px solid var(--borde); display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex: none; flex-wrap: wrap; }
.ventana-pie .izq { margin-right: auto; color: var(--suave); font-size: 13px; }
.seccion-tit { font-family: var(--f-titulo); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pasos { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--borde); overflow-x: auto; flex: none; }
.paso { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tenue); border: 0; background: transparent; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 99px; white-space: nowrap; }
.paso .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-tinte); font-size: 12px; font-weight: 600; }
.paso[aria-current="step"] { color: var(--texto); background: var(--acento-tinte); }
.paso[aria-current="step"] .n { background: var(--acento); color: var(--sobre-acento); }
.paso.hecho .n { background: var(--ok-tinte); color: var(--ok); }

/* Inspección */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; user-select: none; }
.check:hover { background: var(--elevada); }
.check input { width: 17px; height: 17px; accent-color: var(--acento); }
.check.falta { color: var(--peligro); background: var(--peligro-tinte); }
.interruptor { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--acento); }
.datos-par { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
.datos-par div > span { display: block; font-size: 12px; color: var(--suave); }
.datos-par div b { font-weight: 500; }
.totales { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 4px 24px; font-variant-numeric: tabular-nums; }
.totales b { text-align: right; }
.totales .gran { font-family: var(--f-titulo); font-size: 18px; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); }
.subir { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--borde); border-radius: 8px; padding: 10px 12px; color: var(--suave); cursor: pointer; }
.subir input { display: none; }

/* Hoja imprimible */
.hoja { background: #fff; color: #111; border: 1px solid #ddd; border-radius: 6px; padding: 28px 30px; font-size: 12.5px; }
.hoja h3 { font-size: 18px; color: #111; }
.hoja table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hoja th, .hoja td { border: 1px solid #cfd3d9; padding: 5px 7px; text-align: left; }
.hoja th { background: #f1f2f4; }
.hoja .cab { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; }
.hoja .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 8px 0; }
.hoja .chk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; font-size: 11.5px; }
.hoja .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; text-align: center; }
.hoja .firmas div { border-top: 1px solid #111; padding-top: 4px; }

/* Avisos */
.avisos { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.aviso-t { background: var(--texto); color: var(--superficie); padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }

/* Panel de comentarios (Créala) */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: var(--sombra); z-index: 60; display: flex; flex-direction: column; }
.panel-tit { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; }
.panel-tit h2 { font-size: 16px; }
.panel-tit .cerrar { margin-left: auto; }
.panel-contexto { padding: 10px 16px; background: var(--elevada); border-bottom: 1px solid var(--borde); font-size: 12.5px; color: var(--suave); }
.panel iframe { flex: 1; border: 0; width: 100%; background: var(--fondo); }
.panel-vacio { flex: 1; padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }

/* Teléfono del cliente (aprobación por liga) */
.telefono { width: 300px; max-width: 100%; margin: 0 auto; border: 10px solid #111; border-radius: 34px; background: #f4f5f7; color: #111; overflow: hidden; }
.telefono .pantalla { padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; min-height: 460px; }
.telefono .burbuja { background: #fff; border-radius: 12px; padding: 12px; border: 1px solid #e3e5e8; }

/* Entrar */
.entrar { height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrar-arte { background: var(--lateral); color: #e7eaef; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.entrar-arte h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; max-width: 12ch; color: #fff; }
.entrar-arte p { color: #a9b1bd; max-width: 46ch; }
.entrar-forma { display: grid; place-items: center; padding: 32px; overflow: auto; }
.entrar-forma form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.cuentas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cuentas button { text-align: left; border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.cuentas button:hover { border-color: var(--acento); }
.cuentas b { display: block; font-size: 13px; }
.cuentas small { color: var(--suave); font-size: 12px; }
.nav-movil { display: none; }

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lateral { display: none; }
  .superior { padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
  .superior .sub, .quien small, .quien b { display: none; }
  .vista { padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos { grid-template-columns: 1fr; overflow: auto; }
  .nav-movil { display: flex; overflow-x: auto; background: var(--lateral); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .nav-movil button { flex: 0 0 auto; border: 0; background: transparent; color: var(--lateral-texto); display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 2px; padding: 4px 10px; border-radius: 8px; }
  .nav-movil button[aria-current="page"] { color: #fff; background: var(--lateral-activo); }
  .entrar { grid-template-columns: 1fr; }
  .entrar-arte { display: none; }
  .buscar { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ventana, .panel { animation: entra .16s ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(6px); } }
}
@media print {
  body { overflow: visible; background: #fff; }
  body > *:not(.solo-imprimir) { display: none !important; }
  .solo-imprimir { display: block !important; }
  .solo-imprimir .hoja { border: 0; }
}
.solo-imprimir { display: none; }