/* ============================================
   The Kustom Society — Sistema de taller
   ============================================ */

:root{
  /* Light theme · blanco / gris suave / dorado */
  --bg:#f5f4f0;
  --panel:#ffffff;
  --panel-2:#ecebe5;
  --panel-3:#dcdad2;
  --line:#dad7cd;
  --text:#2d2c28;
  --muted:#8a877d;
  --muted-2:#b3b0a7;
  --accent:#b8924a;
  --accent-2:#8e6e2f;
  --accent-soft:rgba(184,146,74,.14);
  --good:#7a9d4e;
  --bad:#c4524c;
  --warn:#d4a05c;
  --blue:#6a8caf;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 2px 10px rgba(70,55,30,.07), 0 1px 2px rgba(70,55,30,.04);
  --sidebar-w:240px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- App shell ---------- */
#app{display:flex;min-height:100vh}

.sidebar{width:var(--sidebar-w);background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:50}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.side-brand:hover{background:var(--panel-2)}
/* Soul Juice: logo PNG (blanco sobre coral). Esquinas suaves para tile cuadrado. */
.logo-badge{width:46px;height:46px;flex-shrink:0;object-fit:contain;border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.15)}
.side-brand-txt{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.side-brand-txt strong{font-size:14px;letter-spacing:.3px}
.side-brand-txt small{color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.side-brand-ver{display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--accent);font-weight:700;letter-spacing:.5px;font-size:10px}

.side-nav{flex:1;padding:12px 8px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--text);
  font-size:14px;cursor:pointer;transition:background .15s;margin-bottom:2px}
.nav-item:hover{background:var(--panel-2);text-decoration:none}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
.nav-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  font-size:12px;color:var(--muted);flex-shrink:0}
.nav-item.active .nav-ico{color:var(--accent)}

.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.sync-state{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync-dot--ok{background:var(--good);box-shadow:0 0 6px var(--good)}
.sync-dot--warn{background:var(--warn)}
.sync-dot--bad{background:var(--bad)}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh}

.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-menu{display:none}
.crumb{flex:1;font-size:14px;font-weight:600;letter-spacing:.3px;color:var(--muted)}
.crumb strong{color:var(--text);font-weight:700}
.topbar-actions{display:flex;gap:6px}

.view{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto}

/* ---------- Buttons ---------- */
.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:8px 14px;
  border-radius:10px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;font-family:inherit}
.btn:hover{border-color:var(--accent);background:var(--panel)}
.btn--primary{background:var(--accent);color:#ffffff;border-color:var(--accent);font-weight:700}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn--ghost{background:transparent}
.btn--danger{border-color:var(--bad);color:var(--bad);background:#fff}
.btn--danger:hover{background:rgba(196,82,76,.08);border-color:var(--bad)}
.btn--sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn--block{width:100%;justify-content:center}
.icon-btn{background:transparent;border:none;color:var(--muted);width:36px;height:36px;
  border-radius:8px;cursor:pointer;font-size:20px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--panel-2);color:var(--text)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.card h2{margin:0;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.card h2::before{content:"";display:inline-block;width:6px;height:18px;background:var(--accent);border-radius:2px}

.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.card-header.clickable{cursor:pointer;user-select:none}
.card-header.clickable:hover h2{color:var(--text)}
.card-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.card-total{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;
  background:var(--accent-soft);padding:3px 10px;border-radius:999px}
.card-total.zero{opacity:.4;background:transparent;color:var(--muted)}
.caret{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  color:var(--muted);font-size:10px;transition:transform .25s;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line)}
.card.collapsed .caret{transform:rotate(-90deg)}
.card.collapsed .card-header{margin-bottom:0}
.card.collapsed .card-body{display:none}

/* Sub-card: tarjetas anidadas dentro de otra tarjeta (desgloses, piezas, etc.) */
.card--sub{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:0}
.card--sub .card-header{margin-bottom:10px}
.card--sub .sub-title{margin:0;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
.card--sub .sub-title::before{content:"";display:inline-block;width:4px;height:14px;background:var(--muted);border-radius:2px;margin-right:8px;vertical-align:middle}
.card--sub.collapsed .card-header{margin-bottom:0}

/* Pieza row: tarjeta colapsable de pieza individual */
.pieza-row .card-header{margin-bottom:10px}
.pieza-row.collapsed .card-header{margin-bottom:0}
.pieza-row .card-header input{min-width:0}

/* Sub-row en el resumen financiero: para mostrar desgloses indentados */
.summary-row.sub{padding:2px 0 2px 16px;font-size:12px;opacity:.85}

/* Internal (non-client) visual marker */
.internal-block{background:linear-gradient(90deg,#3a2a0a22,transparent);border-left:3px solid var(--warn);
  padding:10px 12px;border-radius:0 8px 8px 0;margin-top:6px}
.internal-tag{display:inline-block;background:var(--warn);color:#0e0e10;font-size:10px;font-weight:700;
  letter-spacing:1px;padding:2px 7px;border-radius:999px;margin-bottom:6px;text-transform:uppercase}
.internal-col{background:#3a2a0a14}
th.internal-col{color:var(--warn)!important}
th.internal-col::after{content:" ⚠";font-size:10px;opacity:.7}

/* ---------- Forms ---------- */
.row{display:grid;gap:10px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:1fr 1fr 1fr}
.four{grid-template-columns:repeat(4,1fr)}
.auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:760px){.two,.three,.four{grid-template-columns:1fr}}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
input,textarea,select{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;font-size:14px;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:60px}
input[type=number]{font-variant-numeric:tabular-nums}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
td input,td select,td textarea{padding:7px 8px;font-size:13px}
td.num input{text-align:right}
/* Columnas numéricas compactas: max 4 dígitos visibles. Usa width fijo
   para que el resto del ancho se vaya al campo de Detalle. */
td.num-tight{width:78px;max-width:78px}
td.num-tight input{padding-left:6px;padding-right:6px}
/* Celda del select de servicio: 160px max para que la abreviación
   ("Mec. general") quepa cómoda y le deje aire al detalle. */
td.lab-svc-cell{width:160px;max-width:160px}
td.lab-svc-cell select{width:100%}
td.actions{width:40px;text-align:center}
.line-subtotal{font-variant-numeric:tabular-nums;text-align:right;color:var(--text);font-weight:600}
.delbtn{background:transparent;border:none;color:var(--bad);font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px}
.delbtn:hover{background:rgba(196,82,76,.1)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:14px}
.media-item{background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;padding:8px}
.addbtn{margin-top:10px;background:transparent;border:1px dashed var(--line);color:var(--muted);
  width:100%;padding:10px;border-radius:10px;cursor:pointer;font-size:13px;font-family:inherit}
.addbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Chips / tags ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:12px;
  padding:5px 10px;border-radius:999px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip--on{background:var(--accent);color:#ffffff;border-color:var(--accent);font-weight:600}

.tag{display:inline-block;background:var(--panel-2);color:var(--muted);font-size:11px;
  padding:2px 8px;border-radius:999px;letter-spacing:.3px}
.tag--good{background:var(--good);color:#ffffff;font-weight:600}
.tag--warn{background:var(--warn);color:#3a2a10;font-weight:600}
.tag--bad{background:var(--bad);color:#fff;font-weight:600}
.tag--blue{background:var(--blue);color:#fff;font-weight:600}
.tag--ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ---------- Summary / totals ---------- */
.summary{margin-top:16px;background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-variant-numeric:tabular-nums;font-size:14px}
.summary-row.total{border-top:2px solid var(--accent);margin-top:8px;padding-top:12px;font-size:18px;
  font-weight:700;color:var(--accent)}

/* ---------- KPI / stat tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.kpi-label{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.kpi-value{font-size:22px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi.accent .kpi-value{color:var(--accent)}
.kpi.good .kpi-value{color:var(--good)}
.kpi.warn .kpi-value{color:var(--warn)}
.kpi.bad .kpi-value{color:var(--bad)}

/* ---------- Home hub ---------- */
.home-hero{background:linear-gradient(135deg,var(--accent-soft),transparent);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;margin-bottom:20px}
.home-hero h1{margin:0 0 6px;font-size:26px}
.home-hero p{margin:0;color:var(--muted)}
.hub-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px}
.hub-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:all .15s;display:block}
.hub-tile:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-2px);text-decoration:none}
.hub-tile-ico{font-size:24px;color:var(--accent);margin-bottom:8px}
.hub-tile h3{margin:0 0 4px;font-size:15px;color:var(--text)}
.hub-tile p{margin:0;font-size:12px;color:var(--muted);line-height:1.4}

/* ---------- Lists ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.list-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s}
.list-item:hover{border-color:var(--accent);background:var(--panel-2)}
.list-item-body{flex:1;min-width:0}
.list-item-title{font-weight:600;font-size:14px}
.list-item-sub{font-size:12px;color:var(--muted);margin-top:2px}
.list-item-right{text-align:right;flex-shrink:0}
.list-item-amount{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-ico{font-size:36px;margin-bottom:10px;opacity:.4}
.empty p{margin:0 0 14px}

/* ---------- AI panel ---------- */
.ai-panel{position:fixed;right:20px;bottom:20px;width:380px;max-width:calc(100vw - 40px);
  height:520px;max-height:calc(100vh - 100px);background:var(--panel);border:1px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);z-index:80;display:flex;flex-direction:column;overflow:hidden}
.ai-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:var(--panel-2);border-bottom:1px solid var(--line)}
.ai-body{flex:1;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.ai-msg{padding:8px 12px;border-radius:10px;font-size:13px;max-width:85%}
.ai-msg--bot{background:var(--panel-2);color:var(--text);align-self:flex-start}
.ai-msg--user{background:var(--accent);color:#0e0e10;align-self:flex-end;font-weight:500}
.ai-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:var(--panel-2)}
.ai-input input{flex:1}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--accent);color:var(--text);padding:10px 18px;border-radius:10px;
  box-shadow:var(--shadow);z-index:200;font-size:14px;animation:toast-in .2s}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(40,35,25,.45);backdrop-filter:blur(4px);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-card.modal--large{max-width:1100px;width:100%;height:95vh;max-height:95vh;display:flex;flex-direction:column;overflow:hidden}
.modal-card.modal--large .modal-head{flex-shrink:0}
.modal-card.modal--large .modal-foot{flex-shrink:0}
.modal-card.modal--large .modal-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:14px 14px 0}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head h2{margin:0}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

/* ---------- Multi-browse modal ---------- */
.browse{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}
.browse-sub{margin-bottom:2px}
.browse-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;border-bottom:1px solid var(--line);flex-shrink:0}
.browse-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;
  border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;color:var(--muted);
  font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .12s}
