.admin-shell{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.admin-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    var(--card);
  box-shadow: var(--shadow-soft);
}

.admin-hero h2{
  margin:0 0 6px 0;
  font-size:28px;
  letter-spacing:-0.02em;
  color:var(--heading);
}

.admin-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  max-width:760px;
}

.admin-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow: var(--shadow-soft);
}

.admin-toolbar-left,
.admin-toolbar-right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  min-width:0;
}

.admin-grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
  align-items:start;
}

.admin-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  align-items:start;
}

.admin-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    var(--card);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  min-width:0;
}

.admin-card-head{
  padding:20px 24px 16px 24px;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.admin-card-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}

.admin-card-subtitle{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.admin-card-body{
  padding:20px 24px 24px 24px;
  min-width:0;
}

.admin-field-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
}

.admin-field-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:20px;
}

.admin-field-grid-1{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
}

.admin-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.admin-field label{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  margin-bottom:2px;
}

.admin-field input,
.admin-field select,
.admin-field textarea{
  width:100%;
  min-width:0;
  height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  border-style:solid;
  outline:none;
  background-color:var(--input-bg);
  color:var(--input-text);
  font-size:14px;
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.admin-field textarea{
  min-height:108px;
  height:auto;
  padding:10px 14px;
  resize:vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus{
  outline:none;
  border-color:var(--blue);
  border-style:solid;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* 2026-05-13: Override Chrome/Safari autofill local al scope .admin-field.
   Sin esto, Chrome pinta bg amarillo/celeste sobre el input al cargar
   passwords/emails/direcciones guardados. Usa vars del tema (light+dark
   resuelve solo). Defense-in-depth: shadow inset + bg-color + text-fill. */
.admin-field input:-webkit-autofill,
.admin-field input:-webkit-autofill:hover,
.admin-field input:-webkit-autofill:focus,
.admin-field input:-webkit-autofill:active,
.admin-field select:-webkit-autofill,
.admin-field select:-webkit-autofill:hover,
.admin-field select:-webkit-autofill:focus,
.admin-field textarea:-webkit-autofill,
.admin-field textarea:-webkit-autofill:hover,
.admin-field textarea:-webkit-autofill:focus,
.admin-field input:autofill,
.admin-field select:autofill,
.admin-field textarea:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
          box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  background-color: var(--input-bg) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--input-text) !important;
  color: var(--input-text) !important;
  caret-color: var(--input-text) !important;
  border-color: var(--line) !important;
  transition: background-color 9999s ease-in-out 0s,
              color 9999s ease-in-out 0s !important;
}

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.admin-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

/* Dashboard KPI hide button: show on card hover */
[id^="dw_"]:hover>button{opacity:.5!important}
[id^="dw_"]:hover>button:hover{opacity:1!important;color:var(--danger-text,#dc2626)!important}

.admin-kpi{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding:20px 22px;
}

.admin-kpi-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.admin-kpi-value{
  font-size:24px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}

.admin-list-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  padding:6px 10px;
  color:var(--muted);
  font-size:12px;
}

.premium-table{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:auto;
  background:rgba(255,255,255,.01);
}

.premium-table table{
  width:100%;
  border-collapse:collapse;
  min-width:920px;
}

.premium-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--table-head-bg);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  padding:12px 14px;
  text-align:left;
  white-space:nowrap;
  backdrop-filter: blur(8px);
}

.premium-table tbody td{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.05);
  vertical-align:top;
  font-size:13px;
  color:var(--text);
  word-break:break-word;
}

.premium-table tbody tr:hover{
  background:var(--blue-bg, rgba(29,78,216,.08));
}

