/* ── Fonts (identicas a lab/) ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik/Aeonik-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik/Aeonik-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
}

/* ── Tokens (mismos valores que lab/static/css/style.css — una sola marca) ── */
:root {
  --crimson:      #770F35;
  --deep-crimson: #42061F;
  --white:        #FFFFFF;
  --off-white:    #F4F4F2;
  --light-gray:   #EAE6DF;
  --matter-gray:  #C4BCAE;
  --dark-gray:    #9E968A;
  --brain-pink:   #FFE3E9;
  --blush-pink:   #EDA5B2;
  --green:        #16a34a;
  --yellow:       #a16207;

  /* Alias hacia los nombres que usa lab/templates/study_results.html
     (--border-dim/--panel) -- asi el CSS portado del Lab se copia tal
     cual, sin tener que reescribir cada var() a mano. */
  --border-dim: var(--light-gray);
  --panel: var(--white);

  --font-sans: 'Aeonik', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(66,6,31,.08), 0 4px 12px rgba(66,6,31,.06);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--off-white);
  color: var(--deep-crimson);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  /* Aeonik solo tiene Regular(400)/Medium(500) entregados por la marca --
     sin esto, cualquier font-weight:600/700 (titulos, strong, badges) hace
     que el browser "invente" un bold engrosando el trazo a mano, lo que se
     ve con bordes irregulares/borrosos. font-synthesis:none corta ese bold
     falso (cae al peso real mas cercano) en vez de renderizarlo mal. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
nav {
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
  position: sticky; top: 0; z-index: 10;
  height: 86px;
}
.nav-inner {
  display: flex; align-items: center; gap: 0;
  max-width: 1320px; margin: 0 auto; height: 100%; padding: 0 16px;
}
.nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-brand img { height: 62px; width: auto; display: block; }
/* El switcher de ecosistema es hermano del logo (no anidado) para poder
   centrar el logo en movil; en escritorio va pegado al logo con una separacion. */
.prod-switch { margin-left: 12px; }
/* Lupa que abre el buscador en movil (mismo criterio que la IA: el header
   muestra acciones, no el buscador). Oculta en escritorio. */
.nav-search-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--deep-crimson); line-height: 0; border-radius: 8px;
}
.nav-search-toggle i { font-size: 1.5rem; }
/* El margen automatico empuja el grupo de la derecha hasta el borde del
   contenedor siempre (con o sin buscador: el buscador tiene su propio tope
   de 420px, asi que el margen auto absorbe el resto del espacio libre). */
.nav-links { margin-left: auto; }

/* Buscador (mismo patron que el de la IA: lib-searchbar) */
.nl-searchbar {
  flex: 0 1 420px; min-width: 220px; margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--light-gray); border-radius: 99px;
  padding: 8px 16px; color: var(--dark-gray); background: var(--white);
  box-sizing: border-box;
}
.nl-searchbar svg { width: 16px; height: 16px; flex-shrink: 0; }
.nl-searchbar input[type="text"] {
  border: none; outline: none; background: transparent; border-radius: 0;
  padding: 1px 2px; margin: 0; font-size: .85rem; width: 100%; color: var(--deep-crimson); font-family: var(--font-sans);
}
@media (max-width: 760px) { .nl-searchbar { display: none; } }

/* ── Selector de producto del ecosistema junto al logo (misma pieza que en la IA) ── */
.prod-switch { position: relative; }
.prod-switch-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--off-white); border: 1px solid var(--light-gray); border-radius: 999px;
  color: var(--deep-crimson); font-family: var(--font-sans); font-weight: 500; font-size: .8rem;
  padding: 6px 10px 6px 7px; cursor: pointer; line-height: 1.2; transition: border-color .15s, background .15s, box-shadow .15s;
}
.prod-switch-btn:hover, .prod-switch.open .prod-switch-btn { border-color: var(--blush-pink); background: var(--white); box-shadow: 0 0 0 3px rgba(237,165,178,.25); }
.prod-switch-btn .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--crimson); color: var(--off-white); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.prod-switch-btn .nm { white-space: nowrap; }
.prod-switch-btn > .car { font-size: 1rem; color: var(--dark-gray); transition: transform .15s; margin-left: -2px; }
.prod-switch.open .prod-switch-btn > .car { transform: rotate(180deg); }
.prod-switch-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  width: 312px; background: var(--white); border: 1px solid var(--light-gray);
  border-radius: 18px; padding: 8px; box-shadow: 0 22px 48px -14px rgba(66,6,31,.28), 0 2px 8px rgba(66,6,31,.06);
}
.prod-switch.open .prod-switch-menu { display: block; animation: prodSwIn .14s ease-out; }
@keyframes prodSwIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.prod-switch-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark-gray); padding: 8px 12px 6px;
}
.prod-switch-item { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 9px 10px; border-radius: 12px; color: var(--deep-crimson); }
a.prod-switch-item:hover { background: var(--off-white); color: var(--deep-crimson); text-decoration: none; }
.prod-switch-item .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--brain-pink, #FFE3E9); color: var(--crimson); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; transition: background .15s; }
a.prod-switch-item:hover .ic { background: var(--blush-pink); color: var(--deep-crimson); }
.prod-switch-item .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prod-switch-item .tx b { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.prod-switch-item .tx small { font-size: .74rem; color: var(--dark-gray); line-height: 1.25; }
.prod-switch-item.is-current { cursor: default; background: #FBF7F8; }
.prod-switch-item.is-current .ic { background: var(--crimson); color: var(--off-white); }
.prod-switch-item .chk { margin-left: auto; color: var(--crimson); font-size: 1.1rem; }
.prod-switch-foot { margin: 6px 4px 2px; padding: 8px 8px 4px; border-top: 1px solid var(--light-gray); }
.prod-switch-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--crimson); text-decoration: none; }
.prod-switch-foot a:hover { color: var(--deep-crimson); text-decoration: underline; text-underline-offset: 2px; }
.nav-links  { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--dark-gray); text-decoration: none; font-size: .875rem; font-weight: 500;
  padding: 8px 12px; border-radius: 9px; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--crimson); background: var(--off-white); }
.nav-links a.active { color: var(--crimson); background: var(--off-white); }

/* Pastillas de accion (mismo patron que Carpeta/Subir en la IA) */
.nav-links a.nl-pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--light-gray); background: var(--white); color: var(--deep-crimson);
  border-radius: 99px; padding: 8px 16px; font-size: .82rem; font-weight: 500; line-height: 1;
}
.nav-links a.nl-pill-btn:hover { background: var(--off-white); color: var(--deep-crimson); }
.nav-links a.nl-pill-btn i { font-size: 1rem; }
.nav-links a.nl-pill-btn.nl-pill-btn-primary,
.nav-links a.nl-pill-btn.nl-pill-btn-primary:hover {
  background: var(--crimson); border-color: var(--crimson); color: var(--white);
}

