/* Backoffice saas-core — design system (ver spec/saas-core-platform/ui/design-system.md) */
:root{
  --bg:#0F172A;--bg-app:#F8FAFC;--surface:#FFFFFF;--border:#E2E8F0;
  --text:#0F172A;--text-sec:#64748B;--primary:#1A56DB;--primary-hover:#1E429F;
  --success:#0E9F6E;--warning:#C27803;--danger:#E02424;--info:#3F83F8;
  --radius:8px;--radius-lg:12px;--shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg-app);line-height:1.55;font-size:14px}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,86,219,.2)}
label{display:block;font-weight:600;font-size:13px;margin:12px 0 5px}
.hidden{display:none!important}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0F172A,#1E293B);padding:20px}
.login-card{background:#fff;border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.3);padding:40px;max-width:400px;width:100%}
.login-card .logo{font-weight:800;font-size:24px;letter-spacing:-.03em;margin-bottom:4px}
.login-card .logo span{color:var(--primary)}
.badge{display:inline-block;background:#e6f6ef;color:var(--success);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 10px}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"topbar topbar" "sidebar content";min-height:100vh}
.topbar{grid-area:topbar;background:var(--bg);color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px;height:56px}
.topbar .logo{font-weight:800;font-size:18px}.topbar .logo span{color:#7AA0F5}
.topbar .spacer{flex:1}
.env-badge{font-size:11px;font-weight:700;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.env-dev{background:#7c5e00;color:#FCE96A}.env-prod{background:#7a1414;color:#F8B4B4}
.topbar .user{font-size:13px;color:#CBD5E1;display:flex;gap:12px;align-items:center}
.topbar .user a{color:#fff}
.imp-banner{grid-area:topbar;background:var(--warning);color:#fff;text-align:center;padding:6px;font-size:13px;font-weight:600}
.sidebar{grid-area:sidebar;background:#fff;border-right:1px solid var(--border);padding:12px 0}
.sidebar a{display:block;padding:10px 20px;color:var(--text-sec);font-weight:600;font-size:14px}
.sidebar a:hover{background:var(--bg-app);text-decoration:none;color:var(--text)}
.sidebar a.active{color:var(--primary);background:#EBF2FE;border-right:3px solid var(--primary)}
.content{grid-area:content;padding:28px 32px;overflow:auto}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.page-head h1{font-size:22px;font-weight:800}
.page-head .spacer{flex:1}

/* ── Componentes ───────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h2{font-size:16px;font-weight:700;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)}
.kpi .label{font-size:12px;color:var(--text-sec);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi .value{font-size:28px;font-weight:800;margin-top:6px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px}
th{background:var(--bg-app);font-weight:600;color:var(--text-sec)}
tr:last-child td{border-bottom:0}
tr.clickable:hover{background:var(--bg-app);cursor:pointer}
.stat{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;text-transform:uppercase;letter-spacing:.03em}
.stat-success{background:#def7ec;color:#03543F}.stat-warning{background:#FDF6B2;color:#723B13}
.stat-danger{background:#FDE8E8;color:#9B1C1C}.stat-info{background:#E1EFFE;color:#1E429F}
.stat-default{background:#E5E7EB;color:#374151}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--radius);background:var(--primary);color:#fff;font-weight:600;font-size:14px;padding:9px 16px}
.btn:hover{background:var(--primary-hover)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-ghost{background:#fff;color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--bg-app)}
.btn-danger{background:var(--danger)}.btn-danger:hover{background:#C81E1E}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.toolbar .field{min-width:200px}.toolbar .field label{margin-top:0}
.muted{color:var(--text-sec)}
.empty{text-align:center;padding:40px;color:var(--text-sec)}
.error-box{background:#FDE8E8;color:#9B1C1C;border:1px solid #F8B4B4;border-radius:var(--radius);padding:12px 14px;margin-bottom:14px}
.skeleton{height:14px;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);border-radius:4px;animation:sh 1.2s infinite}
@keyframes sh{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--text-sec);font-weight:600}
.pager{display:flex;gap:10px;align-items:center;margin-top:12px}

/* ── Toast & modal ─────────────────────────────────────────────────────── */
#toasts{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:#fff;border-left:4px solid var(--primary);box-shadow:var(--shadow);border-radius:var(--radius);padding:12px 16px;min-width:260px;font-size:13px;font-weight:500}
.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--danger)}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:520px;width:100%;padding:24px;max-height:90vh;overflow:auto}
.modal h3{font-size:18px;font-weight:700;margin-bottom:10px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
pre.json{background:#0F172A;color:#E2E8F0;border-radius:var(--radius);padding:14px;font-size:12px;overflow:auto;max-height:320px}
.form-error{color:var(--danger);font-size:13px;margin-top:8px;font-weight:600}

/* ── Sidebar colapsable con iconos (estado persistido en localStorage) ──── */
.sidebar{display:flex;flex-direction:column}
.sidebar a{display:flex;align-items:center;gap:12px}
.sidebar a svg,.nav-toggle svg{width:20px;height:20px;flex:none}
.sidebar a .nav-label,.nav-toggle .nav-label{white-space:nowrap;overflow:hidden}
.nav-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;cursor:pointer;color:var(--text-sec);font-weight:600;font-size:13px;padding:10px 20px;margin-bottom:4px}
.nav-toggle:hover{color:var(--text)}
.shell.nav-collapsed{grid-template-columns:64px 1fr}
.shell.nav-collapsed .sidebar a,.shell.nav-collapsed .nav-toggle{justify-content:center;padding-left:0;padding-right:0;gap:0}
.shell.nav-collapsed .sidebar a .nav-label,.shell.nav-collapsed .nav-toggle .nav-label{display:none}
@media(max-width:820px){
  .shell:not(.nav-collapsed){grid-template-columns:64px 1fr}
  .shell:not(.nav-collapsed) .sidebar a,.shell:not(.nav-collapsed) .nav-toggle{justify-content:center;padding-left:0;padding-right:0;gap:0}
  .shell:not(.nav-collapsed) .sidebar a .nav-label,.shell:not(.nav-collapsed) .nav-toggle .nav-label{display:none}
}

/* ── Soporte: hilo de mensajes del ticket ──────────────────────────────── */
.support-thread{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto;margin:14px 0;padding:4px}
.support-thread .msg{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;max-width:88%}
.support-thread .msg-merchant{align-self:flex-start;background:#F1F5F9}
.support-thread .msg-support{align-self:flex-end;background:#E1EFFE;border-color:#C3DDFD}
.support-thread .msg-meta{font-size:11px;color:var(--text-sec);font-weight:600;margin-bottom:4px}
.support-thread .msg-body{white-space:pre-wrap;font-size:13px}
.ticket-head{display:flex;align-items:center;margin-bottom:6px}

/* Campo de NIF/CIF/NIE inválido (validación en cliente). */
.input-invalid{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(224,36,36,.15) !important}