.browse-tab:hover{color:var(--text);background:#ffffff06}
.browse-tab.on{color:var(--text);background:var(--bg);border-color:var(--accent);box-shadow:0 -2px 0 var(--accent) inset}
.browse-tab-flag{font-size:10px;padding:1px 6px;border-radius:4px;background:#ffffff10;letter-spacing:.5px}
.browse-stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.browse-iframe-wrap{display:none;flex-direction:column;flex:1;min-height:0;gap:8px;padding-top:10px}
.browse-iframe-wrap.on{display:flex}
.browse-url-bar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#ffffff06;border:1px solid var(--line);border-radius:8px;flex-shrink:0}
.browse-url{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browse-iframe-holder{flex:1;min-height:0;position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0008}
.browse-iframe{width:100%;height:100%;border:0;display:block;background:#fff}
/* Banner no bloqueante que aparece arriba del iframe si el load tarda mucho.
   El usuario puede descartarlo (×) si la página sí cargó, o abrir en pestaña
   si ve que realmente está bloqueada. */
.browse-blocked{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  background:rgba(20,20,24,.92);backdrop-filter:blur(4px);padding:10px 12px;text-align:left;
  border-bottom:1px solid var(--line);z-index:2;font-size:12px}
.browse-blocked p{margin:0;flex:1;color:var(--muted);font-size:12px}
.browse-blocked .browse-blocked-close{background:transparent;border:1px solid var(--line);color:var(--muted);
  width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:14px;flex-shrink:0}
.browse-blocked .browse-blocked-close:hover{color:var(--text);border-color:var(--accent)}

/* Card que reemplaza al iframe cuando el sitio bloquea embeds (Amazon, eBay, etc.) */
.browse-noembed{display:flex;align-items:center;justify-content:center;background:var(--panel);padding:40px 20px}
.browse-noembed-card{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.browse-noembed-icon{font-size:48px;opacity:.5}
.browse-noembed-title{font-size:15px;font-weight:600;color:var(--text);margin:0}
.browse-noembed-card .muted{margin:0}

/* ---------- Capture pieza modal (Abrir sitios → pegar link + precio) ---------- */
.capture{display:flex;flex-direction:column;gap:6px}
.capture label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:0 0 4px}
.capture input, .capture select{width:100%;box-sizing:border-box}
.capture-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.capture-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel-2);color:var(--text);text-decoration:none;font-size:12px;font-weight:500;
  transition:background .15s, border-color .15s}
.capture-chip:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}
.capture-chip-flag{font-size:10px;padding:1px 5px;border-radius:4px;background:var(--bg);color:var(--muted);letter-spacing:.5px}
.capture-chip-arrow{opacity:.6;font-size:12px}
.capture-step{font-size:13px;font-weight:600;color:var(--text);margin:12px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.capture-row{display:flex;gap:10px;margin-top:10px}
.capture-row > div{display:flex;flex-direction:column}

/* Pieza-row: fijar ancho del precio y del grupo A/B para que los controles
   queden alineados entre filas aunque el monto tenga distintos dígitos. */
.pieza-row .card-total{min-width:96px;text-align:right;display:inline-block}
.pieza-row .pieza-ab{flex-shrink:0}
.pieza-row .pieza-link-btn{flex-shrink:0}
.pieza-row .card-meta{justify-content:flex-end}

/* ---------- Pieza-row header inline controls (elegida A/B + open link) ---------- */
.pieza-ab{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.pieza-ab-btn{width:30px;height:28px;border:0;background:var(--panel);color:var(--muted);
  font-size:12px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:background .12s, color .12s;padding:0}
.pieza-ab-btn + .pieza-ab-btn{border-left:1px solid var(--line)}
.pieza-ab-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text)}
.pieza-ab-btn.on{background:#1f8a3f;color:#fff}
.pieza-ab-btn.on:hover:not(:disabled){background:#26a44b;color:#fff}
.pieza-ab-btn:disabled, .pieza-ab-btn.is-empty{opacity:.3;cursor:not-allowed;color:var(--muted)}
.pieza-link-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--text);
  text-decoration:none;font-size:14px;font-weight:700;cursor:pointer;transition:background .12s, color .12s, border-color .12s}
.pieza-link-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pieza-link-btn.is-disabled{opacity:.35;cursor:not-allowed}
.pieza-link-btn.is-disabled:hover{background:var(--panel);color:var(--text);border-color:var(--line)}

/* ---------- Status badges ---------- */
.state-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px}
.state-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state--borrador{background:rgba(0,0,0,.06);color:var(--muted)}
.state--cotizado{background:rgba(106,140,175,.18);color:var(--blue)}
.state--aprobado{background:rgba(122,157,78,.18);color:var(--good)}
.state--esperando{background:rgba(212,160,92,.18);color:var(--warn)}
.state--en_camino{background:rgba(168,85,247,.18);color:#9551d4}
.state--recibidas{background:rgba(106,140,175,.18);color:var(--blue)}
.state--en_proceso{background:rgba(184,146,74,.18);color:var(--accent-2)}
.state--terminado{background:rgba(122,157,78,.18);color:var(--good)}
.state--entregado{background:rgba(0,0,0,.08);color:var(--muted)}
.state--cancelado{background:rgba(196,82,76,.18);color:var(--bad)}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main{margin-left:0}
  .topbar-menu{display:inline-flex}
  .view{padding:16px}
  .ai-panel{right:10px;bottom:10px;width:calc(100vw - 20px);height:calc(100vh - 90px)}
}

/* ---------- Urgencia block (labor card) ---------- */
.urg-block{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;
  padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:var(--panel-2)}
.urg-toggle{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer;user-select:none}
.urg-toggle input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)}
.urg-toggle-text{line-height:1}
.urg-pct{display:flex;align-items:center;gap:8px;white-space:nowrap}
.urg-pct input{width:64px;text-align:right}
.urg-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px;text-align:right}
.urg-total .small{line-height:1;letter-spacing:.4px;text-transform:uppercase;font-size:10px}
.urg-total strong{font-size:15px;font-variant-numeric:tabular-nums;line-height:1.1}
@media (max-width:700px){
  .urg-block{grid-template-columns:1fr;gap:10px}
  .urg-total{align-items:flex-start}
}