/* Pastilla del ecosistema: saltar a la IA (mismo lenguaje que las píldoras de la IA) */
.nav-links a.nav-ecosystem {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brain-pink); color: var(--crimson);
  padding: 7px 14px; border-radius: 999px; font-weight: 600; margin-right: 8px;
}
.nav-links a.nav-ecosystem:hover { background: var(--blush-pink); color: var(--white); }
.nav-links a.nav-ecosystem i { font-size: 1.05rem; }

/* Separador antes del usuario */
.nav-sep { width: 1px; height: 24px; background: var(--light-gray); margin: 0 6px; flex-shrink: 0; }

/* Pastilla de plan + participantes (mismo patron que "PRO + creditos" en la IA) */
.nav-links a.nl-plan-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #FBF4F7; border: 1px solid var(--light-gray); border-radius: 999px;
  padding: 5px 11px; text-decoration: none; transition: border-color .15s, background .15s;
}
.nav-links a.nl-plan-pill:hover { border-color: var(--crimson); background: var(--white); color: inherit; }
.nl-plan-pill-plan {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--deep-crimson); background: var(--brain-pink); border-radius: 99px; padding: 2px 8px;
}
.nl-plan-pill-bal { font-size: .95rem; font-weight: 600; color: var(--deep-crimson); display: inline-flex; align-items: center; gap: 4px; }
.nl-plan-pill-bal i { color: var(--crimson); font-size: 1rem; }
.nl-plan-pill-chev { color: #b3a99f; font-size: 1rem; margin-left: -2px; }

.nl-searchbar #nlSearchClear svg { width: 16px; height: 16px; }
.nl-searchbar #nlSearchClear { color: var(--dark-gray); flex-shrink: 0; }

/* Usuario con avatar: mismo patron visual que el prod-switch (boton + dropdown) */
.nav-avatar {
  width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
  background: var(--brain-pink); color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center;
}
.db-user-switch { position: relative; }
.db-user-switch-btn {
  display: inline-flex; align-items: center; background: none; border: none; cursor: pointer;
  padding: 0; border-radius: 4px; line-height: 0; transition: box-shadow .15s;
}
.db-user-switch-btn:hover { box-shadow: 0 0 0 2px var(--light-gray); }
.db-user-switch-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 190px; background: var(--white); border: 1px solid var(--light-gray);
  border-radius: 14px; padding: 8px; box-shadow: 0 16px 36px -10px rgba(66,6,31,.22);
}
.db-user-switch.open .db-user-switch-menu { display: block; }
.db-user-switch-profile { padding: 8px 10px 10px; }
.db-user-switch-name { font-weight: 700; color: var(--deep-crimson); font-size: .92rem; }
.db-user-switch-email { color: var(--dark-gray); font-size: .78rem; margin-top: 2px; word-break: break-all; }
.db-user-switch-sep { height: 1px; background: var(--light-gray); margin: 2px 6px 6px; }
.db-user-switch-item {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 10px; border-radius: 10px; color: var(--deep-crimson); font-weight: 500; font-size: .9rem;
}
.db-user-switch-item:hover { background: var(--off-white); color: var(--crimson); }
.db-user-switch-item i { font-size: 1.15rem; color: var(--crimson); width: 20px; text-align: center; flex-shrink: 0; }

/* Selector de idioma dentro del menu de usuario */
.db-lang-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.db-lang-row > i { font-size: 1.15rem; color: var(--crimson); width: 20px; text-align: center; flex-shrink: 0; }
.db-lang-opt {
  text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .3px;
  color: var(--dark-gray); padding: 4px 9px; border-radius: 999px; line-height: 1;
}
.db-lang-opt:hover { background: var(--off-white); color: var(--crimson); }
.db-lang-opt.is-on { background: var(--crimson); color: #fff; }

.nav-burger {
  display: none; background: none; border: none; color: var(--deep-crimson);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 8px;
}

/* ── Main layout ──────────────────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
.page-header h1 { font-family: var(--font-sans); font-weight: 500; font-size: 1.6rem; color: var(--deep-crimson); letter-spacing: -.02em; }
.page-header .sub { color: var(--dark-gray); margin-top: 4px; font-size: .9rem; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.card h2 { font-size: 1rem; font-weight: 500; color: var(--deep-crimson); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.count { background: var(--off-white); color: var(--dark-gray); font-size: .75rem; padding: 2px 8px; border-radius: 99px; font-family: var(--font-mono); }

/* ── Study grid ───────────────────────────────────────────────────────────── */
.study-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 16px; }
.study-card {
  display: block; background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg);
  padding: 20px; text-decoration: none; color: inherit; transition: border-color .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.study-card:hover { border-color: var(--blush-pink); transform: translateY(-2px); }
