/* ============================================================
CONSOLA DIANA — capa de pantalla + compatibilidad app.js
Estética Easy Forward (tokens.css · components.css · app.css)
Reskin sin tocar app.js: aquí viven los estilos de página
y los shims para las clases/variables que genera el JS.
============================================================ */
/* ---------- Layout del app shell (app.js fuerza #appView a display:flex) ---------- */
#appView{min-height:100vh;background:var(--bg)}
#appView > .sidebar{width:250px;flex:none}
#appView > .app-main{flex:1;min-width:0}
/* ---------- Alias de variables legadas (app.js las usa) ---------- */
:root{
--text-muted:var(--text-3);
--color-secondary-light:var(--accent);
--color-success:var(--st-green-bd);
--color-warning:var(--amber-600);
--color-danger:var(--danger);
--color-info:var(--st-blue-bd);
--font-title:var(--font-mono);
}
/* ============================================================
PAGE HEAD (meta a la derecha: fecha + bot)
============================================================ */
.page-head .ph-meta{text-align:right;flex:none}
.page-head .ph-meta .dt{font-size:13.5px;color:var(--text);font-weight:600;font-family:var(--font-mono)}
.page-head .ph-meta .bot{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:2px;display:inline-flex;align-items:center;gap:6px}
.page-head .ph-meta .bot .lv{width:7px;height:7px;border-radius:var(--r-full);background:var(--st-green-bd);box-shadow:0 0 0 3px rgba(76,175,80,.2)}
/* ============================================================
STAT CARDS
============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-6)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);padding:16px 18px;display:flex;align-items:center;gap:14px}
.stat .si{width:46px;height:46px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none}
.stat .si svg{width:22px;height:22px}
.stat .sn{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--text)}
.stat .sl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-top:5px}
.si.blue{background:var(--st-blue-bg);color:var(--st-blue-bd)}
.si.amber{background:var(--st-amber-bg);color:var(--amber-600)}
.si.red{background:var(--st-red-bg);color:var(--st-red-bd)}
.si.green{background:var(--st-green-bg);color:var(--st-green-bd)}
/* ============================================================
STEP LABEL + TEMPLATE CARDS (.template-bubble = .tpl EF)
============================================================ */
.step-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:0 0 var(--sp-3)}
.templates-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.template-bubble{border:1px solid var(--border);border-radius:var(--r-lg);padding:15px 16px;cursor:pointer;background:var(--surface);
transition:all var(--dur-2) var(--ease-standard);position:relative}
.template-bubble:hover{border-color:var(--border-strong)}
.template-bubble.selected{border-color:var(--accent);background:var(--teal-50);box-shadow:0 0 0 3px var(--ring)}
html[data-theme="dark"] .template-bubble.selected{background:rgba(5,167,160,.1)}
.template-name{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px}
.template-name svg{width:16px;height:16px;color:var(--accent)}
.template-desc{font-size:12.5px;color:var(--text-2);line-height:1.45;text-wrap:pretty}
/* check de seleccionado (puro CSS, sin tocar JS) */
.template-bubble.selected::after{content:"";position:absolute;top:13px;right:13px;width:18px;height:18px;border-radius:var(--r-full);
background:var(--accent) url("data:image/svg+xml;utf8,") center/12px no-repeat}
/* ============================================================
DISPATCH ROW (contador + botón WhatsApp)
============================================================ */
.dispatch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-5) 0 0;flex-wrap:wrap}
.dispatch-row .sel-count{font-size:13.5px;color:var(--text-2)}
.btn-wa{background:#1F8A4C;color:#fff;border:none}
.btn-wa:hover{background:#1A7A43}
.btn-wa:disabled{opacity:.45;cursor:not-allowed}
/* ============================================================
TABLA — app.js escribe en table.tbl; extras de celda
============================================================ */
table.tbl td{white-space:nowrap}
table.tbl td.wrap{white-space:normal}
.cell-id{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:500}
/* thumbnails de fotos */
.thumbnail-grid{display:flex;align-items:center;gap:7px}
.thumbnail{width:30px;height:30px;border-radius:var(--r-sm);flex:none;border:1px solid var(--border);object-fit:cover}
.pdf-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--st-red-bd);text-decoration:none;white-space:nowrap}
.pdf-link svg{width:14px;height:14px}
.pdf-link:hover{text-decoration:underline}
/* edición inline en filas de revisión manual */
.form-input.inline-edit{height:34px;font-size:13px;padding:0 10px;width:100%;min-width:150px}
.btn-inline-save{background:var(--amber-500);color:var(--navy-900);height:28px;padding:0 12px;font-size:12.5px;border-radius:var(--r-sm);
border:none;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background var(--dur-2) var(--ease-standard)}
.btn-inline-save:hover{background:var(--amber-600)}
/* ---------- BADGES legados (app.js: badge-orange/red/green) ---------- */
.badge.badge-orange{background:var(--st-amber-bg);border:1px solid var(--st-amber-bd);color:var(--st-amber-tx)}
.badge.badge-red{background:var(--st-red-bg);border:1px solid var(--st-red-bd);color:var(--st-red-tx)}
.badge.badge-green{background:var(--st-green-bg);border:1px solid var(--st-green-bd);color:var(--st-green-tx)}
html[data-theme="dark"] .badge.badge-orange{background:rgba(255,183,3,.14);color:#FFD566}
html[data-theme="dark"] .badge.badge-red{background:rgba(229,57,53,.16);color:#FF9C99}
html[data-theme="dark"] .badge.badge-green{background:rgba(76,175,80,.14);color:#9FD8A2}
/* ============================================================
CHECKBOX nativo estilizado como el .box EF
(app.js usa dentro de .checkbox-container)
============================================================ */
.checkbox-container{display:inline-flex;position:relative;cursor:pointer;user-select:none;line-height:0}
.checkbox-container input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.checkbox-container .checkmark{width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
background:var(--surface);display:inline-block;position:relative;transition:all var(--dur-2) var(--ease-standard)}
.checkbox-container .checkmark::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;
border-width:0 2.4px 2.4px 0;transform:rotate(45deg) scale(0);transition:transform var(--dur-1) var(--ease-standard)}
.checkbox-container input:checked ~ .checkmark{background:var(--accent);border-color:var(--accent)}
.checkbox-container input:checked ~ .checkmark::after{transform:rotate(45deg) scale(1)}
.checkbox-container input:focus-visible ~ .checkmark{box-shadow:0 0 0 3px var(--ring)}
.checkbox-container input:disabled ~ .checkmark{background:var(--surface-sunken);border-color:var(--border);cursor:not-allowed}
/* ============================================================
FORMULARIOS (.form-group / .form-label / .form-input)
============================================================ */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.form-label{font-size:13px;font-weight:600;color:var(--text)}
.form-input{width:100%;height:40px;padding:0 12px;font-family:var(--font-sans);font-size:14px;color:var(--text);
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
transition:border-color var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.form-input::placeholder{color:var(--text-3)}
.form-input:hover{border-color:var(--border-strong)}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.live-badge{font-size:12.5px;font-weight:500;margin-top:2px}
/* dropzone arrastrar fotos / csv */
.drag-drop-zone{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:32px 20px;text-align:center;
cursor:pointer;background:var(--surface-2);transition:all var(--dur-2) var(--ease-standard)}
.drag-drop-zone:hover,.drag-drop-zone.dragover{border-color:var(--accent);background:var(--teal-50)}
html[data-theme="dark"] .drag-drop-zone:hover,html[data-theme="dark"] .drag-drop-zone.dragover{background:rgba(5,167,160,.08)}
.drag-drop-icon{width:44px;height:44px;color:var(--text-3);margin:0 auto 12px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.drag-drop-text{font-size:14px;color:var(--text-2);font-weight:500}
.drag-drop-text strong{color:var(--accent)}
.drag-drop-subtext{font-size:12px;color:var(--text-3);margin-top:6px}
.preview-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}
.preview-item{width:64px;height:64px;border-radius:var(--r-md);object-fit:cover;border:1px solid var(--border)}
/* csv paste + búsqueda */
.csv-paste-area{width:100%;min-height:160px;padding:12px;font-family:var(--font-mono);font-size:12.5px;color:var(--text);
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);resize:vertical;margin-bottom:12px;line-height:1.6}
.csv-paste-area:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.search-container{margin-bottom:var(--sp-5)}
.search-input{height:38px;padding:0 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
font-family:var(--font-sans);font-size:13.5px;color:var(--text)}
.search-input::placeholder{color:var(--text-3)}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);background:var(--surface)}
/* ============================================================
BOTONES legados (app.js: btn-primary / btn-secondary / btn-logout)
============================================================ */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;
font-size:14px;line-height:1;height:40px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
white-space:nowrap;background:var(--accent);color:var(--on-accent);transition:background var(--dur-2) var(--ease-standard)}
.btn-primary svg{width:16px;height:16px}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;
font-size:14px;line-height:1;height:40px;padding:0 16px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;
background:var(--surface);border:1px solid var(--border-strong);color:var(--text);transition:all var(--dur-2) var(--ease-standard)}
.btn-secondary svg{width:16px;height:16px}
.btn-secondary:hover{background:var(--surface-sunken);border-color:var(--text-3)}
.btn-logout{width:100%;height:36px;border-radius:var(--r-md);border:1px solid var(--side-border);background:transparent;
color:var(--side-tx-dim);font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;
transition:all var(--dur-2) var(--ease-standard)}
.btn-logout:hover{background:var(--side-bg-2);color:#fff;border-color:var(--side-active)}
/* ============================================================
LOGIN (estética EF sobre navy)
============================================================ */
.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
background:radial-gradient(120% 120% at 50% 0%,var(--navy-800) 0%,var(--navy-950) 70%)}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
box-shadow:var(--sh-lg);padding:36px 32px;text-align:center}
.login-card .login-mark{width:56px;height:48px;margin:0 auto 16px;display:block}
.login-card .brand-title{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.login-card .brand-title span{color:var(--accent)}
.login-card .brand-subtitle{font-size:12.5px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:.03em;
text-transform:uppercase;margin-top:4px;margin-bottom:26px}
.login-card form{text-align:left}
.login-card .form-group{margin-bottom:18px}
.login-card .btn-primary{width:100%;height:44px;margin-top:6px}
/* ============================================================
MODAL de progreso de envíos
============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(11,24,40,.62);backdrop-filter:blur(4px);z-index:60;
display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.active{display:flex}
.modal-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
box-shadow:var(--sh-lg);padding:28px}
.modal-header{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.modal-subtitle{font-size:13px;color:var(--text-2);margin-top:4px;margin-bottom:20px}
.progress-container{height:8px;border-radius:var(--r-full);background:var(--surface-sunken);overflow:hidden;margin-bottom:10px}
.progress-bar{height:100%;width:0;border-radius:var(--r-full);background:var(--accent);transition:width var(--dur-3) var(--ease-standard)}
.progress-text{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);margin-bottom:16px}
.sending-logs{background:var(--navy-950);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;
height:220px;overflow-y:auto;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:#CAD6E2}
.sending-logs .log-entry{margin-bottom:2px;word-break:break-word}
/* ============================================================
TOASTS
============================================================ */
.toast-container{position:fixed;top:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;min-width:280px;max-width:380px;background:var(--surface);border:1px solid var(--border);
border-left:3px solid var(--accent);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:12px 16px;
font-size:13.5px;color:var(--text);pointer-events:auto;transition:opacity var(--dur-3) var(--ease-standard),transform var(--dur-3) var(--ease-standard)}
.toast svg{width:20px;height:20px;flex:none}
.toast-text{flex:1;line-height:1.4}
.toast-success{border-left-color:var(--st-green-bd)}
.toast-error{border-left-color:var(--danger)}
.toast-warning{border-left-color:var(--amber-500)}
.toast-info{border-left-color:var(--st-blue-bd)}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1100px){ .stats{grid-template-columns:repeat(2,1fr)} .templates-selector{grid-template-columns:1fr} }
@media (max-width:860px){ .app{grid-template-columns:1fr} .sidebar{display:none} }