/* ═══════════════════════════════════════════════════
   1. VARIABLES GLOBALES, RESET Y BASE
   ═══════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
/* Oswald self-hosted (fonts/oswald-latin-variable.woff2) — variable font, pesos 200-700,
   subset latin. Sin CDN: sigue la misma convención que las imágenes ya migradas a archivos
   reales (ver CONTEXT.md) — un solo archivo de 21KB, cero requests externos. */
@font-face{
  font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../fonts/oswald-latin-variable.woff2') format('woff2');
}
:root{
  --rojo:#C8102E;--rojo-hover:#a30d24;--rojo-active:#8a0b1e;
  --rojo-soft:#FDEEEF;--rojo-accent:#FF5C72;
  --negro:#0F0F0F;--negro-suave:#161513;--negro-borde:#2A2A26;
  --blanco:#fff;
  --gris-claro:#F5F5F4;--gris-borde:#e5e3e0;--gris-borde-oscuro:#3A3A36;
  --gris-texto:#555;--gris-texto-suave:#8A8A86;--gris-texto-dark-bg:#C9C9C6;
  --gris-texto-medio:#6B6B66;--gris-texto-fuerte:#4A4A48;--gris-tab-inactivo:#7A7A76;
  --gris-panel:#F9F8F6;--gris-panel-borde:#ECECEA;--gris-pill:#F0EFEC;
  --azul-sensacion:#2563A8;--azul-sensacion-bg:#EAF1F9;
  --radio:8px;--radio-lg:14px;--radio-xl:16px;
  --font-display:'Oswald',-apple-system,sans-serif;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f7f7f7;color:var(--negro);min-height:100vh;overflow-x:hidden}

/* HEADER */

/* ═══════════════════════════════════════════════════
   2. LAYOUT GENERAL — .main, .section, .sec-head, buscador
   ═══════════════════════════════════════════════════ */

.main{max-width:1200px;margin:0 auto;padding:28px 24px}
.section{display:none}
.section.visible{display:block}

/* SECTION HEADER */
.sec-head{margin-bottom:24px}
.sec-head h1{font-size:22px;font-weight:700;color:var(--negro);margin-bottom:4px}
.sec-head p{font-size:14px;color:var(--gris-texto)}

/* FILTROS */
.no-results{padding:48px;text-align:center;color:var(--gris-texto);font-size:14px}