.card-header  { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.study-name   { font-weight: 500; color: var(--deep-crimson); }
.card-desc    { color: var(--dark-gray); font-size: .85rem; line-height: 1.5; margin-bottom: 12px; }
.card-meta    { display: flex; justify-content: space-between; font-size: .8rem; color: var(--dark-gray); font-family: var(--font-mono); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge        { font-size: .72rem; padding: 2px 10px; border-radius: 99px; font-weight: 500; }
.badge-draft  { background: var(--light-gray); color: var(--dark-gray); }
.badge-active { background: #f0fdf4; color: var(--green); }
.badge-closed { background: var(--brain-pink); color: var(--crimson); }
.badge-image  { background: #eff6ff; color: #2563eb; }
.badge-video  { background: #faf5ff; color: #9333ea; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--crimson); color: var(--white); border: none; border-radius: var(--radius-md);
  padding: 10px 20px; font-size: .875rem; font-weight: 500; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, box-shadow .15s;
}
.btn-primary:hover { background: #8a1240; box-shadow: 0 4px 12px rgba(119,15,53,.3); }
.btn-primary.full { width: 100%; justify-content: center; }
.btn-sec {
  background: transparent; color: var(--crimson); border: 1px solid var(--blush-pink); border-radius: var(--radius-md);
  padding: 10px 20px; font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: background .15s;
}
.btn-sec:hover { background: var(--brain-pink); }
.btn-sm {
  background: transparent; color: var(--crimson); border: 1px solid var(--blush-pink); border-radius: var(--radius-sm);
  padding: 6px 14px; font-size: .8rem; cursor: pointer; text-decoration: none;
  display: inline-block; transition: background .15s;
}
.btn-sm:hover { background: var(--brain-pink); }
.nav-links a.nav-logout:hover { color: var(--deep-crimson); }
.btn-xs {
  background: var(--off-white); color: var(--dark-gray); border: 1px solid var(--light-gray); border-radius: 4px;
  padding: 3px 10px; font-size: .78rem; cursor: pointer;
}
.btn-xs.danger { color: var(--crimson); border-color: var(--blush-pink); }
.btn-xs:hover  { background: var(--brain-pink); }

.btn-primary:disabled, .btn-sec:disabled {
  background: var(--light-gray); color: var(--dark-gray); border-color: var(--light-gray);
  cursor: not-allowed; box-shadow: none;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-box { max-width: 480px; }
label { display: block; font-size: .8rem; font-weight: 500; color: var(--dark-gray); margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%; background: var(--off-white); border: 1px solid var(--light-gray); border-radius: var(--radius-sm);
  color: var(--deep-crimson); padding: 9px 12px; font-size: .875rem; font-family: var(--font-sans); outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--crimson); background: var(--white); }
textarea { resize: vertical; }
.form-actions { display: flex; gap: 12px; margin-top: 24px; }

/* Selects compactos de controles inline (selector de participante/estimulo/
   canal/etc.) -- antes usaban el <select> nativo del navegador sin
   appearance:none, lo que en Windows/Chrome se ve como un combo box crudo de
   sistema operativo ("windows 95"). Flecha propia + sin chrome nativo. */
.db-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: auto; background-color: var(--off-white); color: var(--deep-crimson);
  font-family: var(--font-sans); font-size: .78rem; cursor: pointer; outline: none;
  border: 1px solid var(--border-dim); border-radius: 8px; padding: 7px 30px 7px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23770F35' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px;
  transition: border-color .15s, box-shadow .15s;
}
.db-select:hover { border-color: var(--crimson); }
.db-select:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(119,15,53,.12); background-color: var(--white); }
.db-select-sm { font-size: .74rem; padding: 6px 26px 6px 10px; background-size: 9px 6px; background-position: right 9px center; }
/* Ajuste de marca (2026-10-04): mismo aspecto que los controles de la plataforma IA */
.db-select { background-color: var(--white); border: 1px solid #e3dad6; border-radius: 10px; padding: 8px 34px 8px 12px; font-size: .8rem; font-weight: 500; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.db-select:hover { background-color: var(--off-white); }
/* Tablas de resultados: nada se corta en dos lineas; si no entra, se desplaza horizontalmente */
.study-table th, .study-table td { white-space: nowrap; }
.study-table td span[style*="border-radius:999px"] { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.isc-table { font-size: .72rem; table-layout: auto; }
.isc-table th, .isc-table td { padding: 7px 8px; }
.isc-table .isc-stim { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.isc-table th { white-space: normal; line-height: 1.2; }


/* Barra de progreso del video/estimulo (input[type=range] nativo, mismo
   problema de chrome de sistema operativo que los selects). Track fino +
   thumb circular crimson, consistente cross-browser (WebKit/Firefox). */
input[type=range].db-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px;
  background: transparent; cursor: pointer; margin: 4px 0;
}
input[type=range].db-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--light-gray);
}
input[type=range].db-range::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--light-gray);
}
input[type=range].db-range::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -6px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--crimson); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(66,6,31,.35);
  transition: transform .1s;
}
input[type=range].db-range::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: var(--crimson);
  border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(66,6,31,.35); transition: transform .1s;
}
input[type=range].db-range:hover::-webkit-slider-thumb, input[type=range].db-range:focus::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range].db-range:hover::-moz-range-thumb, input[type=range].db-range:focus::-moz-range-thumb { transform: scale(1.12); }
input[type=range].db-range:focus { outline: none; }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-box { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.auth-logo { margin-bottom: 4px; }
.auth-logo img { height: 34px; }
.auth-sub  { color: var(--dark-gray); font-size: .85rem; margin-bottom: 24px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--dark-gray); }
.auth-footer a { color: var(--crimson); text-decoration: none; font-weight: 500; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .85rem; }
.alert.error { background: var(--brain-pink); color: var(--crimson); border: 1px solid var(--blush-pink); }
.alert.success { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }

/* ── Cupo de participantes gratis (beneficio de plan Pro/Business) ──────────── */
.quota-widget      { background: #fff; border: 1px solid var(--light-gray); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
.quota-widget-head  { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--dark-gray); margin-bottom: 10px; }
.quota-widget-head i { color: var(--crimson); margin-right: 6px; }
.quota-widget-count { font-family: var(--font-mono); color: var(--deep-crimson); font-weight: 500; }
.quota-bar          { height: 6px; border-radius: 99px; background: var(--light-gray); overflow: hidden; }
.quota-bar-fill     { height: 100%; background: var(--crimson); border-radius: 99px; transition: width .3s ease; }
.quota-widget-note  { margin: 10px 0 0; font-size: .78rem; color: var(--crimson); }
.quota-widget-note-neutral { color: var(--dark-gray); }
.quota-widget-note a { color: var(--crimson); font-weight: 500; }
/* Cupo de participantes agotado (bono + cupo del mes + paquetes) */
.cupo-agotado      { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
                     background: #fff; border: 1px solid var(--crimson); border-left-width: 4px; border-radius: 12px;
                     padding: 16px 20px; margin-bottom: 24px; }
.cupo-agotado-texto strong { display: block; color: var(--deep-crimson); font-size: .95rem; }
.cupo-agotado-texto strong i { color: var(--crimson); margin-right: 6px; }
.cupo-agotado-texto p { margin: 6px 0 0; font-size: .82rem; color: var(--dark-gray); max-width: 620px; text-wrap: pretty; }
.cupo-agotado-btn  { white-space: nowrap; text-decoration: none; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 0; color: var(--dark-gray); }
.empty-state p { margin-bottom: 20px; }

/* ── Study detail layout ──────────────────────────────────────────────────── */
/* Antes esto era una grilla de 2 columnas (Estimulos ancho + panel angosto
   con Link/Palabras FTR/Exportar) — el problema de fondo (no un bug
   puntual) es que las dos columnas crecen por razones totalmente
   independientes (una con la cantidad de estimulos, la otra con cuanto
   texto tiene cada tarjeta de accion), asi que SIEMPRE una iba a quedar
   mas corta que la otra segun el estudio — a veces el hueco quedaba a la
   izquierda, a veces a la derecha, no hay forma de "emparejar alturas" de
   dos cosas que no tienen relacion entre si. La solucion real es no pedirle
   a layout que las empareje: todo en una sola columna, cada tarjeta ancha
   completa, sin huecos posibles porque no hay una segunda columna
   compitiendo por altura. */
