:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --accent: #1a1a1a;
  --row-product: #f4f4f2;
  --badge-high: #fef2f2;
  --badge-high-text: #991b1b;
  --badge-mid: #fffbeb;
  --badge-mid-text: #92400e;
  --badge-low: #f0fdf4;
  --badge-low-text: #166534;
  --tag-bg: #f0f0ee;
  --tag-text: #374151;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Login ── */
.login-wrap { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: 24px; }
.login-box  { background: var(--surface); border: 1px solid var(--border);
              border-radius: 12px; padding: 40px; width: 100%; max-width: 360px;
              box-shadow: 0 4px 24px rgba(0,0,0,.06); text-align: center; }
.login-box h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.login-box p  { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }
.login-box input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 1rem; outline: none; margin-bottom: 12px;
}
.login-box button {
  width: 100%; padding: 12px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.login-box button:hover { opacity: .85; }
.error { color: #dc2626; font-size: .85rem; margin-top: 10px; }

/* ── Header ── */
header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1000px; margin: 0 auto; padding: 16px 20px;
                display: flex; align-items: center; justify-content: space-between; }
header .brand { display: inline-flex; align-items: center; text-decoration: none; }
header .brand-logo { height: 28px; width: auto; display: block; }
header .meta  { font-size: .8rem; color: var(--muted); }
header a.logout { font-size: .8rem; color: var(--muted); text-decoration: none;
                  margin-left: 16px; }

/* ── Tabs ── */
.tab-nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.tab-nav-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px;
                 display: flex; gap: 0; }
.tab-nav a { display: inline-block; padding: 12px 20px; font-size: .88rem;
             font-weight: 600; text-decoration: none; color: var(--muted);
             border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-nav a:hover { color: var(--text); }
.tab-nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Nav grupos con sub-barra ── */
.nav-group-label {
  display: inline-block; padding: 12px 20px;
  font-size: .88rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: default; user-select: none; white-space: nowrap;
}
.nav-group-label:hover { color: var(--text); }
.nav-group-label.active { color: var(--text); border-bottom-color: var(--accent); }

.sub-nav { display: block; background: var(--surface); border-bottom: 1px solid var(--border); }
.sub-nav-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; position: relative; height: 34px; }
.sub-nav-group { display: none; position: absolute; left: 0; top: 0; height: 100%; align-items: center; }
.sub-nav-group.visible { display: flex; gap: 0; }
.sub-nav-group a {
  display: inline-block; padding: 5px 16px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.sub-nav-group a:hover  { color: var(--text); }
.sub-nav-group a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Main ── */
main { max-width: 1000px; margin: 0 auto; padding: 32px 20px; }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--border);
             border-radius: 10px; padding: 18px 20px; }
