/* ============================================================================
   FARMACIAS SYG — Hoja de estilos global (index.html, auditoria.php, importar.php)

   CÓMO CAMBIAR DE TONALIDAD
   Solo un bloque ":root" puede estar activo (sin comentar) a la vez.
   Para cambiar de color: comenta el tema activo y descomenta el que quieras
   usar. Todo el sitio (encabezados, botones, tablas, login, etc.) usa estas
   variables, así que el cambio se aplica en todas las páginas al instante.
   ============================================================================ */

/* ---- TEMA AZUL (inactivo) --------------------------------------------------- 
:root{
  --bg:#eff6ff; --surface:#ffffff; --tint:#dbeafe;
  --accent:#1d4ed8; --accent2:#3b82f6; --accent3:#60a5fa; --accent-dark:#1e3a5f; --ok:#1e40af;
  --border:#bfdbfe; --border-strong:#93c5fd;
  --danger:#dc2626; --danger2:#ef4444; --warn:#d97706;
  --text:#0f172a; --muted:#6b7280;
  --shadow:0 4px 24px rgba(30,58,95,.12);
  --shadow-header:0 4px 20px rgba(30,58,95,.35);
  --glow-sm:0 2px 8px rgba(59,130,246,.28);
  --glow-md:0 4px 14px rgba(59,130,246,.32);
  --glow-lg:0 6px 20px rgba(59,130,246,.40);
}*/

/* ---- TEMA ROSA (activo)*/
:root{
  --bg:#fdf2f8; --surface:#ffffff; --tint:#fce7f3;
  --accent:#be185d; --accent2:#ec4899; --accent3:#f472b6; --accent-dark:#831843; --ok:#9d174d;
  --border:#fbcfe8; --border-strong:#f9a8d4;
  --danger:#dc2626; --danger2:#ef4444; --warn:#d97706;
  --text:#0f172a; --muted:#6b7280;
  --shadow:0 4px 24px rgba(131,24,67,.12);
  --shadow-header:0 4px 20px rgba(131,24,67,.35);
  --glow-sm:0 2px 8px rgba(236,72,153,.28);
  --glow-md:0 4px 14px rgba(236,72,153,.32);
  --glow-lg:0 6px 20px rgba(236,72,153,.40);
}

/* ---- TEMA VERDE (inactivo — descomenta este bloque y comenta el de arriba)
:root{
  --bg:#ecfdf5; --surface:#ffffff; --tint:#d1fae5;
  --accent:#047857; --accent2:#10b981; --accent3:#34d399; --accent-dark:#064e3b; --ok:#065f46;
  --border:#a7f3d0; --border-strong:#6ee7b7;
  --danger:#dc2626; --danger2:#ef4444; --warn:#d97706;
  --text:#0f172a; --muted:#6b7280;
  --shadow:0 4px 24px rgba(6,78,59,.12);
  --shadow-header:0 4px 20px rgba(6,78,59,.35);
  --glow-sm:0 2px 8px rgba(16,185,129,.28);
  --glow-md:0 4px 14px rgba(16,185,129,.32);
  --glow-lg:0 6px 20px rgba(16,185,129,.40);
}*/
/*============================================================================= */

/* ---- Reset / base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
body.pg-index{display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Encabezado (compartido) ---------------------------------------------- */
header{color:#fff;display:flex;align-items:center;justify-content:space-between}
.brand,.header-brand{display:flex;align-items:center;gap:10px}
.brand svg,.header-brand svg{width:30px;height:30px}
.brand-name{font-family:'DM Serif Display',serif}
.brand-sub{font-size:.78rem;opacity:.75;letter-spacing:.4px}
.hdr-btn,.logout-btn{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:7px;padding:7px 13px;font-family:inherit;font-size:.82rem;cursor:pointer;transition:background .15s;white-space:nowrap}
.hdr-btn:hover,.logout-btn:hover{background:rgba(255,255,255,.28)}

/* Variantes de encabezado por página */
.pg-index header{padding:18px 32px;background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 50%,var(--ok) 100%);box-shadow:var(--shadow-header);position:sticky;top:0;z-index:100}
.pg-index .header-brand{gap:12px}
.pg-index .header-brand svg{width:34px;height:34px}
.pg-index .brand-name{font-size:1.5rem;letter-spacing:-.3px}

.pg-auditoria header{padding:15px 28px;background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 50%,var(--ok) 100%);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.pg-auditoria .brand-name{font-size:1.3rem}
.pg-auditoria .hdr-right{display:flex;align-items:center;gap:10px}
.pg-auditoria .hdr-user{font-size:.83rem;opacity:.85}

