/* Kavash Taller — hoja de estilos tomada del prototipo (prototipo/index.html).
   Los colores por rol son las clases body.r-<rol>. */
:root{--bg:#f3f4f6;--card:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--brand:#1d4ed8;--brand2:#1e40af;--head:#0f172a;--head2:#1e293b;--accent:#60a5fa;--ok:#059669;--warn:#d97706;--bad:#dc2626;--soft:#eff6ff;--radius:12px}
*{box-sizing:border-box}
:root{color-scheme:light}
button,input,select,textarea{font-family:inherit;color:var(--ink)}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
header{background:var(--head);color:#fff;transition:background .25s;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
header .logo{font-weight:800;letter-spacing:.5px;font-size:18px;color:#fff;text-decoration:none}
header .logo span{color:var(--accent)}
header .spacer{flex:1}
.rolebadge{font-size:13px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-weight:700}
.rolestrip{background:var(--brand);color:#fff;font-size:13px;padding:6px 16px;display:flex;gap:8px;align-items:center}
.rolestrip b{font-weight:700;white-space:nowrap}
body.r-vendedor{--brand:#1d4ed8;--brand2:#1e40af;--head:#0f2a6b;--head2:#1a3a8a;--accent:#93c5fd;--bg:#eef2fb;--soft:#dbeafe}
body.r-bodega{--brand:#b45309;--brand2:#92400e;--head:#5a2e05;--head2:#78400c;--accent:#fcd34d;--bg:#fbf4ea;--soft:#fef3c7}
body.r-mecanico{--brand:#047857;--brand2:#065f46;--head:#06392d;--head2:#0b4d3c;--accent:#6ee7b7;--bg:#eaf6f1;--soft:#d1fae5}
body.r-asesor{--brand:#7c3aed;--brand2:#6d28d9;--head:#2e1065;--head2:#3f1a85;--accent:#c4b5fd;--bg:#f3effb;--soft:#ede9fe}
body.r-gerencia{--brand:#0f172a;--brand2:#1e293b;--head:#020617;--head2:#1e293b;--accent:#fbbf24;--bg:#f1f3f7;--soft:#e2e8f0}
body.r-cartera{--brand:#0e7490;--brand2:#155e75;--head:#083344;--head2:#0e4a5e;--accent:#67e8f9;--bg:#ebf6f8;--soft:#cffafe}
body{transition:background .25s}
nav.tabs{display:flex;gap:6px;padding:10px 16px 0;flex-wrap:wrap}
nav.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
nav.tabs a{background:#fff;color:var(--ink);border:1px solid #cbd5e1;padding:9px 16px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0;text-decoration:none}
nav.tabs a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
main{padding:14px 16px 60px;max-width:1100px;margin:0 auto}
h2.titulo{margin:4px 0 10px;font-size:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.card h3 .count{font-size:12px;background:var(--soft);color:var(--brand);padding:2px 8px;border-radius:999px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.grid.dos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
input,select,textarea{padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;width:100%;background:#fff;color:var(--ink)}
textarea{min-height:70px;resize:vertical}
.btn{background:var(--brand);color:#fff;border:none;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--brand2)}
.btn.sec{background:#fff;color:var(--ink);border:1px solid #d1d5db}
.btn.sec:hover{background:#f3f4f6}
.btn.ok{background:var(--ok)}.btn.warn{background:var(--warn)}.btn.bad{background:var(--bad)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
a.btn{display:inline-block;text-decoration:none;text-align:center}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase}
td.num,th.num{text-align:right;white-space:nowrap}
.tabla-scroll{overflow:auto}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.s-recibido{background:#e5e7eb;color:#374151}.s-cotizado{background:#dbeafe;color:#1e40af}.s-aprobado{background:#ede9fe;color:#5b21b6}
.s-en_reparacion{background:#fef3c7;color:#92400e}.s-listo{background:#d1fae5;color:#065f46}.s-entregado{background:#111827;color:#fff}
.b-ambar{background:#fef3c7;color:#92400e}.b-rojo{background:#fee2e2;color:#991b1b}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
.tag.taller{background:#fef3c7;color:#92400e}.tag.vend{background:#e0f2fe;color:#075985}.tag.new{background:#fee2e2;color:#991b1b}.tag.gris{background:#e5e7eb;color:#374151}
tr.fila-pendiente{background:#fffbeb}tr.fila-atenuada{opacity:.65}
.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.order{display:block;color:inherit;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;transition:box-shadow .15s}
.order:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.order .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.order .id{font-weight:800;color:var(--brand)}
.order{border-left:5px solid var(--brand)}
.order .veh{font-weight:600;font-size:16px}
.order .meta{font-size:13px;color:var(--muted);margin-top:4px}
.order .alert{margin-top:8px;font-size:12px;color:var(--bad);font-weight:600}
.progress{display:flex;gap:4px;margin:10px 0 14px}
.progress div{flex:1;height:8px;border-radius:4px;background:#e5e7eb;position:relative}
.progress div.done{background:var(--brand)}
.progress div.cur{background:var(--warn)}
.progress small{position:absolute;top:10px;left:0;font-size:10px;color:var(--muted);white-space:nowrap}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;font-size:14px}
.kv div span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}
.kv div b{font-weight:600}
.etiqueta{font-size:11px;color:var(--muted);text-transform:uppercase;display:block}
.switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.switch input{width:auto;transform:scale(1.3)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f9fafb}
.gallery img{width:100%;height:100px;object-fit:cover;display:block;cursor:pointer}
.gallery figcaption{font-size:11px;padding:4px 6px;color:var(--muted)}
.note{border-left:3px solid var(--brand);background:#f8fafc;padding:8px 10px;border-radius:0 8px 8px 0;margin-bottom:8px;font-size:14px;white-space:pre-line}
.note small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.hist{font-size:13px;color:var(--muted);line-height:1.6;max-height:200px;overflow:auto}
.total{font-weight:800;font-size:16px}
.hidden-info{font-size:12px;color:var(--muted);font-style:italic}
.muted{color:var(--muted)}.malo{color:var(--bad)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:92vw;text-align:center}
.toast.show{opacity:1}
.back{display:inline-block;background:none;border:none;color:var(--brand);cursor:pointer;font-size:14px;padding:0;margin-bottom:10px;font-weight:600;text-decoration:none}
.os-num{font-size:22px;font-weight:800;color:var(--brand)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:40;padding:14px}
.modal[hidden]{display:none}
.modal .box{background:#fff;border-radius:14px;padding:18px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal h3{margin-top:0}
.modal .ayuda{font-size:13px;color:var(--muted);margin-top:-6px}
form.en-linea{display:contents}
.grid.mitades{grid-template-columns:1fr 1fr}
.card h3 .nota-titulo{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400;text-align:right}
.note.aviso-mo{border-color:var(--warn);white-space:normal}
.campo-valor{width:120px;padding:5px;text-align:right}.campo-valor.angosto{width:110px}
.sel-chico{padding:5px;font-size:13px;min-width:170px}
.note.aviso-serv{border-color:#7c3aed;white-space:normal}
.bueno{color:var(--ok)}
.addrow.serv{grid-template-columns:2fr 1.5fr auto}.addrow.serv-valores{grid-template-columns:2fr 1.5fr 110px 110px auto}
/* Vista PDF */
.pdfbar{max-width:800px;margin:0 auto 10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pdf-hoja{background:#fff;max-width:800px;margin:0 auto;padding:28px;border:1px solid var(--line);overflow:auto}
/* En celular la hoja conserva su ancho y se desliza hacia los lados, para verse como el PDF */
.pdf-hoja .doc{min-width:620px}
.fuera-de-pantalla{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.switch.chico{font-size:11px;margin-top:4px}.switch.chico input{transform:none}
.addrow{margin-top:10px;grid-template-columns:1fr 2fr 70px 120px auto}
.errorlist{list-style:none;margin:2px 0 0;padding:0;color:var(--bad);font-size:12px}
.aviso{background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:12px}
.aviso.error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.htmx-indicator{display:none;font-size:12px;color:var(--muted)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px}
.userbox .name{font-weight:700}.userbox .btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3)}
/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f172a,#1e3a8a);padding:16px}
.login .box{background:#fff;border-radius:16px;padding:26px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login .brand{font-size:26px;font-weight:900;letter-spacing:.5px}.login .brand span{color:var(--brand)}
.login .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.login label.f{margin-bottom:12px}
.login .err{color:var(--bad);font-size:13px;min-height:18px;margin-bottom:6px}
.demo{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}
.demo table{font-size:12px}.demo td{padding:4px 6px;border:none}
.demo td button{background:none;border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px;color:var(--brand)}
.empty{color:var(--muted);font-size:14px;padding:14px;text-align:center}
.req{color:var(--bad)}
@media (max-width:600px){main{padding:10px}th,td{padding:6px 4px;font-size:13px}
 header{padding:8px 12px}header .logo{font-size:16px}header .userbox{width:100%;justify-content:space-between}
 .addrow,.addrow.serv,.addrow.serv-valores{grid-template-columns:1fr 1fr}.addrow .btn{grid-column:1/-1}
 .pdf-hoja{padding:14px}.pdfbar>.btn,.pdfbar>form.en-linea>.btn{flex:1;text-align:center}
 .orders{grid-template-columns:1fr}
 .progress small{display:none}.card{padding:12px}.btn{padding:11px 14px}.btn.sm{padding:8px 12px}
 .row>.btn,.row>a.btn,.row>form.en-linea>.btn{flex:1;text-align:center}
 .grid.dos{grid-template-columns:1fr}.total{font-size:14px}.card h3{flex-wrap:wrap}
 /* 16px evita que el iPhone haga zoom al tocar un campo */
 input,select,textarea{font-size:16px}}