/* Audit log table — action column no-wrap, detail column wider */
.audit-log-table table{
  min-width:1080px;
}
.audit-col-action{
  white-space:nowrap;
  min-width:180px;
}
.audit-col-detail{
  min-width:250px;
  font-size:12px;
  color:var(--muted, #6b7280);
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Hero hover — keep text readable */
.admin-hero:hover,
.stock-hero:hover{
  filter:brightness(1.03);
  transition:filter .2s;
}
.admin-hero h2, .admin-hero p,
.stock-hero h2, .stock-hero p{
  transition:opacity .2s;
}

/* Sub-tab button hover */
.sub-tab-bar button:hover{
  background:transparent !important;
  transform:none !important;
  color:var(--blue) !important;
}
.sub-tab-bar button.active:hover{
  background:transparent !important;
  filter:none;
}

/* Report sub-tab hover */
.report-sub-tab:hover{
  background:rgba(29,78,216,.10) !important;
  transform:none !important;
}
.report-sub-tab.active:hover{
  filter:brightness(1.08);
}

.premium-empty{
  padding:32px 28px;
  border:1px dashed var(--line);
  border-radius:18px;
  text-align:center;
  color:var(--muted);
  background:rgba(255,255,255,.015);
}

.premium-section-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.premium-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}

.premium-badge.ok{
  color:var(--success-text,#16A34A);
  border-color:rgba(34,197,94,.22);
  background:rgba(34,197,94,.08);
}

.premium-badge.off{
  color:var(--danger-text,#DC2626);
  border-color:rgba(220,38,38,.20);
  background:rgba(220,38,38,.08);
}

.premium-inline-help{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}

.premium-image-preview{
  width:160px;
  height:160px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.premium-image-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.premium-split-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.premium-filters{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap:16px;
  align-items:end;
}

.premium-report-filters{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
  align-items:end;
}

/* --- Global input overflow prevention --- */
.admin-shell input,
.admin-shell select,
.admin-shell textarea{
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width: 1220px){
  .admin-grid-2,
  .admin-grid-3,
  .premium-filters,
  .premium-report-filters,
  .admin-field-grid,
  .admin-field-grid-2{
    grid-template-columns:1fr;
  }
  .admin-kpis{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 900px){
  .admin-grid-3{ grid-template-columns:1fr !important; }
  .admin-field-grid-2{ grid-template-columns:1fr !important; }
  .admin-kpis{ grid-template-columns:repeat(2, 1fr) !important; }
  .stock-grid-main{ grid-template-columns:1fr !important; }
}

@media (max-width: 640px){
  .admin-kpis{ grid-template-columns:1fr !important; }
  .admin-shell{ padding:12px !important; }
  .admin-card{ border-radius:12px !important; }
  .admin-card-head{ flex-direction:column !important; align-items:flex-start !important; gap:8px !important; }
  .admin-card-body{ padding:14px !important; }
  .admin-hero{ flex-direction:column !important; align-items:flex-start !important; gap:8px !important; }
  .admin-hero h2{ font-size:1.2em !important; }
  .premium-table{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  .premium-table table{ min-width:500px !important; }
  .admin-toolbar-right{ width:100% !important; }
  .admin-toolbar-left{ width:100% !important; flex-wrap:wrap !important; }
  .admin-actions{ flex-wrap:wrap !important; }
  .admin-toolbar{ padding:12px; }
}

@media (max-width: 768px){
  .admin-field input,
  .admin-field select{
    height:42px !important;
    max-height:42px !important;
    min-height:0 !important;
    font-size:16px !important;
    padding:8px 12px !important;
    box-sizing:border-box !important;
  }
  .admin-field textarea{
    height:auto !important;
    max-height:none !important;
    min-height:60px !important;
  }
}

@media (max-width: 760px){
  .admin-hero{
    padding:18px;
  }

  .admin-hero h2{
    font-size:24px;
  }

  .admin-toolbar{
    padding:12px;
  }
}

@media (max-width: 430px){
  .admin-field input,
  .admin-field select{
    height:40px !important;
    max-height:40px !important;
    padding:6px 10px !important;
  }
}

/* ── Report Sub-Tab System ── */
.report-subtabs-nav{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.report-subtab-btn{
  padding:10px 18px;border-radius:0;border-top:none;border-left:none;border-right:none;border-bottom:2px solid transparent;
  background:transparent;color:var(--text);cursor:pointer;
  font-size:.92em;font-weight:600;transition:all .15s;min-height:44px;
}
.report-subtab-btn:hover{background:transparent;color:var(--blue);transform:none}
.report-subtab-btn.active{
  color:var(--blue);border-bottom:2px solid var(--blue);font-weight:700;
  background:transparent;box-shadow:none;
}
.report-mini-tab{
  padding:8px 16px;border-radius:0;border-top:none;border-left:none;border-right:none;border-bottom:2px solid transparent;
  background:transparent;color:var(--text);cursor:pointer;
  font-size:12px;font-weight:600;transition:all .15s;
}
.report-mini-tab:hover{background:transparent;color:var(--blue)}
.report-mini-tab.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);font-weight:700}
.report-columns-toggle{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  padding:16px 20px;background:var(--bg);border-radius:12px;
  margin-bottom:20px;font-size:13px;
}
.col-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;padding:6px 0}
.col-toggle input{margin:0}
.report-filters{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 0;margin-bottom:20px;font-size:13px;
}
.report-filters label{display:flex;align-items:center;gap:8px}
.report-filters input,.report-filters select{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background-color:var(--card);color:var(--text);font-size:13px;
}
.report-table{
  width:100%;border-collapse:collapse;font-size:.88em;table-layout:auto;
}
.report-table th{
  white-space:nowrap;padding:12px 14px;text-align:left;
  background:var(--bg);border-bottom:2px solid var(--line);
  font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;
}
.report-table td{padding:10px 14px;border-bottom:1px solid var(--line);word-break:break-word}
.report-table td.cell-nowrap{white-space:nowrap}
.report-table .alt-row{background:var(--bg)}
.report-table tr:hover{opacity:.85}
.report-badge-type{white-space:nowrap;display:inline-block;padding:2px 8px;border-radius:6px;font-size:.82em;font-weight:700;letter-spacing:.3px}
.report-badge-in{background:var(--success-bg,rgba(22,163,74,0.12));color:var(--success-text,#16a34a)}
.report-badge-out{background:var(--danger-bg,rgba(220,38,38,0.12));color:var(--danger-text,#dc2626)}
.report-warn-text{color:var(--warning-text,#f59e0b);font-style:italic;font-size:.92em}
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--line,#334155);color:var(--muted,#94a3b8);font-size:11px;font-weight:700;cursor:help;margin-left:6px;vertical-align:middle;line-height:1;border:1px solid var(--muted,#64748b);position:relative}
.help-tip:hover{background:var(--accent,#3b82f6);color:#fff;border-color:var(--accent,#3b82f6)}
.help-tip:hover::after{content:attr(data-tip);position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:#1e293b;color:#e2e8f0;padding:6px 10px;border-radius:6px;font-size:12px;white-space:normal;max-width:300px;z-index:8000;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;font-weight:400;text-align:center;min-width:150px}
[data-theme="light"] .help-tip:hover::after{background:#1e293b;color:#f8fafc}
[data-theme="light"] .help-tip{background:#e2e8f0;color:#64748b;border-color:#cbd5e1}
[data-theme="light"] .help-tip:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}
.report-export-btn{
  padding:6px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--text);cursor:pointer;
  font-size:12px;font-weight:500;transition:all .2s;
}
.report-export-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.report-actions{display:flex;gap:10px;margin-top:18px}

/* Light-mode overrides for reports */
[data-theme="light"] .report-subtab-btn{background:transparent;color:#334155}
[data-theme="light"] .report-subtab-btn:hover{background:transparent;color:var(--blue,#3b82f6)}
[data-theme="light"] .report-subtab-btn.active{background:transparent;color:var(--blue,#3b82f6);border-bottom:2px solid var(--blue,#3b82f6)}
[data-theme="light"] .report-mini-tab{background:transparent;color:#334155}
[data-theme="light"] .report-mini-tab:hover{background:transparent;color:var(--blue,#3b82f6)}
[data-theme="light"] .report-mini-tab.active{background:transparent;color:var(--blue,#3b82f6);border-bottom:2px solid var(--blue,#3b82f6)}
[data-theme="light"] .report-columns-toggle{background:#f8fafc;color:#334155}
[data-theme="light"] .report-filters label{color:#334155}
[data-theme="light"] .report-filters input,[data-theme="light"] .report-filters select{background:#fff;border-color:#e2e8f0;color:#1e293b}
[data-theme="light"] .report-table th{background:#f8fafc;border-color:#e2e8f0;color:#0f172a}
[data-theme="light"] .report-table td{border-color:#f1f5f9;color:#1e293b}
[data-theme="light"] .report-table .alt-row{background:#f8fafc}
[data-theme="light"] .report-export-btn{background:#fff;border-color:#e2e8f0;color:#334155}
[data-theme="light"] .report-export-btn:hover{background:var(--blue,#3b82f6);color:#fff;border-color:var(--blue,#3b82f6)}
[data-theme="light"] .admin-kpi{background:#fff;border-color:#e2e8f0}
[data-theme="light"] .admin-kpi-value{color:#0f172a}
[data-theme="light"] .admin-kpi-label{color:#475569}
[data-theme="light"] .premium-report-filters{color:#334155}
[data-theme="light"] .premium-report-filters label{color:#334155}
[data-theme="light"] .premium-report-filters input,[data-theme="light"] .premium-report-filters select{background:#fff;border-color:#e2e8f0;color:#1e293b}

/* Simple bar charts */
.simple-chart{margin:16px 0}
.chart-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.chart-label{width:160px;font-size:12px;color:var(--muted,#94a3b8);text-align:right;flex-shrink:0;white-space:normal;word-break:break-word}
.chart-bar-wrap{flex:1;height:24px;background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden}
.chart-bar{height:100%;background:var(--accent,#10b981);border-radius:4px;transition:width 0.5s ease;min-width:2px}
.chart-value{width:100px;font-size:12px;color:var(--text);font-weight:600}
[data-theme="light"] .chart-label{color:#64748b}
[data-theme="light"] .chart-bar-wrap{background:rgba(0,0,0,0.05)}
[data-theme="light"] .chart-value{color:#334155}

/* Report visibility matrix */
.rv-matrix{width:100%;border-collapse:collapse;font-size:.85em}
.rv-matrix th,.rv-matrix td{padding:10px 14px;text-align:center;border-bottom:1px solid var(--line)}
.rv-matrix th:first-child,.rv-matrix td:first-child{text-align:left}
.rv-matrix th{font-weight:600;color:var(--muted);font-size:.8em;text-transform:uppercase}
.rv-matrix input[type="checkbox"]{width:18px;height:18px;cursor:pointer}

/* Config page spacing classes
 * 2026-05-12 fix sistémico light-mode: el background con `rgba(255,255,255,.025)`
 * fue diseñado SOLO para dark mode (overlay blanco sutil sobre fondo oscuro).
 * En light mode con --card=#FFFFFF el card quedaba blanco puro sin separación
 * del fondo --bg=#F5F7FB. Cambiado a `var(--card)` plano + box-shadow para la
 * separación. Border-bottom de la head: rgba(255,255,255,.06) era invisible en
 * light mode → cambiado a var(--line). El color de la head b era var(--text)
 * pero debe ser var(--heading) según jerarquía tipográfica del Design System §15.
 */
.config-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  margin-bottom:24px;
  min-width:0;
}
.config-card label{
  max-width:100%;
  box-sizing:border-box;
}
.config-card-head{
  padding:20px 28px 16px 28px;
  border-bottom:1px solid var(--line);
}
.config-card-head b{
  font-size:16px;
  font-weight:700;
  color:var(--heading);
}
.config-card-body{
  padding:24px 28px 28px 28px;
}
.config-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px 24px;
}
.config-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.config-field label{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  margin-bottom:2px;
}
.config-field input,
.config-field select{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background-color:var(--input-bg);
  color:var(--input-text);
  font-size:14px;
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.config-field input:focus,
.config-field select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.config-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:14px;
  cursor:pointer;
  color:var(--text);
}
.config-check input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
  flex-shrink:0;
}
.config-help{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}