/* SailUp · styles.css · v0.5.0 */

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

/* Theme */
:root{
  --bg:#0e0f12;
  --panel:#17181c;
  --panel-2:#1f2026;
  --border:#2a2c34;
  --text:#e9eaee;
  --muted:#a7acb8;
  --accent:#6ee7ff;
  --ok:#22c55e;
  --err:#ef4444;
  --warn:#eab308;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 14px;
  color-scheme: dark;
}

body{
  background:linear-gradient(180deg, #0b0c0f 0%, #0e0f12 100%);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 20px;
  background:rgba(14,15,18,.75); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.brand{font-weight:700; letter-spacing:.2px}

/* Header nav */
.nav { display:flex; align-items:center; gap:8px; }

/* Chat container */
.chat{display:flex; flex-direction:column; align-items:center; padding:24px}
.messages{
  width:100%; max-width:860px;
  display:flex; flex-direction:column; gap:16px;
}

/* Quiz meta */
.quiz-meta{
  width:100%; max-width:860px;
  display:flex; flex-direction:column; gap:8px;
  margin: 8px auto 24px;
  padding: 0 4px;
}
.meta-line{display:flex; justify-content:space-between; gap:12px; align-items:center}
.meta-line .score{color:var(--muted); font-size:.95rem}

/* Progress */
.progress-wrap{
  position:relative; width:100%; height:6px;
  background:#111218; border:1px solid var(--border);
  border-radius:999px; overflow:hidden;
  margin-top: 24px;
}

.progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, #3fb8ff, #6ee7ff);
  transition:width .25s ease;
}

/* Cards */
.msg{
  display:block; border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.msg.system{background:transparent; border-color:transparent; box-shadow:none}
.msg-inner{padding:18px 18px 16px}

.q-title{margin:6px 0 4px; font-size:1.3rem; line-height:1.35}
.intro{ color:#c9ced9; margin:10px 0 18px; } /* + margen inferior */

/* Home: fila “Unidades teóricas” + toggle */
.learn-row{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.learn-left{ color:var(--text); font-weight:700; }
.learn-toggle{ display:flex; align-items:center; gap:10px; }
.toggle-label{ color: var(--text); font-weight:600 }

/* Separador */
.divider{
  width:100%;
  height:0;
  border-top:1px solid var(--border);
  margin: 14px 0 14px;
}

/* Home: topics grid */
.topics-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap:14px;
  margin-top:28px; /* más margen arriba */
}

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

.topic-card{
  display:block; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel-2); padding:14px; width:100%;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.topic-card:hover{ border-color:#3a3d48; transform: translateY(-1px); }
.topic-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.topic-title{ font-weight:700; font-size:1.25rem; }
.topic-desc { color:#c9ced9; margin:6px 0 10px; font-size:0.9rem; line-height:1.5; }
.topic-img { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-top: 8px; }

.topic-actions{ display:flex; align-items:center; justify-content:flex-end; }
.cta{ font-weight:600; color: var(--text); }

/* Domain (encima del título de la pregunta) */
.q-domain{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:6px;
}

/* Options */
.options{
  display:flex; flex-direction:column; gap:10px; margin:14px 0 4px;
}
.opt{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--panel-2);
  border:1px solid var(--border);
  padding:12px 12px; border-radius:12px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
  color: var(--text);
}
.opt:hover{border-color:#3a3d48}
.opt input{margin-top:3px; accent-color:var(--accent); transform: scale(1.05)}
.opt-text{display:block}

/* Estados de selección */
.opt.is-correct{ border-color: rgba(34,197,94,.6); background: linear-gradient(180deg,#1c2420,#1a221e);}
.opt.is-wrong{ border-color: rgba(239,68,68,.55); background: linear-gradient(180deg,#271c1c,#211a1a); }

/* Disabled state (learn OFF) */
.options.options-disabled .opt{
  cursor:not-allowed;
}
.options.options-disabled .opt:hover{
  /* mantener estilo original */
}

/* Texto: muted por defecto en disabled */
.options.options-disabled .opt .opt-text{ color: var(--muted); }
/* Pero texto normal si es correcta o seleccionada incorrecta */
.options.options-disabled .opt.is-correct .opt-text,
.options.options-disabled .opt.is-wrong .opt-text {
  color: var(--text);
}

/* Radio muted */
.options.options-disabled .opt input{ cursor:not-allowed; opacity:.6 }

/* Buttons & result */
.actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.btn{
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  padding:10px 14px; border-radius:10px; cursor:pointer;
  transition: opacity .15s ease, border-color .15s ease;
}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn:hover{border-color:#3a3d48}
.btn-primary{background:linear-gradient(180deg,#2b2e36,#23262f); border-color:#3b3e47}
.btn-ghost{background:transparent}
.btn.small { padding:6px 10px; font-size:.9rem; border-radius:8px; }

/* Result + explanation */
.result {
  display:none; /* oculto por defecto, no ocupa espacio */
  color:var(--muted);
}
.result.ok,
.result.err {
  display:block;           /* solo se muestra cuando hay feedback */
  margin-top:20px;         /* más aire respecto al botón */
  padding-top:10px;
  border-top:1px solid var(--border);
}
.result.ok{color:var(--ok)}
.result.err{color:var(--err)}
.explain{ margin-top:8px; color:var(--text); opacity:.92 }
.explain strong{ font-weight:700 }

/* Summary at the end */
.summary-list{
  list-style:none; padding:0; margin:14px 0 6px;
  display:flex; flex-direction:column; gap:10px;
}
.sum-item{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel-2); padding:10px 12px;
}
.sum-item.ok{ border-color: rgba(34,197,94,.35); }
.sum-item.err{ border-color: rgba(239,68,68,.35); }
.sum-icon{ width:28px; flex: 0 0 28px; text-align:center; margin-top:2px; }
.sum-q{ font-weight:600; margin-bottom:2px; }

/* Switch CSS */
.switch{ position:relative; display:inline-block; width:48px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#30333b; border:1px solid var(--border);
  transition:.2s; border-radius:999px;
}
.slider:before{
  position:absolute; content:""; height:18px; width:18px; left:3px; top:2.5px;
  background:#cfd3de; transition:.2s; border-radius:50%;
}
.switch input:checked + .slider{ background:#236e7a; }
.switch input:checked + .slider:before{ transform: translateX(24px); }

.topics-title-home {
  font-size:1.2rem;
  font-weight:700;
  margin:32px 0 0 0;
  text-align:left;
  color:var(--text);
  padding-left:16px;
}

.topics-title {
  font-size:1.2rem;
  font-weight:700;
  margin:0px;
  text-align:left;
  color:var(--text);
  padding-left:0;    /* quitamos padding porque ya está alineado con quiz-meta */
}

.topic-subtitle {
  font-size:1rem;
  font-weight:600;
  margin:0px;
  color:var(--muted);
  text-align:left;
}

/* Hidden utility */
[hidden] { display: none !important; }