/* Online Tuc · panel de carga */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --or:#FF4500;--or3:#FF8A3D;--mono:'Share Tech Mono',ui-monospace,monospace;
  --bg:#0a0a0b;--card:#141416;--card2:#1b1b1f;--in:#101013;
  --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);
  --tx:#fff;--mut:rgba(255,255,255,.55);--mut2:rgba(255,255,255,.36);
  --ok:#3ECF8E;--ok-bg:rgba(62,207,142,.12);
  --warn:#E0A44E;--warn-bg:rgba(224,164,78,.12);
  --bad:#F0563E;--bad-bg:rgba(240,86,62,.12);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);line-height:1.55;
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  overscroll-behavior-y:contain;
}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.oculto{display:none!important}

/* ── barra superior ── */
.top{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;
  max-width:900px;margin:0 auto}
.lg{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-.4px}
.lg b{color:var(--or)}
.top .sp{flex:1}
.icobtn{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--mut)}
.icobtn:hover{color:#fff;border-color:var(--line2)}

.wrap{max-width:900px;margin:0 auto;padding:16px 14px calc(96px + var(--safe-b))}

/* ── login ── */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px}
.login-box{width:100%;max-width:380px}
.login h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:2.3rem;line-height:1;letter-spacing:-1px}
.login h1 b{color:var(--or)}
.login p{color:var(--mut);font-size:.9rem;margin-top:8px}
.login form{margin-top:26px;display:flex;flex-direction:column;gap:12px}

/* ── formularios ── */
label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.campo{margin-bottom:16px}
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;background:var(--in);border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;font-size:1rem;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--or);outline:none}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
  linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fila-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pista{font-size:.78rem;color:var(--mut2);margin-top:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--or);color:#fff;border-radius:9px;padding:14px 20px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;font-size:.95rem;transition:filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:transparent;border:1px solid var(--line2);color:var(--mut)}
