/*
 * CIAC Vita Actividades · temas por actividad
 *
 * Base común estudiada: fondo gris #f2f2f3, halo lavanda #e6e2f4,
 * encabezados azul marino #242757, tarjetas blancas y marca violeta.
 *
 * Colores propios, no copias de marcas ajenas:
 * CIACHUT   violeta        #5b43c9
 * CIACMENTE verde petróleo #087476
 * CIACMATCH naranja        #b24c17
 * CIACQUIZ  azul cobalto   #2563b4
 *
 * Paletas de acento con contraste ≥ 4.5:1 frente a blanco.
 * La jerarquía, tipografía y fondo común de DATAE Aura se mantienen.
 */
:root {
  --ciac-navy: #242757;
  --ciac-page: #f2f2f3;
  --ciac-lavender: #e6e2f4;
  --ciac-header: #17223a;
  --activity: #5b43c9;
  --activity-hover: #4833aa;
  --activity-soft: #f0ebff;
  --activity-outline: #d9cef8;
  --activity-glow: #5b43c91c;
}
body.theme-ciacchut,
.feature--chut {
  --activity: #5b43c9;
  --activity-hover: #4833aa;
  --activity-soft: #f0ebff;
  --activity-outline: #d9cef8;
  --activity-glow: #5b43c91c;
}
body.theme-ciacmente,
.feature--mente {
  --activity: #087476;
  --activity-hover: #07585b;
  --activity-soft: #e7f6f4;
  --activity-outline: #bde5e2;
  --activity-glow: #0874761a;
}
body.theme-ciacmatch,
.feature--match {
  --activity: #b24c17;
  --activity-hover: #913e14;
  --activity-soft: #fff1e5;
  --activity-outline: #f4d4b7;
  --activity-glow: #b24c171b;
}
body.theme-ciacquiz,
.feature--quiz {
  --activity: #2563b4;
  --activity-hover: #194d91;
  --activity-soft: #eaf2ff;
  --activity-outline: #c5d8f5;
  --activity-glow: #2563b41c;
}
/* Discreto halo propio de cada módulo, conservando el gris y lavanda. */
body.theme-ciacmente,
body.theme-ciacmatch,
body.theme-ciacquiz {
  background:
    radial-gradient(ellipse at 93% 8%, var(--activity-soft) 0%, transparent 37%),
    radial-gradient(ellipse at 13% 90%, #e7e7f2 0%, transparent 45%),
    var(--ciac-page);
}
body[class*="theme-ciac"] .hero h1 span,
body[class*="theme-ciac"] .match-activity-title em {
  color: var(--activity);
}
body[class*="theme-ciac"] .btn:not(.secondary):not(.danger):not(:disabled) {
  background: var(--activity);
  border-color: var(--activity);
  color: #fff;
}
body[class*="theme-ciac"] .btn:not(.secondary):not(.danger):not(:disabled):hover {
  background: var(--activity-hover);
  border-color: var(--activity-hover);
  box-shadow: 0 6px 16px var(--activity-glow);
}
body[class*="theme-ciac"] .btn.secondary:not(.danger) {
  color: var(--activity);
  border-color: var(--activity-outline);
}
body[class*="theme-ciac"] .btn.secondary:not(.danger):hover {
  background: var(--activity-soft);
  border-color: var(--activity-outline);
}
body[class*="theme-ciac"] .tag,
body[class*="theme-ciac"] .status:not(.live):not(.closed),
body[class*="theme-ciac"] .mini-stat {
  color: var(--activity);
  border-color: var(--activity-outline);
  background: var(--activity-soft);
}
body[class*="theme-ciac"] .nav button:hover,
body[class*="theme-ciac"] .nav .btn:hover {
  border-color: var(--activity-outline);
  background: var(--activity-soft);
  color: var(--activity);
}
body[class*="theme-ciac"] button:focus-visible,
body[class*="theme-ciac"] input:focus-visible,
body[class*="theme-ciac"] textarea:focus-visible,
body[class*="theme-ciac"] select:focus-visible,
body[class*="theme-ciac"] a:focus-visible {
  outline: 3px solid var(--activity);
  outline-offset: 3px;
}
/* Catálogo: todos en una misma página, cada tarjeta con acento propio. */
.feature--game {
  border-left: 4px solid var(--activity);
  transition: transform 210ms ease, border-color 210ms ease, box-shadow 210ms ease;
}
.feature--game .symbol {
  color: var(--activity);
  background: var(--activity-soft);
}
.feature--game .tag {
  color: var(--activity) !important;
  border-color: var(--activity-outline) !important;
  background: var(--activity-soft) !important;
}
.feature--game .btn:not(.secondary):not(.danger) {
  color: #fff !important;
  background: var(--activity) !important;
  border-color: var(--activity) !important;
}
.feature--game .btn:not(.secondary):not(.danger):hover {
  background: var(--activity-hover) !important;
  border-color: var(--activity-hover) !important;
}
.feature--game .btn.secondary:not(.danger) {
  color: var(--activity) !important;
  border-color: var(--activity-outline) !important;
}
.feature--game .btn.secondary:not(.danger):hover {
  background: var(--activity-soft) !important;
}
.feature--game:hover {
  box-shadow: 0 15px 30px var(--activity-glow);
}
/* CIACHUT: pin, cronómetro, barra y clasificación siguen el tono violeta. */
body.theme-ciacchut .room-code,
body.theme-ciacchut .leaderboard li span:first-child,
body.theme-ciacchut .timer {
  color: var(--activity);
}
body.theme-ciacchut .timer,
body.theme-ciacchut .leaderboard li:first-child,
body.theme-ciacchut .letter,
body.theme-ciacchut .choice-tile .letter {
  background: var(--activity-soft);
}
body.theme-ciacchut .leaderboard li:first-child {
  border-left: 4px solid var(--activity);
}
body.theme-ciacchut .choice-tile.picked {
  background: var(--activity-soft);
  border-color: var(--activity);
}
body.theme-ciacchut .progress-fill,
body.theme-ciacchut .ciac-timer-fill:not(.ciac-urgent) {
  background: var(--activity);
}
/* CIACMENTE: datos vivos y tarjetas en verde petróleo. */
body.theme-ciacmente .mente-mark,
body.theme-ciacmente .mente-chip,
body.theme-ciacmente .mente-stats span,
body.theme-ciacmente .mente-mini .glyph {
  color: var(--activity);
  background: var(--activity-soft);
  border-color: var(--activity-outline);
}
body.theme-ciacmente .mente-room,
body.theme-ciacmente .mente-stars button {
  color: var(--activity);
}
body.theme-ciacmente .mente-stars button:hover,
body.theme-ciacmente .mente-poll button:hover {
  background: var(--activity-soft);
  border-color: var(--activity);
}
body.theme-ciacmente .mente-progress span,
body.theme-ciacmente .mente-bar span {
  background: var(--activity);
}
body.theme-ciacmente .mente-cloud span {
  color: var(--activity);
}
body.theme-ciacmente .mente-cloud span:nth-child(3n) { color: #14575e; }
body.theme-ciacmente .mente-cloud span:nth-child(4n) { color: #308f87; }
body.theme-ciacmente .mente-entry {
  border-color: var(--activity-outline);
  background: var(--activity-soft);
}
/* CIACMATCH: juego cálido/naranja, resultados correctos mantienen verde. */
body.theme-ciacmatch .match-glyph,
body.theme-ciacmatch .match-badge,
body.theme-ciacmatch .match-counter span {
  color: var(--activity);
  background: var(--activity-soft);
}
body.theme-ciacmatch .match-progress span {
  background: var(--activity);
}
body.theme-ciacmatch .match-token.selected {
  border-color: var(--activity);
  background: var(--activity-soft);
}
body.theme-ciacmatch .match-drop:not(:disabled):hover {
  border-color: var(--activity);
  background: var(--activity-soft);
}
body.theme-ciacmatch .match-flip .match-face-back {
  background: var(--activity-soft);
  border-color: var(--activity-outline);
}
body.theme-ciacmatch .match-memory-card .match-card-front {
  color: var(--activity);
  background: var(--activity-soft);
  border-color: var(--activity-outline);
}
body.theme-ciacmatch .match-drop.ciac-drop-over {
  border-color: var(--activity);
  background: var(--activity-soft);
  box-shadow: 0 0 0 4px var(--activity-glow);
}
/* CIACQUIZ: progreso e indicadores de estudio en azul cobalto. */
body.theme-ciacquiz .solo-badge,
body.theme-ciacquiz .solo-pill,
body.theme-ciacquiz .solo-symbol {
  color: var(--activity);
  background: var(--activity-soft);
  border-color: var(--activity-outline);
}
body.theme-ciacquiz .solo-stat strong,
body.theme-ciacquiz .solo-play-choice span:first-child {
  color: var(--activity);
}
body.theme-ciacquiz .solo-stat,
body.theme-ciacquiz .solo-play-choice span:first-child {
  background: var(--activity-soft);
}
body.theme-ciacquiz .solo-progress span {
  background: var(--activity);
}
body.theme-ciacquiz .solo-play-choice.selected {
  background: var(--activity-soft);
  border-color: var(--activity);
}
body.theme-ciacquiz .solo-play-choice:not(:disabled):hover {
  border-color: var(--activity);
}
/* No alteramos el significado cromático de correcto, error, peligro ni estado final. */
@media (prefers-reduced-motion: reduce) {
  .feature--game { transition: none; }
}


/* CIACCOINS — gold/ochre, fifth distinct accent with dark accessible controls.
   White text on #8d550c (WCAG AA normal body); common navy/lavender preserved. */
body.theme-ciaccoins,
.feature--coins {
 --activity: #8d550c;
 --activity-hover: #704308;
 --activity-soft: #fff2d7;
 --activity-outline: #eacb8b;
 --activity-glow: #8d550c1f;
}
body.theme-ciaccoins {
 background:
  radial-gradient(ellipse at 93% 8%, #fff0cf 0%, transparent 36%),
  radial-gradient(ellipse at 13% 90%, #e7e7f2 0%, transparent 45%),
  var(--ciac-page);
}
body.theme-ciaccoins .coins-progress span,
body.theme-ciaccoins .coins-stat strong,
body.theme-ciaccoins .coins-prize { color: var(--activity); }
body.theme-ciaccoins .coins-progress span {background:var(--activity);}
body.theme-ciaccoins .coins-choice:hover,
body.theme-ciaccoins .coins-choice:focus-visible {border-color:var(--activity);}
body.theme-ciaccoins .coins-tag,
body.theme-ciaccoins .coins-icon { color:var(--activity);background:var(--activity-soft);border-color:var(--activity-outline); }
body.theme-ciaccoins .coins-shop.affordable {border-color:var(--activity-outline);background:#fffaf0;}


/* CIAC Vita · sistema visual Bento compartido para las pantallas internas.
   Diseño, navegación y accesibilidad sin cambiar la lógica de los juegos. */
body[class*="theme-ciac"] .layout:not(.landing-layout){
  --cv-ink:#242d4a;--cv-muted:#66748b;--cv-border:#e1e2ef;
  max-width:1150px;padding-top:23px;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .topbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;
  background:#fffffff2;border:1px solid #e4e2ee;border-radius:21px;
  padding:14px 18px;box-shadow:0 6px 25px #303b5e0b;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .brand{
  display:inline-flex;align-items:center;gap:3px;
  font-size:clamp(19px,2.2vw,25px);line-height:1.2;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .brand::before{
  content:"";width:10px;height:26px;flex:none;margin-right:10px;
  border-radius:4px 4px 11px 4px;background:var(--activity);
  box-shadow:5px 0 0 var(--activity-outline);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .brand span{color:var(--activity)}
body[class*="theme-ciac"] .layout:not(.landing-layout) .nav{gap:8px;align-items:center}
body[class*="theme-ciac"] .layout:not(.landing-layout) .nav :is(.navbtn,.btn){
  border-radius:999px;min-height:39px;padding:9px 13px;
  font-size:12px;font-weight:760;line-height:1.2;box-shadow:none;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .nav .btn.secondary{
  background:#f7f7fc;border-color:#e7e5f1;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero{
  position:relative;isolation:isolate;width:100%;max-width:none;
  margin:0 0 23px;padding:34px 37px 31px;overflow:hidden;
  border:1px solid var(--activity-outline);border-radius:27px;
  background:radial-gradient(ellipse at 80% -15%,var(--activity-soft),transparent 52%),
    linear-gradient(115deg,#fff 25%,#f8f8fe);
  box-shadow:0 14px 36px var(--activity-glow);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero::after{
  content:"";position:absolute;z-index:-1;top:-67px;right:-65px;
  width:185px;height:185px;border:24px solid var(--activity-outline);
  border-radius:50%;opacity:.45;pointer-events:none;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:7px 12px;background:var(--activity-soft);
  border:1px solid var(--activity-outline);border-radius:999px;
  color:var(--activity);font-weight:850;font-size:12px;line-height:1.4;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero .eyebrow::before{
  content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--activity);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero h1{
  max-width:25ch;font-size:clamp(29px,4.5vw,51px);line-height:1.12;
  letter-spacing:-1.7px;font-weight:850;color:#242d4a;margin:0 0 12px;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero h1 span{color:var(--activity)}
body[class*="theme-ciac"] .layout:not(.landing-layout) .hero .lead{
  position:relative;max-width:66ch;font-size:clamp(14px,1.6vw,17px);
  line-height:1.6;color:var(--cv-muted);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .section-head{margin:32px 0 17px}
body[class*="theme-ciac"] .layout:not(.landing-layout) .section-head h2{
  color:var(--cv-ink);font-size:clamp(21px,2.5vw,28px);
  font-weight:850;letter-spacing:-.75px;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .card{
  background:linear-gradient(145deg,#fff 70%,var(--activity-soft) 245%);
  border:1px solid var(--cv-border);border-radius:23px;
  box-shadow:0 10px 28px #2834540d;overflow-wrap:anywhere;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .card :is(h2,h3){color:var(--cv-ink)}
body[class*="theme-ciac"] .layout:not(.landing-layout) .btn:not(.secondary):not(.danger):not(:disabled){
  border-radius:13px;box-shadow:inset 0 -3px #0c123122;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) .btn.secondary{border-color:var(--activity-outline)}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.btn,.navbtn,.choice-tile,.solo-play-choice,.mente-poll button,.mente-stars button,.coins-choice,.match-token,.match-drop){
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.btn,.navbtn,.choice-tile,.solo-play-choice,.mente-poll button,.mente-stars button,.coins-choice,.match-token,.match-drop):active:not(:disabled){
  transform:scale(.975);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(input.input,textarea.input,select.input,.mente-select){
  min-height:48px;border:1.5px solid #ddddeb;border-radius:13px;
  background:#fff;color:var(--cv-ink);box-shadow:inset 0 1px 3px #1c285609;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(input.input,textarea.input,select.input,.mente-select):focus{
  outline:2px solid var(--activity);outline-offset:2px;border-color:var(--activity);
  box-shadow:0 0 0 5px var(--activity-glow);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.field label,.label){
  color:#34415d;font-weight:780;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.tag,.mini-stat,.mente-chip,.mente-stats span,.match-badge,.match-counter span,.solo-badge,.solo-pill,.coins-tag){
  border:1px solid var(--activity-outline);background:var(--activity-soft);
  color:var(--activity);border-radius:999px;font-variant-numeric:tabular-nums;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.quiz-question,.solo-question,.coins-editor-question,.mente-slide,.match-pair){
  border-top:4px solid var(--activity-outline);
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.progress-track,.mente-progress,.match-progress,.solo-progress,.coins-progress){
  background:#e7e5ef;border-radius:999px;box-shadow:inset 0 1px 3px #2420441b;
}
body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.progress-fill,.mente-progress span,.match-progress span,.solo-progress span,.coins-progress span){
  background:linear-gradient(90deg,var(--activity),color-mix(in srgb,var(--activity) 65%,white));
  border-radius:999px;
}
body[class*="theme-ciac"] .layout:not(.landing-layout):is([data-ciac-screen="player"],[data-ciac-screen="host"],[data-ciac-screen="game"],[data-ciac-screen="question"],[data-ciac-screen="play"],[data-ciac-screen="participant"]) .hero{
  padding:21px 28px;margin-bottom:17px;
}
body[class*="theme-ciac"] .layout:not(.landing-layout):is([data-ciac-screen="player"],[data-ciac-screen="host"],[data-ciac-screen="game"],[data-ciac-screen="question"],[data-ciac-screen="play"],[data-ciac-screen="participant"]) .hero h1{
  font-size:clamp(24px,3.5vw,40px);margin-bottom:6px;
}
@media(max-width:760px){
  body[class*="theme-ciac"] .layout:not(.landing-layout){padding:15px 15px 52px}
  body[class*="theme-ciac"] .layout:not(.landing-layout) .topbar{
    padding:12px 13px;margin-bottom:17px;gap:11px;border-radius:17px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .brand{font-size:21px}
  body[class*="theme-ciac"] .layout:not(.landing-layout) .brand::before{
    width:9px;height:22px;margin-right:7px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .nav{
    width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-x:contain;padding:2px 1px 5px;scrollbar-width:thin;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .nav :is(a,button){
    flex:none;white-space:nowrap;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .hero{
    padding:23px 19px!important;border-radius:21px;margin-bottom:17px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .hero::after{
    width:125px;height:125px;top:-58px;right:-58px;border-width:16px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .hero h1{
    font-size:clamp(26px,7.2vw,37px);letter-spacing:-1px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .hero .lead{font-size:14px}
  body[class*="theme-ciac"] .layout:not(.landing-layout) .card{
    border-radius:20px;padding:19px;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) .section-head{margin:26px 0 12px}
}
@media(max-width:390px){
  body[class*="theme-ciac"] .layout:not(.landing-layout){padding-inline:11px}
  body[class*="theme-ciac"] .layout:not(.landing-layout) .card{padding:15px}
}
@media(hover:hover) and (pointer:fine){
  body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.library-card,.solo-mode,.mente-mini,.match-mode,.coins-tile):hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px var(--activity-glow);
    border-color:var(--activity-outline);
  }
}
@media(prefers-reduced-motion:reduce){
  body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.library-card,.solo-mode,.mente-mini,.match-mode,.coins-tile,.btn,.navbtn,.choice-tile,.solo-play-choice,.mente-poll button,.mente-stars button,.coins-choice,.match-token,.match-drop){
    animation:none!important;transition:none!important;
  }
  body[class*="theme-ciac"] .layout:not(.landing-layout) :is(.btn,.navbtn,.choice-tile,.solo-play-choice,.mente-poll button,.mente-stars button,.coins-choice,.match-token,.match-drop):active{
    transform:none!important;
  }
}