.study-stack { display: flex; flex-direction: column; gap: 20px; }

/* Link del estudio / Palabras del FTR / Exportar: tamaño estable card a card,
   entran cómodas en una sola fila en vez de una por línea. */
.row-3 { display: flex; gap: 20px; align-items: stretch; }
.row-3 > .card { flex: 1; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .row-3 { flex-direction: column; } }

/* ── Stimuli list ─────────────────────────────────────────────────────────── */
.stimuli-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.stim-row { display: flex; align-items: center; gap: 12px; background: var(--off-white); border-radius: var(--radius-sm); padding: 10px; }
.stim-num { color: var(--dark-gray); font-size: .8rem; width: 18px; text-align: center; flex-shrink: 0; font-family: var(--font-mono); }
.stim-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--light-gray); }
.stim-info { flex: 1; min-width: 0; }
.stim-name { display: block; font-size: .85rem; color: var(--deep-crimson); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stim-type { margin-top: 4px; }
.dur-form  { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--dark-gray); flex-shrink: 0; }

.stim-drag-handle { color: var(--dark-gray); cursor: grab; flex-shrink: 0; font-size: 1rem; }
.stim-row.dragging { opacity: .4; }

/* ── Modal de subida de estímulos ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(66,6,31,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { margin: 0; font-size: 1.15rem; color: var(--deep-crimson); font-weight: 500; }
.modal-close { background: none; border: none; font-size: 1.6rem; color: var(--dark-gray); cursor: pointer; line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--crimson); }

.upload-zones { display: flex; flex-direction: column; gap: 12px; }
.upload-zone-row { display: flex; gap: 12px; }
.upload-zone {
  flex: 1; border: 2px dashed var(--blush-pink); border-radius: var(--radius-md); padding: 24px 16px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.upload-zone.wide { padding: 28px 16px; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--crimson); background: var(--brain-pink); }
.upload-zone i { font-size: 1.8rem; color: var(--crimson); display: block; margin-bottom: 8px; }
.upload-zone .zone-title { color: var(--crimson); font-weight: 500; font-size: .9rem; }
.upload-zone .zone-sub { color: var(--dark-gray); font-size: .78rem; margin-top: 2px; }

.upload-footer { margin-top: 16px; font-size: .78rem; color: var(--dark-gray); text-align: center; line-height: 1.6; }

/* Barra divergente FTR: arranca en 0 y crece hasta su % cuando entra en
   pantalla (ver setupFtrScrollFill en study_detail.html). */
.ftr-fill { transition: width 1.1s cubic-bezier(.16,1,.3,1); }

/* ── Link box ─────────────────────────────────────────────────────────────── */
.link-box { display: flex; gap: 8px; }
.link-box input { background: var(--off-white); flex: 1; font-family: var(--font-mono); font-size: .8rem; }

/* Vista previa de dónde va a aparecer el link una vez activo el estudio —
   ocupa el mismo alto que .link-box para que la tarjeta no quede con un
   hueco vacío mientras el estudio sigue en borrador. */
.link-box-placeholder {
  display: flex; gap: 8px; align-items: center;
  background: var(--off-white); border: 1px dashed var(--light-gray); border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.link-box-placeholder .ph-url {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--crimson); opacity: .65;
}
.link-box-placeholder .ph-btn { opacity: .45; pointer-events: none; }

.hint { color: var(--dark-gray); font-size: .8rem; margin-top: 8px; line-height: 1.5; }

/* ── Result tabs (heatmap/emociones/FTR por estimulo) ────────────────────────── */
.result-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--light-gray); }
.result-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; margin-bottom: -1px; font-family: var(--font-sans); font-size: .85rem;
  color: var(--dark-gray); cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: color .15s, border-color .15s;
}
.result-tab:hover { color: var(--crimson); }
.result-tab.active { color: var(--crimson); border-bottom-color: var(--crimson); font-weight: 500; }
.result-panel { padding-top: 16px; }

/* ── Participants table ───────────────────────────────────────────────────── */
.part-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.part-table th { color: var(--dark-gray); text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--light-gray); font-weight: 500; }
.part-table td { padding: 6px 4px; border-bottom: 1px solid var(--off-white); color: var(--deep-crimson); }
code { background: var(--off-white); padding: 2px 6px; border-radius: 4px; font-size: .8rem; color: var(--crimson); font-family: var(--font-mono); }

/* ── Results ──────────────────────────────────────────────────────────────── */
.result-item { margin-bottom: 16px; }
.result-item b { display: block; font-size: .85rem; color: var(--deep-crimson); margin-bottom: 6px; }
.heatmap-container img { width: 100%; border-radius: 6px; margin-top: 8px; }

/* ── Nav movil: organizado como el header de la IA ──────────────────────────
   Fila 1: lupa (izq) · logo (centro) · Remote ▾ (der).
   Fila 2: acciones como botones circulares (Estudios, Nuevo, usuario) + pildora.
   El buscador queda oculto y se abre con la lupa (fila 3). */
@media (max-width: 760px) {
  nav { height: auto; }
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "toggle logo switcher" "actions actions actions";
    align-items: center; row-gap: 12px; padding: 12px 16px;
  }
  .nav-search-toggle { display: inline-flex; align-items: center; justify-content: center;
                       grid-area: toggle; justify-self: start; }
  .nav-brand { grid-area: logo; justify-self: center; gap: 0; }
  .nav-brand img { height: 48px; }   /* 50% mas grande en movil, mas cerca del header de la IA */
  .prod-switch { grid-area: switcher; justify-self: end; margin-left: 0; }
  .nav-links {
    grid-area: actions; margin-left: 0;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  }
  .nav-sep { display: none; }
  /* El menu del switcher ahora esta a la derecha: se ancla a la derecha para
     que abra hacia adentro y no se salga de la pantalla (mismo fix que la IA). */
  .prod-switch-menu { left: auto; right: 0; width: min(312px, calc(100vw - 24px)); }
  .prod-switch-btn .nm { display: none; }
  /* Acciones como iconos circulares (icono si, texto no), como en la IA.
     Selector con a.nl-pill-btn para ganarle en especificidad a la regla de
     escritorio (.nav-links a.nl-pill-btn). */
  .nav-links a.nl-pill-btn {
    width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 50%;
    font-size: 0; justify-content: center; align-items: center; flex-shrink: 0;
  }
  .nav-links a.nl-pill-btn i { font-size: 1.2rem; margin: 0; line-height: 1; }
  /* Usuario: circulo rosa lleno con el icono, como el de la IA (no cuadrado). */
  .db-user-switch { margin-top: 0; }
  .db-user-switch-btn { width: 40px; height: 40px; justify-content: center; align-items: center;
                        border-radius: 50%; background: var(--brain-pink); }
  .db-user-switch-btn .nav-avatar { width: 100%; height: 100%; border-radius: 50%; background: transparent; }
  /* La pildora (participantes/plan) se mantiene como pastilla, igual que la
     pildora de creditos de la IA. */
  .nl-plan-pill { margin: 0; }
  /* Buscador: oculto; se despliega como fila completa al tocar la hamburguesa. */
  .nl-searchbar.search-open { display: flex; grid-column: 1 / -1; width: 100%; margin: 0; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  nav { height: auto; }
  .nav-inner { padding: 10px 16px; }
  .nav-brand img { height: 48px; width: auto; }
  main { padding: 20px 16px; }
  .page-header { flex-wrap: wrap; }
  .page-header h1 { font-size: 1.25rem; }
  .card { padding: 16px; }
  .btn-primary, .btn-sec { width: 100%; justify-content: center; }
  .header-actions { width: 100%; flex-direction: column; align-items: stretch; }
  /* La fila del estimulo tiene demasiados controles para una sola linea en
     movil: se deja envolver y el rango/duracion cae a su propia linea. Sin
     esto, .stim-range se sale del marco y fuerza scroll horizontal en toda
     la pagina. */
  .stim-row { flex-wrap: wrap; }
  .stim-range, .dur-form { flex-wrap: wrap; width: 100%; margin-top: 6px; row-gap: 8px; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.db-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--dark-gray);
  border-top: 1px solid var(--light-gray);
}

