/* =====================================================================
   AM Security - theme.css  (rediseno visual)
   Se carga DESPUES de styles.css y lo sobrescribe. Para volver al diseno
   anterior basta con quitar la linea <link ... theme.css> de index.html.
   ===================================================================== */

:root{
  --bg:#f5f7fb; --surface:#fff; --ink:#0f172a; --ink2:#334155; --mut:#64748b;
  --line:#e7eaf0; --line2:#eef1f6;
  --acc:#4f46e5; --acc2:#6366f1; --acc-soft:#eef2ff; --acc-ink:#4338ca;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7;
  --bad:#b91c1c; --bad-soft:#fee2e2; --info:#1d4ed8; --info-soft:#dbeafe;
  --r:16px; --r-sm:11px;
  --sh:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05);
  --sh-lg:0 24px 60px rgba(15,23,42,.28);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- Barra lateral ---------- */
.sidebar{width:252px;padding:22px 14px;background:linear-gradient(180deg,#131c33 0%,#0b1220 100%);border-right:1px solid rgba(255,255,255,.05)}
main{margin-left:252px}
.brand{padding:4px 10px 26px}
.brand strong{font-size:16px;font-weight:700;letter-spacing:.01em;color:#fff}
.brand span{color:#8ea0ba}
.sidebar nav{gap:4px}
.navbtn{position:relative;padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:500;color:#9fb0c7;transition:background .15s,color .15s}
.navbtn:hover{background:rgba(255,255,255,.06);color:#fff}
.navbtn.active{background:linear-gradient(90deg,rgba(99,102,241,.30),rgba(99,102,241,.06));color:#fff}
.navbtn.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:#818cf8}
.side-foot{border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.navbtn.danger{color:#fca5a5}
.navbtn.danger:hover{background:rgba(248,113,113,.12);color:#fecaca}

/* ---------- Encabezado ---------- */
header{height:84px;padding:16px 32px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
header h1{font-size:22px;font-weight:700}
header p{color:var(--mut);font-size:13px;margin-top:3px}
#content{padding:28px 32px 48px;max-width:1280px}

#newJob{display:none!important}

/* ---------- Botones ---------- */
.primary{border-radius:var(--r-sm);padding:11px 18px;font-weight:650;letter-spacing:.005em;
  background:linear-gradient(180deg,#6366f1,#4f46e5);box-shadow:0 1px 2px rgba(79,70,229,.45),0 8px 18px rgba(79,70,229,.22);
  transition:transform .12s,box-shadow .12s,filter .12s}
.primary:hover{filter:brightness(1.07);box-shadow:0 1px 2px rgba(79,70,229,.45),0 10px 22px rgba(79,70,229,.30)}
.primary:active{transform:translateY(1px)}
.secondary,.icon-button,.qb-action,.panel button:not([class]),.modal-card button:not([class]):not(.close){
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:10px 14px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:background .12s,border-color .12s,transform .12s}
.secondary:hover,.icon-button:hover,.qb-action:hover,.panel button:not([class]):hover,.modal-card button:not([class]):not(.close):hover{background:#f8faff;border-color:#c7d2fe}
.panel button:not([class]){margin:4px 8px 0 0}
.icon-button{color:var(--acc-ink)}
.dangerbtn,.delete-action{border-radius:var(--r-sm);font-weight:650}
.customer-new-job{background:linear-gradient(180deg,#6366f1,#4f46e5);box-shadow:0 1px 2px rgba(79,70,229,.45),0 6px 14px rgba(79,70,229,.22);border-radius:var(--r-sm)}
.customer-new-job:hover{background:linear-gradient(180deg,#6366f1,#4338ca)}

/* ---------- Campos ---------- */
.search,input,select,textarea{border:1px solid #dfe4ec;border-radius:var(--r-sm);padding:11px 13px;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc2);box-shadow:0 0 0 4px rgba(99,102,241,.16)}
input::placeholder,textarea::placeholder{color:#94a3b8}
.search{padding-left:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center}
.formgrid label,.login-card label span{font-weight:600;color:var(--mut)}
.toolbar{align-items:center;margin-bottom:18px}
.toolbar h2{margin:0;flex:1}

/* ---------- Tarjetas y paneles ---------- */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.panel{padding:22px 24px;margin-top:20px}
.panel:first-child{margin-top:0}
.panel h2{font-size:15px;font-weight:700;margin:0 0 14px;color:var(--ink)}
.muted{color:var(--mut)}
.empty{padding:36px 20px;color:#94a3b8;font-size:14px}
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:14px;background:#f1f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7'/%3E%3Cpath d='M4 13h4l2 3h4l2-3h4v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") no-repeat center}
.empty.compact::before{display:none}

/* ---------- Dashboard ---------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border-radius:20px;color:#fff;margin-bottom:20px;
  background:radial-gradient(700px 240px at 100% 0%,rgba(129,140,248,.55),transparent 62%),radial-gradient(500px 220px at 0% 120%,rgba(56,189,248,.25),transparent 60%),linear-gradient(135deg,#1e1b4b,#312e81 55%,#4338ca);
  box-shadow:0 18px 40px rgba(49,46,129,.28)}
.hero h2{margin:0;font-size:26px;font-weight:750;color:#fff}
.hero p{margin:8px 0 0;color:#c7d2fe;font-size:15px}
.hero b{color:#fff}
.hero{min-height:150px;overflow:hidden}
.hero-logo{width:150px;height:150px;object-fit:contain;flex:none;margin:-14px 6px -14px 0;filter:drop-shadow(0 8px 20px rgba(0,0,0,.40))}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.card.kpi{position:relative;overflow:hidden;padding:18px 20px 20px;cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s}
.card.kpi:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 12px 28px rgba(15,23,42,.10)}
.kpi small{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);position:relative;z-index:1}
.kpi .metric{font-size:36px;font-weight:800;letter-spacing:-.025em;margin-top:8px;position:relative;z-index:1}
.kpi::after{content:"";position:absolute;right:-22px;top:-22px;width:96px;height:96px;border-radius:50%;background:var(--k,#eef2ff)}
.kpi .kicon{position:absolute;right:16px;top:14px;font-size:20px;z-index:1}
.k-blue{--k:#dbeafe}.k-green{--k:#dcfce7}.k-amber{--k:#fef3c7}.k-red{--k:#fee2e2}.k-violet{--k:#ede9fe}
.card.kpi.alert .metric{color:var(--bad)}
.cards+.grid2,.cards+.panel{margin-top:20px}
.grid2 .panel{margin-top:0}
.grid2+.panel{margin-top:20px}

/* ---------- Filas ---------- */
.row{padding:14px 12px;margin:0 -12px;border-top:0;border-bottom:1px solid var(--line2);border-radius:12px;transition:background .12s}
.row:last-child{border-bottom:0}
.row:first-of-type{border-top:0}
.job-open,.inv-open,.estimate-open,.clickable,.customer-open{cursor:pointer}
.row:hover{background:#f8faff}
.row.danger{color:var(--bad)}
.avatar{width:42px;height:42px;border-radius:12px;background:var(--acc-soft);font-size:18px;flex:none}
.row.clickable::after{content:"\203A";margin-left:auto;font-size:24px;line-height:1;color:#cbd5e1}
.row b{font-weight:650}
.datebox{width:48px;height:52px;border-radius:12px;background:var(--acc-soft);color:var(--acc-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:none}
.datebox b{font-size:19px;font-weight:800}
.datebox span{font-size:10px;font-weight:800;letter-spacing:.08em;margin-top:4px}
.datebox.none{background:#f1f5f9;color:#94a3b8}
.datebox.late{background:var(--bad-soft);color:var(--bad)}
.rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.qty{font-weight:800;font-size:13px;padding:6px 12px;border-radius:10px;background:#f1f5f9;color:var(--ink2);white-space:nowrap}
.qty.low{background:var(--bad-soft);color:var(--bad)}
.qty.ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- Estados (pills) ---------- */
.pill{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--info-soft);color:var(--info)}
.pill[data-tone=ok]{background:var(--ok-soft);color:var(--ok)}
.pill[data-tone=warn]{background:var(--warn-soft);color:var(--warn)}
.pill[data-tone=bad]{background:var(--bad-soft);color:var(--bad)}
.pill[data-tone=neutral]{background:#f1f5f9;color:#475569}
.count-badge{background:var(--acc-soft);color:var(--acc-ink)}

/* ---------- Tablas ---------- */
.table th{background:#f8fafc;color:#64748b;font-size:11px;font-weight:700;letter-spacing:.07em;padding:12px;border-bottom:1px solid var(--line)}
.table th:first-child{border-top-left-radius:10px}.table th:last-child{border-top-right-radius:10px}
.table td{padding:14px 12px;border-bottom:1px solid var(--line2);color:var(--ink2)}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:#f8faff}
.table td b{color:var(--ink)}
.cell-user{display:flex;align-items:center;gap:12px}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#818cf8,#4f46e5);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.av.sub{background:linear-gradient(135deg,#94a3b8,#64748b)}

/* ---------- Calendario / agenda ---------- */
#schedDate{max-width:240px}
.day{border-radius:12px;border-color:var(--line)}
.jobdot{background:var(--acc-soft);color:var(--acc-ink);border-radius:7px}

/* ---------- Ventanas (modales) ---------- */
.modal{background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.modal-card{border-radius:22px;padding:28px 30px;box-shadow:var(--sh-lg);animation:amPop .18s ease-out}
@keyframes amPop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.close{right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:#f1f5f9;color:#475569;display:grid;place-items:center;font-size:22px;line-height:1;z-index:3;transition:background .12s}
.close:hover{background:#e2e8f0}
.modal-card h2{font-size:21px;font-weight:750;margin:0 0 4px}
.detail-section,.section,.sectionbox{border-top-color:var(--line)}
.section h3,.detail-section h3{font-size:14px;font-weight:700;color:var(--ink)}
.kv{gap:10px 18px}
.kv b{font-weight:600;color:var(--mut)}
.history-card,.warranty-card,.itembox,.qb-card{border-color:var(--line);border-radius:14px}
.history-card:hover{background:#f8faff;border-color:#c7d2fe}
.qb-card{background:#fafbff}
.qb-logo{background:var(--acc-soft);color:var(--acc-ink)}
.errorbox{border-radius:12px}
.switch.on{background:#22c55e}
.date-picker-card{border-radius:22px}
.date-day.selected{background:var(--acc);border-color:var(--acc)}
.date-day.today{border-color:var(--acc);color:var(--acc)}
.date-nav{background:var(--acc-soft);color:var(--acc-ink)}

/* ---------- Formularios dentro de ventanas (trabajo, cliente, estimado) ---------- */
.modal-card form .section{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 16px;align-items:start;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px 18px;margin:0 0 14px;background:#fff}
.modal-card form .section>h3{grid-column:1/-1;margin:0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.modal-card form .section>label{display:block;margin:0;font-size:12px;font-weight:600;color:var(--mut)}
.modal-card form .section>label>input,.modal-card form .section>label>select,.modal-card form .section>label>textarea,.modal-card form .section>label>.date-field{margin-top:6px;font-weight:400;color:var(--ink)}
.modal-card form .section>select:not(#invPick){grid-column:1/-1}
.modal-card form .section>label:has(textarea),.modal-card form .section>label:has(input[name=title]){grid-column:1/-1}
.modal-card form .section:has(#invPick){grid-template-columns:minmax(0,1fr) 110px auto;align-items:end}
.modal-card form .section:has(#invPick)>h3,.modal-card form .section>#editItems{grid-column:1/-1}
.modal-card form .section>#editItems{margin-top:2px}
.modal-card form>button.primary{display:block;width:100%;margin-top:6px;padding:13px 18px;font-size:15px}
.modal-card textarea{min-height:84px;resize:vertical}
.formgrid{gap:14px 16px}
.formgrid label{font-weight:600}
.formgrid label>input,.formgrid label>select,.formgrid label>textarea{font-weight:400;color:var(--ink)}
.actions{align-items:center}
@media(max-width:620px){
  .modal-card form .section,.modal-card form .section:has(#invPick){grid-template-columns:1fr}
  .modal-card form .section:has(#invPick) button{width:100%}
}

/* ---------- Ficha de cliente ---------- */
.modal-card .section>h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 12px}
.modal-card .section{border-top:1px solid var(--line);padding:18px 0 4px;margin-top:0}
.cd-head{display:flex;align-items:center;gap:16px;padding-right:44px;margin-bottom:18px}
.cd-main{flex:1;min-width:0}
.cd-main h2{margin:0;font-size:22px;font-weight:800;overflow-wrap:anywhere}
.cd-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px}
.av.big{width:58px;height:58px;font-size:20px;flex:none}
.cd-info{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.cd-card{flex:1 1 200px;min-width:0;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cd-card.wide{flex:2 1 320px}
.cd-card small{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.cd-card a{color:var(--acc-ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.cd-card a:hover{text-decoration:underline}
.cd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.cd-notes{margin:0;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px 14px;color:#78350f;white-space:pre-wrap}
.cd-attach{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 14px}
.cd-attach input{flex:1 1 220px;width:auto}
.tl{position:relative;margin:2px 0 14px 6px;padding-left:20px;border-left:2px solid var(--line)}
.tl-item{position:relative;padding:2px 0 16px}
.tl-dot{position:absolute;left:-27px;top:5px;width:12px;height:12px;border-radius:50%;background:#94a3b8;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl-item.ok .tl-dot{background:#22c55e}.tl-item.bad .tl-dot{background:#ef4444}.tl-item.info .tl-dot{background:#6366f1}
.tl-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.tl-top .muted{font-size:12px;white-space:nowrap}
.tl-body .muted{margin-top:2px}
.wcard{border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin:0 0 10px;background:#fff}
.wcard-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:4px}
.detail-header{margin-bottom:10px;padding-right:44px}
@media(max-width:620px){.cd-head{flex-wrap:wrap}.cd-actions>button{flex:1 1 100%}}

/* ---------- Calendario (Schedule) ---------- */
.sch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sch-head h2{margin:0;font-size:21px;font-weight:800}
.sch-nav{display:flex;gap:8px}
.sch-nav button{min-width:44px;font-size:18px;line-height:1;padding:9px 14px}
.sch-week,.sch-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.sch-week{margin-bottom:8px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.sch-day{min-height:122px;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .12s,background .12s,box-shadow .12s}
.sch-day:hover{border-color:#c7d2fe;background:#fafaff}
.sch-day.out{background:#f8fafc}
.sch-day.out .sch-num{color:#a3afc2}
.sch-num{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:13px;color:var(--ink2)}
.sch-day.today .sch-num{background:var(--acc);color:#fff}
.sch-day.sel{border-color:var(--acc);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.sch-chip{margin-top:5px;padding:4px 7px;border-radius:8px;background:var(--acc-soft);color:var(--acc-ink);font-size:11.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sch-chip b{font-weight:800}
.sch-chip[data-tone=ok]{background:var(--ok-soft);color:var(--ok)}
.sch-chip[data-tone=warn]{background:var(--warn-soft);color:var(--warn)}
.sch-chip[data-tone=bad]{background:var(--bad-soft);color:var(--bad)}
.sch-chip[data-tone=neutral]{background:#f1f5f9;color:#475569}
.sch-more{margin-top:5px;font-size:11px;font-weight:700;color:var(--mut)}
@media(max-width:720px){
  .sch-grid,.sch-week{gap:4px}
  .sch-day{min-height:64px;padding:5px;border-radius:10px}
  .sch-num{width:24px;height:24px;font-size:12px}
  .sch-chip{display:inline-block;width:8px;height:8px;padding:0;margin:3px 2px 0 0;border-radius:50%;font-size:0;background:#6366f1}
  .sch-chip[data-tone=ok]{background:#22c55e}.sch-chip[data-tone=warn]{background:#f59e0b}.sch-chip[data-tone=bad]{background:#ef4444}
  .sch-more{display:none}
}

/* ---------- Settings ---------- */
#usersPanel{margin-top:20px}
#usersPanel>.panel{margin-top:0}
#usersPanel:empty{display:none}
.um-listhead{margin-bottom:10px}
.um-listhead h2{margin:0}

/* ---------- Boton "Complete Job" ---------- */
.complete-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:var(--r-sm);padding:10px 15px;font:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 1px 2px rgba(22,163,74,.45),0 6px 14px rgba(22,163,74,.22);transition:filter .12s,transform .12s}
.complete-btn:hover{filter:brightness(1.07)}
.complete-btn:active{transform:translateY(1px)}
.complete-btn .navicon{width:17px;height:17px;flex:0 0 17px;stroke-width:2.4}
.complete-btn.sm{padding:6px 11px;font-size:12px;border-radius:9px;box-shadow:0 1px 2px rgba(22,163,74,.35)}
.complete-btn.sm .navicon{width:14px;height:14px;flex:0 0 14px}
.hdr-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.done-note{margin:6px 0 12px;padding:11px 14px;border-radius:12px;background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:600}
@media(max-width:620px){.complete-btn:not(.sm){width:100%;justify-content:center}.hdr-actions{width:100%}}

/* ---------- Ventana "Complete Job" (nota) ---------- */
.cj-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.cj-card{width:min(520px,100%);background:#fff;border-radius:20px;padding:24px 26px;box-shadow:var(--sh-lg);animation:amPop .18s ease-out}
.cj-card h3{margin:0 0 4px;font-size:21px;font-weight:800}
.cj-card label{display:block;margin:18px 0 0;font-size:12px;font-weight:700;color:var(--mut)}
.cj-card .req{margin-left:6px;color:var(--bad);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.cj-card textarea{display:block;width:100%;margin-top:7px;min-height:130px;resize:vertical;font-weight:400;color:var(--ink)}
.cj-error{min-height:20px;margin-top:8px;color:var(--bad);font-size:13px;font-weight:600}
.cj-card p{margin:2px 0 0;font-size:12.5px;line-height:1.45}
.cj-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.cj-actions .complete-btn:disabled{opacity:.65;cursor:default}
.modal-card .section>p{white-space:pre-wrap}

/* ---------- Buscador de equipos ---------- */
.eqp{position:relative;min-width:0}
.eqp .eqp-input{width:100%;padding-left:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center}
.eqp-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.22);padding:6px}
.eqp-list[hidden],.eqp-item[hidden],.eqp-empty[hidden]{display:none}
.eqp-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer}
.eqp-item:hover,.eqp-item.active{background:var(--acc-soft)}
.eqp-main{min-width:0;display:flex;flex-direction:column}
.eqp-main b{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqp-main span{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqp-meta{font-weight:700;font-size:13px;color:var(--ink2);white-space:nowrap}
.eqp-item .qty{font-size:12px;padding:4px 10px;flex:none}
.eqp-empty{padding:16px;text-align:center;color:var(--mut);font-size:13px}
.modal-card form .section:has(#estimateInvPick){grid-template-columns:minmax(0,1fr) 110px auto;align-items:end}
.modal-card form .section:has(#estimateInvPick)>h3,.modal-card form .section>#estimateEditItems{grid-column:1/-1}
@media(max-width:620px){.modal-card form .section:has(#estimateInvPick){grid-template-columns:1fr}.modal-card form .section:has(#estimateInvPick) button{width:100%}}

/* ---------- Inventario por tecnico ---------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;background:#eaeef5;border-radius:14px;width:fit-content;max-width:100%}
.tabs .tab{border:0;background:transparent;padding:9px 18px;border-radius:10px;font:inherit;font-weight:650;font-size:14px;color:var(--mut);cursor:pointer;transition:background .12s,color .12s}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{background:#fff;color:var(--acc-ink);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.tcard-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.tcard-head .av{width:44px;height:44px}
.tcard-head .secondary{padding:8px 13px}
.tr-serials{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.tr-serials b{display:block;font-size:13px;margin-bottom:2px}
.tr-serials b span{color:var(--acc-ink);margin-left:6px}
.tr-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;max-height:190px;overflow:auto}
.um .tr-ser{display:flex;align-items:center;gap:8px;margin:0;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:13px}
.tr-ser input{width:auto!important;margin:0}
.um-error{min-height:20px;margin:0 0 6px;color:var(--bad);font-size:13px;font-weight:600}
.um .um-field select,.um .um-field input[type=number]{display:block;width:100%;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit}
.serial-warn{margin:6px 0;padding:8px 11px;border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:12.5px;font-weight:600}

/* ---------- Tecnico asignado ---------- */
.job-tech{margin-top:6px}
.tech-chip{display:inline-flex;align-items:center;gap:7px;padding:2px 11px 2px 3px;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink);font-size:12px;font-weight:650}
.tech-chip i{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#818cf8,#4f46e5);color:#fff;font-style:normal;font-size:9.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tech-chip.none{padding-left:11px;background:var(--warn-soft);color:var(--warn)}
.tech-filter{width:auto;min-width:190px;max-width:100%;padding:10px 12px;font-weight:600}
.toolbar .tech-filter{flex:0 0 auto}
.sch-chip .chip-tech{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:rgba(15,23,42,.14);font-style:normal;font-size:8.5px;font-weight:800;vertical-align:1px}
.sch-head{flex-wrap:wrap}
.sch-nav{flex-wrap:wrap;align-items:center}
@media(max-width:720px){.sch-chip .chip-tech{display:none}.tech-filter{width:100%;min-width:0}}

/* ---------- Cuenta, aviso de carga, recuperar contrasena ---------- */
.app-banner{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;margin:20px 32px 0;padding:12px 16px;border-radius:14px;background:var(--warn-soft);border:1px solid #fde68a;color:#92400e;font-size:14px;font-weight:600}
.app-banner[hidden]{display:none}
.app-banner .secondary{padding:7px 14px}
.link-btn{display:block;width:100%;margin:12px 0 0;padding:6px;border:0;background:transparent;color:var(--acc-ink);font:inherit;font-weight:650;font-size:13.5px;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.login-error.ok,.um-error.ok{color:var(--ok)}
.um .um-field input[type=password]{display:block;width:100%;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit}
@media(max-width:720px){.app-banner{margin:14px 14px 0}}

/* ---------- Restablecer contrasena (solo administrador) ---------- */
.um-reset{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.um-reset .um-hint{margin:0;flex:1 1 220px}
.um-hint.ok{color:var(--ok);font-weight:600}

/* ---------- Direccion en trabajos + sugerencias de direccion ---------- */
.job-addr{margin-top:3px;font-size:12.5px;line-height:1.35}
.maps-link{color:var(--acc-ink);text-decoration:none;font-weight:600}
.maps-link:hover{text-decoration:underline}
.job-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.buttonlike.primary-link{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;border-color:transparent;font-weight:700;margin-top:0}
.buttonlike{margin-top:0}
.addr-ac{position:relative}
.addr-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:45;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.22);padding:6px}
.addr-list[hidden]{display:none}
.addr-item{display:flex;flex-direction:column;padding:9px 11px;border-radius:10px;cursor:pointer}
.addr-item:hover,.addr-item.active{background:var(--acc-soft)}
.addr-item b{font-size:14px;font-weight:700;color:var(--ink)}
.addr-item span{font-size:12px;color:var(--mut)}
.addr-empty{padding:12px;color:var(--mut);font-size:13px}
.addr-attr{padding:6px 11px 2px;text-align:right;font-size:10.5px;color:#94a3b8;letter-spacing:.02em}

/* ---------- Actualizar cliente en QuickBooks ---------- */
.qb-cust-msg{margin:10px 0 0;font-size:13px;color:var(--mut);line-height:1.4}
.qb-cust-msg.ok{color:var(--ok);font-weight:600}
.qb-cust-msg.bad{color:var(--warn);font-weight:600}

/* ---------- Inicio de sesion ---------- */
.login-screen{background:radial-gradient(900px 480px at 85% -10%,rgba(99,102,241,.28),transparent 60%),radial-gradient(700px 420px at -10% 110%,rgba(14,165,233,.20),transparent 60%),var(--bg)}
.login-card{border-radius:24px;padding:38px 36px;border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(15,23,42,.18)}
.login-card h1{font-size:28px;font-weight:800}
.login-card .primary.login-button{padding:13px 16px;font-size:15px}

/* ---------- Movil ---------- */
@media(max-width:950px){.hero{padding:22px;min-height:120px}.hero-logo{width:104px;height:104px;margin:-8px 0}}
@media(max-width:560px){.hero-logo{display:none}}
@media(max-width:720px){
  main{margin-left:0}
  header{height:76px;padding:12px 16px}
  header h1{font-size:19px}
  #content{padding:16px 14px 40px}
  .panel{padding:18px 16px}
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .kpi .metric{font-size:30px}
  .hero h2{font-size:21px}
  .modal-card{padding:22px 18px;border-radius:20px}
  .modal{padding:10px}
  .toolbar{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}