/* ============================================================
   styles-redesign.css — capa de rediseño (2026-09)
   Se carga DESPUÉS de styles.css: unifica el sistema visual
   sin reescribir la hoja base. Dirección: estudio de moda
   contemporáneo con operación clara.
   ============================================================ */

/* ---- Tipografía: serif editorial solo en títulos principales ---- */
.page-h h1{font-family:var(--display);font-weight:400;font-size:44px;letter-spacing:-.2px;line-height:1.04}
.kpi .v{font-family:var(--font);font-weight:600;font-size:30px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pcard .pb .sk{font-family:var(--font)}
.brand .nm{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.2px}
.up{font-size:10px;letter-spacing:1.4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Shell ---- */
.sidebar{background:var(--bg);border-right:1px solid var(--line)}
.brand{padding:20px 16px 18px;gap:10px}
.nav{flex:0 0 auto;overflow:visible;padding:4px 12px}
.nav a{padding:9px 11px;font-size:14px;border-radius:var(--r-sm);margin-bottom:2px}
.nav a.on{background:var(--ink);color:#fff}
.nav a.on svg{color:var(--accent)}
.nav a.on .badge{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.nav-foot{margin-top:auto;padding-bottom:6px;border-top:1px solid var(--line);padding-top:10px}
.topbar{min-height:var(--head);padding:0 24px;gap:10px;background:rgba(246,245,240,.9)}

/* Sello de demo: en la cabecera, nunca flotando sobre el contenido */
.demo-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.demo-chip svg{width:14px;height:14px;color:var(--ok)}
.topbar .search{margin-left:0;flex:1;max-width:420px;width:auto}
.topbar .search kbd{margin-left:auto}

/* ---- Migas y subnavegación contextual ---- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);margin-bottom:10px}
.crumbs button{background:0;border:0;padding:0;font-size:12.5px;color:var(--ink-3);font-weight:500}
.crumbs button:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{color:var(--ink-4)}
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav button{background:0;border:0;padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

/* ---- KPIs ---- */
.kpi-row .kpi{text-align:left;width:100%;font-family:inherit;border-radius:var(--r-lg)}
.kpi .k{font-size:12px;color:var(--ink-2)}
/* El subtítulo del KPI es una frase, no una micro-etiqueta:
   sin mayúsculas forzadas ni verde por defecto. */
.kpi .d,.kpi .d.up,.kpi .d.flat{color:var(--ink-3);font-weight:500;font-size:12px;
  text-transform:none;letter-spacing:0}
.kpi .d.down{color:var(--warn)}
.kpi .spark{display:none}

/* ---- Inicio: portada de colección + resuelve hoy ---- */
.home-split{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.hero-col{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);min-height:300px}
.hero-col .prodimg,.hero-img{height:100%;border-radius:0}
.hero-ov{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(20,20,18,.72),rgba(20,20,18,0))}
.hero-cta{background:rgba(255,255,255,.94);border:0;border-radius:999px;padding:9px 16px;font-size:13px;
  font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.hero-cta:hover{background:#fff}
.resolve .card-b{padding-top:4px}
.rz{padding:14px 0;border-bottom:1px solid var(--line)}
.rz:last-child{border-bottom:0;padding-bottom:2px}
.rz-top{display:flex;align-items:flex-start;gap:10px}
.rz-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.rz-tx{flex:1;min-width:0}
.rz-tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.rz-tx small{display:block;color:var(--ink-3);font-size:12px;margin-top:3px;line-height:1.45}
.rz-go{flex:none;white-space:nowrap}
.rz-meta{display:flex;align-items:center;gap:7px;margin-top:8px;padding-left:18px;font-size:11.5px;color:var(--ink-3)}
.rz-meta svg{width:13px;height:13px}
.rz-meta .sep{color:var(--ink-4)}

/* ---- Tarjeta de producto: foto grande, datos completos, botón entero ---- */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pcard{display:flex;flex-direction:column}
.pcard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pcard .ph{height:auto;aspect-ratio:4/5;padding:0;background:var(--surface-2)}
.pcard .ph::after{display:none}
.pcard .ph .prodimg{width:100%;height:100%;border-radius:0}
.pcard .pb{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard .pb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pcard .pb .nm{white-space:normal;font-size:14px;line-height:1.3}
.pcard .pb .sk{font-size:12px;letter-spacing:.3px;margin:0;color:var(--ink-3)}
.swatches{display:flex;gap:5px}
.sw{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.14);flex:none}
.pcard .pb-stats{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pcard .pb-stats div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pcard .pb-stats b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pcard .pb-stats small{font-size:10.5px;color:var(--ink-3)}
.pcard .pb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;font-size:12px}
.pcard .pb-foot .who{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;background:0;border:0;font-size:12.5px}
.lnk svg{width:14px;height:14px}
.pcard:hover .lnk{text-decoration:underline}

/* ---- Detalle de producto: prenda grande a la izquierda ---- */
.tp-tabs{margin-top:14px}
.tp-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.tp-hero{aspect-ratio:4/5;background:var(--surface-2)}
.tp-hero .prodimg{width:100%;height:100%;border-radius:0}
.tp-thumbs{display:flex;gap:10px;margin-top:12px}
.tp-th{width:74px;height:92px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2);padding:0}
.tp-th:hover{border-color:var(--ink-4)}
.tp-th .prodimg{width:100%;height:100%;border-radius:0}
.tp-th .pi-img{object-fit:cover}
.tp-side{display:flex;flex-direction:column;gap:16px}
.tp-cost{display:flex;gap:20px;flex-wrap:wrap}
.tp-cost div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-cost b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.tp-cost small{font-size:11px;color:var(--ink-3)}
@media(max-width:1024px){ .tp-split{grid-template-columns:minmax(0,1fr)} }

/* ---- Tablas: encabezado fijo, scroll dentro del contenedor ---- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.tbl-wrap .tbl{min-width:640px}
.tbl-wrap thead th{position:sticky;top:0;background:var(--surface);z-index:2}
/* Cualquier tabla ancha desplaza SOLO su propia caja; el documento
   nunca gana scroll horizontal (criterio 8). Por defecto toda tabla
   de una vista se vuelve su propio contenedor desplazable; las que
   ya viven dentro de un envoltorio con scroll se dejan como están. */
.bd-scroll{overflow-x:auto}
.view table.tbl{display:block;overflow-x:auto}
.view table.tbl > thead,.view table.tbl > tbody{display:table;width:100%;min-width:620px}
.tbl-wrap table.tbl,.bd-scroll table.tbl{display:table;overflow:visible}
.tbl-wrap table.tbl > thead,.tbl-wrap table.tbl > tbody,
.bd-scroll table.tbl > thead,.bd-scroll table.tbl > tbody{display:table-header-group}
.tbl-wrap table.tbl > tbody,.bd-scroll table.tbl > tbody{display:table-row-group}
.cellp{display:flex;align-items:center;gap:11px;min-width:0}
.cellp-img{width:38px;height:47px;border-radius:6px;overflow:hidden;flex:none;background:var(--surface-2)}
.cellp-img .prodimg{width:100%;height:100%;border-radius:0}
.cellp-img .pi-img{object-fit:cover}
.cellp b{display:block;font-weight:600;font-size:13px}
.cellp small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.prog{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:4px;min-width:70px}
.prog > i{display:block;height:100%;background:var(--ink)}
.is-late{color:var(--bad);font-weight:600}

/* ---- Modo Feria: pausa y salida siempre visibles ---- */
.fx-ctl{position:absolute;top:16px;right:22px;z-index:20;display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,.85)}
/* Los puntos de escena bajan para no chocar con el control */
.fx-overlay .fx-tr{top:66px!important}
.fx-ctl button{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:7px;min-height:36px}
.fx-ctl button:hover{background:rgba(255,255,255,.2)}
.fx-ctl button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fx-ctl .fx-sep{opacity:.5}
.fx-ctl .fx-ic{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.fx-overlay.fx-paused .fx-ctl .fx-ic{width:0;height:0;border:6px solid transparent;border-left:9px solid currentColor}
/* Con reduced-motion el loop no se auto-anima: se navega con los controles */
@media (prefers-reduced-motion: reduce){
  .fx-overlay .fx-blob,.fx-overlay .fx-grain,.fx-overlay .fx-tk{animation:none!important}
}

/* ---- Nota metodológica: cómo se calcula lo que se muestra ---- */
.note{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px}
.note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-3)}
.note.is-bad{background:var(--badbg);border-color:#f2cfc9;color:#8d2f26}
.note.is-bad svg{color:var(--bad)}
.ce-in.is-bad{border-color:var(--bad)!important;background:var(--badbg)}
.tbl.meas th.is-base,.tbl.meas td.is-base{background:var(--surface-2);font-weight:600}

/* ---- Controles y foco ---- */
.inp-search{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:7px 12px;color:var(--ink-3);min-width:190px}
.inp-search input{border:0;outline:0;background:0;font-size:13px;font-family:inherit;color:var(--ink);width:100%}
.inp-search:focus-within{border-color:var(--ink-4)}
.toggle button{min-height:34px}
/* El botón de filtros solo existe en pantallas angostas */
.tb-toggle{display:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}

/* ---- Fotografía vs. flat técnico: son vistas distintas ---- */
.prodimg.is-cover .pi-img{object-fit:cover}
.prodimg.is-flat{background:var(--surface-2)}
.ai-badge{font-size:10px;letter-spacing:.4px;background:rgba(255,255,255,.9);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}

/* ---- Sin animaciones constantes ni cifras que corren valores falsos ---- */
.pgrid .pcard,.pcard,.kpi,.view{animation:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   RESPONSIVE · revisado en 1440×900, 1280×800, 768×1024, 390×844
   ============================================================ */
@media(max-width:1280px){
  .home-split{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
}
@media(max-width:1024px){
  .home-split{grid-template-columns:1fr}
  .hero-col{min-height:240px}
  .grid.g-3{grid-template-columns:1fr}
  .grid.g-3 .span2{grid-column:span 1}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .topbar .search{max-width:none}
  .page-h h1{font-size:34px}
  .page-h{flex-direction:column;align-items:flex-start;gap:14px}
  .page-h .meta{text-align:left;gap:22px;flex-wrap:wrap}
  .toolbar{gap:8px}
  .toolbar .sp{margin-left:0;width:100%;height:0}
}
@media(max-width:640px){
  /* Resumen compacto: dos KPIs por fila. La hoja base fuerza una sola
     columna con !important para toda .grid, así que aquí hace falta
     el mismo peso para conservar el resumen en dos columnas. */
  .grid.g-4.kpi-row,.grid.kpi-row{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .kpi{padding:12px 13px}
  .kpi .v{font-size:22px;margin-top:6px}
  .kpi .k{font-size:11px;line-height:1.25}
  .kpi .d{font-size:11px}
  .pgrid{grid-template-columns:1fr;gap:14px}
  .pcard .ph{aspect-ratio:1/1}
  .view{padding:16px 16px 96px}
  .topbar{padding:0 12px;gap:8px}
  /* La búsqueda es la vía principal para llegar a un registro:
     se queda visible en móvil. Lo secundario colapsa a icono. */
  .topbar .search#openCmd{display:flex;flex:1;min-width:0;padding:8px 10px}
  .topbar .search span{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .search kbd{display:none}
  .topbar .demo-chip,.topbar #brandBtn,.topbar #bellBtn,
  .topbar #tourBtn span,.topbar #newRef span{display:none}
  .topbar #newRef,.topbar #tourBtn{padding:9px 11px}
  .subnav{margin-bottom:16px}
  /* Filtros y acciones plegados: se despliegan bajo demanda */
  .tb-toggle{display:inline-flex!important;margin-bottom:12px;width:100%;justify-content:center}
  .toolbar{display:none}
  .toolbar.tb-open{display:flex;flex-direction:column;align-items:stretch;gap:10px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:14px;margin-bottom:16px}
  .toolbar.tb-open .fpills{flex-wrap:wrap}
  .toolbar.tb-open .toggle,.toolbar.tb-open .inp-search{width:100%}
  .toolbar.tb-open .toggle{display:flex}
  .toolbar.tb-open .toggle button{flex:1;justify-content:center}
  .rz-go{width:100%;justify-content:center;margin-top:8px}
  .rz-top{flex-wrap:wrap}
  /* Objetivos táctiles de ~44 px */
  .nav a,.subnav button,.fpill,.btn,.toggle button{min-height:44px}
  .btn.sm{min-height:40px}
  /* El copiloto se reduce a un botón redondo: tapa lo mínimo y el
     contenido conserva espacio libre al pie para no quedar debajo. */
  .copilot-fab{bottom:14px;right:14px;width:52px;height:52px;padding:0;border-radius:50%;
    justify-content:center;font-size:0;overflow:hidden}
  .copilot-fab b{font-size:20px}
}