/* ── Informe de IA (interpretación estructurada) ─────────────────────────── */
.insight-intro {
  font-size: .88rem;
  color: var(--dark-gray);
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.insight-stimulus-card {
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--white);
}
.insight-stimulus-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.insight-stimulus-header h3 {
  font-size: 1rem;
  color: var(--deep-crimson);
  margin: 0;
  font-weight: 500;
}
.insight-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: var(--crimson);
  background: var(--brain-pink);
  border-radius: 99px;
  padding: 2px 10px;
  flex-shrink: 0;
}
.insight-resumen {
  font-size: .9rem;
  color: var(--deep-crimson);
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.5;
}
.insight-que-se-ve {
  display: flex;
  gap: 10px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.insight-que-se-ve i {
  color: var(--crimson);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-que-se-ve p {
  font-size: .85rem;
  color: var(--deep-crimson);
  line-height: 1.6;
  margin: 0;
}
.insight-body p {
  font-size: .85rem;
  color: #333;
  line-height: 1.6;
  margin: 0 0 10px;
}
.insight-ftr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.insight-ftr-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .82rem;
  line-height: 1.5;
}
.insight-ftr-badge {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 500;
  border-radius: 99px;
  padding: 2px 9px;
  white-space: nowrap;
}
.insight-ftr-badge.q-fuerte_clara   { background: var(--green);   color: var(--white); }
.insight-ftr-badge.q-consciente     { background: var(--blush-pink); color: var(--deep-crimson); }
.insight-ftr-badge.q-visceral_dividida { background: var(--yellow); color: var(--white); }
.insight-ftr-badge.q-sin_senal      { background: var(--light-gray); color: var(--dark-gray); }
.insight-ftr-text { color: var(--dark-gray); }
.insight-ftr-text b { color: #333; font-weight: 500; }
.insight-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  color: var(--deep-crimson);
  font-weight: 500;
  margin: 24px 0 10px;
}
.insight-section-title i { color: var(--crimson); }
.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insight-list li {
  display: flex;
  gap: 10px;
  font-size: .85rem;
  color: #333;
  line-height: 1.5;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
/* Portado de lab/templates/study_results.html — mismos nombres de variable
   de marca (--border-dim/--panel/--deep-crimson/--dark-gray) asi que el
   CSS se copia sin cambios, solo agregando lo que faltaba (Remote no tenia
   graficos de barras SVG propios todavia). */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-top:14px; }
.chart-grid.one { grid-template-columns:1fr; }
.chart-grid.two { grid-template-columns:repeat(2,1fr); }
@media (max-width: 760px) { .chart-grid.two { grid-template-columns:1fr; } }
.chart-card { border:1px solid var(--border-dim); background:var(--panel); border-radius:8px; padding:14px; min-height:230px; }
.chart-card h3 { margin:0 0 10px; color:var(--deep-crimson); font-size:.9rem; font-weight:500; }
.svg-chart { width:100%; min-height:230px; display:block; }
.chart-empty { color:var(--dark-gray); font-size:.78rem; line-height:1.45; padding:28px 10px; }
.chart-legend { display:flex; gap:10px; flex-wrap:wrap; color:var(--dark-gray); font-size:.72rem; margin-top:8px; }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; }
/* Leyenda de "pastillitas" clickeables (ej. emociones FEA por estimulo):
   vive FUERA del canvas de Plotly, en flujo HTML normal debajo del grafico
   -- asi nunca puede superponerse con titulos de eje sin importar cuantas
   entradas tenga o en cuantas filas envuelva. */
.chip-legend { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.chip-legend-item { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:.74rem; font-weight:600; cursor:pointer; user-select:none; color:var(--deep-crimson);
  background: color-mix(in srgb, var(--chip-color, var(--dark-gray)) 16%, var(--white));
  border:1px solid color-mix(in srgb, var(--chip-color, var(--dark-gray)) 30%, transparent);
  transition:opacity .15s, transform .1s; }
.chip-legend-item .dot { width:8px; height:8px; border-radius:50%; background:var(--chip-color, var(--dark-gray)); flex-shrink:0; }
.chip-legend-item:hover { transform: translateY(-1px); }
.chip-legend-item.is-off { opacity:.4; background:var(--off-white); border-color:var(--border-dim); }
.chip-legend-item.is-off .dot { background:var(--matter-gray); }
/* Selector de metricas del hub de Estimulo, agrupado por sensor: arranca
   todo "apagado" (nada dibujado bajo el video) y el usuario prende las que
   quiere ver/comparar -- opuesto al chip-legend de arriba (que arranca
   prendido y se apaga). Ver [[project_remote_tabs_estudio_completo]] Ronda 6. */
.metric-picker { display:flex; flex-wrap:wrap; gap:14px 22px; margin:14px 0 4px; }
.metric-picker-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.metric-picker-group-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--dark-gray); margin-right:2px; }
.metric-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:.74rem; font-weight:600; cursor:pointer; user-select:none; color:var(--dark-gray);
  background:var(--off-white); border:1px solid var(--border-dim); transition:all .15s; }