.pg-importar header{padding:16px 32px;background:var(--accent)}
.pg-importar .brand-name{font-size:1.35rem}

/* ---- Botones primarios (degradado de marca) — reutilizado en todo el sitio */
.add-btn,.dl-csv,.btn-modal-ok,.filter-btn,.btn-dl,.btn-import,.login-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;
  font-family:inherit;font-weight:600;cursor:pointer;transition:all .2s;
}
.add-btn:hover,.dl-csv:hover,.btn-modal-ok:hover,.filter-btn:hover,.btn-dl:hover,.btn-import:hover,.login-btn:hover{
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));
}
.btn-primary{width:100%;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}

/* ---- Login (compartido index.html / auditoria.php) ------------------------ */
.login-screen{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--surface);border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.15);padding:44px 40px;width:100%;max-width:380px;text-align:center}
.pg-auditoria .login-card{max-width:360px}
.pg-importar .login-card{border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);padding:40px;margin:80px auto}
.login-card h2{font-family:'DM Serif Display',serif;color:var(--accent);margin-bottom:8px;font-size:1.5rem}
.login-card p{color:var(--muted);font-size:.88rem;margin-bottom:28px}
.login-logo{width:56px;height:56px;background:var(--accent);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.login-logo svg{width:32px;height:32px}
.login-title{font-family:'DM Serif Display',serif;font-size:1.6rem;color:var(--accent);margin-bottom:4px}
.login-sub{font-size:.85rem;color:var(--muted);margin-bottom:28px}
.lfield{display:flex;flex-direction:column;gap:5px;text-align:left;margin-bottom:14px}
.lfield label{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.lfield input{border:1.5px solid var(--border);border-radius:9px;padding:11px 14px;font-family:inherit;font-size:.92rem;background:var(--bg);outline:none;transition:border-color .2s}
.login-btn{width:100%;border-radius:10px;padding:12px;font-size:.95rem;font-weight:700;margin-top:6px;box-shadow:var(--glow-md)}
.login-btn:hover{box-shadow:var(--glow-lg);transform:translateY(-1px)}
.login-err{background:#fff0f0;border:1.5px solid #fcc;border-radius:8px;padding:9px 14px;font-size:.84rem;color:var(--danger);margin-bottom:14px;display:none}

/* ---- Campos de formulario (modal / login / filtros) ------------------------ */
.mfield,.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field{gap:6px;text-align:left;margin-bottom:18px}
.filter-field{display:flex;flex-direction:column;gap:4px}
.mfield label,.field label,.filter-field label{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.filter-field label{font-size:.74rem}
.mfield input,.field input{border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;font-family:inherit;font-size:.9rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}
.field input{padding:10px 14px}
.filter-field input,.filter-field select{border:1.5px solid var(--border);border-radius:8px;padding:8px 11px;font-family:inherit;font-size:.86rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s;min-width:140px}
.mfield input:focus,.field input:focus,.filter-field input:focus,.filter-field select:focus,.lfield input:focus{border-color:var(--accent2)}
.mfield input.required-err{border-color:var(--danger)}
.btn-modal-cancel,.filter-clear,.btn-close{background:var(--bg);color:var(--muted);border:1.5px solid var(--border);border-radius:9px;padding:11px 16px;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .15s}
.filter-clear,.btn-close{border-radius:8px;padding:9px 14px;font-size:.83rem;align-self:flex-end}
.btn-modal-cancel:hover,.filter-clear:hover{border-color:var(--accent2);color:var(--accent)}
.alert-err{background:#fff0f0;border:1.5px solid #fcc;border-radius:8px;padding:10px 14px;font-size:.85rem;color:var(--danger);margin-bottom:16px}

/* ---- Modal (compartido index.html / auditoria.php) ------------------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.2);width:100%;transform:translateY(16px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.pg-index .modal{max-width:420px}
.pg-auditoria .modal{max-width:620px;max-height:85vh;display:flex;flex-direction:column}
.modal.wide{max-width:900px}
.modal-title{font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--accent)}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);line-height:1;padding:2px 6px;border-radius:6px;transition:color .15s}
.modal-close:hover{color:var(--danger)}
.modal-header{padding:20px 22px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-hdr{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-body{padding:20px 22px}
.pg-auditoria .modal-body{padding:18px 22px;overflow-y:auto;flex:1}
.modal-footer{padding:0 22px 20px;display:flex;gap:10px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}

/* ---- Página (contenedor de ancho) ------------------------------------------ */
.page-title{font-family:'DM Serif Display',serif;font-size:1.8rem;color:var(--accent);margin-bottom:6px}
.page-sub{color:var(--muted);font-size:.9rem;margin-bottom:28px}
.pg-auditoria .page{max-width:1200px;margin:28px auto;padding:0 20px}
.pg-importar .page{max-width:760px;margin:36px auto;padding:0 20px}

.card{background:var(--surface);border-radius:14px}
.pg-auditoria .card{box-shadow:var(--shadow);overflow:hidden}
.pg-importar .card{box-shadow:var(--shadow);border:1px solid var(--border);padding:28px;margin-bottom:22px}
.card h3{font-size:1rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card h3 span{font-size:1.1rem}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-weight:600;font-size:.92rem;color:var(--accent)}
.result-count{font-size:.82rem;color:var(--muted)}

/* ---- Tablas (compartidas) --------------------------------------------------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
.pg-index table{font-size:.88rem}
.pg-auditoria table{font-size:.84rem}
thead th{padding:10px 14px;text-align:left;font-size:.74rem;text-transform:uppercase;background:linear-gradient(180deg,var(--bg),var(--tint));border-bottom:2px solid var(--border);white-space:nowrap}
.pg-index thead th{padding:11px 14px;font-weight:700;letter-spacing:.7px;color:var(--accent);user-select:none}
.pg-auditoria thead th{font-weight:600;letter-spacing:.5px;color:var(--muted)}
tbody tr{border-bottom:1px solid var(--border)}
.pg-index tbody tr{transition:background .12s;cursor:pointer}
.pg-index tbody tr:hover{background:var(--bg)}
.pg-index tbody tr.selected{background:var(--border)}
.pg-index tbody td{padding:11px 14px;vertical-align:middle}
.pg-auditoria tbody tr{transition:background .1s}
.pg-auditoria tbody tr:hover{background:var(--bg)}
.pg-auditoria tbody td{padding:10px 14px;vertical-align:middle}
.empty-row td{text-align:center;padding:36px;color:var(--muted)}
td.codigo{font-family:monospace;font-size:.82rem;color:var(--muted)}
td.nombre{font-weight:500}
.cat-badge{display:inline-block;background:linear-gradient(135deg,var(--tint),var(--border));color:var(--accent);border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:600;white-space:nowrap;border:1px solid var(--border-strong)}
.stock-ok{color:var(--accent);font-weight:600}
.stock-low{color:var(--warn);font-weight:600}
.stock-zero{color:var(--danger);font-weight:700}
.check-col{width:36px;text-align:center}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.no-results{text-align:center;padding:40px;color:var(--muted)}

/* Badges de acción (auditoría) — colores semánticos fijos, no ligados al tema */
.badge{display:inline-block;border-radius:6px;padding:2px 9px;font-size:.74rem;font-weight:600;white-space:nowrap}
.b-agregar{background:#e3f2fd;color:#1565c0}
.b-quitar{background:#fce4ec;color:#c62828}
.b-vaciar{background:#fff3e0;color:#e65100}
.b-descarga{background:#e8f5e9;color:#2e7d32}
.b-login{background:#f3e5f5;color:#6a1b9a}
.b-logout{background:#fafafa;color:#555}
.b-agregar_manual{background:#fff8e1;color:#f57f17}
.b-crear_usuario,.b-editar_usuario,.b-eliminar_usuario{background:#e0f7fa;color:#00695c}
.b-default{background:var(--bg);color:var(--muted)}
.detail-table{width:100%;border-collapse:collapse;font-size:.83rem}
.detail-table th{background:var(--bg);padding:7px 10px;text-align:left;font-size:.73rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.detail-table td{padding:8px 10px;border-bottom:1px solid var(--border)}

/* ---- Búsqueda / filtros / paginación (catálogo) ---------------------------- */
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap svg{position:absolute;left:11px;color:var(--muted);pointer-events:none;width:16px;height:16px}
input[type=search],select{border:1.5px solid var(--border);border-radius:8px;padding:8px 12px 8px 34px;font-family:inherit;font-size:.88rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}
select{padding-left:10px;cursor:pointer}
input[type=search]:focus,select:focus{border-color:var(--accent2)}
.toggle-btn{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:8px;padding:7px 13px;font-size:.82rem;font-family:inherit;font-weight:500;background:var(--bg);color:var(--muted);cursor:pointer;transition:all .2s}
.toggle-btn.active{border-color:var(--danger);background:#fff0f0;color:var(--danger)}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--border);font-size:.83rem;color:var(--muted)}
.pag-btns{display:flex;gap:6px}
.pag-btn{border:1.5px solid var(--border);border-radius:6px;padding:5px 12px;background:var(--bg);font-size:.82rem;cursor:pointer;transition:all .15s}
.pag-btn:hover:not(:disabled){border-color:var(--accent2);color:var(--accent)}
.pag-btn:disabled{opacity:.4;cursor:default}
.pag-btn.current{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:var(--accent);box-shadow:var(--glow-sm)}

/* ---- Filtros (auditoría) ---------------------------------------------------- */
.tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border)}
.tab{padding:9px 20px;border:none;background:none;font-family:inherit;font-size:.88rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab-pane{display:none}.tab-pane.active{display:block}
.filter-bar{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}

/* ---- Panel genérico (catálogo) --------------------------------------------- */
.container{display:grid;grid-template-columns:1fr 360px;gap:24px;max-width:1300px;margin:28px auto;padding:0 20px;flex:1}
@media(max-width:900px){.container{grid-template-columns:1fr}}
.panel{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--tint)}
.panel-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-title{font-family:'DM Serif Display',serif;font-size:1.25rem;color:var(--accent)}
.panel-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.add-btn{margin:14px 20px;border-radius:10px;padding:11px 22px;font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:var(--glow-sm)}
.add-btn:hover{transform:translateY(-2px);box-shadow:var(--glow-lg)}
.add-btn:disabled{background:var(--muted);cursor:default;transform:none}

/* ---- Lista de faltas -------------------------------------------------------- */
.badge-faltas{background:linear-gradient(135deg,var(--danger),var(--danger2));color:#fff;border-radius:999px;padding:4px 14px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(220,38,38,.35)}
.badge-faltas:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.faltas-panel{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:85vh;position:sticky;top:90px;border:1px solid var(--tint)}
.faltas-header{padding:20px 22px 16px;border-bottom:1px solid var(--border)}
.faltas-title{font-family:'DM Serif Display',serif;font-size:1.2rem;color:var(--danger);display:flex;align-items:center;gap:10px}
.faltas-count{background:var(--danger);color:#fff;border-radius:999px;font-size:.75rem;font-family:'DM Sans',sans-serif;padding:2px 9px;font-weight:700}
.faltas-list{flex:1;overflow-y:auto;padding:8px 0}
.falta-item{display:flex;align-items:flex-start;padding:10px 18px;border-bottom:1px solid var(--border);gap:10px;animation:slideIn .2s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.falta-info{flex:1}
.falta-nombre{font-weight:500;font-size:.88rem}
.falta-meta{font-size:.76rem;color:var(--muted);margin-top:2px}
.falta-qty{display:flex;align-items:center;gap:6px}
.qty-btn{width:24px;height:24px;border:1.5px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.qty-btn:hover{border-color:var(--accent2);color:var(--accent)}
.qty-num{width:28px;text-align:center;font-size:.88rem;font-weight:600}
.del-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:5px;transition:color .15s}
.del-btn:hover{color:var(--danger)}
.faltas-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:.9rem}
.faltas-empty svg{margin-bottom:10px;opacity:.3}
.faltas-footer{padding:16px 18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.dl-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border:none;border-radius:9px;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s}
.dl-csv{box-shadow:var(--glow-sm)}
.dl-csv:hover{box-shadow:var(--glow-lg);transform:translateY(-1px)}
.dl-txt{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.dl-txt:hover{border-color:var(--accent2)}
.dl-btn:disabled{opacity:.4;cursor:default}
.clear-btn{text-align:center;background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;padding:4px;text-decoration:underline}
.clear-btn:hover{color:var(--danger)}
.manual-badge{display:inline-block;background:#fff3cd;color:#856404;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:600;margin-left:6px;vertical-align:middle}
.falta-comentario{width:100%;border:none;border-top:1px solid var(--border);background:transparent;font-family:inherit;font-size:.78rem;color:var(--muted);padding:5px 0 3px;outline:none;resize:none;overflow:hidden;line-height:1.4;transition:color .15s}
.falta-comentario::placeholder{color:#bbb;font-style:italic}
.falta-comentario:focus{color:var(--text)}
.falta-comentario.tiene-texto{color:#856404}

/* ---- Barra de usuario (index.html) ------------------------------------------ */
.user-bar{display:flex;align-items:center;gap:12px}
.user-info{display:flex;flex-direction:column;align-items:flex-end}
.user-name{font-size:.88rem;font-weight:600}
.user-rol{font-size:.72rem;opacity:.7;text-transform:uppercase;letter-spacing:.4px}

/* ---- Historial de listas (index.html) --------------------------------------- */
.hist-panel{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.hist-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.hist-title{font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--accent)}
.hist-list{max-height:320px;overflow-y:auto}
.hist-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.hist-item:hover{background:var(--bg)}
.hist-info{flex:1}
.hist-nombre{font-weight:500;font-size:.86rem}
.hist-meta{font-size:.75rem;color:var(--muted);margin-top:2px}
.hist-dl{background:linear-gradient(135deg,var(--bg),var(--tint));border:1.5px solid var(--border-strong);border-radius:7px;padding:5px 10px;font-size:.78rem;cursor:pointer;color:var(--accent);font-weight:600;transition:all .15s;white-space:nowrap}
.hist-dl:hover{border-color:var(--accent);background:linear-gradient(135deg,var(--tint),var(--border));box-shadow:var(--glow-sm)}
.hist-empty{text-align:center;padding:24px;color:var(--muted);font-size:.86rem}
.hist-detail-table{width:100%;border-collapse:collapse;font-size:.83rem;margin-top:10px}
.hist-detail-table th{background:var(--bg);padding:7px 10px;text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.hist-detail-table td{padding:7px 10px;border-bottom:1px solid var(--border)}

/* ---- Importar: dropzone / opciones / resultado ------------------------------ */
.dropzone{border:2px dashed var(--border);border-radius:12px;padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);position:relative}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent2);background:var(--bg)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dropzone svg{width:44px;height:44px;color:var(--accent2);margin-bottom:10px}
.dropzone p{font-size:.9rem;color:var(--muted)}
.dropzone strong{color:var(--accent);font-weight:600}
.file-selected{margin-top:10px;font-size:.85rem;color:var(--accent);font-weight:500}
.radio-group{display:flex;flex-direction:column;gap:10px}
.radio-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:9px;cursor:pointer;transition:all .15s}
.radio-item:hover,.radio-item.checked{border-color:var(--accent2);background:var(--bg)}
.radio-danger:hover,.radio-danger.checked{border-color:var(--danger)!important;background:#fff5f5!important}
.radio-item input{margin-top:2px;accent-color:var(--accent)}
.radio-label{font-weight:500;font-size:.88rem}
.radio-desc{font-size:.79rem;color:var(--muted);margin-top:1px}
.template-box{background:var(--bg);border-radius:9px;padding:14px 18px;font-size:.82rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dl-plantilla{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border-radius:7px;padding:7px 14px;font-size:.82rem;font-weight:600;text-decoration:none;transition:background .15s}
.dl-plantilla:hover{background:var(--accent-dark);text-decoration:none}
.submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.back-link{font-size:.85rem;color:var(--muted)}
.result-ok{background:var(--bg);border:1.5px solid var(--border-strong);border-radius:12px;padding:22px}
.result-err{background:#fff5f5;border:1.5px solid #fcc;border-radius:12px;padding:22px}
.result-title{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:14px}
.result-title.ok{color:var(--ok)} .result-title.err{color:var(--danger)}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--surface);border-radius:9px;padding:12px 20px;text-align:center;min-width:100px;box-shadow:0 1px 5px rgba(0,0,0,.07)}
.stat-num{font-size:1.8rem;font-weight:700;font-family:'DM Serif Display',serif}
.stat-num.ins{color:var(--ok)} .stat-num.upd{color:#1565c0} .stat-num.om{color:var(--muted)}
.stat-lbl{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.err-list{list-style:none;margin-top:10px}
.err-list li{font-size:.83rem;color:var(--danger);padding:4px 0;border-bottom:1px solid #fcc}
.preview-table{width:100%;border-collapse:collapse;font-size:.83rem;margin-top:12px}
.preview-table th{background:var(--bg);padding:7px 10px;text-align:left;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.preview-table td{padding:7px 10px;border-bottom:1px solid var(--border)}
.preview-title{font-size:.82rem;font-weight:600;margin-top:14px;margin-bottom:6px;color:var(--muted)}

/* ---- Utilidades comunes: spinner / toast ------------------------------------ */
.spinner{display:none;text-align:center;padding:40px;color:var(--muted)}
.spinner.active{display:block}
.spinner-inline{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;display:inline-block}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--text);color:#fff;border-radius:10px;padding:10px 22px;font-size:.86rem;box-shadow:0 4px 18px rgba(0,0,0,.3);transition:transform .3s ease,opacity .3s;opacity:0;pointer-events:none;z-index:999}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}