.stat-card .val { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat-card .lbl { font-size: .78rem; color: var(--muted); margin-top: 5px; }

.section-title { font-size: .72rem; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.section-header { display: flex; align-items: center; justify-content: space-between;
                  gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* ── Atajos rápidos de periodo (botón secundario) ── */
.period-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.period-full  { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.period-chip  { display: inline-block; padding: 9px 16px; border-radius: 8px;
                background: var(--surface); border: 1px solid var(--border);
                font-size: .85rem; font-weight: 500; color: var(--text);
                text-decoration: none; cursor: pointer; white-space: nowrap;
                transition: background .12s, border-color .12s; }
.period-chip:hover  { background: var(--border); }
.period-chip.active { background: var(--row-product); font-weight: 600; }

/* ── Toolbar ── */
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
           align-items: center; }
.search-bar { flex: 1; min-width: 180px; padding: 9px 14px;
              border: 1px solid var(--border); border-radius: 8px;
              font-size: .9rem; outline: none; }
.search-bar:focus { border-color: var(--accent); }
.col-filter, .period-select { padding: 9px 14px; border: 1px solid var(--border);
              border-radius: 8px; font-size: .9rem; background: var(--surface);
              outline: none; cursor: pointer; }
.col-filter { min-width: 200px; }
.col-filter:focus, .period-select:focus { border-color: var(--accent); }
.refresh-btn, .filter-btn { padding: 9px 16px; background: var(--surface);
               border: 1px solid var(--border); border-radius: 8px;
               font-size: .85rem; cursor: pointer; white-space: nowrap; }
.refresh-btn:hover, .filter-btn:hover { background: var(--border); }
.filter-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-btn:hover { opacity: .85; background: var(--accent); }
.date-input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
              font-size: .88rem; outline: none; }
.date-input:focus { border-color: var(--accent); }

/* ── Tabla ── */
table { width: 100%; border-collapse: collapse; background: var(--surface);
        border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
th { font-size: .72rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .06em; color: var(--muted); padding: 11px 16px;
     text-align: left; border-bottom: 1px solid var(--border); background: #f9f9f8; }
th.num { text-align: right; }

tr.product-row td { background: var(--row-product);
                    border-bottom: 1px solid var(--border);
                    padding: 12px 16px; cursor: pointer; }
tr.product-row .product-title { font-weight: 700; font-size: .95rem; }
.product-thumb { width: 36px; height: 36px; object-fit: cover;
                 border-radius: 5px; margin-right: 10px;
                 vertical-align: middle; flex-shrink: 0; }
.product-title-wrap { display: flex; align-items: center; }
tr.product-row .toggle { color: var(--muted); font-size: .85rem;
                          margin-left: 6px; user-select: none; }
tr.product-row.not-first td { border-top: 2px solid var(--border); }

.col-tags { margin-top: 4px; display: flex; gap: 5px; flex-wrap: wrap; }
.col-tag  { display: inline-block; padding: 2px 8px; border-radius: 20px;
            font-size: .72rem; font-weight: 500; background: var(--tag-bg);
            color: var(--tag-text); }

tr.variant-row td { padding: 9px 16px 9px 36px;
                    border-bottom: 1px solid var(--border);
                    font-size: .85rem; background: var(--surface); }
tr.variant-row:last-of-type td { border-bottom: none; }

/* Tabla plana (sin filas expandibles): mismo aspecto que las de producto/variante */
table.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border);
                      font-size: .85rem; background: var(--surface); vertical-align: top; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover td { background: var(--row-product); }
.sku { font-family: monospace; font-size: .78rem; color: var(--muted); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px;
         font-size: .75rem; font-weight: 700; }
.badge-high { background: var(--badge-high); color: var(--badge-high-text); }
.badge-mid  { background: var(--badge-mid);  color: var(--badge-mid-text); }
.badge-low  { background: var(--badge-low);  color: var(--badge-low-text); }

.badge-new { display: inline-block; padding: 2px 8px; border-radius: 20px;
             font-size: .68rem; font-weight: 700; margin-left: 6px;
             background: #ede9fe; color: #6d28d9; vertical-align: middle; }

.num-cell { text-align: right; }
.muted    { color: var(--muted); }

/* ── Matriz de tallas (Stock) ── */
.size-matrix { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }
.size-cell { min-width: 42px; padding: 6px 8px; border-radius: 6px;
             text-align: center; line-height: 1.15; background: #f6f6f4;
             border: 1px solid var(--border); }
.size-cell .size-label { font-size: .68rem; font-weight: 600; color: var(--muted);
                         text-transform: uppercase; letter-spacing: .04em; }
.size-cell .size-val   { font-size: .95rem; font-weight: 700; margin-top: 2px; }
.size-cell.size-empty .size-val { color: #d1d5db; font-weight: 500; }
.size-cell.size-out   { background: var(--badge-high); border-color: transparent; }
.size-cell.size-out   .size-val { color: var(--badge-high-text); }
.size-cell.size-low   { background: var(--badge-mid);  border-color: transparent; }
.size-cell.size-low   .size-val { color: var(--badge-mid-text); }
.size-cell.size-ok    { background: var(--badge-low);  border-color: transparent; }
.size-cell.size-ok    .size-val { color: var(--badge-low-text); }
.size-cell.size-total { background: var(--accent); border-color: var(--accent); min-width: 52px; }
.size-cell.size-total .size-label { color: rgba(255,255,255,.7); }
.size-cell.size-total .size-val   { color: #fff; }

/* Vista stock_total — dos filas de matrices + pill total */
.dual-matrix-wrap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.dual-matrix-rows { display: flex; flex-direction: column; gap: 4px; }
.dual-matrix-rows .size-matrix { justify-content: flex-end; }
.size-cell.dual-total { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 52px; }
.stock-dual-legend { font-size: .78rem; color: var(--muted); margin: -4px 0 14px; }
.sortable-col { cursor: pointer; user-select: none; }
.sortable-col:hover { color: var(--text); }

tr.stock-row td, tr.demand-row td { cursor: default; }

/* ── Segundo nivel: alertas de devoluciones ── */
.alert-stats { display: grid; grid-template-columns: 2fr 1fr 1fr;
               gap: 12px; margin-bottom: 12px; }
.alert-card  { background: var(--surface); border: 1px solid var(--border);
               border-radius: 10px; padding: 14px 16px; }
.alert-card .alert-title { font-size: .7rem; font-weight: 600; text-transform: uppercase;
                            letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.alert-card.alert-action { cursor: pointer; transition: border-color .15s, transform .1s; }
.alert-card.alert-action:hover { border-color: var(--accent); }
.alert-card.alert-action.is-empty { cursor: default; opacity: .5; }
.alert-card.alert-action.is-empty:hover { border-color: var(--border); }
.alert-card.alert-action.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.alert-card .alert-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.alert-card .alert-sub   { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.alert-card .alert-cta   { font-size: .72rem; color: var(--accent); margin-top: 8px; font-weight: 600; }
.alert-card.active .alert-cta::after { content: ' (activo)'; }

.alert-card.alert-chart { padding: 14px 16px; }
.motive-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden;
              background: #f3f4f6; margin-bottom: 10px; }
.motive-seg { display: block; height: 100%; }
.motive-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .72rem; }
.motive-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.motive-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

.alert-list { background: var(--surface); border: 1px solid var(--border);
              border-radius: 10px; padding: 8px 0; margin-bottom: 14px; display: none; }
.alert-list.open { display: block; }
.alert-list-item { display: flex; justify-content: space-between; align-items: center;
                   padding: 8px 16px; font-size: .85rem;
                   border-bottom: 1px solid var(--border); }
.alert-list-item:last-child { border-bottom: none; }
.alert-list-title { font-weight: 600; }
.alert-list-meta  { font-size: .78rem; color: var(--muted); }

@media (max-width: 720px) {
  .alert-stats { grid-template-columns: 1fr; }
}

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state p { font-size: .95rem; }

@media (max-width: 640px) {
  .header-inner  { padding: 14px 16px; }
  .tab-nav-inner { padding: 0 16px; }
  main           { padding: 20px 12px; }
  .col-filter { min-width: 160px; }
}

/* ── Vista Global ── */
main.embed  { padding: 8px 12px; }
/* Modo embed: ocultar chrome no esencial — stats, alertas, títulos de sección,
   y el pie de "última sincronización". Solo deja filtros + tabla. */
main.embed .stats,
main.embed .alert-stats,
main.embed .alert-list,
main.embed .section-title,
main.embed .section-header,
main.embed .stock-dual-legend,
main.embed .sync-status { display: none; }
/* Página Global: aprovechar todo el ancho del viewport */
main.global { max-width: 100%; padding: 16px 16px; }

.global-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.search-input-wrap { position:relative; display:inline-block; }
.search-input-wrap .search-bar { width:350px; min-width:0; padding-right:24px; }
.search-clear {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:0 4px;
  font-size:1rem; line-height:1; color:var(--muted);
}
.search-clear:hover { color:var(--text); }
.search-clear.hidden { display:none; }
.global-grid    { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.global-pane    { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; }
.global-pane-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; background:#f6f6f4; border-bottom:1px solid var(--border);
  font-size:.85rem; font-weight:500;
}
.global-pane-actions { display:flex; align-items:center; gap:4px; }
.global-pane-head .global-refresh,
.global-pane-head .global-open {
  background:none; border:none; cursor:pointer;
  font-size:.95rem; padding:2px 6px; line-height:1;
  text-decoration:none; color:inherit; border-radius:4px;
}
.global-pane-head .global-refresh:hover,
.global-pane-head .global-open:hover { background:#e5e5e5; }
.global-pane iframe { width:100%; height: calc(100vh - 200px); min-height: 500px; border:0; display:block; }

.global-pane-right { display:flex; align-items:center; gap:12px; }
.global-pane-active-label { color: var(--muted); font-weight: 400; font-size: .75rem; margin-left: 2px; }
.global-pane-subtabs { display:flex; gap:8px; align-items:center; font-size:.85rem; }
.global-pane-subtabs a.subtab-link {
  color: var(--muted);
  text-decoration: underline;
  padding: 1px 2px;
}
.global-pane-subtabs a.subtab-link:hover { color: var(--text); }
.global-pane-subtabs a.subtab-link.active {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

/* ── Reposición ── */
.badge-muted  { background: #f3f4f6; color: var(--muted); }
.days-urgent  { color: var(--badge-high-text); font-weight: 700; }
.days-low     { color: var(--badge-mid-text);  font-weight: 600; }

@media (max-width: 1400px) {
  .global-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .global-grid { grid-template-columns: 1fr; }
  .global-pane iframe { height: 70vh; }
}

/* Vista ancha (Gestión RMA): más espacio para tablas de muchas columnas */
main.wide, .header-inner.wide, .tab-nav-inner.wide, .sub-nav-inner.wide { max-width: 1400px; }
.table-scroll { overflow-x: auto; }   /* red de seguridad en pantallas estrechas */

/* Tabla de modelos devueltos (Gestión RMA): producto con variantes en líneas y varias columnas alineadas */
.rma-models { min-width: 1000px; }
.rma-models th { white-space: nowrap; }
.rma-models th, .rma-models td { padding-left: 12px; padding-right: 12px; }
.rma-models td { vertical-align: top; }
.rma-models .ln { line-height: 1.6rem; height: 1.6rem; white-space: nowrap; }
.rma-models .ln.head { font-weight: 700; }
.rma-models .ln.var { color: var(--muted); font-size: .84rem; }
.rma-models .ln .badge { padding: 0 9px; line-height: 1.35rem; }   /* que la etiqueta no descuadre las líneas */
.rma-models .var-name { overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.rma-models .reasons-col { padding-top: 12px; font-size: .82rem; line-height: 1.55rem; }
.rma-models .cm-toggle { display: inline-block; cursor: pointer; user-select: none; font-size: .76rem; color: var(--muted); margin-top: 6px; }
.rma-models .cm-toggle:hover { color: var(--text); }

/* Comentarios de clientas: fila propia a todo el ancho con tarjetas */
.rma-models tr.cm-row td { background: var(--row-product); padding: 14px 20px 18px 58px; white-space: normal; }
.rma-models tr.cm-row:hover td { background: var(--row-product); }
.cm-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.cm-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .72rem; }
.cm-tag { display: inline-block; padding: 1px 8px; border-radius: 20px; background: var(--tag-bg); color: var(--tag-text); font-weight: 600; }
.cm-text { font-size: .84rem; line-height: 1.45; color: var(--text); word-break: break-word; }
.cm-ref  { font-size: .68rem; margin-top: 6px; }
.rma-models .size-ind { padding-top: 12px; }

/* Gestión RMA: Motivo → modelos (tarjetas) y Análisis por talla (tabla) */
.rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 4px; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 10px; padding: 14px 16px 16px; }
.rr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rr-title { font-weight: 700; font-size: .95rem; }
.rr-total { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.rr-total strong { color: var(--text); }
.rr-row { margin-top: 10px; }
.rr-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; }
.rr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-num { white-space: nowrap; font-weight: 600; }
.rr-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.rr-bar > span { display: block; height: 100%; border-radius: 3px; }
.rma-sizes td { vertical-align: middle; }
.rma-sizes .rs-size { font-weight: 700; font-size: 1rem; width: 70px; }
.rma-sizes .rs-vol { min-width: 190px; width: 24%; }
.rma-sizes .rs-vol-line { font-size: .88rem; }
.rs-chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px 12px 2px 0; font-size: .8rem; white-space: nowrap; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Tablas ordenables (Devoluciones Web / Sevilla): table.sortable + th[data-sort] */
table.sortable th.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th.sortable-col:hover { color: var(--text); }
.sort-arrow { display: inline-block; min-width: 10px; font-size: .62rem; margin-left: 2px; color: var(--text); }