.metric-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--matter-gray); flex-shrink:0; }
.metric-pill:hover { border-color: var(--chip-color, var(--crimson)); }
.metric-pill.is-active {
  color:var(--deep-crimson);
  background: color-mix(in srgb, var(--chip-color, var(--crimson)) 16%, var(--white));
  border-color: color-mix(in srgb, var(--chip-color, var(--crimson)) 34%, transparent);
}
.metric-pill.is-active .dot { background: var(--chip-color, var(--crimson)); }
.table-wrap { overflow:auto; border:1px solid var(--border-dim); background:var(--panel); border-radius:8px; margin-top:12px; }
.study-table { width:100%; border-collapse:collapse; font-size:.76rem; min-width:820px; }
.study-table th { position:sticky; top:0; background:var(--panel); color:var(--dark-gray); font-weight:600; text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-dim); }
.study-table td { padding:8px 10px; border-bottom:1px solid rgba(66,6,31,.04); color:var(--deep-crimson); vertical-align:top; }
.db-tabs { display: flex; gap: 6px; margin: 18px 0 0; border-bottom: 1px solid var(--border-dim); flex-wrap: wrap; }
.db-tab-btn {
  background: none; border: none; cursor: pointer; font-family: var(--font-sans, inherit);
  font-size: .88rem; color: var(--dark-gray); padding: 10px 16px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.db-tab-btn:hover { color: var(--crimson); }
.db-tab-btn.is-active { color: var(--crimson); border-bottom-color: var(--crimson); font-weight: 600; }
.db-tab-panel { display: none; }
.db-tab-panel.is-active { display: block; }
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.heatmap-card { border: 1px solid var(--border-dim); border-radius: 8px; overflow: hidden; background: var(--off-white); }
.heatmap-card h3 { font-size: .85rem; color: var(--deep-crimson); font-weight: 500; margin: 0; padding: 10px 12px; }
.heatmap-card img { width: 100%; height: auto; display: block; }
/* Resumen agregado + fichas por estimulo (video/imagen real + metricas) —
   mismos nombres de clase que lab/templates/study_results.html. */
.hero-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.summary-tile { border:1px solid var(--border-dim); background:var(--panel); border-radius:8px; padding:14px; }
.summary-tile strong { display:block; color:var(--deep-crimson); font-size:1.9rem; line-height:1; }
.summary-tile span { color:var(--dark-gray); font-size:.75rem; }
.neuro-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.neuro-card { background:var(--panel); border:1px solid var(--border-dim); border-radius:8px; padding:14px; }
.neuro-card .big { font-size:1.7rem; font-weight:650; color:var(--deep-crimson); line-height:1; }
.neuro-card .label { color:var(--dark-gray); font-size:.75rem; margin-top:6px; }
.neuro-card .note { color:var(--dark-gray); font-size:.68rem; margin-top:5px; line-height:1.35; }
@media (max-width: 900px) { .hero-grid, .neuro-grid { grid-template-columns:1fr 1fr; } }
.stimulus-panels { display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.stimulus-card { border:1px solid var(--border-dim); background:var(--panel); border-radius:8px; padding:14px; overflow:hidden; }
.stimulus-card h3 { margin:0 0 10px; font-size:.95rem; color:var(--deep-crimson); }
.stimulus-media-grid { display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(240px,.9fr); gap:14px; align-items:start; }
@media (max-width: 760px) { .stimulus-media-grid { grid-template-columns:1fr; } }
.video-overlay-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#050507; border-radius:7px; overflow:hidden; }
.stimulus-video, .stimulus-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#050507; }
/* Controles propios del video (reemplazan los nativos del navegador): el
   accent-color/pseudo-elementos -webkit-media-controls-* NO recolorean el
   relleno de la barra de progreso nativa en Chrome actual (probado en vivo,
   se queda gris) -- la unica forma confiable de que la barra respete la
   marca es dibujarla nosotros mismos con .db-range. */
.db-video-controls {
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:linear-gradient(rgba(66,6,31,0), rgba(5,5,7,.72));
  opacity:0; transition:opacity .15s; z-index:2;
}
.video-overlay-wrap:hover .db-video-controls, .video-overlay-wrap:focus-within .db-video-controls,
.db-video-controls.is-paused { opacity:1; }
.db-video-btn { background:none; border:none; color:#fff; font-size:1.05rem; padding:2px; cursor:pointer;
  display:flex; align-items:center; opacity:.9; flex-shrink:0; }
.db-video-btn:hover { opacity:1; }
.db-video-time { color:#fff; font-size:.7rem; font-variant-numeric:tabular-nums; flex-shrink:0; opacity:.9; }
.db-video-controls .db-range { flex:1; margin:0; }
.db-video-controls .db-range::-webkit-slider-runnable-track { background:rgba(255,255,255,.3); }
.db-video-controls .db-range::-moz-range-track { background:rgba(255,255,255,.3); }
.stimulus-summary-metrics { margin-bottom: 14px; }
.stimulus-summary-metrics .metric-list { grid-template-columns: repeat(3, 1fr); margin-top: 0; gap: 8px 16px; }
@media (max-width: 640px) { .stimulus-summary-metrics .metric-list { grid-template-columns: repeat(2, 1fr); } }
.stimulus-heatmap-wrap { border-radius:7px; overflow:hidden; background:var(--off-white); border:1px solid var(--border-dim); }
.stimulus-heatmap-wrap img { width:100%; height:100%; object-fit:contain; display:block; }
.stimulus-heatmap-wrap .cap { font-size:.68rem; color:var(--dark-gray); padding:6px 8px; }
.stimulus-caption { color:var(--dark-gray); font-size:.75rem; margin-top:8px; }
.metric-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 14px; margin-top:12px; }
.metric-row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(66,6,31,.06); font-size:.8rem; }
.metric-row span { color:var(--dark-gray); }
.metric-row strong { color:var(--deep-crimson); font-weight:600; text-align:right; }
.status-ok { color:var(--green); font-weight:600; }
.status-warn { color:var(--yellow); font-weight:600; }
.status-bad { color:var(--crimson); font-weight:600; }
.insight-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.insight-metric-card {
  align-items: flex-start;
}
.insight-metric-card i {
  color: var(--crimson);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-metric-card > div { display: flex; flex-direction: column; gap: 2px; }
.insight-metric-card b { color: var(--deep-crimson); font-size: .82rem; }
.insight-metric-card span { color: #333; font-size: .82rem; line-height: 1.4; }
.insight-subtitle {
  font-size: .78rem;
  font-weight: 700;
  color: var(--crimson);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.insight-subtitle:first-child { margin-top: 0; }
.insight-exec-list li i { color: var(--green); }
.insight-list li i {
  color: var(--crimson);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Graficos: nunca mas anchos que su tarjeta (Plotly en pestañas ocultas mide mal el ancho) */
.chart-card { min-width: 0; overflow: hidden; }
.chart-card .js-plotly-plot, .chart-card .plot-container, .chart-card .svg-container { max-width: 100% !important; }
.db-tab-panel .chart-grid > * { min-width: 0; }

/* Comparador ERP: tarjetas A y B con campos etiquetados y selects de marca */
.erp-side { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border-dim); }
.erp-side-a { background: var(--brain-pink); border-color: var(--blush-pink); }
.erp-side-b { background: var(--off-white); }
.erp-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .82rem; font-weight: 600; color: var(--deep-crimson); }
.erp-side-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: .78rem; font-weight: 700; }
.erp-side-a .erp-side-badge { background: var(--crimson); }
.erp-side-b .erp-side-badge { background: #2563eb; }
.erp-side-hint { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--dark-gray); }
.erp-side-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.erp-side-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.erp-side-fields label > span { font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dark-gray); }
.erp-side-fields .db-select { width: 100%; min-width: 0; background-color: var(--white); border: 1px solid var(--blush-pink); border-radius: 999px;
  padding: 8px 32px 8px 14px; font-size: .78rem; font-weight: 500; color: var(--deep-crimson); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  box-shadow: 0 1px 2px rgba(66,6,31,.06); background-position: right 13px center; background-size: 10px 7px; }
.erp-side-fields .db-select:hover { border-color: var(--crimson); box-shadow: 0 2px 6px rgba(119,15,53,.12); }
.erp-side-fields .db-select:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(237,165,178,.55); }
.erp-side-b .erp-side-fields .db-select { border-color: #c7d2fe; }
.erp-side-b .erp-side-fields .db-select:hover, .erp-side-b .erp-side-fields .db-select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.db-select option { background: var(--white); color: var(--deep-crimson); font-family: var(--font-sans); }
@media (max-width: 760px) { .erp-sides { grid-template-columns: 1fr !important; } }

/* Controles superiores del comparador ERP (Componente / Onda / Canales): mismo lenguaje que las tarjetas A y B */
.erp-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, max-content)); gap: 10px 16px; align-items: end; }
.erp-controls label { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.erp-controls label > span, .erp-field-label { font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dark-gray); }
.erp-field-label { display: block; margin-bottom: 6px; }
.erp-controls .db-select { width: 100%; background-color: var(--white); border: 1px solid var(--blush-pink); border-radius: 999px;
  padding: 8px 32px 8px 14px; font-size: .78rem; font-weight: 500; color: var(--deep-crimson); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  box-shadow: 0 1px 2px rgba(66,6,31,.06); background-position: right 13px center; background-size: 10px 7px; }