.btn.sec:hover{color:#fff;border-color:var(--or)}
.btn.peligro{background:transparent;border:1px solid rgba(240,86,62,.45);color:var(--bad)}
.btn.peligro:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.chico{padding:9px 14px;font-size:.82rem;border-radius:7px}

/* ── avisos ── */
.aviso{border-radius:9px;padding:12px 14px;font-size:.88rem;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start}
.aviso.err{background:var(--bad-bg);border:1px solid rgba(240,86,62,.35);color:#FFB4A6}
.aviso.ok{background:var(--ok-bg);border:1px solid rgba(62,207,142,.3);color:#9BE8C6}

/* ── filtros de estado ── */
.filtros{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;
  scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:1.8px;
  text-transform:uppercase;padding:8px 13px;border:1px solid var(--line);
  border-radius:20px;color:var(--mut);white-space:nowrap}
.filtro.on{background:var(--or);border-color:var(--or);color:#fff}
.filtro i{font-style:normal;opacity:.65;margin-left:5px}

/* ── lista ── */
.lista{display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:96px 1fr;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:10px;align-items:center}
.item-im{position:relative;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:var(--card2)}
.item-im img{width:100%;height:100%;object-fit:cover}
.item-im .sin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.5rem;letter-spacing:1.4px;color:var(--mut2);text-align:center;padding:4px}
.item-im .n{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.72);
  font-family:var(--mono);font-size:.5rem;padding:2px 5px;border-radius:10px}
.item-t{font-weight:600;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.item-pr{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem;
  color:var(--or);font-variant-numeric:tabular-nums}
.item-acc{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

.pastilla{font-family:var(--mono);font-size:.52rem;letter-spacing:1.6px;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;white-space:nowrap}
.pastilla.publicado{background:var(--ok-bg);color:var(--ok)}
.pastilla.borrador{background:rgba(255,255,255,.07);color:var(--mut)}
.pastilla.pausado{background:var(--warn-bg);color:var(--warn)}
.pastilla.vendido{background:var(--bad-bg);color:var(--bad)}
.pastilla.cat{background:rgba(255,255,255,.06);color:var(--mut)}
.pastilla.dest{background:var(--or);color:#fff}

.vacio{text-align:center;padding:54px 20px;color:var(--mut2)}
.vacio .big{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:1.5rem;color:var(--mut);margin-bottom:6px}

/* ── botón flotante ── */
.fab{position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:60;
  display:flex;align-items:center;gap:9px;background:var(--or);color:#fff;
  border-radius:30px;padding:15px 22px;box-shadow:0 8px 26px rgba(255,69,0,.4);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;font-size:.95rem}

/* ── editor ── */
.editor-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.editor-top h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:1.5rem;letter-spacing:-.5px;flex:1}
.bloque{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin-bottom:14px}
.bloque h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.bloque h3 span{font-family:var(--mono);font-size:.55rem;letter-spacing:1.6px;color:var(--mut2);
  border:1px solid var(--line);border-radius:20px;padding:2px 8px;text-transform:none}

.check{display:flex;align-items:flex-start;gap:11px;padding:11px 0;cursor:pointer;
  font-family:inherit;font-size:.94rem;letter-spacing:normal;text-transform:none;
  color:var(--tx);margin-bottom:0}
.check input{width:20px;height:20px;accent-color:var(--or);flex:none;margin-top:1px}
.check span{font-size:.94rem;line-height:1.4}
.check .sub{display:block;font-size:.78rem;color:var(--mut2);margin-top:1px}

/* ── fotos ── */
.dropzone{border:2px dashed var(--line2);border-radius:11px;padding:26px 18px;text-align:center;
  color:var(--mut);transition:border-color .15s,background .15s;cursor:pointer}
.dropzone:hover,.dropzone.activa{border-color:var(--or);background:rgba(255,69,0,.06)}
.dropzone .big{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;font-size:1.05rem;color:#fff}
.dropzone .chico{font-size:.8rem;color:var(--mut2);margin-top:4px}

.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;margin-top:14px}
.foto{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--card2);
  border:1px solid var(--line)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.portada{border-color:var(--or);box-shadow:0 0 0 1px var(--or)}
.foto .tag{position:absolute;left:5px;top:5px;background:var(--or);font-family:var(--mono);
  font-size:.48rem;letter-spacing:1.4px;padding:2px 6px;border-radius:10px;text-transform:uppercase}
.foto .barra{position:absolute;left:0;right:0;bottom:0;display:flex;background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px)}
.foto .barra button{flex:1;padding:7px 0;font-size:.8rem;color:#fff;line-height:1}
.foto .barra button:hover{background:rgba(255,255,255,.14)}
.foto .barra button.x:hover{background:var(--bad)}
.foto .prog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);font-family:var(--mono);font-size:.6rem;letter-spacing:1px}
.subiendo{margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:1.6px;
  color:var(--mut);display:flex;align-items:center;gap:10px}
.pb{flex:1;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.pb i{display:block;height:100%;background:var(--or);width:0;transition:width .25s}

/* ── barra de guardar ── */
.guardar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,10,11,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:12px 14px calc(12px + var(--safe-b))}
.guardar-in{max-width:900px;margin:0 auto;display:flex;gap:10px}
.guardar .btn{flex:1}

/* ── modal ── */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:22px;max-width:380px;width:100%}
.modal-box h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:1.35rem;margin-bottom:8px}
.modal-box p{color:var(--mut);font-size:.9rem;margin-bottom:18px}
.modal-box .acc{display:flex;gap:10px}
.modal-box .acc .btn{flex:1}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);
  z-index:120;background:#fff;color:#111;border-radius:24px;padding:11px 20px;font-size:.86rem;
  font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center}