/* BUSCADOR */
.search-bar{position:relative;margin-bottom:16px;flex:1;min-width:0}
.search-bar input{width:100%;padding:11px 14px 11px 38px;font-size:13.5px;border:1.5px solid var(--gris-borde);border-radius:9px;outline:none;background:#fff;color:var(--negro);transition:border-color .15s;box-sizing:border-box}
.search-bar input:focus{border-color:var(--rojo)}
.search-bar input::placeholder{color:#a3a3a0}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:#a3a3a0;pointer-events:none}

/* ═══════════════════════════════════════════════════
   3. HEADER Y NAVEGACIÓN — .header, .nav-bar, lightbox
   ═══════════════════════════════════════════════════ */

.header{
  background:var(--negro);padding:0 24px;
  display:flex;align-items:center;gap:24px;
  height:64px;position:sticky;top:0;z-index:100;
  border-bottom:3px solid var(--rojo);
}
.logo-mark{width:36px;height:36px;background:var(--rojo);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:22px;height:22px}
.header-title{color:var(--blanco);font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;flex-shrink:0}
.header-sub{color:#888;font-size:12px;margin-left:auto;text-transform:uppercase;letter-spacing:.08em}

/* NAV — misma línea que el header */
.nav-bar{display:flex;align-items:center;gap:2px;height:100%;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-bar::-webkit-scrollbar{display:none}
.nav-btn{padding:9px 14px;font-size:12.5px;font-weight:600;color:#9a9a96;background:none;border:none;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radio)}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-btn.active{color:var(--blanco);background:rgba(200,16,46,.16)}

/* MAIN */

/* ═══════════════════════════════════════════════════
   4. CATÁLOGO DE PALAS — grid, cards, badges, specs
   ═══════════════════════════════════════════════════ */

/* FILTROS — Run 8 (+ colapsable, alineado al maquetado) */
.filters-wrap{margin-bottom:22px}
.search-filters-row{display:flex;gap:10px;align-items:center}
.btn-toggle-filtros{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:11px 16px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--gris-borde);background:#fff;color:var(--gris-texto-fuerte);
  transition:all .15s;white-space:nowrap;
}
.btn-toggle-filtros:hover{border-color:#c9c7c2}
.btn-toggle-filtros.open{border-color:var(--rojo);background:var(--rojo-soft);color:var(--rojo)}
.filtros-hamb{font-size:13px}
.filtros-caret{font-size:10px}
.filters-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding:14px 16px;background:var(--gris-panel);
  border:1px solid var(--gris-panel-borde);border-radius:10px;
}
.filters-row-2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters-row select,.filters-row-2 select{
  padding:10px 14px;font-size:13px;
  border:1.5px solid var(--gris-borde);border-radius:8px;
  background:#fff;color:var(--negro);cursor:pointer;font-weight:600;
  outline:none;min-width:0;flex:1 1 140px;max-width:200px;
  transition:border-color .15s;
}
.filters-row select:focus,.filters-row-2 select:focus{border-color:var(--rojo)}
.filters-row select.active,.filters-row-2 select.active{
  border-color:var(--rojo);background:var(--rojo-soft);
}
.btn-clear-filters{
  padding:10px 14px;font-size:13px;font-weight:600;
  background:transparent;border:none;
  color:var(--gris-texto-suave);cursor:pointer;
  transition:color .15s;white-space:nowrap;flex-shrink:0;margin-left:auto;
}
.btn-clear-filters:hover{color:var(--gris-texto-medio)}
.btn-clear-filters.has-filters{color:var(--rojo)}
.filter-count-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--gris-panel-borde);
}
.filter-count-dot-row{display:flex;align-items:center;gap:8px}
.filter-count-dot{width:6px;height:6px;border-radius:50%;background:var(--rojo);flex-shrink:0}
.filter-count-main{font-size:13px;font-weight:700;color:var(--negro)}
.filter-count-sub{font-size:13px;color:var(--gris-texto-medio)}
.filter-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:3px 8px;
  background:var(--rojo-soft);color:#A32D2D;border-radius:20px;
  border:1px solid rgba(200,16,46,.2);
}
.filter-tag-remove{
  background:none;border:none;color:#A32D2D;cursor:pointer;
  font-size:13px;line-height:1;padding:0 1px;
  transition:opacity .1s;
}
.filter-tag-remove:hover{opacity:.7}
/* No results */
.no-results-block{
  padding:56px 24px;text-align:center;
  background:#fff;border:1px solid var(--gris-borde);
  border-radius:var(--radio-lg);
}
.no-results-icon{font-size:36px;margin-bottom:12px}
.no-results-title{font-size:16px;font-weight:700;color:var(--negro);margin-bottom:6px}
.no-results-sub{font-size:13px;color:#888;margin-bottom:16px;line-height:1.6}
.no-results-clear{
  padding:8px 18px;font-size:13px;font-weight:600;
  background:var(--rojo);color:#fff;border:none;
  border-radius:var(--radio);cursor:pointer;transition:background .15s;
}
.no-results-clear:hover{background:var(--rojo-hover)}

/* GRID PALAS */
.palas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pala-card{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-xl);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;display:flex;flex-direction:column}
.pala-card:hover{border-color:#d8d5d0;box-shadow:0 14px 32px rgba(15,15,15,.1);transform:translateY(-3px)}
.pala-img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;padding:12px}
.pala-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.linea-tag{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:9px;text-transform:uppercase;letter-spacing:.03em}
.tag-PROLINE{background:var(--rojo-soft);color:#A32D2D}
.tag-NEXT{background:#E6F1FB;color:#0C447C}
.tag-ADVANCE{background:#EAF3DE;color:#27500A}
.tag-TOUR{background:#FAEEDA;color:#633806}
.tag-JUNIOR{background:#EEEDFE;color:#3C3489}
.tag-ONYX{background:#E9E9EA;color:#333338}
.pala-name{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--negro);margin-bottom:8px}
.estilo-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.estilo-pill{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px}
.ofensivo{background:#FAECE7;color:#993C1D}
.defensivo{background:#E1F5EE;color:#085041}
.polivalente{background:#EEEDFE;color:#3C3489}
.confort{background:#E6F1FB;color:#0C447C}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:14px;padding:14px 0;border-top:1px solid var(--gris-panel-borde);border-bottom:1px solid var(--gris-panel-borde)}
.spec-item .label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#a3a3a0;margin-bottom:2px}
.spec-item .val{font-size:13px;font-weight:600;color:var(--negro)}
.techs-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tech-chip{font-size:11px;font-weight:600;padding:4px 9px;background:var(--rojo-soft);color:var(--rojo);border-radius:999px}
.jugador-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;margin-bottom:9px}
.nivel-pro{background:var(--rojo-soft);color:#A32D2D}
.nivel-avz{background:#FAEEDA;color:#633806}
.nivel-ama{background:#EAF3DE;color:#27500A}
.nivel-ini{background:#F1EFE8;color:#5F5E5A}
.nivel-int{background:#E6F1FB;color:#0C447C}
.nivel-jun{background:#EEEDFE;color:#3C3489}
.nota-tag{display:block;font-size:10px;background:#fff3cd;color:#856404;padding:3px 7px;border-radius:6px;margin-top:8px}

/* GLOSARIO */
.pala-desc{font-size:13px;color:var(--gris-texto-medio);line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pala-card-btn{
  margin-top:auto;padding:11px;font-size:13px;font-weight:700;
  background:transparent;color:var(--negro);border:1.5px solid #d8d5d0;
  border-radius:8px;cursor:pointer;width:100%;
  transition:border-color .15s,color .15s;
}
.pala-card-btn:hover{border-color:var(--rojo);color:var(--rojo)}
.pala-sensacion-wrap{margin-bottom:12px}
.pala-sensacion-wrap summary{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rojo);cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px}
.pala-sensacion-wrap summary::before{content:'▸';font-style:normal}
.pala-sensacion-wrap[open] summary::before{content:'▾'}
.pala-sensacion-wrap summary::-webkit-details-marker{display:none}
.pala-sensacion{font-size:13px;color:var(--azul-sensacion);font-style:italic;line-height:1.55;margin-top:8px;padding:10px 12px;background:var(--azul-sensacion-bg);border-radius:var(--radio);border-left:3px solid var(--azul-sensacion)}

/* GUÍA DE VENTA — STORYTELLING */

/* Progress nav */

/* ═══════════════════════════════════════════════════
   5. MATERIALES Y TECNOLOGÍAS — items, hero, blocks
   ═══════════════════════════════════════════════════ */

.glos-section-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rojo);margin:28px 0 14px;padding-bottom:6px;border-bottom:2px solid var(--rojo)}
.glos-section-head:first-child{margin-top:0}
.glos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:8px}
.glos-card{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);padding:14px;display:flex;gap:12px}
.glos-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:monospace;flex-shrink:0}
.glos-text .name{font-size:13px;font-weight:700;color:var(--negro);margin-bottom:3px}
.glos-text .desc{font-size:12px;color:var(--gris-texto);line-height:1.5;margin-bottom:5px}
.glos-text .pitch{font-size:11px;color:var(--rojo);font-style:italic;line-height:1.4}

/* COMPARADOR */
.cat-label{font-size:11px;font-weight:700;color:#999;margin:0 0 12px;text-transform:uppercase;letter-spacing:.1em}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:28px}

/* Card — catálogo style */
.item-card{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.item-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* Hero: catalog-style header with icon left + 3D image right */
.item-hero{display:flex;align-items:flex-start;background:#fff;min-height:110px;padding:18px 20px 16px;gap:14px;border-bottom:1px solid var(--gris-panel-borde)}
.item-hero-left{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.item-icon-sym{font-size:26px;font-weight:700;font-style:italic;line-height:1;font-family:var(--font-display);color:var(--rojo);letter-spacing:-.01em}
.item-icon-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:2px}
.item-redbar{width:24px;height:2px;background:var(--rojo);margin:2px 0 4px}
.item-fullname{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--negro);line-height:1.2;margin-bottom:2px}
.item-tipo-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:999px;align-self:flex-start;margin-top:2px}
.badge-mat{background:var(--rojo-soft);color:#A32D2D}
.badge-tech{background:#EEEDFE;color:#3C3489}
.item-hero-img{flex-shrink:0;width:140px;height:90px;display:flex;align-items:center;justify-content:center}
.item-hero-img img{max-width:140px;max-height:90px;object-fit:contain}

/* Content blocks */
.item-blocks{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.item-block{display:flex;flex-direction:column;gap:4px}
.block-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#aaa;margin-bottom:1px}
.block-text{font-size:12px;color:#333;line-height:1.6}
.block-text.sensacion{color:#1D4ED8;font-style:italic}
.block-text.pitch{background:var(--rojo-soft);border-left:2px solid var(--rojo);padding:6px 10px;border-radius:0 4px 4px 0;color:#333;font-style:italic}
.block-text.vs-text{background:#F0FDF4;border-left:2px solid #16A34A;padding:6px 10px;border-radius:0 4px 4px 0;color:#14532D}

.arg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.arg-card{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);padding:14px}
.arg-name{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--negro)}
.arg-desc{font-size:12px;color:var(--gris-texto);line-height:1.5;margin-bottom:10px}
.arg-pitch-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rojo);margin-bottom:4px}
.arg-pitch{background:var(--rojo-soft);border-left:3px solid var(--rojo);padding:8px 10px;font-size:12px;color:#333;line-height:1.5;border-radius:0 6px 6px 0;font-style:italic}

/* NO RESULTS */

/* ═══════════════════════════════════════════════════
   6. COMPARADOR — selects, table, diff
   ═══════════════════════════════════════════════════ */

.comp-selects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.comp-select-group{display:flex;flex-direction:column;gap:8px}
.comp-select-group label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris-texto-suave)}
.comp-select-group select{padding:12px 14px;font-size:14px;border:1px solid var(--gris-borde);border-radius:8px;background:#fff;color:var(--gris-texto-fuerte);width:100%;outline:none;transition:border-color .15s}
.comp-select-group select:focus{border-color:var(--rojo)}
@media(max-width:640px){.comp-selects{grid-template-columns:1fr}}
.comp-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg)}
.comp-table{width:100%;border-collapse:collapse;font-size:13px}
.comp-table th{padding:10px 14px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris-texto);border-bottom:1px solid var(--gris-borde);background:#fafafa}
.comp-table th.pala-col{font-size:14px;font-weight:700;color:var(--negro);text-transform:none}
.comp-table td{padding:9px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.comp-table tr:last-child td{border-bottom:none}
.comp-table .diff{background:var(--rojo-soft);font-weight:600;color:var(--rojo)}
.comp-table .row-label{font-weight:600;color:var(--gris-texto);background:#fafafa}
.comp-pala-img{width:60px;height:60px;object-fit:cover;border-radius:6px;background:#111}

/* TABLA */

/* ═══════════════════════════════════════════════════
   7. TABLA GAMA COMPLETA
   ═══════════════════════════════════════════════════ */

.tabla-wrap{overflow-x:auto;background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg)}
.tabla-main{width:100%;border-collapse:collapse;font-size:13px}
.tabla-main thead th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris-texto);border-bottom:1px solid var(--gris-borde);background:#fafafa;white-space:nowrap}
.tabla-main tbody td{padding:9px 12px;border-bottom:1px solid #f5f5f5;vertical-align:middle}
.tabla-main tbody tr:hover td{background:#fafafa}
.tabla-pala-img{width:40px;height:40px;object-fit:cover;border-radius:8px;background:#fff}


/* ITEMS UNIFICADOS (Materiales + Tecnologías) */

/* ═══════════════════════════════════════════════════
   8. GUÍA DE VENTA — nav, steps, qref, perfiles, FABS
   ═══════════════════════════════════════════════════ */

.guia-nav{display:flex;align-items:center;gap:0;margin-bottom:36px;overflow-x:auto;padding-bottom:4px}
.guia-nav-step{display:flex;align-items:center;gap:0;cursor:pointer;flex-shrink:0}
.guia-nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px;border-radius:var(--radio);border:none;background:none;cursor:pointer;transition:background .15s}
.guia-nav-btn:hover{background:var(--gris-claro)}
.guia-nav-btn.active .gnav-num{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.guia-nav-btn.active .gnav-label{color:var(--rojo);font-weight:700}
.gnav-num{width:32px;height:32px;border-radius:50%;border:2px solid var(--gris-borde);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#aaa;background:#fff;transition:all .15s}
.gnav-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#aaa;white-space:nowrap;transition:color .15s}
.guia-nav-arrow{color:#ddd;font-size:16px;padding:0 2px;flex-shrink:0}

/* Step panels */
.guia-step-panel{display:none}
.guia-step-panel.active{display:block}

/* Step header */
.step-header{display:flex;align-items:center;gap:16px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--gris-borde)}
.step-num-big{width:52px;height:52px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex-shrink:0}
.step-header-text{}
.step-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris-texto-suave);margin-bottom:2px}
.step-title{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--negro)}
.step-subtitle{font-size:14px;color:var(--gris-texto-medio);margin-top:2px}

/* Step content grid */
.step-grid{display:grid;gap:16px}
.step-grid-2{grid-template-columns:1fr 1fr}
.step-grid-3{grid-template-columns:1fr 1fr 1fr}
.step-block{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);padding:18px}
.step-block-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rojo);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.step-block-label::after{content:'';flex:1;height:1px;background:var(--gris-borde)}
.step-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.step-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#444;line-height:1.5}
.step-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rojo);margin-top:6px;flex-shrink:0}
.step-quote{background:var(--gris-pill);border-left:3px solid var(--rojo);padding:10px 14px;border-radius:0 var(--radio) var(--radio) 0;font-size:13px;color:var(--gris-texto-fuerte);line-height:1.6;font-style:italic;margin-top:10px}
.step-quote strong{font-style:normal;color:var(--negro)}
.step-say{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio);padding:10px 14px;font-size:13px;color:#333;line-height:1.5;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.step-say::before{content:'\"';font-size:18px;font-weight:900;color:var(--rojo);flex-shrink:0;font-style:normal}
.step-warn{background:var(--rojo-soft);border:none;border-radius:var(--radio);padding:12px 14px;font-size:13.5px;color:#8a2030;line-height:1.5;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.step-warn::before{content:'✗';font-size:14px;flex-shrink:0;font-weight:700}

/* Step nav buttons */
.step-footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--gris-borde)}
.step-btn{padding:9px 20px;border-radius:var(--radio);font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--gris-borde);background:#fff;color:var(--negro);transition:all .15s}
.step-btn:hover{background:var(--gris-claro)}
.step-btn.primary{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.step-btn.primary:hover{background:var(--rojo-hover)}
.step-progress{font-size:12px;color:#aaa}

/* Quick ref tables */
.qref-table{width:100%;border-collapse:collapse;font-size:13px}
.qref-table th{padding:7px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#999;border-bottom:1px solid var(--gris-borde);background:var(--gris-claro)}
.qref-table td{padding:8px 10px;border-bottom:1px solid #f5f5f5;color:#333;vertical-align:top;line-height:1.4}
.qref-table td:first-child{font-weight:600;color:var(--negro)}
.qref-table tr:last-child td{border-bottom:none}
.qref-rule{background:var(--rojo-soft);border-left:3px solid var(--rojo);padding:10px 14px;border-radius:0 var(--radio) var(--radio) 0;font-size:13px;font-style:italic;color:#444;margin-top:12px}

/* Perfil cards */
.perfil-card{border-radius:var(--radio-lg);padding:16px;border:1px solid var(--gris-borde);background:#fff}
.perfil-card.ini{border-top:3px solid #16A34A}
.perfil-card.med{border-top:3px solid #2563EB}
.perfil-card.avz{border-top:3px solid var(--rojo)}
.perfil-nivel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.perfil-nivel.ini{color:#16A34A}
.perfil-nivel.med{color:#2563EB}
.perfil-nivel.avz{color:var(--rojo)}
.perfil-title{font-size:14px;font-weight:700;color:var(--negro);margin-bottom:10px}
.perfil-list{font-size:12px;color:#555;line-height:1.7;padding-left:16px;margin-bottom:10px}
.perfil-frase{font-size:12px;color:#666;font-style:italic;padding:8px 10px;background:var(--gris-claro);border-radius:var(--radio);border-left:2px solid #ccc}

/* FABS */
.fabs-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.fabs-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:20px;flex-shrink:0;margin-top:1px}
.fabs-c{background:var(--rojo-soft);color:#A32D2D}
.fabs-v{background:#E6F1FB;color:#0C447C}
.fabs-b{background:#EAF3DE;color:#27500A}
.fabs-text{font-size:13px;color:#555;line-height:1.5}
.fabs-example{background:var(--gris-claro);border-radius:var(--radio);padding:12px 14px;font-size:13px;color:#333;line-height:1.7;font-style:italic;border-left:3px solid var(--rojo);margin-top:4px}

/* Signals */
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.signal-item{background:var(--gris-claro);border-radius:var(--radio);padding:10px 12px;font-size:13px;color:#444;display:flex;align-items:center;gap:8px}
.signal-item::before{content:'→';color:var(--rojo);font-weight:700;flex-shrink:0}

/* Cross sell */
.cross-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cross-cat{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);padding:14px}
.cross-cat-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#777;margin-bottom:8px}
.cross-tags{display:flex;flex-wrap:wrap;gap:6px}
.cross-tag{font-size:12px;padding:3px 10px;background:var(--gris-claro);border-radius:20px;color:#444}

/* CAPACITACIONES */

/* ═══════════════════════════════════════════════════
   9. CAPACITACIONES — sidebar, panels, units
   ═══════════════════════════════════════════════════ */

.cap-layout{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:520px;border:1px solid var(--gris-borde);border-radius:var(--radio-lg);overflow:hidden}
.cap-sidebar{background:var(--negro-suave);padding:0;display:flex;flex-direction:column}
.cap-sidebar-title{padding:20px 20px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#666}
.cap-mod-btn{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;border:none;background:none;text-align:left;width:100%;transition:background .15s;border-left:3px solid transparent}
.cap-mod-btn:hover{background:rgba(255,255,255,.06)}
.cap-mod-btn.active{background:rgba(200,16,46,.15);border-left-color:var(--rojo)}
.cap-mod-num{width:28px;height:28px;border-radius:50%;border:1.5px solid #444;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#666;flex-shrink:0;transition:all .15s}
.cap-mod-btn.active .cap-mod-num{background:var(--rojo);border-color:var(--rojo);color:#fff}
.cap-mod-info{}
.cap-mod-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#555;margin-bottom:2px}
.cap-mod-name{font-size:13px;font-weight:600;color:#ccc;line-height:1.3}
.cap-mod-btn.active .cap-mod-name{color:#fff}

/* Units inside sidebar */
.cap-units{padding:0 0 8px 52px}
.cap-unit-btn{display:block;width:100%;text-align:left;padding:6px 20px 6px 0;font-size:12px;color:#555;cursor:pointer;border:none;background:none;transition:color .15s;border-left:1px solid #222;padding-left:12px}
.cap-unit-btn:hover{color:#aaa}
.cap-unit-btn.active{color:#fff;border-left-color:var(--rojo)}

/* Main content */
.cap-main{background:#fff;display:flex;flex-direction:column}
.cap-panel{display:none;padding:32px;flex:1}
.cap-panel.active{display:block}

/* Module header */
.cap-mod-header{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--gris-panel-borde)}
.cap-mod-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rojo);margin-bottom:6px}
.cap-mod-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--negro);margin-bottom:6px}
.cap-mod-desc{font-size:14px;color:var(--gris-texto-medio);line-height:1.6}
.cap-objetivos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cap-objetivo{font-size:12px;font-weight:600;padding:6px 12px;background:var(--gris-pill);border-radius:999px;color:var(--gris-texto-fuerte);border:none}

/* Unit content */
.cap-unit-panel{display:none}
.cap-unit-panel.active{display:block}
.cap-unit-title{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--negro);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.cap-unit-num{font-size:11px;font-weight:700;background:var(--rojo);color:#fff;padding:3px 8px;border-radius:4px}

/* Content components */
.cap-section{margin-bottom:24px}
.cap-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#aaa;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cap-section-title::after{content:'';flex:1;height:1px;background:var(--gris-borde)}
.cap-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cap-card{background:var(--gris-claro);border-radius:var(--radio-lg);padding:14px;border:1px solid var(--gris-borde)}
.cap-card-title{font-size:13px;font-weight:700;color:var(--negro);margin-bottom:4px}
.cap-card-text{font-size:12px;color:#666;line-height:1.55}
.cap-highlight{background:var(--rojo-soft);border-left:3px solid var(--rojo);padding:14px 16px;border-radius:0 var(--radio) var(--radio) 0;font-size:14px;color:#5a2028;line-height:1.55;margin:12px 0}
.cap-highlight strong{color:var(--negro);font-weight:700}
.cap-p{font-size:13px;color:#444;line-height:1.7;margin-bottom:10px}
.cap-list{padding-left:18px;margin-bottom:10px}
.cap-list li{font-size:13px;color:#444;line-height:1.7;margin-bottom:3px}
.cap-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0}
.cap-stat{background:var(--negro);color:#fff;border-radius:var(--radio-lg);padding:14px;text-align:center}
.cap-stat-num{font-size:24px;font-weight:800;color:var(--rojo);line-height:1}
.cap-stat-label{font-size:11px;color:#aaa;margin-top:4px;line-height:1.3}
.cap-table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.cap-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#999;border-bottom:1px solid var(--gris-borde);background:var(--gris-claro)}
.cap-table td{padding:8px 12px;border-bottom:1px solid #f5f5f5;vertical-align:top;line-height:1.4}
.cap-table td:first-child{font-weight:600;color:var(--negro)}
.cap-table tr:last-child td{border-bottom:none}
.cap-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.cap-nav-footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--gris-borde)}
.cap-nav-btn{padding:8px 18px;border-radius:var(--radio);font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--gris-borde);background:#fff;color:var(--negro);transition:all .15s}
.cap-nav-btn:hover{background:var(--gris-claro)}
.cap-nav-btn.primary{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.cap-nav-btn.primary:hover{background:var(--rojo-hover)}

/* ═══════════════════════════════════════════════════
   10. LOGIN / ROLES / ADMIN — reservado
   ═══════════════════════════════════════════════════ */

/* Implementado en v19 — ver §3 AUTH en el bloque JS */

/* ═══════════════════════════════════════════════════
   11. RESPONSIVE — @media queries
   ═══════════════════════════════════════════════════ */

@media(max-width:640px){.step-grid-2,.step-grid-3{grid-template-columns:1fr}}

/* Content blocks */
@media(max-width:500px){.signal-grid{grid-template-columns:1fr}}
@media(max-width:500px){.cross-grid{grid-template-columns:1fr}}
@media(max-width:700px){.cap-layout{grid-template-columns:1fr}}

/* Sidebar */


/* ═══════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════ */
#login-screen{
  position:fixed;inset:0;background:var(--negro);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:9000;overflow-x:hidden;overflow-y:auto;
  padding:24px 0;box-sizing:border-box;
}
#login-screen.hidden{display:none}

/* Configurar contraseña (invitación/recuperación, RUN Fase 2) — mismo
   overlay que #login-screen, reutiliza .login-box/.login-form/etc. */
#password-setup-screen{
  position:fixed;inset:0;background:var(--negro);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:9000;overflow-x:hidden;overflow-y:auto;
  padding:24px 0;box-sizing:border-box;
}
#password-setup-screen.hidden{display:none}
.pwdsetup-success{
  padding:10px 14px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);border-radius:var(--radio);
  font-size:13px;color:#4ade80;line-height:1.5;display:none;margin-bottom:18px;
}
.pwdsetup-success.visible{display:block}
.pwdsetup-email{
  font-size:12.5px;color:var(--gris-texto-suave);text-align:center;
  margin-top:10px;padding:8px 14px;background:var(--negro-suave);
  border:1px solid var(--negro-borde);border-radius:var(--radio);
  display:none;word-break:break-all;
}
.pwdsetup-email.visible{display:block}
.pwdsetup-link-error{
  display:none;background:rgba(200,16,46,.12);
  border:1px solid rgba(200,16,46,.35);border-radius:var(--radio-lg);
  padding:22px;margin-top:18px;color:#fff;text-align:center;
}
.pwdsetup-link-error.visible{display:block}
.pwdsetup-link-error-title{font-size:16px;font-weight:700;margin-bottom:8px}
.pwdsetup-link-error-message{font-size:13px;color:#ffb4bf;line-height:1.55}
.pwdsetup-back-btn{
  width:100%;margin-top:18px;padding:13px 16px;border:1px solid var(--negro-borde);
  border-radius:var(--radio);background:var(--negro-suave);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
}
.pwdsetup-back-btn:hover{border-color:var(--rojo);background:#252525}

/* Confirmación de identidad previa al formulario — ver
   _showPasswordSetupScreen() en js/auth.js. El email va destacado a
   propósito: es el único dato que evita que alguien le cambie la contraseña
   a la cuenta equivocada en una máquina compartida. */
.pwdsetup-confirm{
  background:var(--negro-suave);border:1px solid var(--negro-borde);
  border-radius:var(--radio-lg);padding:28px;text-align:center;
}
.pwdsetup-confirm.hidden{display:none}
.pwdsetup-confirm-title{color:#fff;font-size:17px;font-weight:700;margin-bottom:10px}
.pwdsetup-confirm-body{
  color:var(--gris-texto-suave);font-size:13.5px;line-height:1.55;margin-bottom:16px;
}
.pwdsetup-confirm-email{
  font-size:16px;font-weight:700;color:#fff;word-break:break-all;
  padding:14px;margin-bottom:20px;background:var(--negro);
  border:1px solid var(--negro-borde);border-left:3px solid var(--rojo);
  border-radius:var(--radio);
}
.pwdsetup-confirm .pwdsetup-back-btn{margin-top:10px}

/* Vigencia del enlace — se muestra dentro del formulario de configurar
   contraseña, es decir solo cuando el enlace todavía es válido. */
.pwdsetup-hint{
  padding:10px 14px;margin-bottom:18px;
  background:var(--negro);border:1px solid var(--negro-borde);
  border-left:3px solid var(--rojo);border-radius:var(--radio);
  font-size:12.5px;color:var(--gris-texto-suave);line-height:1.5;
}
.pwdsetup-hint strong{color:#fff}

/* Auto-servicio: pedir un enlace nuevo. Mismo bloque para las dos entradas
   (login y pantalla de enlace inválido) — ver requestPasswordLink() en
   js/auth.js. */
.pwdlink-request{margin-top:14px;text-align:center}
.pwdlink-toggle{
  background:none;border:none;padding:6px;cursor:pointer;
  color:var(--gris-texto-suave);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;font-family:inherit;
}
.pwdlink-toggle:hover{color:#fff}
.pwdlink-panel{
  margin-top:12px;padding:16px 18px;text-align:left;
  background:var(--negro-suave);border:1px solid var(--negro-borde);
  border-radius:var(--radio-lg);
}
.pwdlink-panel[hidden]{display:none}
.pwdlink-panel-inline{
  margin-top:18px;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.12);
}
.pwdlink-panel label{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris-texto-suave);margin-bottom:8px;
}
.pwdlink-panel input{
  width:100%;box-sizing:border-box;padding:13px 14px;font-size:15px;
  background:var(--negro);border:1px solid var(--negro-borde);
  border-radius:var(--radio);color:#fff;outline:none;transition:border-color .15s;
}
.pwdlink-panel input:focus{border-color:var(--rojo)}
.pwdlink-panel input::placeholder{color:#6b6b6b}
.pwdlink-btn{
  width:100%;margin-top:12px;padding:13px 16px;
  background:var(--rojo);color:#fff;border:none;border-radius:var(--radio);
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.pwdlink-btn:hover:not(:disabled){background:var(--rojo-hover)}
.pwdlink-btn:disabled{background:#3a3a3a;color:#8a8a8a;cursor:not-allowed}
.pwdlink-status{
  display:none;margin-top:12px;padding:10px 12px;border-radius:var(--radio);
  font-size:12.5px;line-height:1.5;
}
.pwdlink-status.visible{display:block}
.pwdlink-status.ok{
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#4ade80;
}
.pwdlink-status.err{
  background:rgba(200,16,46,.12);border:1px solid rgba(200,16,46,.3);color:#ff6b6b;
}

.login-dot{position:absolute;border-radius:50%;background:var(--rojo);pointer-events:none}
.login-dot-1{width:6px;height:6px;top:14%;left:20%;opacity:.7}
.login-dot-2{width:9px;height:9px;top:70%;left:80%;opacity:.5}
.login-dot-3{width:4px;height:4px;top:82%;left:12%;opacity:.6}

.login-box{
  width:100%;max-width:400px;padding:0 24px;position:relative;z-index:1;
  margin:auto 0;flex:0 0 auto;
}

@media(max-height:620px){
  #login-screen,#password-setup-screen{padding:16px 0}
  .login-logo{margin-bottom:18px}
  .login-logo-mark{margin-bottom:12px}
}
.login-logo{
  display:flex;flex-direction:column;align-items:center;margin-bottom:32px;
}
.login-logo-mark{
  width:56px;height:56px;background:var(--rojo);border-radius:16px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 0 40px rgba(200,16,46,.45);
}
.login-logo-mark svg{width:22px;height:22px}
.login-brand{color:#fff;font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.login-sub{color:var(--gris-texto-suave);font-size:13px;margin-top:6px;text-transform:uppercase;letter-spacing:.06em}

.login-form{display:flex;flex-direction:column;gap:0;background:var(--negro-suave);border:1px solid var(--negro-borde);border-radius:var(--radio-lg);padding:28px}
.login-field{display:flex;flex-direction:column;gap:0;margin-bottom:18px}
.login-field label{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris-texto-suave);margin-bottom:8px;
}
.login-field input{
  padding:13px 14px;font-size:15px;
  background:var(--negro);border:1px solid var(--negro-borde);border-radius:var(--radio);
  color:#fff;outline:none;transition:border-color .15s;
}
.login-field input:focus{border-color:var(--rojo)}
.login-field input::placeholder{color:#6b6b6b}

.login-btn{
  width:100%;padding:15px;font-size:15px;font-weight:700;
  background:var(--rojo);color:#fff;border:none;
  border-radius:var(--radio);cursor:pointer;
  transition:background .15s;margin-top:4px;
}
.login-btn:hover{background:var(--rojo-hover)}
.login-btn:active{background:var(--rojo-active)}

.login-error{
  padding:10px 14px;background:rgba(200,16,46,.12);
  border:1px solid rgba(200,16,46,.3);border-radius:var(--radio);
  font-size:13px;color:#ff6b6b;line-height:1.5;display:none;margin-bottom:18px;
}
.login-error.visible{display:block}

.login-note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:20px;padding:16px 18px;
  background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.35);border-left:3px solid var(--rojo);
  border-radius:var(--radio);
}
.login-note::before{
  content:'?';flex-shrink:0;width:30px;height:30px;
  border:2px solid var(--rojo);border-radius:50%;color:var(--rojo);
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.login-note-title{color:#fff;font-size:13.5px;font-weight:600;margin-bottom:3px}
.login-note-body{color:#a3a3a0;font-size:13px;line-height:1.5}

/* Session bar — user info + logout in header */
.session-bar{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;
  min-width:0; /* allow shrinking */
}
.session-user{
  display:flex;align-items:center;gap:8px;
}
.session-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--rojo);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.session-name{
  font-size:12px;color:#aaa;line-height:1.2;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.session-role{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;
}
.session-role.owner{color:var(--rojo)}
.session-role.vendedor{color:#f59e0b}
.session-role.usuario{color:#60a5fa}
.logout-btn{
  padding:6px 12px;font-size:12px;font-weight:600;
  background:transparent;border:1px solid #333;border-radius:var(--radio);
  color:#888;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.logout-btn:hover{border-color:#666;color:#fff}


/* ═══════════════════════════════════════════════════
   10. PANEL DE ADMINISTRACIÓN DE USUARIOS
   ═══════════════════════════════════════════════════ */

/* Layout */
.admin-layout { display: grid; gap: 28px; }
.admin-header-row {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 4px;
}
.admin-title { font-size: 16px; font-weight: 700; color: var(--negro); }
.admin-subtitle { font-size: 13px; color: var(--gris-texto); margin-top: 2px; }

/* Stats */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.admin-stat {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-xl); padding: 18px; text-align: center;
}
.admin-stat-num {
  font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--rojo); line-height: 1;
}
.admin-stat-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gris-texto-suave); margin-top: 6px;
}

/* Card container */
.admin-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-xl); overflow: hidden;
}
.admin-card-head {
  padding: 18px 22px; border-bottom: 1px solid var(--gris-panel-borde);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; background: var(--gris-panel);
}
.admin-card-title {
  font-size: 12.5px; font-weight: 700; color: var(--negro);
  text-transform: uppercase; letter-spacing: .06em;
}
.admin-card-body { padding: 22px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  border-radius: 8px; border: none; cursor: pointer;
  transition: all .15s; text-decoration: none; line-height: 1;
}
.btn-primary   { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: var(--rojo-hover); }
.btn-secondary { background: #fff; color: var(--gris-texto-fuerte); border: 1.5px solid var(--gris-borde); }
.btn-secondary:hover { border-color: #c9c7c2; }
.btn-danger    { background: var(--rojo-soft); color: #c0392b; border: 1px solid #fecaca; }
.btn-danger:hover   { background: #fee2e2; }
.btn-warning   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.btn-warning:hover  { background: #fef3c7; }
.btn-success   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.btn-success:hover  { background: #dcfce7; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-icon { padding: 6px 8px; }

/* Table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px;
}
.admin-table thead th {
  padding: 12px 14px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #fff;
  background: var(--negro); white-space: nowrap;
}
.admin-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid var(--gris-panel-borde);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--gris-panel); }
.admin-table .col-actions {
  white-space: nowrap; display: flex; gap: 6px; align-items: center;
}
.user-name { font-weight: 600; color: var(--negro); }
.user-email { font-size: 12px; color: var(--gris-texto-suave); }

/* Badges */
.badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-owner    { background: var(--rojo-soft); color: #A32D2D; }
.badge-vendedor { background: #fffbeb; color: #92400e; }
.badge-usuario  { background: #eff6ff; color: #1d4ed8; }
.badge-activo   { background: #f0fdf4; color: #166534; }
.badge-inactivo { background: #f5f5f5; color: #888; }

/* Form */
.admin-form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gris-texto-suave);
}
.form-field input,
.form-field select {
  padding: 11px 13px; font-size: 13.5px;
  border: 1.5px solid var(--gris-borde); border-radius: 8px;
  background: #fff; color: var(--negro); outline: none;
  transition: border-color .15s;
}
.form-field input:focus,
.form-field select:focus { border-color: var(--rojo); }
.form-field input.error,
.form-field select.error { border-color: #e53e3e; }
.form-hint { font-size: 11px; color: var(--gris-texto-suave); margin-top: 2px; }
.form-required { color: var(--rojo); }

/* Alerts */
.admin-alert {
  padding: 10px 14px; border-radius: var(--radio);
  font-size: 13px; line-height: 1.5; margin-bottom: 14px; display: none;
}
.admin-alert.visible { display: block; }
.admin-alert-success {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.admin-alert-error {
  background: var(--rojo-soft); border: 1px solid #fecaca; color: #c0392b;
}

/* Empty state */
.admin-empty {
  padding: 40px; text-align: center; color: #aaa; font-size: 13px;
}
.admin-empty-icon { font-size: 32px; margin-bottom: 8px; }

/* Modal overlay */
.admin-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 8000; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.admin-modal-bg.open { display: flex; }
.admin-modal {
  background: #fff; border-radius: var(--radio-xl);
  width: 100%; max-width: 480px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.admin-modal-head {
  padding: 20px 22px; border-bottom: 1px solid var(--gris-panel-borde);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--negro); }
.admin-modal-close {
  background: none; border: none; font-size: 20px; color: #aaa;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.admin-modal-close:hover { color: var(--negro); }
.admin-modal-body { padding: 20px; }
.admin-modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--gris-borde);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Access restricted */
.admin-restricted {
  padding: 64px 24px; text-align: center;
  background: var(--gris-panel); border: 1px solid var(--gris-panel-borde);
  border-radius: var(--radio-xl);
}
.admin-restricted-icon {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border: 2px solid var(--rojo); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.admin-restricted h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--negro); margin-bottom: 6px; }
.admin-restricted p  { font-size: 14px; color: var(--gris-texto-medio); }


/* Password toggle eye */
.pwd-wrap { position: relative; }
.pwd-wrap input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pwd-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #aaa; padding: 3px 5px;
  transition: color .15s;
}
.pwd-eye:hover { color: var(--negro); }
.login-field .pwd-eye { color: var(--gris-texto-suave); }
.login-field .pwd-eye:hover { color: #fff; }

/* ── Descarga catálogo técnico ─────────────────────────────────────────── */
.download-block {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.download-block-icon {
  width: 44px; height: 44px;
  background: var(--gris-claro);
  border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.download-block-body { flex: 1; min-width: 200px; }
.download-block-title {
  font-size: 14px; font-weight: 700;
  color: var(--negro); margin-bottom: 4px;
}
.download-block-desc {
  font-size: 13px; color: var(--gris-texto);
  line-height: 1.55; margin-bottom: 6px;
}
.download-block-highlight {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--negro); line-height: 1.4;
  background: rgba(200,16,46,.06);
  border: 1px solid rgba(200,16,46,.25);
  border-radius: var(--radio);
  padding: 6px 10px; margin-bottom: 8px;
}
.download-block-highlight strong { color: var(--rojo); font-weight: 700; }
.download-block-note {
  font-size: 11px; color: #aaa; line-height: 1.5;
}
.download-block-actions {
  display: flex; align-items: center;
  gap: 10px; flex-shrink: 0; padding-top: 2px;
}
.btn-download {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  background: var(--rojo); color: #fff;
  border: none; border-radius: var(--radio);
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.btn-download:hover  { background: var(--rojo-hover); }
.btn-download:active { background: var(--rojo-active); }
.download-msg {
  font-size: 12px; color: var(--rojo);
  display: none; margin-top: 6px;
}
.download-msg.visible { display: block; }


/* ═══════════════════════════════════════════════════
   MODAL DETALLE — Materiales y Tecnologías
   ═══════════════════════════════════════════════════ */

/* Card clickable hint */
.item-card { cursor: pointer; }
.item-card:hover {
  border-color: var(--rojo);
  box-shadow: 0 4px 16px rgba(200,16,46,.10);
}
.item-card-hint {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rojo);
  text-align: right; padding: 6px 16px 10px;
  opacity: .7;
}

/* Modal overlay */
.detail-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 8500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 24px;
  overflow-y: auto;
}
.detail-modal-bg.open { display: flex; }

/* Modal box */
.detail-modal {
  background: #fff;
  border-radius: var(--radio-lg);
  width: 100%; max-width: 680px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  overflow: hidden;
  position: relative;
}

/* Modal hero */
.detail-hero {
  display: flex; align-items: stretch;
  min-height: 100px;
  border-bottom: 3px solid var(--rojo);
}
.detail-hero-left {
  width: 110px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 16px 0;
  background: #f9f9f9;
  border-right: 1px solid var(--gris-borde);
}
.detail-icon-sym {
  font-size: 34px; font-weight: 900; font-style: italic;
  line-height: 1; font-family: 'Arial Black', Arial, sans-serif;
  letter-spacing: -.02em;
}
.detail-icon-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; opacity: .6;
}
.detail-hero-img {
  width: 160px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f9f9f9; padding: 10px;
  border-right: 1px solid var(--gris-borde);
}
.detail-hero-img img {
  max-width: 140px; max-height: 90px; object-fit: contain;
  cursor: zoom-in; transition: transform .2s;
}
.detail-hero-img img:hover { transform: scale(1.08); }
.detail-hero-right {
  flex: 1; padding: 16px 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.detail-tipo-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 8px; border-radius: 20px;
  align-self: flex-start;
}
.detail-nombre {
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--negro); line-height: 1.2;
}
.detail-categoria {
  font-size: 12px; color: #888;
}
.detail-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  font-size: 22px; color: #bbb; cursor: pointer;
  line-height: 1; padding: 2px 6px; transition: color .15s;
  z-index: 1;
}
.detail-close:hover { color: var(--negro); }

/* Modal body */
.detail-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }

.detail-block {}
.detail-block-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.detail-block-label::after {
  content: ''; flex: 1; height: 1px; background: var(--gris-borde);
}
.detail-block-text {
  font-size: 13px; color: #333; line-height: 1.65;
}
.detail-block-text.sensacion { color: #1D4ED8; font-style: italic; }
.detail-block-text.pitch {
  background: var(--rojo-soft);
  border-left: 3px solid var(--rojo);
  padding: 8px 12px;
  border-radius: 0 var(--radio) var(--radio) 0;
  font-style: italic; color: #333;
}
.detail-block-text.vs {
  background: #F0FDF4;
  border-left: 3px solid #16A34A;
  padding: 8px 12px;
  border-radius: 0 var(--radio) var(--radio) 0;
  color: #14532D;
}

/* Palas asociadas */
.detail-palas-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.detail-pala-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--gris-claro);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--negro);
}
.detail-pala-chip img {
  width: 28px; height: 28px; object-fit: contain; border-radius: 2px;
}
.detail-palas-empty {
  font-size: 13px; color: #aaa; font-style: italic;
}

@media (max-width: 600px) {
  .detail-hero-img { display: none; }
  .detail-modal { margin: 0; border-radius: 0; min-height: 100vh; }
  .detail-modal-bg { padding: 0; }
}


/* ═══════════════════════════════════════════════════
   FICHA INDIVIDUAL DE PALA — Modal
   ═══════════════════════════════════════════════════ */

/* Overlay */
.pala-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.60);
  z-index: 8500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 32px;
  overflow-y: auto;
}
.pala-modal-bg.open { display: flex; }

/* Modal box */
.pala-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 820px;
  box-shadow: 0 40px 80px rgba(0,0,0,.4);
  overflow: hidden;
  position: relative;
}

/* Close */
.pala-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  font-size: 22px; color: #bbb; cursor: pointer;
  line-height: 1; padding: 2px 6px; transition: color .15s; z-index: 2;
}
.pala-modal-close:hover { color: var(--negro); }

/* Header: image + headline */
.pala-modal-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 200px;
  border-bottom: 3px solid var(--rojo);
}
@media(max-width:560px) {
  .pala-modal-header { grid-template-columns: 1fr; }
  .pala-modal-img-wrap { max-height: 200px; }
}
.pala-modal-img-wrap {
  background: #f7f7f7;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  border-right: 1px solid var(--gris-borde);
}
.pala-modal-img-wrap img {
  max-width: 180px; max-height: 200px;
  object-fit: contain; cursor: zoom-in;
  transition: transform .2s;
}
.pala-modal-img-wrap img:hover { transform: scale(1.04); }
.pala-modal-headline {
  padding: 20px 48px 20px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.pala-modal-linea {
  display: flex; align-items: center; gap: 8px;
}
.pala-modal-nombre {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--negro);
  line-height: 1.2;
}
.pala-modal-badges {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.pala-modal-jugador {
  font-size: 12px; color: #888; font-style: italic;
}

/* Body */
.pala-modal-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media(max-width:560px) { .pala-modal-body { grid-template-columns: 1fr; } }
.pala-modal-col { display: flex; flex-direction: column; gap: 18px; }

/* Sections within modal */
.pala-modal-section {}
.pala-modal-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pala-modal-section-label::after {
  content:''; flex:1; height:1px; background: var(--gris-borde);
}

/* Specs table */
.pala-modal-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.pala-modal-spec-item .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: #999; margin-bottom: 1px;
}
.pala-modal-spec-item .val {
  font-size: 13px; font-weight: 600; color: var(--negro);
}

/* Tech chips */
.pala-modal-techs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pala-modal-tech-chip {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px;
  background: var(--rojo-soft); border: none;
  border-radius: 999px; color: var(--rojo);
}

/* Material chips */
.pala-modal-mat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
  font-weight: 600; margin: 2px;
}

/* Text blocks */
.pala-modal-text {
  font-size: 13.5px; color: #3a3a38; line-height: 1.65;
}
.pala-modal-text.sensacion {
  color: var(--azul-sensacion); font-style: italic;
  background: var(--azul-sensacion-bg); padding: 10px 12px; border-radius: var(--radio);
}
.pala-modal-text.argumento {
  background: var(--rojo-soft);
  border-left: 3px solid var(--rojo);
  padding: 10px 12px;
  border-radius: 0 var(--radio) var(--radio) 0;
  color: #7a1220; font-style: italic;
}
.pala-modal-text.perfil-jugador {
  background: var(--gris-panel);
  padding: 10px 12px; border-radius: var(--radio);
  color: #3a3a38;
  border: 1px solid var(--gris-panel-borde);
}

/* Nota */
.pala-modal-nota {
  font-size: 11px; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: var(--radio);
  padding: 6px 10px; color: #92400e;
}

/* Footer */
.pala-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gris-borde);
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fafafa;
}
.pala-modal-footer-msg {
  font-size: 12px; color: #888; flex: 1;
}
.pala-modal-btn-compare {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: var(--negro); color: #fff;
  font-size: 13px; font-weight: 700;
  border: none; border-radius: var(--radio);
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.pala-modal-btn-compare:hover { background: #333; }
.pala-modal-btn-go-comp {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--rojo);
  border: 1px solid var(--rojo); border-radius: var(--radio);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pala-modal-btn-go-comp:hover { background: var(--rojo); color: #fff; }
.pala-modal-btn-media {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 13px; font-weight: 700;
  background: #fff; color: var(--negro);
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  cursor: pointer; transition: all .15s; white-space: nowrap;
  text-decoration: none;
}
.pala-modal-btn-media:hover { background: var(--negro); color: #fff; border-color: var(--negro); }


/* ═══════════════════════════════════════════════════
   CAPACITACIONES — Recursos destacados (Run 9A)
   ═══════════════════════════════════════════════════ */
.cap-recursos {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.cap-recursos-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--gris-borde);
  background: var(--gris-claro);
}
.cap-recursos-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rojo); margin-bottom: 2px;
}
.cap-recursos-sub {
  font-size: 11px; color: #999; line-height: 1.4;
}
.cap-recursos-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cap-recursos-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media(max-width: 560px) { .cap-recursos-cards { grid-template-columns: 1fr; } }

.cap-recurso-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio); text-decoration: none;
  color: var(--negro); transition: all .15s; cursor: pointer;
}
.cap-recurso-btn:hover {
  border-color: var(--rojo); background: var(--rojo-soft);
}
.cap-recurso-btn.disabled {
  opacity: .45; pointer-events: none; cursor: default;
}
.cap-recurso-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.cap-recurso-icon.video { background: var(--rojo-soft); }
.cap-recurso-icon.doc   { background: #EAF3DE; }
.cap-recurso-info {}
.cap-recurso-type {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #aaa; margin-bottom: 1px;
}
.cap-recurso-label {
  font-size: 12px; font-weight: 600; color: var(--negro);
  line-height: 1.3;
}
.cap-recurso-frase {
  border-left: 3px solid var(--rojo);
  padding: 8px 12px;
  background: var(--rojo-soft);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 13px; font-style: italic; color: #444; line-height: 1.5;
}


/* Iframe embebido YouTube — Run 9A.1 */
.cap-video-wrap {
  margin-bottom: 12px;
}
.cap-video-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.cap-video-label::after {
  content: ''; flex: 1; height: 1px; background: var(--gris-borde);
}
.cap-video-ratio {
  position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
  background: #000; border-radius: var(--radio-lg);
  overflow: hidden;
}
.cap-video-ratio iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}


/* ═══════════════════════════════════════════════════
   RUN 9B — Progreso, Checklist y Quiz
   ═══════════════════════════════════════════════════ */

/* Barra de progreso general */
.cap-progress-bar-wrap {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
}
.cap-progress-label {
  font-size: 12px; font-weight: 700; color: var(--negro);
  white-space: nowrap; flex-shrink: 0;
}
.cap-progress-track {
  flex: 1; height: 8px; background: var(--gris-pill);
  border-radius: 999px; overflow: hidden;
}
.cap-progress-fill {
  height: 100%; background: var(--rojo);
  border-radius: 999px; transition: width .4s;
}
.cap-progress-pct {
  font-size: 12px; font-weight: 700; color: var(--rojo);
  white-space: nowrap; flex-shrink: 0; min-width: 36px; text-align: right;
}

/* Sidebar: module progress */
.cap-mod-progress {
  font-size: 10px; color: #666; margin-top: 2px;
}
.cap-mod-btn.active .cap-mod-progress { color: #aaa; }

/* Sidebar: unit completion indicator */
.cap-unit-btn {
  position: relative; padding-right: 28px;
}
.cap-unit-check {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700;
}
.cap-unit-check.done  { color: #4ade80; }
.cap-unit-check.todo  { color: #555; }

/* Mark complete button */
.cap-mark-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--gris-claro);
  border-radius: var(--radio-lg);
  margin-top: 20px;
  border: 1px solid var(--gris-borde);
}
.cap-mark-status {
  font-size: 13px; color: #555;
  display: flex; align-items: center; gap: 6px;
}
.cap-mark-status.done { color: #166534; font-weight: 600; }
.cap-mark-btn {
  padding: 7px 16px; font-size: 12px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.cap-mark-btn.mark    { background: var(--rojo); color: #fff; }
.cap-mark-btn.mark:hover { background: var(--rojo-hover); }
.cap-mark-btn.unmark  { background: #fff; color: #888;
                         border: 1px solid var(--gris-borde); }
.cap-mark-btn.unmark:hover { border-color: #aaa; color: var(--negro); }

/* Checklist */
.cap-checklist-block {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.cap-checklist-head {
  padding: 10px 16px;
  background: var(--gris-claro);
  border-bottom: 1px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: space-between;
}
.cap-checklist-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #777;
}
.cap-checklist-count {
  font-size: 11px; font-weight: 700; color: var(--rojo);
}
.cap-checklist-items {
  padding: 8px 0;
}
.cap-checklist-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 16px; cursor: pointer;
  transition: background .1s;
}
.cap-checklist-item:hover { background: #fafafa; }
.cap-checklist-cb {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: all .15s; background: #fff;
}
.cap-checklist-item.checked .cap-checklist-cb {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}
.cap-checklist-item.checked .cap-checklist-cb::after { content: '✓'; font-size: 11px; }
.cap-checklist-text {
  font-size: 13px; color: #444; line-height: 1.5;
}
.cap-checklist-item.checked .cap-checklist-text {
  color: #999; text-decoration: line-through;
}

/* Quiz */
.cap-quiz-block {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.cap-quiz-head {
  padding: 14px 20px;
  background: var(--negro);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.cap-quiz-title {
  font-size: 13px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
}
.cap-quiz-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  background: var(--rojo); color: #fff; border-radius: 20px;
}
.cap-quiz-body { padding: 20px; }
.cap-quiz-prev-result {
  padding: 10px 14px;
  background: var(--gris-claro);
  border-radius: var(--radio);
  margin-bottom: 16px;
  font-size: 13px; color: #555;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cap-quiz-prev-score { font-weight: 700; color: var(--rojo); }
.cap-quiz-question {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gris-borde);
}
.cap-quiz-question:last-of-type { border-bottom: none; }
.cap-quiz-q-text {
  font-size: 14px; font-weight: 600; color: var(--negro);
  margin-bottom: 10px; line-height: 1.5;
}
.cap-quiz-q-num {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #aaa; margin-bottom: 4px;
}
.cap-quiz-options { display: flex; flex-direction: column; gap: 7px; }
.cap-quiz-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  cursor: pointer; transition: all .15s; font-size: 13px; color: #444;
  background: #fff;
}
.cap-quiz-option:hover:not(.answered) { border-color: var(--rojo); background: var(--rojo-soft); }
.cap-quiz-option.selected { border-color: var(--rojo); background: var(--rojo-soft); }
.cap-quiz-option.correct  { border-color: #16A34A; background: #f0fdf4; color: #14532D; font-weight: 600; }
.cap-quiz-option.incorrect{ border-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.cap-quiz-option.show-correct { border-color: #16A34A; background: #f0fdf4; }
.cap-quiz-option-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  transition: all .15s;
}
.cap-quiz-option.selected .cap-quiz-option-dot { border-color: var(--rojo); background: var(--rojo); color: #fff; }
.cap-quiz-option.correct  .cap-quiz-option-dot { border-color: #16A34A; background: #16A34A; color: #fff; }
.cap-quiz-option.incorrect .cap-quiz-option-dot { border-color: #dc2626; background: #dc2626; color: #fff; }
.cap-quiz-explanation {
  margin-top: 8px; font-size: 12px; color: #555; line-height: 1.5;
  padding: 8px 12px; background: var(--gris-claro);
  border-radius: var(--radio); border-left: 3px solid var(--gris-borde); display: none;
}
.cap-quiz-explanation.visible { display: block; }
.cap-quiz-explanation.correct { border-left-color: #16A34A; }
.cap-quiz-explanation.incorrect { border-left-color: #dc2626; }
.cap-quiz-footer {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cap-quiz-result {
  font-size: 14px; font-weight: 700; color: var(--negro);
}
.cap-quiz-result .score { color: var(--rojo); }
.cap-quiz-btn {
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer;
  transition: background .15s;
}
.cap-quiz-btn.submit { background: var(--rojo); color: #fff; }
.cap-quiz-btn.submit:hover { background: var(--rojo-hover); }
.cap-quiz-btn.retry  { background: var(--negro); color: #fff; }
.cap-quiz-btn.retry:hover  { background: #333; }


/* ── Mobile nav hamburger ── */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; flex-shrink: 0;
  /* NO margin-left:auto — session-bar already handles that */
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px; transition: all .2s;
}

/* Con los 6 ítems de nav + info de sesión en una sola línea, el header
   necesita ~1180px para no desbordar (medido: se rompe desde ~1090px).
   Por eso el modo hamburguesa arranca en tablets, no solo en celulares. */
@media (max-width: 1180px) {
  /* Show hamburger */
  .nav-hamburger { display: flex; }

  /* Nav dropdown */
  .nav-bar {
    display: none;
    flex-direction: column;
    padding: 6px 0;
    /* Position relative to the sticky header */
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--negro);
    border-bottom: 2px solid var(--rojo);
    z-index: 99;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav-bar.open { display: flex; }

  .nav-btn {
    padding: 13px 20px;
    text-align: left;
    border-bottom: 1px solid #1a1a1a;
    border-radius: 0;
    font-size: 14px;
    width: 100%;
  }
  .nav-btn:last-child { border-bottom: none; }
  .nav-btn.active { color: #fff; background: rgba(200,16,46,.16); }
}

@media (max-width: 480px) {
  .header { padding: 0 16px; gap: 8px; }

  .header-title { font-size: 14px; }

  /* Hide session name on very small screens, keep avatar + logout */
  .session-name, .session-role { display: none; }

  /* Logout button shorter on mobile */
  .logout-btn { padding: 5px 10px; font-size: 11px; }
}


/* Quiz toggle */
.cap-quiz-head { cursor: pointer; user-select: none; }
.cap-quiz-head:hover { background: #1a1a1a; }
.cap-quiz-toggle-icon {
  font-size: 14px; color: #aaa; transition: transform .2s; flex-shrink: 0;
}
.cap-quiz-body { display: none; }
.cap-quiz-block.open .cap-quiz-body { display: block; }
.cap-quiz-block.open .cap-quiz-toggle-icon { transform: rotate(180deg); }


/* ═══════════════════════════════════════════════════
   RECOMENDADOR BULLPADEL
   ═══════════════════════════════════════════════════ */
.rec-intro { margin-bottom: 24px; }
.rec-intro p { font-size: 14px; color: #555; line-height: 1.6; }

/* Pregunta card */
.rec-questions { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.rec-q { background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio-lg); overflow: hidden; }
.rec-q-head {
  padding: 12px 16px; background: var(--gris-claro);
  border-bottom: 1px solid var(--gris-borde);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #777;
  display: flex; align-items: center; gap: 8px;
}
.rec-q-num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--rojo);
  color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rec-options {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px;
}
.rec-option {
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--gris-borde); border-radius: 20px;
  background: #fff; color: #555; cursor: pointer;
  transition: all .15s; user-select: none;
}
.rec-option:hover { border-color: var(--rojo); color: var(--rojo); background: var(--rojo-soft); }
.rec-option.selected {
  border-color: var(--rojo); background: var(--rojo); color: #fff; font-weight: 700;
}

/* Actions */
.rec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.rec-btn-primary {
  padding: 11px 24px; font-size: 14px; font-weight: 700;
  background: var(--rojo); color: #fff; border: none;
  border-radius: var(--radio); cursor: pointer; transition: background .15s;
}
.rec-btn-primary:hover { background: var(--rojo-hover); }
.rec-btn-secondary {
  padding: 11px 20px; font-size: 13px; font-weight: 600;
  background: #fff; color: #777; border: 1px solid var(--gris-borde);
  border-radius: var(--radio); cursor: pointer; transition: all .15s;
}
.rec-btn-secondary:hover { border-color: #aaa; color: var(--negro); }

/* Results */
.rec-results-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 2px solid var(--rojo);
}
.rec-results-title { font-size: 16px; font-weight: 800; color: var(--negro); }
.rec-results-sub   { font-size: 13px; color: #888; margin-top: 2px; }

.rec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.rec-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); overflow: hidden;
  transition: box-shadow .2s;
}
.rec-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.09); }
.rec-card.top { border-top: 3px solid var(--rojo); }
.rec-card.alt { border-top: 3px solid #555; }

.rec-card-rank {
  padding: 8px 14px;
  background: var(--gris-claro);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #888;
  display: flex; align-items: center; gap: 6px;
}
.rec-card-rank.top { background: var(--rojo-soft); color: var(--rojo); }

.rec-card-img-wrap {
  height: 140px; background: #f9f9f9;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--gris-borde); padding: 12px;
}
.rec-card-img-wrap img { max-height: 120px; max-width: 100%; object-fit: contain; }
.rec-card-img-placeholder {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gris-borde); display: flex;
  align-items: center; justify-content: center;
  font-size: 24px; color: #aaa;
}

.rec-card-body { padding: 14px 16px; }
.rec-card-linea { margin-bottom: 6px; }
.rec-card-nombre { font-size: 16px; font-weight: 800; color: var(--negro); margin-bottom: 8px; }

.rec-card-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin-bottom: 10px;
}
.rec-card-spec { font-size: 11px; color: #888; }
.rec-card-spec strong { color: #555; font-weight: 600; }

.rec-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.rec-chip {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; background: var(--rojo-soft); color: var(--rojo);
  letter-spacing: .04em;
}
.rec-chip.neutral { background: #f0f0f0; color: #666; }

.rec-card-why {
  font-size: 12px; color: #555; line-height: 1.6;
  background: var(--gris-claro); padding: 10px 12px;
  border-radius: var(--radio); margin-bottom: 10px;
  border-left: 3px solid var(--gris-borde);
}
.rec-card-why.top { border-left-color: var(--rojo); }

.rec-card-frase {
  font-size: 12px; color: #444; font-style: italic;
  line-height: 1.55; margin-bottom: 12px;
}

.rec-card-actions { display: flex; gap: 8px; }
.rec-card-btn {
  flex: 1; padding: 8px 10px; font-size: 12px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer;
  transition: all .15s; text-align: center;
}
.rec-card-btn.primary { background: var(--rojo); color: #fff; }
.rec-card-btn.primary:hover { background: var(--rojo-hover); }
.rec-card-btn.secondary {
  background: #fff; color: #555;
  border: 1px solid var(--gris-borde);
}
.rec-card-btn.secondary:hover { border-color: #aaa; color: var(--negro); }

/* Empty / no answers */
.rec-empty {
  padding: 48px 24px; text-align: center;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
}
.rec-empty-icon { font-size: 36px; margin-bottom: 12px; }
.rec-empty-title { font-size: 15px; font-weight: 700; color: var(--negro); margin-bottom: 6px; }
.rec-empty-sub   { font-size: 13px; color: #888; }

@media(max-width:600px) { .rec-cards { grid-template-columns: 1fr; } }


/* Recomendador Run 10B additions */
.rec-perfil-resumen {
  background: var(--negro); color: #ccc;
  border-radius: var(--radio-lg); padding: 12px 18px;
  font-size: 12px; line-height: 1.6; margin-bottom: 20px;
}
.rec-perfil-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rojo); margin-right: 8px;
}
.rec-card.premium { border-top-color: #d97706; }
.rec-card-rank.premium { background: #fffbeb; color: #92400e; }
.rec-chip.premium { background: #fffbeb; color: #92400e; }


/* Botón comparar las 3 recomendaciones */
.rec-compare-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  background: var(--negro); color: #fff;
  border: 2px solid var(--rojo); border-radius: var(--radio);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rec-compare-all-btn:hover { background: var(--rojo); border-color: var(--rojo); }
.rec-results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════
   HOME / DASHBOARD
   ═══════════════════════════════════════════════════ */

/* Hero */
.home-hero {
  background: var(--negro);
  border-radius: var(--radio-lg);
  padding: 56px 48px;
  margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.home-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px;
  align-items: center; position: relative; z-index: 1;
}
.home-hero-dot { position: absolute; border-radius: 50%; background: var(--rojo); pointer-events: none; }
.home-hero-dot-1 { width: 8px; height: 8px; top: 18%; left: 52%; opacity: .55; }
.home-hero-dot-2 { width: 5px; height: 5px; top: 78%; left: 44%; opacity: .4; }
.home-hero-eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--rojo-accent); margin-bottom: 16px;
}
.home-hero-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 44px; font-weight: 700; color: #fff;
  line-height: 0.98; margin-bottom: 18px; letter-spacing: .005em;
}
.home-hero-sub {
  font-size: 15px; color: var(--gris-texto-dark-bg); line-height: 1.6;
  max-width: 480px; margin-bottom: 26px;
}
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero-btn {
  padding: 13px 24px; font-size: 14px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.home-hero-btn.primary { background: var(--rojo); color: #fff; }
.home-hero-btn.primary:hover { background: var(--rojo-hover); }
.home-hero-btn.ghost {
  background: transparent; color: var(--gris-texto-dark-bg);
  border: 1px solid var(--gris-borde-oscuro);
}
.home-hero-btn.ghost:hover { border-color: #666; color: #fff; }

.home-hero-card {
  background: var(--negro-suave); border: 1px solid var(--negro-borde);
  border-radius: var(--radio-xl); padding: 24px 26px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.home-hero-card-label {
  color: var(--rojo-accent); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px;
}

/* Stats — viven dentro de la hero-card */
.home-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border: 1px solid var(--negro-borde); border-radius: var(--radio);
  overflow: hidden;
}
.home-stat {
  padding: 16px; text-align: center;
  border-right: 1px solid var(--negro-borde);
  border-bottom: 1px solid var(--negro-borde);
}
.home-stat:nth-child(2n) { border-right: none; }
.home-stat:nth-child(3), .home-stat:nth-child(4) { border-bottom: none; }
.home-stat-num {
  font-size: 26px; font-family: var(--font-display); font-weight: 700; color: var(--rojo);
  line-height: 1; margin-bottom: 4px;
}
.home-stat-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gris-texto-suave);
}

/* Video demo — vive dentro de la hero-card, reemplaza el resumen
   del catálogo para el rol usuario (punto de venta). */
.home-demo-video {
  border: 1px solid var(--negro-borde); border-radius: var(--radio);
  overflow: hidden; background: #000; line-height: 0;
}
.home-demo-video video {
  width: 100%; aspect-ratio: 16/9; display: block; background: #000;
}

/* Section label */
.home-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gris-texto-suave); margin-bottom: 18px;
}

/* Quick access cards */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-bottom: 32px;
}
.home-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); padding: 26px 26px 24px;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s; cursor: pointer;
}
.home-card.big { background: var(--negro-suave); border: none; }
.home-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.home-card-icon {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--rojo); width: 38px; height: 38px;
  background: var(--rojo-soft); border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 14px;
}
.home-card.big .home-card-icon { background: var(--rojo); color: #fff; }
.home-card-name {
  font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--negro);
  margin-bottom: 6px;
}
.home-card.big .home-card-name { color: #fff; }
.home-card-desc {
  font-size: 13.5px; color: var(--gris-texto-medio); line-height: 1.5; margin-bottom: 16px; flex: 1;
}
.home-card.big .home-card-desc { color: var(--gris-texto-dark-bg); }
.home-card-btn {
  align-self: flex-start;
  padding: 11px 18px; font-size: 13px; font-weight: 700;
  background: transparent; color: var(--negro); border: 1.5px solid #d8d5d0;
  border-radius: 7px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.home-card:not(.big) .home-card-btn:hover { border-color: var(--rojo); color: var(--rojo); }
.home-card.big .home-card-btn { background: var(--rojo); color: #fff; border: none; }
.home-card.big .home-card-btn:hover { background: var(--rojo-hover); }

/* Ruta sugerida */
.home-ruta {
  background: var(--negro); border-radius: var(--radio-lg);
  padding: 28px 32px; margin-bottom: 28px;
}
.home-ruta-title {
  font-family: var(--font-display); color: #fff; font-weight: 600; font-size: 16px;
  letter-spacing: .01em; text-transform: uppercase; margin-bottom: 20px;
}
.home-ruta-steps {
  display: flex; flex-wrap: wrap; gap: 28px;
}
.home-ruta-step {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 200px;
}
.home-ruta-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rojo); color: #fff;
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-ruta-text { font-size: 13.5px; color: var(--gris-texto-dark-bg); line-height: 1.4; }

@media(max-width:760px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-cards { grid-template-columns: 1fr; }
}

@media(max-width:600px) {
  .home-hero { padding: 32px 20px; }
  .home-hero-title { font-size: 30px; }
  .home-cards { grid-template-columns: 1fr; }
  .home-ruta-steps { flex-direction: column; gap: 16px; }
}


/* ═══════════════════════════════════════════════════
   ONBOARDING MODAL
   ═══════════════════════════════════════════════════ */
.ob-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9500;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.ob-bg.open { display: flex; }

.ob-modal {
  background: #fff;
  border-radius: var(--radio-lg);
  width: 100%; max-width: 520px;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Header strip */
.ob-header {
  background: var(--negro);
  padding: 22px 28px 18px;
  border-bottom: 3px solid var(--rojo);
}
.ob-step-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--rojo); margin-bottom: 8px;
}
.ob-title {
  font-size: 19px; font-weight: 900; color: #fff;
  line-height: 1.2; letter-spacing: -.01em;
}

/* Step illustration — CSS/SVG puro, sin imágenes ni GIFs */
.ob-icon {
  width: 100%; height: 76px; border-radius: 12px;
  background: var(--rojo-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; box-sizing: border-box; padding: 10px;
}
.ob-icon svg {
  height: 100%; width: auto; max-width: 100%;
  animation: fadeInUp .35s ease both;
}

/* Body */
.ob-body {
  padding: 24px 28px 20px;
  flex: 1;
}
.ob-text {
  font-size: 14px; color: #444; line-height: 1.7;
}

/* Progress dots */
.ob-dots {
  display: flex; gap: 6px; align-items: center;
  padding: 0 28px 4px;
}
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gris-borde); transition: all .2s;
}
.ob-dot.active { background: var(--rojo); width: 22px; border-radius: 4px; }

/* Footer */
.ob-footer {
  padding: 16px 28px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-top: 1px solid var(--gris-borde);
}
.ob-footer-left { display: flex; gap: 8px; align-items: center; }
.ob-btn {
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ob-btn-primary { background: var(--rojo); color: #fff; }
.ob-btn-primary:hover { background: var(--rojo-hover); }
.ob-btn-secondary {
  background: #fff; color: #555;
  border: 1px solid var(--gris-borde);
}
.ob-btn-secondary:hover { border-color: #aaa; color: var(--negro); }
.ob-btn-ghost {
  background: none; border: none; color: #aaa;
  font-size: 12px; cursor: pointer; padding: 4px;
}
.ob-btn-ghost:hover { color: #666; }

/* Home trigger button */
.home-ob-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #aaa;
  background: none; border: none; cursor: pointer;
  padding: 0; transition: color .15s; text-decoration: underline;
  text-underline-offset: 3px;
}
.home-ob-trigger:hover { color: var(--negro); }

@media(max-width: 560px) {
  .ob-modal { border-radius: 16px 16px 0 0; max-width: 100%; max-height: 90dvh; overflow-y: auto; }
  .ob-bg { padding: 0; align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════
   TIP CONTEXTUAL POR MÓDULO — capa independiente del onboarding
   ═══════════════════════════════════════════════════ */
.module-tip {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--rojo-soft); border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 10px 14px; margin: 16px 0;
  font-size: 13px; color: #5a2028; line-height: 1.5;
  animation: fadeInUp .25s ease both;
}
.module-tip-text { flex: 1; }
.module-tip-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: #a32d2d; font-size: 13px; line-height: 1; padding: 2px 4px;
  opacity: .7;
}
.module-tip-close:hover { opacity: 1; }

@media(max-width: 480px) {
  .module-tip { font-size: 12.5px; padding: 9px 12px; }
}


/* ═══════════════════════════════════════════════════
   COMPARADOR MEJORADO — RUN 14A-1
   ═══════════════════════════════════════════════════ */

/* Summary block */
.comp-summary {
  background: var(--negro); color: #ccc;
  border-radius: var(--radio-lg); padding: 18px 22px;
  margin-bottom: 16px; font-size: 13px; line-height: 1.7;
}
.comp-summary-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rojo); margin-bottom: 6px;
}

/* Highlights */
.comp-highlights {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.comp-highlight-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: #fff; border: 1px solid var(--gris-borde);
  font-size: 12px; font-weight: 600; color: var(--negro);
}
.comp-highlight-chip .chip-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--rojo);
}
.comp-highlights-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.comp-highlights-title::after {
  content: ''; flex: 1; height: 1px; background: var(--gris-borde);
}

/* Table improvements */
.comp-table-wrap {
  overflow-x: auto; background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg);
  margin-bottom: 20px;
}
.comp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.comp-table thead th {
  padding: 0 16px 16px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--negro);
  border-bottom: 2px solid var(--gris-borde);
  vertical-align: bottom;
}
.comp-table thead th:first-child { text-align: left; }
.comp-table .row-label {
  padding: 10px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto-suave);
  background: var(--gris-panel); white-space: nowrap;
  border-bottom: 1px solid var(--gris-panel-borde);
}
.comp-table tbody td {
  padding: 10px 16px; font-size: 13px; color: var(--gris-texto-fuerte);
  text-align: center; border-bottom: 1px solid #f5f5f5;
  vertical-align: top;
}
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover td { background: var(--gris-panel); }
.comp-table .diff {
  background: var(--rojo-soft); color: var(--rojo); font-weight: 600;
}
.comp-pala-img {
  width: 80px; height: 90px; object-fit: contain;
  cursor: zoom-in; display: block; margin: 0 auto 8px;
  transition: transform .2s;
}
.comp-pala-img:hover { transform: scale(1.06); }
.comp-pala-nombre { font-size: 13px; font-weight: 800; color: var(--negro); }
.comp-pala-linea  { margin-top: 4px; }
.comp-chips-cell  { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.comp-tech-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: #f5f5f5; color: #555; border: 1px solid var(--gris-borde);
}

/* How to explain block */
.comp-explain { margin-top: 4px; }
.comp-explain-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.comp-explain-title::after {
  content: ''; flex: 1; height: 1px; background: var(--gris-borde);
}
.comp-explain-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.comp-explain-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); padding: 16px;
  border-top: 3px solid var(--gris-borde);
}
.comp-explain-card.proline { border-top-color: var(--rojo); }
.comp-explain-card-nombre {
  font-size: 13px; font-weight: 800; color: var(--negro); margin-bottom: 4px;
}
.comp-explain-card-etiqueta {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rojo); margin-bottom: 10px;
}
.comp-explain-card-frase {
  font-size: 12px; color: #555; line-height: 1.6; font-style: italic;
}

/* Empty state */
.comp-empty {
  padding: 48px 24px; text-align: center;
  background: var(--gris-panel); border: 1px solid var(--gris-panel-borde);
  border-radius: var(--radio-lg);
}
.comp-empty-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--negro); margin-bottom: 6px; }
.comp-empty-sub   { font-size: 14px; color: var(--gris-texto-medio); }

@media(max-width:600px) {
  .comp-explain-cards { grid-template-columns: 1fr; }
}


/* Comparador — perfil detectado desde recomendador */
.comp-context-block {
  background: var(--negro); color: #ccc;
  border-radius: var(--radio-lg); padding: 12px 18px;
  margin-bottom: 14px; font-size: 12px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.comp-context-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rojo);
  white-space: nowrap; margin-top: 2px;
}
.comp-context-text { flex: 1; }


/* ═══════════════════════════════════════════════════
   RUN 14D-1 — UI POLISH
   CSS-only: variables, transitions, cards, buttons,
   nav, modals, sections, reduced-motion
   ═══════════════════════════════════════════════════ */

/* ── Extended design tokens ─────────────────────────────────────────────── */
:root {
  --shadow-soft:   0 2px 8px rgba(0,0,0,.06);
  --shadow-card:   0 4px 16px rgba(0,0,0,.10);
  --shadow-modal:  0 24px 64px rgba(0,0,0,.22);
  --shadow-hover:  0 8px 24px rgba(0,0,0,.14);
  --transition-fast:  all .12s ease;
  --transition-base:  all .2s ease;
  --transition-slow:  all .35s ease;
}

/* ── Section fade-in ─────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section.visible {
  animation: fadeInUp .25s ease both;
}

/* ── Unified card base ───────────────────────────────────────────────────── */
.pala-card,
.home-card,
.rec-card,
.item-card,
.admin-card,
.admin-stat,
.cap-recursos,
.comp-explain-card,
.home-stat,
.home-ruta {
  transition: var(--transition-base);
}

/* Hover elevation for clickable cards */
.pala-card:hover,
.home-card:hover,
.item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.rec-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* ── Unified button base ─────────────────────────────────────────────────── */
button, .btn, .rec-btn-primary, .rec-btn-secondary,
.home-hero-btn, .home-card-btn, .cap-mark-btn,
.cap-quiz-btn, .cap-recurso-btn, .catalogo-dl-btn,
.rec-card-btn, .comp-explain-card, .ob-btn,
.admin-btn-compare-all, .rec-compare-all-btn {
  transition: var(--transition-fast);
}

/* Primary button unified hover */
.btn-primary:hover,
.rec-btn-primary:hover,
.home-hero-btn.primary:hover,
.home-card-btn:hover,
.cap-mark-btn.mark:hover,
.cap-quiz-btn.submit:hover,
.catalogo-dl-btn:hover,
.rec-card-btn.primary:hover,
.login-btn:hover,
.ob-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200,16,46,.25);
}

button:active,
.btn:active {
  transform: translateY(0) !important;
  filter: brightness(.96) !important;
}

/* Focus visible — accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

/* ── Navigation improvements ─────────────────────────────────────────────── */
.nav-btn.active {
  font-weight: 700;
}

/* ── Header polish ───────────────────────────────────────────────────────── */
.header {
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.header-title {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── Section head ────────────────────────────────────────────────────────── */
.sec-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gris-borde);
}
.sec-head h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .003em;
  color: var(--negro);
  margin-bottom: 8px;
}
.sec-head p {
  font-size: 14px;
  color: var(--gris-texto-suave);
  line-height: 1.6;
  max-width: 600px;
}

/* ── Modal entrance animations ───────────────────────────────────────────── */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pala-modal-bg.open .pala-modal,
.detail-modal-bg.open .detail-modal,
.ob-bg.open .ob-modal,
.admin-modal-bg.open .admin-modal {
  animation: modalFadeIn .2s ease both;
}
.pala-modal-bg,
.detail-modal-bg,
.ob-bg,
.admin-modal-bg {
  transition: opacity .2s;
}

/* ── Inputs & selects polish ──────────────────────────────────────────────── */
input, select, textarea {
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}

/* ── Filter pills (recomendador Q options) ───────────────────────────────── */
.rec-option {
  transition: var(--transition-fast);
}
.rec-option:hover:not(.selected) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.rec-option.selected {
  box-shadow: 0 2px 8px rgba(200,16,46,.2);
}

/* ── Progress bar animation ──────────────────────────────────────────────── */
.cap-progress-fill {
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Lightbox entrance ────────────────────────────────────────────────────── */
#lightbox {
  transition: opacity .15s;
}
#lightbox img {
  animation: modalFadeIn .2s ease both;
}

/* ── Tabla hover rows ─────────────────────────────────────────────────────── */
.tabla-main tbody tr {
  transition: background .1s;
}
.tabla-main tbody tr:hover td {
  background: #f9f9f9;
}
.admin-table tbody tr {
  transition: background .1s;
}

/* ── Login screen polish ──────────────────────────────────────────────────── */
.login-box {
  animation: fadeInUp .3s ease both;
}

/* ── Home hero accent line ────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rojo), transparent);
  opacity: .5;
}

/* ── Checklist item hover ─────────────────────────────────────────────────── */
.cap-checklist-item {
  transition: background .1s;
  border-radius: var(--radio);
}

/* ── Quiz option hover ────────────────────────────────────────────────────── */
.cap-quiz-option {
  transition: var(--transition-fast);
}
.cap-quiz-option:hover:not(.answered) {
  transform: translateX(2px);
}

/* ── Onboarding dots animation ────────────────────────────────────────────── */
.ob-dot {
  transition: width .25s ease, background .25s ease;
}

/* ── Sidebar module buttons ────────────────────────────────────────────────── */
.cap-mod-btn {
  transition: var(--transition-fast);
}
.cap-unit-btn {
  transition: background .1s, color .1s;
}

/* ── Reduced motion support ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════════════════════════════════════
   RUN 14D-2 — UI Polish por sección
   ═══════════════════════════════════════════════════ */

/* ── CATÁLOGO ─────────────────────────────────────────────────────────────── */

/* Filter row responsive */
.filters-wrap { margin-bottom: 16px; }
.filters-row,
.filters-row-2 {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.filters-row select,
.filters-row-2 select {
  flex: 1 1 130px; max-width: 190px;
}
@media(max-width:600px) {
  .filters-row,
  .filters-row-2 { flex-direction: column; align-items: stretch; }
  .filters-row select,
  .filters-row-2 select { max-width: 100%; }
  .btn-clear-filters { width: 100%; text-align: center; }
}

/* Pala card body padding */
.pala-card-body { padding: 14px 16px 16px; }

/* Specs grid tighter */
.specs-grid { gap: 6px 12px; }

/* Catálogo — card compacta en mobile: fila horizontal (thumbnail + datos clave),
   el detalle completo (desc, sensación, specs, tecnologías, nota, botón) se
   oculta porque ya está disponible en el modal de ficha (openPalaModal).
   No cambia nada en desktop. */
@media(max-width: 600px) {
  .pala-card { flex-direction: row; align-items: flex-start; position: relative; }
  .pala-img { width: 72px; min-width: 72px; aspect-ratio: 1/1; padding: 6px; }
  .pala-body { padding: 12px 34px 12px 12px; }
  .pala-name { font-size: 15px; margin-bottom: 4px; }
  .estilo-row { margin-bottom: 0; }
  .pala-card-extra { display: none; }
  .pala-card::after {
    content: '›'; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); font-size: 22px; line-height: 1;
    color: var(--gris-borde);
  }
}

/* ── TABLA GAMA COMPLETA ──────────────────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; border-radius: var(--radio-lg); }

.tabla-main thead th {
  position: sticky !important; top: 0 !important; z-index: 2;
  background: var(--negro) !important; color: #fff !important;
  font-size: 10px; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 10px 14px; white-space: nowrap;
}
.tabla-main thead th:first-child {
  width: 32px; /* thumbnail col */
}
.tabla-main tbody tr { transition: background .1s; }
.tabla-main tbody tr:hover td { background: #f7f7f7; }
.tabla-main tbody td { font-size: 12px; padding: 8px 14px; }

/* ── GUÍA DE VENTA ────────────────────────────────────────────────────────── */
.guia-nav-btn {
  transition: color .15s, border-color .15s, background .15s;
}
.guia-nav-btn:hover { background: rgba(200,16,46,.06); border-radius: var(--radio); }
.guia-nav-btn.active {
  background: rgba(200,16,46,.10);
  color: var(--rojo);
  font-weight: 700;
  border-radius: var(--radio);
}

.guia-step-panel { transition: opacity .2s; }
.guia-step-panel:not(.active) { opacity: 0; pointer-events: none; position: absolute; }
.guia-step-panel.active { opacity: 1; pointer-events: auto; position: relative; }

/* ── MATERIALES Y TECNOLOGÍAS ─────────────────────────────────────────────── */
.item-card {
  border-radius: var(--radio-lg);
  transition: var(--transition-base);
}
.item-card .item-card-hint {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rojo);
  opacity: 0; transition: opacity .15s;
  text-align: right; padding: 4px 12px 8px;
}
.item-card:hover .item-card-hint { opacity: .8; }

/* ── CAPACITACIONES ───────────────────────────────────────────────────────── */

/* Panel fade between units */
.cap-unit-panel { transition: opacity .2s; }
.cap-unit-panel:not(.active) { opacity: 0; }
.cap-unit-panel.active { opacity: 1; }

/* Mod button active line */
.cap-mod-btn.active {
  border-left-color: var(--rojo);
  background: rgba(200,16,46,.08);
}

/* Unit button active */
.cap-unit-btn.active {
  color: var(--rojo);
  font-weight: 700;
  border-left-color: var(--rojo);
}

/* Cap layout mobile */
@media(max-width:700px) {
  .cap-layout {
    flex-direction: column;
  }
  .cap-sidebar {
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 2px solid var(--rojo);
  }
  .cap-panel { padding: 20px 16px; }
  .cap-video-ratio { border-radius: var(--radio); }
}

/* Checklist hover */
.cap-checklist-item:hover { background: #f9f9f9; }

/* Quiz option focus */
.cap-quiz-option:focus-visible { outline: 2px solid var(--rojo); }

/* Resources card hover */
.cap-recurso-btn {
  transition: var(--transition-fast);
}

/* ── RECOMENDADOR ─────────────────────────────────────────────────────────── */

/* Question cards enter animation */
.rec-questions .rec-q {
  animation: fadeInUp .2s ease both;
}
.rec-questions .rec-q:nth-child(2) { animation-delay: .04s; }
.rec-questions .rec-q:nth-child(3) { animation-delay: .08s; }
.rec-questions .rec-q:nth-child(4) { animation-delay: .12s; }
.rec-questions .rec-q:nth-child(5) { animation-delay: .16s; }
.rec-questions .rec-q:nth-child(6) { animation-delay: .20s; }

/* Result cards stagger */
.rec-card {
  animation: fadeInUp .25s ease both;
}
.rec-cards .rec-card:nth-child(2) { animation-delay: .08s; }
.rec-cards .rec-card:nth-child(3) { animation-delay: .16s; }

/* Profile summary */
.rec-perfil-resumen {
  border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio-lg) var(--radio-lg) 0;
  padding: 12px 18px;
}

/* ── COMPARADOR ───────────────────────────────────────────────────────────── */

/* Summary block */
.comp-summary {
  border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio-lg) var(--radio-lg) 0;
  padding: 16px 20px;
}

/* Context block */
.comp-context-block {
  border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio-lg) var(--radio-lg) 0;
}

/* Highlight chips hover */
.comp-highlight-chip {
  transition: var(--transition-fast);
}
.comp-highlight-chip:hover {
  border-color: var(--rojo);
  background: var(--rojo-soft);
}

/* Table header sticky */
.comp-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  border-bottom: 2px solid var(--gris-borde);
}

/* Explain cards hover */
.comp-explain-card {
  transition: var(--transition-fast);
}
.comp-explain-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* ── ADMINISTRACIÓN ────────────────────────────────────────────────────────── */

/* Stat cards */
.admin-stat { transition: var(--transition-fast); }
.admin-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Table row hover already handled by admin-table in 14D-1 */

/* ── HOME ──────────────────────────────────────────────────────────────────── */

/* Stats stagger */
.home-stats .home-stat:nth-child(1) { animation: fadeInUp .2s .05s ease both; }
.home-stats .home-stat:nth-child(2) { animation: fadeInUp .2s .10s ease both; }
.home-stats .home-stat:nth-child(3) { animation: fadeInUp .2s .15s ease both; }
.home-stats .home-stat:nth-child(4) { animation: fadeInUp .2s .20s ease both; }

/* Cards stagger */
.home-cards .home-card { animation: fadeInUp .2s ease both; }
.home-cards .home-card:nth-child(2) { animation-delay: .05s; }
.home-cards .home-card:nth-child(3) { animation-delay: .10s; }
.home-cards .home-card:nth-child(4) { animation-delay: .15s; }
.home-cards .home-card:nth-child(5) { animation-delay: .20s; }
.home-cards .home-card:nth-child(6) { animation-delay: .25s; }

/* Ruta steps */
.home-ruta-step { transition: background .15s; border-radius: var(--radio); }
.home-ruta-step:hover { background: #fafafa; }

/* ── LOGIN SCREEN ─────────────────────────────────────────────────────────── */
.login-field input:focus {
  box-shadow: 0 0 0 3px rgba(200,16,46,.14);
}
.login-error {
  animation: fadeInUp .15s ease both;
}

/* ── GLOBAL RESPONSIVE FIXES ─────────────────────────────────────────────── */
@media(max-width:480px) {
  .sec-head h1 { font-size: 20px; }
  .home-hero-title { font-size: 20px; }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions button { width: 100%; }
  .rec-actions { flex-direction: column; }
  .rec-actions button { width: 100%; }
  .pala-modal-body { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   RUN 14E — Subnav tabs
   ═══════════════════════════════════════════════════ */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.subnav-btn {
  padding: 9px 18px;
  font-size: 13px; font-weight: 600;
  background: none; border: none;
  color: #888; cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.subnav-btn:hover { color: var(--negro); }
.subnav-btn.active {
  color: var(--rojo);
  font-weight: 700;
}
.subview { display: none; }
.subview.active { display: block; }

/* Card que envuelve subnav + contenido — Catálogo y Comparador */
.tab-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-xl); overflow: hidden;
}
.tab-card-body { padding: 26px 28px 28px; }

/* "Browser tab" — Catálogo y Comparador: tira gris con pill blanca arriba */
#subnav-catalogo, #subnav-comparador {
  background: #f2f0ed;
  padding: 8px 8px 0; gap: 8px; margin-bottom: 0;
}
#subnav-catalogo .subnav-btn, #subnav-comparador .subnav-btn {
  padding: 11px 18px 14px; border-radius: var(--radio) var(--radio) 0 0;
  color: var(--gris-tab-inactivo);
}
#subnav-catalogo .subnav-btn.active, #subnav-comparador .subnav-btn.active {
  background: #fff;
}

/* "Segmented control" — Capacitaciones: cápsula redondeada */
#subnav-cap {
  display: inline-flex; gap: 4px; background: #eeece9;
  padding: 4px; border-radius: 11px; margin-bottom: 22px !important;
}
#subnav-cap .subnav-btn {
  padding: 9px 18px; border-radius: var(--radio);
  color: var(--gris-tab-inactivo);
}
#subnav-cap .subnav-btn.active {
  background: #fff; color: var(--negro);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

@media(max-width:600px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; }
  .subnav-btn { font-size: 12px; padding: 8px 14px; }
}


/* ═══════════════════════════════════════════════════
   MAPA COMPETITIVO — RUN 15B
   ═══════════════════════════════════════════════════ */

.mapa-selectors {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.mapa-selectors select {
  flex: 1 1 220px; max-width: 320px;
  padding: 13px 14px; font-size: 14px;
  border: 1.5px solid var(--gris-borde); border-radius: 9px;
  background: #fff; color: var(--gris-texto-fuerte); cursor: pointer;
  transition: border-color .15s;
}
.mapa-selectors select:focus { border-color: var(--rojo); outline: none; }

.mapa-empty {
  padding: 56px 24px; text-align: center;
  background: var(--gris-panel); border: 1px solid var(--gris-panel-borde);
  border-radius: var(--radio-lg);
}
.mapa-empty-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--negro); margin-bottom: 8px; }
.mapa-empty-sub   { font-size: 14px; color: var(--gris-texto-medio); max-width: 520px; margin: 0 auto 4px; line-height: 1.6; }
.mapa-empty-note  { font-size: 12.5px; color: var(--gris-texto-suave); margin-top: 12px; font-style: italic; }

/* Pending validation badge + note */
.mapa-pending-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.mapa-validated-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  background: #f0fdf4; border: 1px solid #86efac; color: #166534;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.mapa-pending-note {
  font-size: 11px; color: #92400e; background: #fffbeb;
  border-left: 3px solid #fde68a; border-radius: 0 var(--radio) var(--radio) 0;
  padding: 8px 14px; margin-top: 8px; line-height: 1.5;
}

/* Competidor ficha */
.mapa-competidor-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); padding: 22px;
  margin-bottom: 20px;
}
.mapa-competidor-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.mapa-competidor-head-main { display: flex; align-items: center; gap: 14px; }
.mapa-competidor-img-wrap {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--radio);
  background: #f9f9f9; border: 1px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mapa-competidor-img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; cursor: zoom-in; }
.mapa-competidor-marca {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rojo); margin-bottom: 4px;
}
.mapa-competidor-modelo {
  font-size: 18px; font-weight: 800; color: var(--negro);
}
.mapa-competidor-meta {
  font-size: 12px; color: #999; margin-top: 4px;
}
.mapa-specs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 10px 16px; margin-bottom: 14px;
}
.mapa-spec-item .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: 2px;
}
.mapa-spec-item .val { font-size: 13px; font-weight: 600; color: var(--negro); }
.mapa-tech-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.mapa-tech-chip {
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  background: #f5f5f5; color: #555; border: 1px solid var(--gris-borde);
}
.mapa-source-link {
  font-size: 11px; color: var(--rojo); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
}
.mapa-source-link:hover { text-decoration: underline; }

/* Section labels */
.mapa-section-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #aaa; margin: 22px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.mapa-section-label::after { content:''; flex:1; height:1px; background: var(--gris-borde); }

/* Alternativas grid */
.mapa-alt-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 14px; margin-bottom: 8px;
}
.mapa-alt-card {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.mapa-alt-img-wrap {
  height: 110px; background: #f9f9f9; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--gris-borde); padding: 10px;
}
.mapa-alt-img-wrap img { max-height: 95px; max-width: 100%; object-fit: contain; cursor: zoom-in; }
.mapa-alt-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mapa-alt-nombre { font-size: 13px; font-weight: 800; color: var(--negro); }
.mapa-alt-specs { font-size: 11px; color: #888; }
.mapa-alt-actions { display: flex; gap: 6px; padding: 0 14px 14px; }
.mapa-alt-btn {
  flex: 1; padding: 7px 8px; font-size: 11px; font-weight: 700;
  border-radius: var(--radio); border: none; cursor: pointer; text-align: center;
}
.mapa-alt-btn.primary { background: var(--rojo); color: #fff; }
.mapa-alt-btn.secondary { background: #fff; color: #555; border: 1px solid var(--gris-borde); }
.mapa-alt-missing {
  padding: 14px; font-size: 12px; color: #b03030; background: #fdf6f6;
  border-radius: var(--radio); border: 1px dashed #e0a0a0; text-align: center;
}

/* Motivo / argumento blocks */
.mapa-text-block {
  background: var(--gris-claro); border-radius: var(--radio-lg);
  padding: 16px 18px; margin-bottom: 16px; font-size: 13px; color: #444; line-height: 1.65;
}
.mapa-text-block-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rojo); margin-bottom: 8px;
}

.mapa-compare-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; font-size: 13px; font-weight: 700;
  background: var(--negro); color: #fff; border: 2px solid var(--rojo);
  border-radius: var(--radio); cursor: pointer; transition: var(--transition-fast);
  margin-top: 8px;
}
.mapa-compare-btn:hover { background: var(--rojo); }

@media(max-width:600px) {
  .mapa-selectors { flex-direction: column; }
  .mapa-selectors select { max-width: 100%; }
}


.mapa-alt-mini-exp {
  font-size: 11px; color: #777; line-height: 1.5;
  font-style: italic; margin-top: 2px;
}


/* ═══════════════════════════════════════════════════
   MAPA COMPETITIVO — Ajuste fino (Run 15B.2)
   Jerarquía visual de alternativas + bloque inferior
   ═══════════════════════════════════════════════════ */

/* Alternativas: más peso visual */
.mapa-alt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.mapa-alt-card {
  position: relative;
  border-width: 1.5px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-base);
}
.mapa-alt-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.mapa-alt-card.principal {
  border-color: var(--rojo);
  border-width: 2px;
  box-shadow: 0 4px 18px rgba(200,16,46,.12);
}
.mapa-alt-tag {
  position: absolute; top: -1px; left: -2px;
  background: var(--rojo); color: #fff;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 10px;
  border-radius: var(--radio-lg) 0 var(--radio) 0;
  z-index: 1;
}
.mapa-alt-img-wrap { height: 130px; }
.mapa-alt-img-wrap img { max-height: 110px; }

.mapa-alt-rol {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--rojo);
  margin-bottom: 4px; line-height: 1.3;
}
.mapa-alt-nombre { font-size: 15px; }
.mapa-alt-sep { margin: 0 2px; color: #ccc; }
.mapa-alt-specs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.mapa-alt-explicacion {
  font-size: 12px; color: #555; line-height: 1.55;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed var(--gris-borde);
}

/* Lectura comercial — bloque inferior unificado */
.mapa-lectura-comercial {
  margin-top: 28px;
  background: var(--negro);
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.mapa-lectura-head {
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mapa-lectura-title {
  font-size: 13px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 4px;
}
.mapa-lectura-sub { font-size: 12px; color: #999; }
.mapa-lectura-body {
  padding: 18px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mapa-lectura-block-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--rojo); margin-bottom: 8px;
}
.mapa-lectura-block-text {
  font-size: 13px; color: #ccc; line-height: 1.65;
}

@media(max-width:680px) {
  .mapa-lectura-body { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   MEDIA CENTER — estantes de categorías + grid de cards
   ═══════════════════════════════════════════════════ */
.media-shelf { margin-bottom: 32px; }
.media-shelf:last-child { margin-bottom: 0; }
.media-shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.media-shelf-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--negro);
}
.media-shelf-link {
  font-size: 12.5px; font-weight: 600; color: var(--rojo);
  text-decoration: none; white-space: nowrap;
}
.media-shelf-link:hover { text-decoration: underline; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.media-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radio-lg); padding: 14px 16px;
  text-decoration: none; color: var(--negro);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.media-card:hover {
  box-shadow: var(--shadow-hover); transform: translateY(-2px);
  border-color: var(--rojo);
}
.media-card-icon {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rojo-soft); color: var(--rojo);
  border-radius: var(--radio); font-size: 14px; font-weight: 700;
}
.media-card-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
}

@media(max-width:600px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ═══════════════════════════════════════════════════
   USO DEL PORTAL — solapa de métricas en Administración
   Reutiliza .admin-card / .admin-stat / .admin-table. Lo único propio son las
   barras horizontales y la marca de caída del embudo del recomendador.
   ═══════════════════════════════════════════════════ */

.uso-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.uso-rango { display: flex; gap: 6px; flex-wrap: wrap; }
.uso-actualizado {
  font-size: 11.5px; color: var(--gris-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Las tarjetas de la solapa se apilan con aire entre ellas */
#admin-tab-uso .admin-card { margin-bottom: 20px; }
#admin-tab-uso .admin-card-body { padding: 18px 22px; }

.uso-nota {
  font-size: 12.5px; line-height: 1.55; color: var(--gris-texto-medio);
  margin-bottom: 16px; max-width: 70ch;
}

/* Fila de barra: etiqueta · barra proporcional · número */
.uso-fila {
  display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto;
  align-items: center; gap: 14px; padding: 7px 0;
}
.uso-fila-label {
  font-size: 13px; color: var(--gris-texto-fuerte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uso-fila-num {
  font-size: 13px; font-weight: 700; color: var(--negro);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.uso-barra-wrap {
  background: var(--gris-pill); border-radius: 999px; height: 10px; overflow: hidden;
}
.uso-barra {
  height: 100%; background: var(--rojo); border-radius: 999px; min-width: 2px;
  transition: width .25s ease;
}
/* El escalón donde más gente se cae: es el dato que justifica la pantalla */
.uso-barra-alerta { background: var(--rojo-accent); }
.uso-fila-final .uso-fila-label { font-weight: 700; color: var(--negro); }

.uso-caida {
  font-size: 12px; font-weight: 600; color: var(--rojo);
  background: var(--rojo-soft); border-radius: var(--radio);
  padding: 8px 12px; margin: 4px 0 10px;
}

.uso-dim { color: var(--gris-texto-suave); font-weight: 400; }

.uso-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px;
}
.uso-badge-alerta { background: var(--rojo-soft); color: var(--rojo); }

@media (max-width: 640px) {
  .uso-fila { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .uso-barra-wrap { grid-column: 1 / -1; }
}

/* Bloque de "Acciones que importan": lista de contadores, no barras — los
   volúmenes son muy distintos entre sí y una barra proporcional los aplastaría. */
.uso-accion {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--gris-panel-borde);
}
.uso-accion:last-child { border-bottom: none; }
.uso-accion-label { font-size: 13px; color: var(--gris-texto-fuerte); }
.uso-accion-num {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--rojo); line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.uso-accion-num .uso-dim {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11.5px; font-weight: 400;
}
/* Un cero no es un dato menor — es la respuesta a "¿esto se usa?" —, pero no
   debería gritar en rojo junto a los que sí tienen volumen. */
.uso-accion-cero .uso-accion-num { color: var(--gris-texto-suave); }
.uso-accion-cero .uso-accion-label { color: var(--gris-texto-suave); }

.uso-quiz-resumen {
  font-size: 13px; color: var(--gris-texto-fuerte);
  background: var(--gris-panel); border: 1px solid var(--gris-panel-borde);
  border-radius: var(--radio); padding: 11px 14px; margin-bottom: 16px;
}
.uso-quiz-resumen b { color: var(--negro); }

/* Interruptor de cuentas internas. Deliberadamente discreto: el modo normal de
   la pantalla es sin cuentas internas, y esto es para mirarlas a propósito. */
.uso-toolbar-izq {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.uso-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--gris-texto-medio);
  cursor: pointer; user-select: none;
}
.uso-toggle input { width: 15px; height: 15px; accent-color: var(--rojo); cursor: pointer; margin: 0; }
.uso-toggle:hover { color: var(--gris-texto-fuerte); }