.erp-controls .db-select:hover { border-color: var(--crimson); box-shadow: 0 2px 6px rgba(119,15,53,.12); }
.erp-controls .db-select:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(237,165,178,.55); }
.erp-controls .db-select:disabled { opacity: .55; cursor: not-allowed; }

/* Responsive del estudio Neurolab: nombres de archivo largos sin espacios y selects con opciones largas no deben desbordar el ancho de pantalla */
.db-tab-panel { overflow-wrap: anywhere; }
.db-tab-panel .card, .db-tab-panel .chart-card, .db-tab-panel .insight-stimulus-card, .db-tab-panel .stimulus-panel { min-width: 0; }
.db-tab-panel .insight-stimulus-header { flex-wrap: wrap; gap: 6px; }
.db-tab-panel .insight-stimulus-header h3, .db-tab-panel .heatmap-card h3, .db-tab-panel .stimulus-panel h3 { min-width: 0; overflow-wrap: anywhere; }
.db-select { max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.db-tabs { display: flex; flex-wrap: wrap; }
@media (max-width: 600px) {
  .db-tab-panel .chart-grid, .db-tab-panel .chart-grid.two, .db-tab-panel .stimulus-media-grid { grid-template-columns: 1fr !important; }
  .db-tab-panel .hero-grid, .db-tab-panel .neuro-grid { grid-template-columns: 1fr 1fr; }
  .erp-controls label { min-width: 0; }
}

/* Selectores dentro de cabeceras flex de tarjetas (topomaps por estímulo / diferencia): que se repartan y envuelvan en móvil */
.chart-card > div[style*="display:flex"] { min-width: 0; max-width: 100%; }
.chart-card > div[style*="display:flex"] > div[style*="display:flex"] { min-width: 0; max-width: 100%; flex: 1 1 100%; }
.chart-card div[style*="display:flex"] > .db-select { flex: 1 1 140px; min-width: 0; }

/* Resumen › panel de estímulo: gráficos bajo el video, guía y pastillas debajo */
.stim-charts { margin-top: 10px; }
.stim-charts:not(.has-charts) { display: none; }
.stim-charts .chart-card { margin: 0; }
.stim-charts .chart-card h3 { font-size: .8rem; }
.stim-charts .js-plotly-plot .nsewdrag { cursor: ew-resize !important; }
.stim-guide { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--brain-pink); border: 1px solid var(--blush-pink); }
.stim-guide-text { font-size: .78rem; color: var(--deep-crimson); line-height: 1.45; flex: 1 1 320px; }
.stim-guide-text i { color: var(--crimson); margin-right: 4px; }
.stimulus-card .metric-picker { margin: 10px 0 2px; }

/* Cursor de tiempo continuo dentro de los gráficos del estímulo */
.stim-cursor { position:absolute; left:0; top:0; width:2px; margin-left:-1px; background:var(--crimson); pointer-events:none; z-index:5; will-change:transform; }
.stim-cursor-label { position:absolute; top:10px; left:5px; background:var(--crimson); color:var(--off-white); font-size:10px; line-height:1.2; padding:2px 6px; border-radius:4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stim-cursor.flip .stim-cursor-label { left:auto; right:5px; }
.js-plotly-plot.is-scrubbing .nsewdrag { cursor: grabbing !important; }
/* barra de avance: botón de play con ancho fijo para que la barra empiece siempre en el mismo punto */
.db-video-controls .db-video-play { width:40px; justify-content:center; }
.db-video-controls .db-video-time { min-width:82px; text-align:right; }

/* Select con estilo de marca (pastilla blanca, borde blush, chevron crimson) reutilizable */
.db-select-brand { background-color: var(--white); border: 1px solid var(--blush-pink); border-radius: 999px; padding: 8px 32px 8px 14px; font-size: .78rem; font-weight: 500; color: var(--deep-crimson);
  box-shadow: 0 1px 2px rgba(66,6,31,.06); background-position: right 13px center; background-size: 10px 7px; max-width: 100%; }
.db-select-brand:hover { border-color: var(--crimson); box-shadow: 0 2px 6px rgba(119,15,53,.12); }
.db-select-brand:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(237,165,178,.55); }
.stim-guide { margin: 12px 0 0; }
.stim-guide-field { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.stim-guide-field > span { font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dark-gray); }