.toast.err{background:var(--bad);color:#fff}

@media(min-width:700px){
  .item{grid-template-columns:124px 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════ Documentos del taller (presupuestos y comprobantes) ══════════ */

/* pestañas de sección */
.tabs{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:49;
  display:flex;gap:6px;background:rgba(10,10,11,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:8px 14px;overflow-x:auto}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);font-size:.86rem;font-weight:600}
.tab.on{background:var(--or);border-color:var(--or);color:#0a0a0b}

.sub-lbl{text-transform:none;letter-spacing:0;font-family:'Space Grotesk',sans-serif;
  font-size:.68rem;color:var(--mut2)}

/* filas de trabajos */
.ditem{display:grid;grid-template-columns:1fr 116px 34px;gap:8px;margin-bottom:8px;
  align-items:start}
.ditem input[type=text]{padding:11px 12px;font-size:.94rem}
.ditem input[type=number]{padding:11px 10px;font-size:.94rem;text-align:right}
.ditem .quitar{width:34px;height:44px;border:1px solid var(--line);border-radius:9px;
  color:var(--mut);font-size:1rem}
.ditem .quitar:hover{color:var(--bad);border-color:var(--bad)}
.ditem-conf{grid-column:1 / -1;margin:-2px 0 4px}
.ditem-conf .check{padding:0;border:0;background:none}
.ditem-conf .check span{font-size:.8rem;color:var(--mut)}

.doc-total{display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;padding:13px 15px;border:1px solid var(--line2);border-radius:10px;
  background:var(--card2)}
.doc-total span{font-family:var(--mono);font-size:.66rem;letter-spacing:2.4px;color:var(--mut)}
.doc-total b{font-size:1.25rem}
.doc-acc{gap:8px}
.doc-acc .btn{padding-left:14px;padding-right:14px}

/* tarjetas de la lista de documentos */
.doc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;margin-bottom:10px}
.doc-card .n{font-family:var(--mono);font-size:.72rem;color:var(--or3);letter-spacing:1px}
.doc-card .t{font-weight:700;margin-top:2px}
.doc-card .m{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;
  color:var(--mut);font-size:.84rem}
.doc-card .acc{display:flex;gap:8px;margin-top:11px}

/* ══════════ Hoja de impresión ══════════ */
/* Estilo de servicioautomotriztuc.com: negro + naranja #FF4500 → #ffb800,
   títulos condensados en mayúscula itálica. Cuerpo blanco para no fundir tóner. */
.hoja{display:none}

@media print{
  body > *:not(.hoja){display:none!important}
  body{background:#fff;color:#141414}
  .hoja{display:block;font-family:'Space Grotesk',Arial,sans-serif}

  @page{size:A4;margin:0}
  .hoja{padding:10mm 12mm 8mm}

  .h-cond{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:900;
    font-style:italic;text-transform:uppercase;letter-spacing:-.2mm}

  /* header: banda negra con filo degradé naranja */
  .h-top{display:flex;align-items:center;gap:5mm;background:#0d0d0f;color:#fff;
    padding:5mm 6mm;border-radius:2.5mm 2.5mm 0 0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-filo{height:1.6mm;background:linear-gradient(90deg,#FF4500,#ffb800);
    border-radius:0 0 2.5mm 2.5mm;margin-bottom:5mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-logo{width:22mm;height:22mm;object-fit:contain}
  .h-logo-ph{width:22mm;height:22mm;border:.4mm dashed rgba(255,255,255,.35);
    border-radius:2mm;display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.45);font-size:2.6mm}
  .h-emp{flex:1}
  .h-emp h1{font-size:8mm;line-height:1;color:#fff}
  .h-emp h1 b{color:#FF4500}
  .h-emp p{font-size:2.9mm;color:rgba(255,255,255,.65);margin-top:1.6mm}
  .h-doc{text-align:right}
  .h-doc .tipo{display:inline-block;background:linear-gradient(90deg,#FF4500,#ffb800);
    color:#0d0d0f;padding:1.6mm 4mm;font-size:3.6mm;border-radius:1.4mm;
    font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
    letter-spacing:.4mm;text-transform:uppercase;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-doc .num{font-size:5mm;font-weight:800;color:#fff;margin-top:1.8mm}
  .h-doc .num i{font-style:normal;color:#FF4500}
  .h-doc .fec{font-size:3mm;color:rgba(255,255,255,.65);margin-top:.8mm}

  /* cajas cliente / vehículo */
  .h-datos{display:flex;gap:5mm}
  .h-caja{flex:1;border:.35mm solid #e4e4e4;border-left:1.1mm solid #FF4500;
    border-radius:2mm;padding:3.2mm 4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-caja h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
    text-transform:uppercase;font-size:3.6mm;color:#FF4500;letter-spacing:.3mm;
    margin-bottom:1.8mm}
  .h-caja div{font-size:3.4mm;line-height:1.55}
  .h-caja b{font-weight:700}

  /* tabla de trabajos */
  .h-tabla{width:100%;border-collapse:collapse;margin-top:5mm}
  .h-tabla th{background:#0d0d0f;color:#fff;text-align:left;padding:2.6mm 3.4mm;
    font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
    text-transform:uppercase;font-size:3.5mm;letter-spacing:.4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-tabla th:first-child{border-radius:1.6mm 0 0 0}
  .h-tabla th:last-child{border-radius:0 1.6mm 0 0;text-align:right}
  .h-tabla td{border-bottom:.3mm solid #ececec;padding:2.7mm 3.4mm;font-size:3.4mm;
    vertical-align:top}
  .h-tabla tr:nth-child(even) td{background:#fafafa;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-tabla td:last-child{text-align:right;white-space:nowrap;font-weight:700}
  .h-conf td{color:#8a5b00;background:#fff6e8!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-conf-tag{display:inline-block;border:.3mm solid #ffb800;color:#8a5b00;
    font-size:2.5mm;padding:.4mm 1.8mm;border-radius:1mm;margin-left:1.6mm;
    letter-spacing:.3mm;text-transform:uppercase;font-weight:700}

  /* total: degradé de la marca */
  .h-total{display:flex;justify-content:flex-end;margin-top:4mm}
  .h-total .caja{background:linear-gradient(90deg,#FF4500,#ffb800);color:#0d0d0f;
    border-radius:2mm;padding:3mm 7mm;display:flex;gap:9mm;align-items:baseline;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-total .caja span{font-family:'Barlow Condensed',sans-serif;font-weight:900;
    font-style:italic;text-transform:uppercase;font-size:4mm;letter-spacing:.5mm}
  .h-total .caja b{font-size:6.4mm;font-weight:800}

  .h-obs{margin-top:5mm;border:.35mm solid #e4e4e4;border-left:1.1mm solid #FF4500;
    border-radius:2mm;padding:3.2mm 4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-obs h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
    text-transform:uppercase;font-size:3.4mm;color:#FF4500;letter-spacing:.3mm;
    margin-bottom:1.6mm}
  .h-obs p{font-size:3.2mm;line-height:1.6;white-space:pre-wrap}

  .h-validez{margin-top:4mm;font-size:3.2mm;color:#8a5b00;background:#fff6e8;
    border:.3mm solid #ffb800;border-radius:2mm;padding:2.6mm 4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  .h-consent{margin-top:6mm;border:.35mm solid #e4e4e4;border-left:1.1mm solid #FF4500;
    border-radius:2mm;padding:3.6mm 4mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-consent p{font-size:3mm;line-height:1.6;color:#333}
  .h-firmas{display:flex;gap:10mm;margin-top:11mm}
  .h-firmas div{flex:1;border-top:.4mm solid #0d0d0f;padding-top:1.8mm;text-align:center;
    font-size:2.9mm;color:#555}

  /* pie: banda negra fina como el footer del sitio */
  .h-pie{margin-top:7mm;background:#0d0d0f;color:rgba(255,255,255,.75);
    border-radius:1.6mm;padding:2.6mm 4mm;display:flex;justify-content:space-between;
    font-size:2.8mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .h-pie b{color:#FF4500;font-weight:700}
}