/* ---------- Sitios multi-select (búsqueda piezas) ---------- */
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-top:6px}
.site-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  background:var(--panel);border-radius:8px;cursor:pointer;user-select:none;font-size:12px;transition:all .12s}
.site-pill:hover{border-color:var(--accent);background:var(--panel-2)}
.site-pill input{margin:0;width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
.site-pill.on{border-color:var(--accent);background:var(--accent-soft)}
.site-pill-flag{font-size:11px;color:var(--muted);margin-left:auto}

/* ---------- AI result thumbnails (sin imagen) ---------- */
.ai-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.ai-thumb{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:all .15s;position:relative;display:flex;flex-direction:column;min-height:120px}
.ai-thumb:hover{border-color:var(--accent);transform:translateY(-2px)}
.ai-thumb-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.ai-thumb-site{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.ai-thumb-title{font-size:13px;font-weight:600;line-height:1.3;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ai-thumb-np{font-family:monospace;font-size:11px;color:var(--muted)}
.ai-thumb-price{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;margin-top:auto}
.ai-thumb-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:14px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.ai-thumb:hover .ai-thumb-del{opacity:1}

/* Quickview modal content (sin imagen) */
.quickview{display:flex;flex-direction:column;gap:10px}
.quickview--nopic .quickview-meta{display:flex;flex-direction:column;gap:8px}
.quickview-meta{display:flex;flex-direction:column;gap:8px}
.quickview-meta .site-tag{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.quickview-meta .title{font-size:17px;font-weight:700;margin:0}
.quickview-meta .np{font-family:monospace;font-size:12px;color:var(--muted)}
.quickview-meta .price{font-size:22px;color:var(--accent);font-weight:800}
.quickview-meta .detalle{font-size:13px;color:var(--text);line-height:1.5}
.quickview--embed{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;flex:1}
.quickview--embed .quickview-meta{flex-shrink:0}
.quickview--embed .browse-iframe-holder{flex:1;min-height:320px}

/* ---------- Utility ---------- */
.hr{height:1px;background:var(--line);margin:14px 0;border:0}
.flex{display:flex}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-14{gap:14px}
.center{align-items:center}.between{justify-content:space-between}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-20{margin-top:20px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-14{margin-bottom:14px}.mb-20{margin-bottom:20px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.tabular{font-variant-numeric:tabular-nums}
.right{text-align:right}
.small{font-size:12px}

/* ---------- Resumen flotante por pestaña ---------- */
.tab-floating-summary{
  position:sticky;
  bottom:14px;
  margin:24px 0 10px;
  background:var(--panel-2);
  border:1px solid var(--accent);
  border-radius:12px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:30;
}
.tab-fs-block{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tab-fs-block strong{
  font-size:18px;font-variant-numeric:tabular-nums;font-weight:800;
  color:var(--text);letter-spacing:.3px;
}
.tab-fs-block.tab-fs-total{flex:0 0 auto;text-align:right}
.tab-fs-block.tab-fs-total strong{font-size:20px;color:var(--accent)}
.tab-fs-divider{
  width:1px;height:32px;background:var(--line);
  flex-shrink:0;opacity:.6;
}
@media (max-width: 720px){
  .tab-floating-summary{
    flex-direction:row;gap:12px;padding:10px 14px;
    bottom:8px;
  }
  .tab-fs-block strong{font-size:16px}
  .tab-fs-block.tab-fs-total strong{font-size:17px}
}

/* ---------- Calibrador de anticipo ---------- */
.ant-grid{display:flex;flex-direction:column;gap:8px}
.ant-row{
  display:grid;grid-template-columns:1fr auto;gap:14px;
  align-items:center;
  padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;
  transition:border-color .15s,background .15s;
}
.ant-row--on{border-color:var(--accent);background:var(--panel-2)}
.ant-toggle{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:0;flex-wrap:wrap;
}
.ant-toggle input[type=checkbox]{width:16px;height:16px;cursor:pointer}
.ant-row-title{font-weight:600;font-size:14px;color:var(--text)}
.ant-row-hint{margin-left:0}
/* Tres columnas fijas (modo / input / resultado) para que cuando los
   montos crezcan ($19,443.15) las tres filas queden perfectamente
   alineadas verticalmente. Antes era flex y el contenido empujaba todo. */
.ant-controls{
  display:grid;
  grid-template-columns:auto 110px minmax(140px,auto);
  align-items:center;gap:10px;
}
.ant-mode{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ant-mode-btn{
  background:transparent;border:none;color:var(--muted);
  padding:6px 12px;font-size:12px;font-weight:600;
  cursor:pointer;letter-spacing:.3px;
}
.ant-mode-btn.on{background:var(--accent);color:#ffffff}
.ant-mode-btn:not(.on):hover{background:var(--panel-2);color:var(--text)}
.ant-controls input[type=number]{
  width:100%;font-variant-numeric:tabular-nums;text-align:right;
}
.ant-row-result{
  text-align:right;
  font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ant-summary{
  background:var(--panel-2);border-radius:6px;padding:10px 12px;
  border:1px dashed var(--line);
}
.ant-summary .summary-row{padding:3px 0}
.ant-summary strong{font-variant-numeric:tabular-nums}

@media (max-width: 720px){
  .ant-row{grid-template-columns:1fr;gap:8px}
  .ant-controls{grid-template-columns:auto 1fr minmax(120px,auto)}
}

/* ---------- Asignación NA/NK/EXT en líneas de mano de obra ---------- */
td.lab-asign-cell{
  width:120px;max-width:120px;
  padding:6px 4px;
  white-space:nowrap;
}
.lab-asign{
  display:inline-block;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.4px;
  padding:4px 7px;
  margin:0 2px;
  border-radius:5px;
  cursor:pointer;
  transition:all .12s;
  font-family:inherit;
}
.lab-asign:hover{border-color:var(--accent);color:var(--text)}
.lab-asign.on{background:var(--accent);border-color:var(--accent);color:#ffffff}

/* ---------- Repartición ---------- */
.rep-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.rep-line{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;align-items:center;
  padding:8px 12px;
  background:var(--panel-2);
  border-radius:6px;
  font-size:13px;
}
.rep-line--ext{
  grid-template-columns:1fr auto auto auto;
}
.rep-line-name{font-weight:600;color:var(--text)}
.rep-line-meta{color:var(--muted);font-size:12px}
.rep-line-amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);text-align:right}
.rep-line-ext{display:flex;flex-direction:column;gap:2px}
.rep-line-ext input{width:100px;padding:5px 8px;font-size:12px}

/* ---------- Manuales ---------- */
.manual-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;
}
.manual-card{
  display:flex;align-items:center;gap:14px;padding:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--text);transition:transform .15s,border-color .15s,background .15s;
}
.manual-card:hover{
  transform:translateY(-2px);border-color:var(--accent);background:var(--panel-2);
}
.manual-card-ico{font-size:32px;line-height:1;flex-shrink:0}
.manual-card-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.manual-card-body strong{font-size:15px}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.ai-panel,.toast,.card-meta,.caret,.card-total,.internal-block,.internal-col,.topbar-actions,.addbtn,.delbtn,.icon-btn,.noprint,.tab-floating-summary{display:none!important}
  .main{margin-left:0}
  .view{padding:0;max-width:none}
  body{background:#fff;color:#000}
  .card{background:#fff;border:1px solid #ccc;box-shadow:none;break-inside:avoid}
  .card.collapsed .card-body{display:block!important}
  th,td{color:#000!important;border-color:#ccc}
  .card h2{color:#000}
}

/* =====================================================
   COTIZACIÓN — vista cliente (en pantalla y en impresión)
   ===================================================== */
.cot-toolbar{display:flex;gap:10px;justify-content:flex-end;margin-bottom:18px}

.cotizacion{
  background:#fff;color:#0e0e10;
  max-width:820px;margin:0 auto;
  padding:32px 36px;
  font-family:inherit;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  font-size:13px;line-height:1.45;
}
.cotizacion h1,.cotizacion h2,.cotizacion h3{color:#0e0e10}

.cot-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:3px solid #0e0e10;
  padding-bottom:14px;margin-bottom:18px;
}
.cot-head-left{display:flex;align-items:center;gap:14px}
.cot-logo{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.cot-head-left h1{font-size:18px;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin:0 0 2px}
.cot-head-right{text-align:right}
.cot-head-right h2{font-size:22px;font-weight:900;letter-spacing:3px;margin:0 0 4px;color:#ff7a1a}
.cot-folio{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin:0 0 2px}
.cot-meta{font-size:11px;color:#555;margin:0;letter-spacing:.3px}

.cot-info{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  background:#f6f6f6;border:1px solid #e2e2e2;
  padding:12px 14px;border-radius:6px;margin-bottom:16px;
}
.cot-info-block h3{
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:#666;font-weight:700;margin:0 0 6px;
}
.cot-info-block p{margin:1px 0;font-size:12px}

.cot-section{margin-bottom:14px;break-inside:avoid;page-break-inside:avoid}
.cot-section h2{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:#0e0e10;border-bottom:1px solid #d4d4d4;
  padding-bottom:4px;margin:0 0 8px;font-weight:800;
}
.cot-section h3{
  font-size:11px;letter-spacing:1.3px;text-transform:uppercase;
  color:#444;margin:0 0 6px;font-weight:700;
}
.cot-desc{margin:0;font-size:12.5px;color:#222}
.cot-desc-section{background:#fafafa;padding:10px 12px;border-radius:4px}

.cot-list{margin:0 0 6px;padding:0 0 0 18px;font-size:12.5px}
.cot-list li{margin:2px 0;color:#222}
.cot-list--exp li{color:#444}

.cot-mat-cant{
  display:inline-block;min-width:48px;
  font-variant-numeric:tabular-nums;font-weight:700;color:#0e0e10;
}

.cot-piezas-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:4px}
.cot-piezas-tbl tr{border-bottom:1px dotted #e2e2e2}
.cot-piezas-tbl tr:last-child{border-bottom:none}
.cot-piezas-tbl td{padding:5px 0;vertical-align:top;color:#222}
.cot-pieza-tag{
  display:inline-block;font-size:10px;
  background:#eee;color:#444;padding:1px 7px;border-radius:8px;
  margin-left:8px;letter-spacing:.4px;text-transform:uppercase;
  font-weight:600;vertical-align:middle;
}
.cot-pieza-price{
  text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;white-space:nowrap;color:#0e0e10;
}

.cot-section-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:6px;padding:6px 10px;background:#f3f3f3;border-radius:4px;
  font-size:12.5px;
}
.cot-section-total span{color:#444;font-weight:600}
.cot-section-total strong{font-variant-numeric:tabular-nums;font-size:14px;color:#0e0e10}

.cot-note{margin:4px 0;font-size:11px;color:#666;font-style:italic}

.cot-totals{
  margin:18px 0 14px;
  background:#fafafa;border:1px solid #e2e2e2;
  border-radius:6px;padding:12px 16px;
  break-inside:avoid;page-break-inside:avoid;
}
.cot-tot-row{
  display:flex;justify-content:space-between;
  padding:3px 0;font-size:13px;
}
.cot-tot-row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.cot-tot-grand{
  margin-top:6px;padding:8px 0 4px;
  border-top:2px solid #0e0e10;
  font-size:16px;font-weight:900;letter-spacing:.5px;
}
.cot-tot-grand span{color:#0e0e10}
.cot-tot-grand span:last-child{color:#ff7a1a;font-size:18px}
.cot-tot-desc span:last-child{color:#1a7a3a}
.cot-tot-hint{font-size:10px;color:#888;font-weight:400;margin-left:4px}
.cot-tot-pago{padding-top:8px;border-top:1px dashed #ccc;margin-top:4px}
.cot-tot-pago span:last-child{color:#1a7a3a}

.cot-pagos-tbl{width:100%;border-collapse:collapse;font-size:12px}
.cot-pagos-tbl th,.cot-pagos-tbl td{
  padding:4px 6px;text-align:left;border-bottom:1px solid #eee;
}
.cot-pagos-tbl th{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:#666;font-weight:700;
}
.cot-pagos-tbl .right{text-align:right;font-variant-numeric:tabular-nums}

.cot-terms p{font-size:11.5px;color:#333;line-height:1.5}

.cot-foot{
  margin-top:16px;padding-top:10px;
  border-top:1px solid #d4d4d4;
  text-align:center;font-size:10px;color:#888;
  letter-spacing:.3px;
}

/* En modo cotización, el wrapper main no necesita su padding chunky */
body.cot-mode .view{padding:30px 20px}

/* Print: una sola hoja, A4, sin sombras ni marcos */
@media print{
  @page{size:A4 portrait;margin:12mm}
  body.cot-mode{background:#fff!important}
  body.cot-mode .sidebar,
  body.cot-mode .topbar,
  body.cot-mode .ai-panel,
  body.cot-mode .toast,
  body.cot-mode .cot-toolbar,
  body.cot-mode .crumb,
  body.cot-mode .topbar-actions{display:none!important}
  body.cot-mode .main{margin-left:0!important}
  body.cot-mode .view{padding:0!important;max-width:none!important}
  .cotizacion{
    box-shadow:none!important;border-radius:0!important;
    max-width:none!important;margin:0!important;padding:0!important;
    font-size:11.5px;line-height:1.4;
  }
  .cot-head-left h1{font-size:16px}
  .cot-head-right h2{font-size:18px;color:#0e0e10!important}
  .cot-tot-grand span:last-child{color:#0e0e10!important}
}

/* =====================================================
   SOUL JUICE — estilos específicos
   ===================================================== */

/* Status badges adicionales (eventos: tentativo / confirmado / completed) */
.state--tentative{background:rgba(212,160,92,.18);color:var(--warn)}
.state--confirmed{background:rgba(122,157,78,.18);color:var(--good)}
.state--completed{background:rgba(0,0,0,.08);color:var(--muted)}
.state--cancelled{background:rgba(196,82,76,.18);color:var(--bad)}

/* Calendario mensual */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-head>div{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;padding:4px 0}
.cal-cell{aspect-ratio:1/1.05;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:6px;display:flex;flex-direction:column;gap:3px;font-size:12px;min-height:84px;overflow:hidden}
.cal-cell.empty{background:transparent;border-color:transparent}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft) inset}
.cal-cell-num{font-weight:700;font-size:12px;color:var(--muted)}
.cal-cell.today .cal-cell-num{color:var(--accent)}
.cal-evt{display:block;padding:2px 6px;border-radius:5px;font-size:11px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid transparent;
  text-decoration:none}
.cal-evt:hover{filter:brightness(1.15);text-decoration:none}
.cal-evt--tentative{background:rgba(212,160,92,.18);color:#7a5a20;border-left-color:var(--warn)}
.cal-evt--confirmed{background:rgba(122,157,78,.18);color:#3e5527;border-left-color:var(--good)}
.cal-evt--completed{background:rgba(0,0,0,.06);color:var(--muted);border-left-color:var(--muted)}
.cal-evt--cancelled{background:rgba(196,82,76,.18);color:#7a2a26;border-left-color:var(--bad);text-decoration:line-through}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav .cal-month{font-size:18px;font-weight:700;text-transform:capitalize;min-width:200px;text-align:center}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;font-size:12px}
.cal-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Tabs internos del proyecto (en detalle) */
.proj-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.proj-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;background:transparent;
  border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;color:var(--muted);
  font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .12s;font-weight:600}
.proj-tab:hover{color:var(--text);background:var(--panel-2)}
.proj-tab.on{color:var(--accent);background:var(--bg);border-color:var(--accent);box-shadow:0 -2px 0 var(--accent) inset}

/* Schedule timeline */
.sched-list{display:flex;flex-direction:column;gap:6px}
.sched-row{display:grid;grid-template-columns:90px 1fr 40px;gap:10px;align-items:start;
  padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.sched-row input[type=time]{font-variant-numeric:tabular-nums;text-align:center;font-weight:700}
.sched-row-body{display:flex;flex-direction:column;gap:6px}
.sched-row-body select{font-weight:600}

/* Brief grid */
.brief-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.brief-q{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.brief-q-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600}
.brief-q textarea{min-height:54px}

/* Playlist / Special song rows */
.song-row,.pl-row{display:grid;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.song-row{grid-template-columns:160px 1fr 1fr 1fr 40px}
.pl-row{grid-template-columns:1fr 160px 1.5fr 40px}
@media(max-width:760px){.song-row,.pl-row{grid-template-columns:1fr}}

/* DJ chips selector */
.dj-chips{display:flex;gap:8px;flex-wrap:wrap}
.dj-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-2);cursor:pointer;user-select:none;font-weight:600;font-size:13px;transition:all .12s}
.dj-chip:hover{border-color:var(--accent)}
.dj-chip.on{background:var(--accent);color:#ffffff;border-color:var(--accent)}
.dj-chip-code{font-size:10px;background:rgba(0,0,0,.08);padding:2px 6px;border-radius:4px;letter-spacing:.5px}
.dj-chip.on .dj-chip-code{background:rgba(0,0,0,.25);color:#fff}

/* Package selector (radio-style cards) */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:14px}
.pkg-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s}
.pkg-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.pkg-card.on{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),transparent)}
.pkg-card h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pkg-card .pkg-tier{font-size:12px;color:var(--accent);letter-spacing:1px}
.pkg-card .pkg-price{font-size:18px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;margin-top:6px}
.pkg-card .pkg-pax{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* =====================================================
   LOCKSCREEN — full-screen login antes de tener sesión
   ===================================================== */
body.locked .sidebar,
body.locked .topbar { display:none !important; }
body.locked .main   { margin-left:0; }
body.locked .view   {
  max-width:460px; margin:0 auto; padding:0;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}

.lockscreen-wrap{
  width:100%; padding:32px 24px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.lockscreen-logo{
  width:96px; height:96px; border-radius:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.lockscreen-title{
  font-size:22px; font-weight:800; text-align:center; margin:0;
  letter-spacing:.2px;
}
.lockscreen-sub{
  font-size:13px; color:var(--muted); text-align:center; margin:0;
  max-width:340px; line-height:1.45;
}
.lockscreen-card{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:22px;
  box-shadow:0 8px 28px rgba(0,0,0,.07);
}
.lockscreen-card label{ margin-top:0; }
.lockscreen-card input[type=email],
.lockscreen-card input[type=text]{
  font-size:15px; padding:12px 14px;
}
.lockscreen-otp{
  font-size:28px !important; letter-spacing:8px !important;
  text-align:center; font-family:ui-monospace,SFMono-Regular,monospace !important;
  padding:14px !important;
}
.lockscreen-remember{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  user-select:none; font-size:13px; color:var(--muted);
  margin-top:12px;
}
.lockscreen-remember input{
  width:auto; margin:0; cursor:pointer; accent-color:var(--accent);
}
.lockscreen-foot{
  font-size:11px; color:var(--muted-2); text-align:center;
  margin-top:8px;
}

/* =====================================================
   TAREAS — Kanban en dashboard (3 columnas: CS / NK / DP)
   ===================================================== */
.kanban{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:24px;
}
.kanban-col{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:140px;
}
.kanban-col-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.kanban-col-title{
  font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.7px;
  display:flex; align-items:center; gap:8px;
}
.kanban-col-code{
  background:var(--panel); color:var(--accent);
  padding:2px 7px; border-radius:5px;
  font-size:10px; letter-spacing:.6px;
  border:1px solid var(--line);
}
.kanban-col-count{
  background:var(--accent-soft); color:var(--accent);
  font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:999px;
}
.kanban-task{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px;
  display:flex; align-items:flex-start; gap:8px;
  transition:border-color .15s, opacity .15s;
}
.kanban-task:hover{ border-color:var(--accent); }
.kanban-task input[type=checkbox]{
  margin-top:5px; cursor:pointer; accent-color:var(--accent);
  width:14px; height:14px; flex-shrink:0;
}
.kanban-task-body{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;
}
.kanban-task-title{
  border:none; background:transparent; padding:2px 0;
  font-size:13px; width:100%;
}
.kanban-task-title:focus{ outline:none; }
.kanban-task.done{ opacity:.5; }
.kanban-task.done .kanban-task-title{
  text-decoration:line-through; color:var(--muted);
}
.kanban-task-meta{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted);
}
.kanban-task-meta select{
  padding:2px 6px; font-size:11px; height:auto;
  background:transparent; border:1px solid var(--line);
}
.kanban-task .delbtn{
  opacity:0; transition:opacity .12s; padding:0 4px;
  font-size:16px; flex-shrink:0;
}
.kanban-task:hover .delbtn{ opacity:1; }
.kanban-add{
  margin-top:auto;
  text-align:center; padding:8px;
  border:1px dashed var(--line); border-radius:8px;
  color:var(--muted); cursor:pointer; font-size:12px;
  background:transparent; font-family:inherit;
}
.kanban-add:hover{ border-color:var(--accent); color:var(--accent); background:var(--panel); }
.kanban-empty{
  font-size:12px; color:var(--muted-2); text-align:center;
  padding:14px 8px; font-style:italic;
}

@media (max-width:900px){
  .kanban{ grid-template-columns:1fr; }
}

/* =====================================================
   PROYECTOS — secciones (Pendientes / Por venir / Pasados)
   ===================================================== */
.proj-section{ margin-bottom:32px; }
.proj-section-title{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
  font-weight:700;
}
.proj-section-dot{
  width:9px; height:9px; border-radius:50%;
}
.proj-section-dot--warn{ background:var(--warn); }
.proj-section-dot--good{ background:var(--good); }
.proj-section-dot--muted{ background:var(--muted); }
.proj-section-dot--bad{ background:var(--bad); }
.proj-section-empty{
  padding:14px 16px;
  background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  font-style:italic;
}
.list-item-meta{
  margin-top:4px;
  display:flex; align-items:center; gap:8px;
}
.initials-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  padding:2px 7px; border-radius:4px;
  font-size:10px; font-weight:800; letter-spacing:.6px;
  font-family:ui-monospace,SFMono-Regular,monospace;
}

/* Nombre del editor en "Última actualización por XX" */
.editor-name{
  color:var(--accent);
  font-weight:600;
}

/* =====================================================
   JUNTAS — tarjetas de minuta
   ===================================================== */
.juntas-list{
  display:flex; flex-direction:column; gap:14px;
}
.junta-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  transition:border-color .15s;
}
.junta-card:hover{ border-color:var(--accent-soft); }
.junta-card-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.junta-card-head input,
.junta-card-head select{ flex-shrink:0; }
.junta-attendees{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.junta-attendees-label{
  text-transform:uppercase; letter-spacing:.5px;
  font-weight:600; margin-right:6px;
}
.dj-chip--sm{
  font-size:11px; padding:4px 9px;
}
.dj-chip--sm .dj-chip-code{
  font-size:9px; padding:1px 4px;
}
@media(max-width:760px){
  .junta-card-head input,
  .junta-card-head select{ width:100% !important; }
}

/* Badge de tipo de junta en la cabecera de la tarjeta */
.junta-type-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  background:var(--accent-soft); color:var(--accent);
  border-radius:6px;
  font-size:12px; font-weight:600;
  white-space:nowrap;
}

/* =====================================================
   CONTACT PICKER — campo clickeable y modal de selección
   ===================================================== */
.contact-picker{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 12px;
  font-size:14px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  transition:border-color .12s, background .12s;
  font-family:inherit;
  min-height:38px;
}
.contact-picker:hover{ border-color:var(--accent); }
.contact-picker.linked{
  background:var(--accent-soft);
  border-color:rgba(184,146,74,.3);
}
.contact-picker-name{
  font-weight:600; color:var(--text);
}
.contact-picker-placeholder{
  color:var(--muted);
}
.contact-picker-icon{
  font-size:14px; color:var(--muted); flex-shrink:0;
}
.contact-picker.linked .contact-picker-icon{ color:var(--accent); }

.contact-picker-list{
  max-height:260px; overflow-y:auto;
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel);
}
.contact-picker-item{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background .12s;
}
.contact-picker-item:last-child{ border-bottom:none; }
.contact-picker-item:hover{ background:var(--accent-soft); }
.contact-picker-item.on{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  padding-left:11px;
}
.contact-picker-item-name{ font-weight:600; }
.contact-picker-item-meta{ margin-top:2px; }
.contact-picker-empty{
  padding:18px; text-align:center;
  color:var(--muted); font-style:italic;
}

/* =====================================================
   COTIZACIÓN v2 — layout Soul Juice template
   ===================================================== */
.quote-scroll{overflow-y:auto;background:#e8e8e8;padding:20px}
.quote-toolbar{display:flex;gap:10px;margin-bottom:18px;align-items:center;flex-wrap:wrap}

.quote-page{
  background:#fff; color:#111;
  max-width:820px; margin:0 auto;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.45;
  display:flex; flex-direction:column;
  min-height:1100px;
}

/* Red header with logo */
.quote-header{
  background:#f8404e;
  padding:36px 20px 44px;
  display:flex; justify-content:center; align-items:center;
}
.quote-header-logo{
  width:120px; height:120px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.quote-header-logo img{
  width:110px; height:110px; object-fit:contain; border-radius:50%;
}

/* Content padding */
.quote-content{
  flex:1;
  padding:26px 44px 32px;
}

/* Client + date row */
.quote-client-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:8px;
}
.quote-client-name{ font-size:15px; font-weight:400; }
.quote-client-email{ font-size:14px; color:#111; }
.quote-quote-date{ font-size:15px; font-weight:400; }

.quote-hr{
  border:none; border-top:1px solid #ddd; margin:12px 0 20px;
}

/* Title */
.quote-title{
  font-size:28px; font-weight:400; letter-spacing:.5px;
  margin:0 0 22px; color:#111;
}

/* Metadata rows */
.quote-meta{ margin-bottom:26px; }
.quote-meta-row{
  display:flex; align-items:baseline; padding:4px 0;
  font-size:14px;
}
.quote-meta-label{
  color:#555; text-transform:uppercase; letter-spacing:1px;
  font-size:13px; min-width:130px; display:inline-block;
}
.quote-meta-val{ color:#111; }

/* Package(s) big columns */
.quote-packages{
  display:flex; gap:8px; align-items:flex-start;
  margin-bottom:22px;
}
.quote-pkg-col{ flex:1; min-width:0; }
.quote-pkg-plus{
  font-size:56px; font-weight:400; color:#111;
  padding-top:18px; align-self:flex-start;
}
.quote-pkg-big{ margin-bottom:16px; }
.quote-pkg-big-top{
  font-size:56px; font-weight:900; letter-spacing:-1px;
  line-height:1; color:#111;
}
.quote-pkg-big-bottom{
  font-size:38px; font-weight:300; letter-spacing:0;
  line-height:1; color:#111; margin-top:2px;
}
.quote-pkg-list{
  list-style:none; padding:0; margin:0;
  font-size:14px;
}
.quote-pkg-list li{
  padding:2px 0; color:#111;
}

/* Cost lines */
.quote-cost-line{
  display:flex; align-items:flex-start;
  gap:12px; margin:14px 0 4px;
}
.quote-cost-block{ flex:1; }
.quote-cost-name{ font-size:14px; font-weight:600; }
.quote-cost-price{ font-size:14px; font-weight:600; margin-top:2px; }
.quote-cost-plus{
  font-size:24px; font-weight:400; padding-top:4px;
}

/* Total */
.quote-total{
  margin:22px 0 18px;
}
.quote-total-label{
  font-size:15px; font-weight:600; margin-bottom:6px;
}
.quote-total-amount{
  font-size:48px; font-weight:300; letter-spacing:-1px; line-height:1;
}
.quote-total-mxn{ font-size:14px; font-weight:400; color:#555; margin-left:8px; }

/* Important notes */
.quote-notes{ margin:22px 0 12px; }
.quote-notes-title{
  text-transform:uppercase; letter-spacing:1px;
  font-size:12px; color:#555; margin-bottom:6px;
}
.quote-notes ul{ margin:0; padding-left:18px; font-size:13px; }
.quote-notes li{ padding:1px 0; list-style:'·  '; }

/* Signature */
.quote-signature{
  text-align:center; margin-top:26px; margin-bottom:12px;
}
.quote-sig-name{ font-size:14px; font-weight:400; }
.quote-sig-brand{
  color:#f8404e; font-weight:800; font-size:15px;
  margin-top:2px;
}
.quote-sig-tag{
  text-transform:uppercase; letter-spacing:2px;
  font-size:10px; color:#555; margin-top:1px;
}

/* Red footer */
.quote-footer{
  background:#f8404e; color:#fff;
  padding:16px 30px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; flex-wrap:wrap; gap:12px;
}
.quote-footer-web{
  font-weight:800; font-size:15px;
  font-style:italic;
}

/* Print */
@media print{
  @page{ size:A4 portrait; margin:0; }
  body.cot-mode{ background:#fff!important; }
  body.cot-mode .sidebar,
  body.cot-mode .topbar,
  body.cot-mode .modal,
  body.cot-mode .toast,
  body.cot-mode .quote-toolbar,
  body.cot-mode .no-print{ display:none!important; }
  body.cot-mode .main{ margin-left:0!important; }
  body.cot-mode .view{ padding:0!important; max-width:none!important; }
  body.cot-mode .quote-scroll{ background:#fff; padding:0; overflow:visible; }
  body.cot-mode .modal-body{ padding:0!important; }
  body.cot-mode .quote-page{
    box-shadow:none; margin:0; max-width:none;
    page-break-inside:avoid;
  }
  body.cot-mode .modal-card{
    box-shadow:none!important; border:none!important; background:#fff!important;
    max-width:none!important; width:100%!important; height:auto!important;
    max-height:none!important;
  }
}

/* Responsive small screens: apila columnas */
@media (max-width:700px){
  .quote-packages{ flex-direction:column; }
  .quote-pkg-plus{ align-self:center; padding:0; }
  .quote-cost-line{ flex-direction:column; }
  .quote-cost-plus{ align-self:center; }
  .quote-footer{ font-size:11px; }
}

/* =====================================================
   COTIZACIÓN v2.7 — overrides para fit en una sola hoja
   ===================================================== */

/* Fix: hacer scrollable el modal-body para poder ver el footer del quote */
.modal-card.modal--large .modal-body.quote-scroll{ overflow-y:auto !important; }

/* Compactar header */
.quote-header{ padding:16px 20px 20px !important; }
.quote-header-logo{ width:82px !important; height:82px !important; }
.quote-header-logo img{ width:74px !important; height:74px !important; }

/* Content padding más apretado */
.quote-content{ padding:16px 36px 18px !important; }

/* Cliente + fecha más compacto */
.quote-client-row{ margin-bottom:4px !important; }
.quote-client-name{ font-size:13px !important; }
.quote-client-email{ font-size:12px !important; }
.quote-quote-date{ font-size:13px !important; }

.quote-hr{ margin:8px 0 12px !important; }

.quote-title{ font-size:22px !important; margin:0 0 12px !important; }

/* Metadata rows más apretadas */
.quote-meta{ margin-bottom:14px !important; }
.quote-meta-row{ padding:1px 0 !important; font-size:12.5px !important; }
.quote-meta-label{ font-size:11px !important; min-width:110px !important; }

/* Package section compacto */
.quote-packages{ margin-bottom:12px !important; gap:6px !important; }
.quote-pkg-big{ margin-bottom:8px !important; }
.quote-pkg-big-top{
  font-size:40px !important; font-weight:900 !important;
  letter-spacing:-1px !important;
}
.quote-pkg-big-bottom{
  font-size:26px !important; font-weight:300 !important;
  margin-top:0 !important;
}
.quote-pkg-list{ font-size:12px !important; }
.quote-pkg-list li{ padding:0 !important; line-height:1.35 !important; }

/* Plus symbol GRANDE y visible en rojo Soul Juice */
.quote-pkg-plus{
  font-size:52px !important; font-weight:400 !important;
  color:#f8404e !important; padding-top:6px !important;
  align-self:center !important;
}

/* Cost lines compactos */
.quote-cost-line{
  margin:8px 0 2px !important;
  align-items:center !important;
}
.quote-cost-block{ line-height:1.3 !important; }
.quote-cost-name{ font-size:12.5px !important; }
.quote-cost-price{ font-size:12.5px !important; margin-top:1px !important; }
.quote-cost-usd{ color:#666; font-weight:400; font-size:11px; }
.quote-cost-plus{
  font-size:26px !important; font-weight:700 !important;
  color:#f8404e !important; padding-top:0 !important;
  align-self:center !important;
}

/* TOTAL compacto pero grande */
.quote-total{ margin:12px 0 10px !important; }
.quote-total-label{ font-size:13px !important; margin-bottom:2px !important; }
.quote-total-amount{
  font-size:38px !important; font-weight:300 !important;
  letter-spacing:-1px !important; line-height:1.05 !important;
}
.quote-total-curr{ font-size:22px; font-weight:400; }
.quote-total-usd{ font-size:14px !important; color:#666; margin-left:8px; font-weight:400; }
.quote-total-mxn{ font-size:14px !important; color:#666; margin-left:6px; }

/* Notes compactas */
.quote-notes{ margin:12px 0 6px !important; }
.quote-notes-title{ font-size:11px !important; margin-bottom:3px !important; }
.quote-notes ul{ font-size:12px !important; padding-left:14px !important; }
.quote-notes li{ padding:0 !important; line-height:1.35 !important; }

/* Signature compacta */
.quote-signature{ margin-top:14px !important; margin-bottom:8px !important; }
.quote-sig-name{ font-size:13px !important; }
.quote-sig-brand{ font-size:14px !important; margin-top:1px !important; }
.quote-sig-tag{ font-size:9px !important; letter-spacing:1.6px !important; }

/* Footer más compacto */
.quote-footer{
  padding:10px 24px !important; font-size:11px !important;
  gap:8px !important;
}
.quote-footer-web{ font-size:13px !important; }

/* Quitar min-height para que respire y quepa en una hoja */
.quote-page{ min-height:0 !important; }

/* Print — asegurar una sola hoja A4 */
@media print{
  @page{ size:A4 portrait; margin:0; }
  body.cot-mode .quote-page{
    width:210mm !important;
    max-height:297mm !important;
    overflow:hidden !important;
    page-break-after:avoid !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  body.cot-mode .quote-header,
  body.cot-mode .quote-footer{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}

/* =====================================================
   COTIZACIÓN v2.9 — US Letter + tuning para html2pdf
   ===================================================== */
/* US Letter en pulgadas convertido a px (@96dpi): 8.5" × 11" = 816 × 1056 */
.quote-page{
  width:8.5in !important;
  max-width:8.5in !important;
  min-height:11in !important;
  max-height:11in !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  margin:0 auto !important;
}

/* Ajuste de escala interna: reducir un poco para que quepa cómodo */
.quote-content{ padding:14px 30px 14px !important; }

/* Print (window.print fallback) — usar letter también */
@media print{
  @page{ size:letter portrait; margin:0; }
  body.cot-mode .quote-page{
    width:8.5in !important;
    height:11in !important;
    max-height:11in !important;
    overflow:hidden !important;
  }
}

/* =====================================================
   COTIZACIÓN v2.10 — dimensiones exactas + firma pegada al footer
   ===================================================== */

/* Forzar dimensiones exactas de US Letter y sin overflow visible */
.quote-page{
  width:816px !important;
  min-height:1056px !important;
  max-height:1056px !important;
  height:1056px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  margin:0 auto !important;
}

/* Header y footer no se estiran, content llena el resto */
.quote-header{ flex:0 0 auto !important; }
.quote-footer{ flex:0 0 auto !important; }
.quote-content{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

/* Firma con margin-top:auto → se pega al fondo del content
   (justo arriba del footer), dejando espacio si hay */
.quote-signature{
  margin-top:auto !important;
  padding-top:14px !important;
}

/* =====================================================
   COTIZACIÓN v2.13 — @media print robusto (window.print)
   Esconde TODO menos .quote-page, forza letter size, sin márgenes.
   ===================================================== */
@media print{
  @page{ size: letter portrait; margin: 0; }

  /* Ocultar todo el shell de la app y todos los modales que no sean el actual */
  body.cot-mode #sidebar,
  body.cot-mode #main .topbar,
  body.cot-mode #main .view,
  body.cot-mode .toast,
  body.cot-mode .quote-toolbar,
  body.cot-mode .no-print,
  body.cot-mode #aiPanel{
    display: none !important;
  }

  html, body.cot-mode{
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.cot-mode #app,
  body.cot-mode #main{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  /* Neutralizar el modal para que sólo se vea la .quote-page */
  body.cot-mode #modal{
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    inset: auto !important;
    backdrop-filter: none !important;
  }
  body.cot-mode .modal-card{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
  }
  body.cot-mode .modal-body{
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    display: block !important;
  }

  /* La página de cotización a tamaño Letter exacto */
  body.cot-mode .quote-page{
    width: 8.5in !important;
    max-width: 8.5in !important;
    min-height: 11in !important;
    max-height: 11in !important;
    height: 11in !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.cot-mode .quote-header,
  body.cot-mode .quote-footer{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* =====================================================
   COTIZACIÓN v2.14 — print sin hoja blanca previa
   #main tiene min-height:100vh normal, en print se ocultaba pero seguía
   ocupando espacio antes del modal. Ahora se esconde por completo.
   ===================================================== */
@media print{
  html, body, body.cot-mode{
    margin:0 !important; padding:0 !important;
    background:#fff !important;
    height:auto !important; min-height:0 !important;
  }
  body.cot-mode #app{
    display:block !important;
    margin:0 !important; padding:0 !important;
    height:auto !important; min-height:0 !important;
  }
  /* Oculta el shell entero */
  body.cot-mode #sidebar,
  body.cot-mode #main,
  body.cot-mode #toast,
  body.cot-mode #aiPanel,
  body.cot-mode .quote-toolbar,
  body.cot-mode .no-print{
    display:none !important;
  }
  /* Modal actúa como página */
  body.cot-mode #modal{
    position:static !important;
    inset:auto !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    backdrop-filter:none !important;
    display:block !important;
    width:auto !important; height:auto !important;
  }
  body.cot-mode .modal-card{
    position:static !important;
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    max-width:none !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    display:block !important;
  }
  body.cot-mode .modal-body{
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    background:transparent !important;
    display:block !important;
    height:auto !important;
  }
  body.cot-mode .quote-page{
    width:8.5in !important;
    height:11in !important;
    min-height:11in !important;
    max-height:11in !important;
    margin:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    page-break-after:auto !important;
    page-break-inside:avoid !important;
    display:flex !important;
    flex-direction:column !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  body.cot-mode .quote-header,
  body.cot-mode .quote-footer{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}

/* =====================================================
   COTIZACIÓN v2.16 — clase pdf-capturing + fix logo print
   ===================================================== */

/* Body con .pdf-capturing: neutraliza el modal para que .quote-page
   quede libre y html2canvas la capture limpia. */
body.pdf-capturing #sidebar,
body.pdf-capturing #main,
body.pdf-capturing #toast,
body.pdf-capturing #aiPanel,
body.pdf-capturing .quote-toolbar,
body.pdf-capturing .no-print{
  display:none !important;
}
body.pdf-capturing #app{ display:block !important; margin:0 !important; padding:0 !important; }
body.pdf-capturing #modal{
  position:static !important;
  inset:auto !important;
  background:#fff !important;
  padding:0 !important;
  margin:0 !important;
  backdrop-filter:none !important;
  display:block !important;
}
body.pdf-capturing .modal-card{
  background:#fff !important;
  box-shadow:none !important;
  border:none !important;
  max-width:none !important;
  width:816px !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  display:block !important;
}
body.pdf-capturing .modal-body{
  padding:0 !important;
  overflow:visible !important;
  background:#fff !important;
  display:block !important;
  height:auto !important;
}
body.pdf-capturing .quote-page{
  width:816px !important;
  height:1056px !important;
  min-height:1056px !important;
  max-height:1056px !important;
  margin:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* FIX del logo en print/PDF: forzar el fondo blanco del círculo del logo.
   Chrome ignora backgrounds en print sin print-color-adjust:exact. */
.quote-header-logo{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  background:#ffffff !important;
  box-shadow:none !important;   /* remove shadow que se ve como rectángulo en print */
}
.quote-header-logo img{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  background:transparent !important;
}

/* Universal print-color-adjust en todo el árbol del quote — más robusto */
.quote-page,
.quote-page *,
.pdf-capturing .quote-page,
.pdf-capturing .quote-page *{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

/* Safari: refuerzo del @page + neutralizar defaults */
@media print{
  @page{
    size: 8.5in 11in;
    margin: 0 !important;
  }
  @page :first{ margin: 0 !important; }
  @page :left, @page :right{ margin: 0 !important; }

  html, body{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}

/* =====================================================
   DOCUMENTOS — sidebar templates
   ===================================================== */
.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.doc-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s;
}
.doc-card:hover{ border-color:var(--accent); }
.doc-card--placeholder{ opacity:.65; }
.doc-card-icon{ font-size:32px; }
.doc-card-title{ margin:0; font-size:15px; }
.doc-card-desc{ margin:0; line-height:1.4; }
.doc-card-meta{ letter-spacing:.5px; text-transform:uppercase; font-size:11px; }
.doc-card-actions{ display:flex; gap:8px; margin-top:auto; }

.doc-browser-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.doc-browser-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.doc-browser-row:last-child{ border-bottom:none; }
.doc-browser-row:hover{ background:var(--panel); }
.doc-browser-ico{ font-size:16px; }
.doc-browser-name{ flex:1; color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-browser-name:hover{ text-decoration:underline; }

/* =====================================================
   PAYMENT REQUESTS — tab content
   ===================================================== */
.pr-list{ display:flex; flex-direction:column; gap:14px; }
.pr-item{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:16px;
}
.pr-item-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
}
.pr-item-type{ font-size:16px; font-weight:700; }
.pr-item-amount{
  font-size:22px; font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.pr-item-status{ margin:8px 0 14px; }
.pr-item-fields{
  display:grid; grid-template-columns:1fr 180px; gap:10px; margin-top:8px;
}
.pr-extras{
  background:var(--panel); border-radius:8px; padding:10px; margin-top:10px;
}
.pr-extras-summary{
  background:#f6f6f6; padding:10px 14px; border-radius:6px; margin:10px 0;
  font-size:12.5px;
}
.pr-extras-title{ font-weight:700; margin-bottom:4px; }
.pr-extras-row{ display:flex; justify-content:space-between; padding:2px 0; }

.pr-item-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.pr-kpi{ padding:8px 0; }
.pr-kpi-val{ font-size:20px; font-weight:800; margin-top:4px; }

/* =====================================================
   PAYMENT REQUEST — PDF layout (idéntico al quote)
   ===================================================== */
.pr-page{
  width:816px !important; height:1056px !important;
  min-height:1056px !important; max-height:1056px !important;
  background:#fff; color:#111; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.45;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-header{
  background:#f8404e !important;
  padding:16px 20px 20px;
  display:flex; justify-content:center; align-items:center;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-header-logo{
  width:82px; height:82px; background:#fff !important; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-header-logo img{
  width:74px; height:74px; object-fit:contain; border-radius:50%;
}
.pr-body{
  flex:1; padding:16px 36px 12px;
  display:flex; flex-direction:column;
}
.pr-client-row{
  display:flex; justify-content:space-between; margin-bottom:4px;
}
.pr-client-name{ font-size:15px; font-weight:600; }
.pr-quote-date{ font-size:13px; color:#555; }
.pr-hr{ border:none; border-top:1px solid #ddd; margin:8px 0 14px; }

.pr-title{
  font-size:24px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  margin:0 0 12px; color:#111;
}

.pr-meta{ margin-bottom:14px; }
.pr-meta-row{ padding:1px 0; font-size:13px; }
.pr-meta-label{
  color:#555; text-transform:uppercase; letter-spacing:1px;
  font-size:11px; min-width:140px; display:inline-block;
}

.pr-amount-block{
  background:#f6f6f6; border-left:4px solid #f8404e;
  padding:12px 16px; margin:10px 0;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-amount-label{
  font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#555;
}
.pr-amount-value{
  font-size:36px; font-weight:300; letter-spacing:-.5px;
  line-height:1.1; margin-top:2px;
}
.pr-amount-curr{ font-size:22px; font-weight:400; }

.pr-pay-block{
  background:#111; color:#fff; border-radius:8px;
  padding:16px; margin:12px 0;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-pay-cta{
  font-size:12px; letter-spacing:2px; font-weight:800;
  color:#f8404e; margin-bottom:8px;
}
.pr-pay-content{
  display:flex; gap:16px; align-items:center;
}
.pr-qr-target{
  width:180px; height:180px; background:#fff; padding:8px; border-radius:6px;
  flex-shrink:0;
}
.pr-qr-target img,
.pr-qr-target canvas{ display:block; margin:0 auto; }
.pr-pay-info{ flex:1; min-width:0; }
.pr-pay-wise-line{ font-size:13px; margin-bottom:6px; }
.pr-pay-link{
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:13px; color:#f8404e; word-break:break-all; margin-bottom:8px;
}
.pr-pay-scan{ font-size:11px; color:#aaa; }

.pr-methods{ margin:10px 0; }
.pr-methods-title{
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:#555; margin-bottom:4px;
}
.pr-methods ul{ margin:0; padding-left:16px; font-size:12px; }
.pr-methods li{ padding:1px 0; }

.pr-terms{ margin:10px 0; }
.pr-terms-title{
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:#555; margin-bottom:4px;
}
.pr-terms ul{ margin:0; padding-left:16px; font-size:11.5px; line-height:1.4; }
.pr-terms li{ padding:1px 0; }

.pr-signature{
  margin-top:auto; padding-top:14px; text-align:center;
}
.pr-sig-name{ font-size:13px; }
.pr-sig-brand{ color:#f8404e; font-weight:800; font-size:14px; margin-top:2px; }
.pr-sig-tag{
  text-transform:uppercase; letter-spacing:1.6px;
  font-size:9px; color:#555; margin-top:1px;
}

.pr-footer{
  background:#f8404e !important; color:#fff;
  padding:10px 24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; flex-wrap:wrap; gap:8px;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.pr-footer-web{ font-size:13px; font-weight:800; font-style:italic; }

/* Fix QR container v2.23 — sin padding, tamaño exacto para no cortar */
.pr-qr-target{
  width:200px !important;
  height:200px !important;
  padding:0 !important;
  background:#fff !important;
  border-radius:6px !important;
  overflow:hidden !important;
  flex-shrink:0 !important;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}
.pr-qr-target img{
  display:block !important;
  width:200px !important;
  height:200px !important;
}

/* =====================================================
   RECIBO DE PAGO — PDF layout
   ===================================================== */
.rc-page{
  width:816px !important; height:1056px !important;
  min-height:1056px !important; max-height:1056px !important;
  background:#fff; color:#111; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.5;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-header{
  background:#f8404e !important;
  padding:16px 20px 20px;
  display:flex; justify-content:center; align-items:center;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-header-logo{
  width:82px; height:82px; background:#fff !important; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-header-logo img{
  width:74px; height:74px; object-fit:contain; border-radius:50%;
}
.rc-body{
  flex:1; padding:24px 44px 20px;
  display:flex; flex-direction:column;
}
.rc-top{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.rc-title{
  font-size:26px; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; margin:0;
}
.rc-subtitle{
  font-size:14px; color:#555; margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,monospace;
}
.rc-paid-stamp{
  border:3px solid #7a9d4e;
  color:#7a9d4e;
  font-size:28px; font-weight:900; letter-spacing:3px;
  padding:10px 20px; border-radius:10px;
  transform:rotate(-8deg);
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-hr{ border:none; border-top:1px solid #ddd; margin:16px 0; }

.rc-meta{ margin-bottom:20px; }
.rc-meta-row{ padding:3px 0; font-size:14px; }
.rc-meta-label{
  color:#555; text-transform:uppercase; letter-spacing:1px;
  font-size:11px; min-width:160px; display:inline-block;
}

.rc-amount-block{
  background:#f6f6f6; border-left:6px solid #7a9d4e;
  padding:18px 22px; margin:14px 0;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-amount-label{
  font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#555;
}
.rc-amount-value{
  font-size:42px; font-weight:300; letter-spacing:-.5px;
  line-height:1.1; margin-top:4px;
}
.rc-amount-curr{ font-size:24px; font-weight:400; }

.rc-thanks{
  margin-top:24px; padding:16px 20px;
  background:#fafafa; border-radius:8px;
  text-align:center;
}
.rc-thanks-title{
  font-size:16px; font-weight:700; color:#f8404e; margin-bottom:6px;
}
.rc-thanks-note{
  font-size:13px; color:#333; margin:0; line-height:1.5;
}

.rc-signature{
  margin-top:auto; padding-top:20px; text-align:center;
}
.rc-sig-name{ font-size:13px; }
.rc-sig-brand{ color:#f8404e; font-weight:800; font-size:15px; margin-top:2px; }
.rc-sig-tag{
  text-transform:uppercase; letter-spacing:1.6px;
  font-size:9px; color:#555; margin-top:1px;
}

.rc-footer{
  background:#f8404e !important; color:#fff;
  padding:10px 24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; flex-wrap:wrap; gap:8px;
  -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
}
.rc-footer-web{ font-size:13px; font-weight:800; font-style:italic; }