/* Controles del video en dos filas: botones arriba, barra de avance abajo (alineable con el gráfico) */
.db-video-controls { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 12px 10px; }
.db-video-row { display: flex; align-items: center; gap: 10px; }
.db-video-spacer { flex: 1; }
.db-video-seekrow { display: flex; align-items: center; width: 100%; }
.db-video-controls .db-video-seek { flex: none; width: 100%; margin: 0; }
.db-video-controls .db-video-play { width: auto; }
.db-video-controls .db-video-time { min-width: 0; text-align: left; }

/* Nota breve bajo cada gráfico del panel de estímulo */
.stim-chart-note { margin: 6px 0 0; font-size: .76rem; line-height: 1.45; color: var(--deep-crimson); background: var(--off-white); border-left: 3px solid var(--blush-pink); border-radius: 0 6px 6px 0; padding: 6px 10px; }
.stim-chart-note i { color: var(--crimson); margin-right: 3px; }
.stim-chart-note .stim-chart-tab { color: var(--dark-gray); }

/* Móvil: ficha del estímulo a una columna, valores sin cortes, tablas con aviso de deslizar */
@media (max-width: 640px) {
  .stimulus-summary-metrics .metric-list { grid-template-columns: 1fr !important; }
  .stimulus-summary-metrics .metric-row { display: flex; justify-content: space-between; gap: 10px; }
  .stimulus-summary-metrics .metric-row strong { white-space: nowrap; }
  .stimulus-card h3 { overflow-wrap: anywhere; }
  .table-wrap { position: relative; padding-top: 18px; }
  .table-wrap::before { content: attr(data-hint); position: absolute; top: 0; left: 0; font-size: .66rem; color: var(--dark-gray); }
  .table-wrap:not([data-hint])::before { content: none; }
  .stim-guide-field { min-width: 0; width: 100%; }
  .stim-guide-field .db-select { width: 100%; }
  .db-video-controls { padding: 6px 10px 8px; }
}

/* Momentos clave del informe de IA */
.insight-momentos { margin: 14px 0 6px; }
.insight-momentos-tit { font-size: .8rem; font-weight: 600; color: var(--deep-crimson); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.insight-momento { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(66, 6, 31, .08); }
.insight-t { font-family: var(--mono, monospace); font-size: .78rem; font-weight: 600; color: #fff; background: var(--deep-crimson); border-radius: 99px; padding: 3px 0; text-align: center; height: fit-content; }
.insight-momento p { margin: 0 0 4px; font-size: .86rem; line-height: 1.55; color: var(--deep-crimson); text-wrap: pretty; }
.insight-momento-ve { font-weight: 600; }
.insight-lectura { opacity: .8; font-style: italic; }

/* ── Participantes: resumen del panel y pagina /participantes ── */
.pt-resumen        { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--light-gray); border-radius:16px; padding:18px 22px; margin-bottom:24px; }
.pt-resumen.pt-pocos { border-color:#f2c9a0; background:#fff8f1; }
.pt-resumen-num    { display:flex; align-items:center; gap:14px; }
.pt-resumen-big    { font-size:2.2rem; font-weight:700; color:var(--deep-crimson); line-height:1; }
.pt-resumen-lbl    { display:flex; flex-direction:column; font-weight:600; color:var(--deep-crimson); }
.pt-resumen-lbl small { font-weight:400; color:var(--dark-gray); font-size:.82rem; margin-top:2px; text-wrap:pretty; }
.pt-resumen-acc    { display:flex; align-items:center; gap:16px; }
.pt-resumen-ver    { color:var(--crimson); font-weight:500; font-size:.88rem; }
.pt-sub            { color:var(--dark-gray); margin:4px 0 0; text-wrap:pretty; }
.pt-card           { background:#fff; border:1px solid var(--light-gray); border-radius:20px; padding:24px 26px; max-width:720px; }
.pt-eyebrow        { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--dark-gray); }
.pt-saldo          { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.pt-big            { font-size:3rem; font-weight:700; color:var(--deep-crimson); line-height:1; }
.pt-unit           { color:var(--dark-gray); font-weight:500; }
.pt-desglose       { list-style:none; padding:0; margin:20px 0 0; border-top:1px solid var(--light-gray); }
.pt-desglose li    { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--light-gray); }
.pt-desglose li i  { color:var(--crimson); font-size:1.15rem; }
.pt-desglose li span { flex:1; display:flex; flex-direction:column; color:var(--deep-crimson); }
.pt-desglose li small { color:var(--dark-gray); font-size:.8rem; }
.pt-desglose li b  { font-family:var(--font-mono); font-weight:500; color:var(--deep-crimson); white-space:nowrap; }
.pt-nota           { color:var(--dark-gray); font-size:.85rem; margin:14px 0 0; text-wrap:pretty; }
.pt-nota i         { color:var(--crimson); vertical-align:-2px; }
.pt-h2             { margin:36px 0 14px; color:var(--deep-crimson); }
.pt-packs          { display:grid; grid-template-columns:repeat(3, minmax(0, 220px)); gap:16px; }
@media (max-width:760px) { .pt-packs { grid-template-columns:1fr; } }
.pt-pack           { background:#fff; border:1.5px solid var(--light-gray); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:4px; }
.pt-pack:hover     { border-color:var(--blush, #EDA5B2); }
.pt-pack-n         { font-size:2rem; font-weight:700; color:var(--deep-crimson); line-height:1; }
.pt-pack-n small   { font-size:.9rem; font-weight:500; color:var(--dark-gray); }
.pt-pack-precio    { font-size:1.35rem; font-weight:700; color:var(--crimson); margin-top:10px; white-space:nowrap; }
.pt-pack-unit      { font-size:.82rem; color:var(--dark-gray); white-space:nowrap; }
.pt-pack-btn       { margin-top:16px; justify-content:center; text-align:center; }
.pt-nota-pago      { max-width:720px; }
.pt-volver         { margin-top:28px; }
.pt-volver a       { color:var(--crimson); font-weight:500; }
.pt-msg            { display:flex; align-items:center; gap:12px; border-radius:14px; padding:14px 18px; margin-bottom:20px; max-width:720px; }
.pt-msg i          { font-size:1.3rem; }
.pt-msg-ok         { background:#F0FDF4; border:1px solid #BBF7D0; color:#166534; }
.pt-msg-info       { background:#FFF7ED; border:1px solid #FED7AA; color:#9a3412; }