/* ── 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;

  --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;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 60px;
  background: var(--deep-crimson);
  position: sticky; top: 0; z-index: 10;
}
.nav-brand { display: flex; align-items: center; }
.nav-brand img { height: 44px; display: block; }
.nav-links  { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--matter-gray); text-decoration: none; font-size: .875rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--off-white); }
.nav-user { color: var(--matter-gray); font-size: .85rem; font-family: var(--font-mono); }

/* ── 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; }

/* ── 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; }

/* ── 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; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  nav { padding: 0 16px; height: 52px; }
  .nav-brand img { height: 34px; }
  .nav-links { gap: 10px; }
  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; }
}