:root {
    --bg: #06122f;
    --bg-2: #001F60;
    --surface: #2B338C;
    --surface-2: #173875;
    --text: #f6f1e8;
    --muted: #c6d2e6;
    --line: rgba(255, 255, 255, 0.18);
    --primary: #001F60;
    --primary-strong: #001646;
    --accent: #FFDA00;
    --danger: #DA3D96;
    --blue: #00B2E3;
    --teal: #10CFC9;
    --purple: #512873;
    --success: #34b36d;
    --accent-dark: #c99900;
    --primary-dark: #000f30;
    --shadow: 0 4px 10px rgba(0, 0, 0, 0.18), 0 20px 44px rgba(0, 0, 0, 0.30);
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.16), 0 10px 22px rgba(0, 0, 0, 0.22);
    --topbar-height: 64px;
    --stage-height: 600px;
    --mobile-stage-height: 800px;
    --shell-padding-y: 14px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 88% 18%, rgba(0, 178, 227, 0.22), transparent 28%),
        linear-gradient(rgba(6, 18, 47, 0.88), rgba(6, 18, 47, 0.94)),
        url("/assets/images/escape-grid.svg");
    background-size: cover;
    background-attachment: fixed;
    font-family: "Trust Sans", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

/* =========================================================================
   Responsive base para las pantallas "full-bleed" (juegos, /registro,
   /ranking, /pantalla): estos wrappers ([data-station-theme="..."] y
   .ranking-final) se estiran a proposito a 100vw para que el FONDO de
   color cubra toda la pantalla en cualquier dispositivo (ver el truco de
   margin:-14px calc(50% - 50vw) -24px repetido en cada tema). El problema
   (reportado en tablet/desktop: "se ve mal", timer/barra/tarjetas
   gigantescas) es que el CONTENIDO tambien heredaba ese mismo ancho
   completo.
   IMPORTANTE (bug ya corregido): la primera version de este bloque NO
   tenia media query y ademas le faltaba "width:100%" -- eso hacia que,
   incluso en movil, los margin:auto desactivaran el "stretch" por defecto
   de los items de grid y el contenido pasara a encogerse a su ancho de
   contenido en vez de ocupar el ancho completo (cambio visible tambien en
   movil, que es justo lo que NO se queria tocar). Ahora el bloque:
   (a) va dentro de min-width:640px, asi que en movil no se aplica NADA y
   el comportamiento queda IDENTICO al de antes de este cambio, y
   (b) fija width:100% ademas de max-width, para que el "min(100%, 520px)"
   sea explicito y no dependa de la ambiguedad stretch/auto-margin.
   Ya existia esta idea aplicada pieza por pieza en varios lugares
   (.cs-registro-form, .final-lead h1, etc. con su propio max-width +
   margin:auto); aca se generaliza como valor por defecto para TODOS los
   hijos directos en flujo normal de estos wrappers, sin tocar los
   decorativos con position:absolute/fixed (engranajes, mascotas, confeti),
   que quedan fuera del flujo de grid y no se ven afectados. Cualquier
   regla mas especifica definida mas abajo en este archivo (los 380px del
   podio, los 300px del robot, los 480px del formulario de registro, etc.)
   sigue ganando porque aparece despues en la cascada -- este bloque es
   solo la base, no un limite absoluto. */
@media (min-width: 640px) {
    [data-station-theme] > *,
    .ranking-final > * {
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

a {
    color: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--topbar-height);
    padding: 8px clamp(14px, 3vw, 36px);
    background: rgba(0, 31, 96, 0.96);
    border-bottom: 3px solid var(--accent);
    backdrop-filter: blur(12px);
}

.brand,
.topnav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand {
    font-weight: 900;
    text-decoration: none;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 40px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 14px;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-back {
    position: fixed;
    left: 0;
    top: calc(var(--topbar-height) + 16px);
    z-index: 40;
    min-height: 44px;
    padding: 10px 16px 10px 12px;
    color: var(--primary);
    background: var(--accent);
    border: 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 6px 16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    transition: padding-left 0.15s ease;
}

.nav-back:hover {
    padding-left: 18px;
}

.topnav a,
.admin-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 850;
    text-decoration: none;
}

.topnav a:hover,
.admin-tabs a:hover {
    color: var(--text);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.10);
}

.shell {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
    min-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height));
    padding: var(--shell-padding-y) 0 24px;
}

.page-heading,
.station-head,
.admin-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.small-text {
    font-size: 0.86rem;
    line-height: 1.45;
}

.eyebrow,
.card-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 4px 12px;
    color: var(--primary);
    background: var(--accent);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
    line-height: 1.05;
}

h1 {
    max-width: 900px;
    font-family: "Cooper Hewitt", Arial, system-ui, sans-serif;
    font-size: clamp(2rem, 4.8vw, 3.8rem);
}

h2 {
    font-size: 1.35rem;
}

.station-title {
    max-width: none;
    font-family: "Cooper Hewitt", Arial, system-ui, sans-serif;
    font-size: large;
    font-weight: 950;
    line-height: 1.3;
}

.station-title .station-order {
    color: var(--accent);
}

.muted {
    color: var(--muted);
}

.mission-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}

.mission-copy,
.station-map,
.mission-card,
.panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.mission-copy {
    min-height: 154px;
    padding: clamp(18px, 3vw, 28px);
    background: linear-gradient(#2B338C, #001F62), url(/assets/images/escape-grid.svg);
    background-size: cover;
}

.mission-lead {
    max-width: 620px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: clamp(0.98rem, 1.7vw, 1.16rem);
    font-weight: 700;
}

.station-map {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: rgba(17, 20, 23, 0.84);
}

.station-node {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.station-node span,
.member-row legend span {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #111417;
    background: linear-gradient(145deg, #ffe454, var(--accent) 65%);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    font-weight: 950;
}

.station-node strong {
    font-size: 1rem;
}

.station-node.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(243, 183, 63, 0.32);
}

.registration-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 0;
}

.mission-card {
    position: sticky;
    top: calc(var(--topbar-height) + 12px);
    display: grid;
    gap: 10px;
    padding: 14px;
    background: rgba(23, 29, 32, 0.96);
}

.mission-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.mission-stat span {
    color: var(--muted);
    font-weight: 750;
}

.mission-stat strong {
    color: var(--accent);
    font-size: 1.15rem;
}

.panel {
    padding: clamp(14px, 2.5vw, 22px);
    background: rgba(32, 40, 45, 0.96);
}

.registration-panel {
    max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 220px);
    min-height: 310px;
    padding-bottom: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-stack,
.challenge-form {
    display: grid;
    gap: 12px;
}

.narrow {
    max-width: 480px;
    margin: 0 auto;
}

.field {
    display: grid;
    gap: 5px;
    color: var(--text);
    font-weight: 700;
}

.field span {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.team-field input {
    min-height: 46px;
    font-size: 1.08rem;
    font-weight: 900;
}

input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--text);
    background: #11181b;
    border: 2px solid #4a5960;
    border-radius: 14px;
    font: inherit;
    font-weight: 750;
}

input::placeholder {
    color: #738187;
}

input:focus {
    outline: 3px solid rgba(243, 183, 63, 0.2);
    border-color: var(--accent);
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.member-row {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 8px;
    margin: 0;
    padding: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.member-row legend {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    padding: 0 0 4px;
    color: var(--text);
    font-weight: 950;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 4px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease, background 0.15s ease;
}

.button:active:not(:disabled) {
    transform: translateY(3px);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button[hidden] {
    display: none;
}

.button-primary {
    color: #0006a3;
    background: linear-gradient(180deg, #ffe454, var(--accent) 60%);
    border-color: #ffd77e;
    box-shadow: 0 4px 0 var(--accent-dark), 0 12px 26px rgba(243, 183, 63, 0.22);
}

.button-primary:hover {
    background: linear-gradient(180deg, #fff2a0, #ffd16f 60%);
}

.button-primary:active:not(:disabled) {
    box-shadow: 0 1px 0 var(--accent-dark), 0 5px 12px rgba(243, 183, 63, 0.18);
}

.button-secondary {
    color: var(--text);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border-color: var(--line);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 12px 22px rgba(0, 0, 0, 0.22);
}

.button-secondary:hover {
    border-color: var(--accent);
}

.button-secondary:active:not(:disabled) {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.button-danger {
    color: #fff;
    background: linear-gradient(180deg, #ff74b8, var(--danger) 60%);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 4px 0 #9c2568, 0 12px 22px rgba(218, 61, 150, 0.25);
}

.button-danger:hover {
    filter: brightness(1.08);
}

.button-danger:active:not(:disabled) {
    box-shadow: 0 1px 0 #9c2568;
}

.wide {
    width: 100%;
}

.compact {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.start-dock {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 40;
    display: none;
    width: min(680px, calc(100% - 28px));
    transform: translateX(-50%);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    background: rgba(17, 20, 23, 0.96);
    border: 1px solid rgba(243, 183, 63, 0.44);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.start-dock span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.start-dock strong {
    display: block;
}

.alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.alert-error {
    border-color: rgba(195, 58, 102, 0.65);
    background: rgba(195, 58, 102, 0.16);
}

.alert-success {
    border-color: rgba(52, 179, 109, 0.65);
    background: rgba(52, 179, 109, 0.16);
}

/* Los mensajes flash dentro de una interfaz tematizada (data-station-theme)
   no deben verse como la barra generica de arriba: se piden como tarjeta
   oscura semitransparente que combine con cualquiera de los 5 fondos,
   sin necesitar una variante por tema. Las clases .alert/.alert-error/
   .alert-success siguen intactas para el resto del sitio (admin, etc.). */
[data-station-theme] .station-flash {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #fff;
    background: rgba(10, 14, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(2px);
    font-weight: 600;
    text-align: center;
}

[data-station-theme] .station-flash-error {
    border-color: rgba(255, 138, 178, 0.85);
    background: rgba(195, 58, 102, 0.35);
}

[data-station-theme] .station-flash-success {
    border-color: rgba(129, 230, 175, 0.85);
    background: rgba(52, 179, 109, 0.35);
}

.scanner-panel {
    display: grid;
    gap: 12px;
    max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-height: 270px;
    background: #0b0e10;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-line {
    position: absolute;
    inset: 18%;
    border: 3px solid var(--accent);
    border-radius: 14px;
    box-shadow: inset 0 0 30px rgba(243, 183, 63, 0.16);
}

.scanner-actions,
.action-row,
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.status-pill {
    min-height: 42px;
    padding: 10px 12px;
    color: var(--muted);
    background: #11181b;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 850;
}

.manual-qr {
    display: grid;
    gap: 12px;
}

.timer {
    display: inline-grid;
    min-width: 120px;
    min-height: 52px;
    place-items: center;
    color: #fff;
    background: var(--danger);
    border: 1px solid #ff7ca2;
    border-radius: 14px;
    font-size: 1.35rem;
    font-weight: 950;
}

.challenge-header {
    display: grid;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.intro-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 14px;
}

/* Mini-formulario de reingreso en /registro (solo nombre de equipo, para
   retomar una sesion perdida sin re-registrar integrantes). Reutiliza
   .field/.button-secondary; solo define el layout propio en fila. */
.resume-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.resume-form .team-field {
    flex: 1 1 220px;
}

.resume-form .button-secondary {
    flex: 0 0 auto;
}

.intro-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.intro-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 700;
}

.intro-steps li .mini-number {
    flex-shrink: 0;
}

.intro-steps li > span:last-child {
    padding-top: 4px;
}

.closing-message {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    background: var(--bg-2);
    border-left: 4px solid var(--accent);
}

.closing-message p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.equation-grid {
    display: grid;
    gap: 8px;
}

.equation-row {
    margin: 0;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.equation-final {
    margin: 0;
    padding: 12px;
    background: var(--bg-2);
    border: 1px dashed var(--accent);
    border-radius: 14px;
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 950;
    text-align: center;
}

.office-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 750;
}

.office-counter strong {
    color: var(--accent);
    font-size: 1.2rem;
}

.office-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 740 / 493;
    overflow: hidden;
    background-color: var(--bg-2);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.office-bot {
    position: absolute;
    width: 4.4%;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: none;
    border: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.office-bot img {
    display: block;
    width: 100%;
    height: 100%;
}

.office-bot:hover {
    transform: translate(-50%, -50%) scale(1.12);
}

.office-bot.is-found {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    pointer-events: none;
}

.fidebot-challenge,
.misinformation-challenge,
.hidden-objects-challenge,
.keyword-challenge {
    display: grid;
    gap: 14px;
}

.word-timer {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    padding: 6px 14px;
    color: #111417;
    background: linear-gradient(180deg, #ffe454, var(--accent) 60%);
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--accent-dark), var(--shadow-soft);
    font-size: 0.95rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.hint-list {
    display: grid;
    gap: 8px;
}

.hint-line {
    margin: 0;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 700;
}

.hint-line[hidden] {
    display: none;
}

.choice-grid {
    display: grid;
    gap: 10px;
}

.choice-card {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.choice-card:hover {
    border-color: var(--accent);
}

.choice-card.is-correct {
    border-color: var(--success);
    background: rgba(52, 179, 109, 0.18);
}

.choice-card.is-wrong {
    border-color: var(--danger);
    background: rgba(218, 61, 150, 0.18);
    transform: translateX(-3px);
}

.swipe-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.swipe-carousel.is-grabbing {
    scroll-snap-type: none;
    cursor: grabbing;
}

.swipe-carousel::-webkit-scrollbar {
    display: none;
    height: 0;
}

.swipe-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 6px 16% 14px 0;
}

.swipe-card {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 62%;
    scroll-snap-align: start;
    min-height: 240px;
    padding: 26px 16px 18px;
    background: linear-gradient(165deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
    transform: scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease;
}

.swipe-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 4px;
    background: var(--accent);
    border-radius: 0 0 4px 4px;
    opacity: 0.75;
}

.swipe-card.is-focused {
    opacity: 1;
    border-color: var(--accent);
    transform: scale(1);
}

.swipe-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.swipe-dot {
    width: 8px;
    height: 8px;
    background: var(--line);
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
}

.swipe-dot.is-active {
    background: var(--accent);
    transform: scale(1.25);
}

.swipe-hint {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.drag-list {
    display: grid;
    gap: 10px;
    touch-action: pan-y;
}

.drag-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(165deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    color: var(--text);
    font-weight: 700;
    text-align: left;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: border-color 0.2s ease;
}

.drag-item.is-dragging {
    z-index: 5;
    border-color: var(--accent);
    cursor: grabbing;
}

.drag-badge {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    background: var(--accent);
    color: var(--primary);
    border-radius: 10px;
    font-weight: 950;
    font-size: 0.85rem;
}

.drag-handle {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 4px);
    gap: 3px;
    padding: 0 4px;
}

.drag-handle i {
    display: block;
    width: 4px;
    height: 4px;
    background: var(--muted);
    border-radius: 50%;
    font-style: normal;
}

.drag-text {
    flex: 1 1 auto;
}

.word-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.fidebot-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.phase-pill {
    min-height: 36px;
    padding: 8px 14px;
    color: var(--accent);
    background: rgba(0, 31, 96, 0.82);
    border: 1px solid rgba(255, 218, 0, 0.44);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    font-size: 0.84rem;
    font-weight: 950;
    text-transform: uppercase;
}

.fidebot-phase {
    display: grid;
    gap: 14px;
}

.fidebot-phase[hidden] {
    display: none;
}

.fidebot-copy {
    display: grid;
    gap: 10px;
}

.fidebot-copy h3,
.fidebot-copy p {
    margin: 0;
}

.fidebot-copy h3 {
    color: var(--accent);
    font-size: 1.35rem;
}

.fidebot-copy p {
    color: var(--muted);
    font-weight: 750;
}

.mini-grid,
.hint-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mini-card,
.hint-card,
.access-code-panel {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 31, 96, 0.76);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.mini-card {
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
}

.mini-number {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--primary);
    background: linear-gradient(145deg, #7cf5ef, var(--teal) 65%);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    font-weight: 950;
}

.mini-card .field {
    gap: 4px;
}

.mini-card strong {
    font-size: 0.96rem;
    line-height: 1.25;
}

.mini-check {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.mini-check.is-correct {
    color: #06122f;
    background: var(--teal);
}

.mini-check.is-correct::before {
    content: "✓";
    font-weight: 950;
}

.mini-check.is-wrong {
    color: #fff;
    background: var(--danger);
}

.mini-check.is-wrong::before {
    content: "!";
    font-weight: 950;
}

.access-code-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    background:
        linear-gradient(135deg, rgba(43, 51, 140, 0.92), rgba(0, 31, 96, 0.96)),
        url("/assets/images/escape-grid.svg");
}

.access-code-field input,
.final-phrase-input {
    color: #06122f;
    background: #fff;
    border-color: rgba(0, 178, 227, 0.8);
}

.decode-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: start;
    gap: 14px;
}

.decode-form {
    display: grid;
    gap: 12px;
    align-content: start;
}

.decode-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 31, 96, 0.76);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.decode-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(6, 18, 47, 0.55);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.82rem;
}

.decode-item strong {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 4px;
    color: var(--primary);
    background: linear-gradient(145deg, #7cf5ef, var(--teal) 65%);
    border-radius: 8px;
    font-weight: 950;
    font-size: 0.8rem;
}

.decode-item span {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
}

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

.fidebot-feedback,
.hint-feedback {
    min-height: 24px;
    margin: 0;
    color: var(--muted);
    font-weight: 850;
}

.fidebot-feedback.is-success,
.hint-feedback.is-success {
    color: var(--teal);
}

.fidebot-feedback.is-error,
.hint-feedback.is-error {
    color: #ff9ac8;
}

.hint-card {
    align-content: start;
}

.hint-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hint-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.hint-unlock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.hint-reveal {
    padding: 10px;
    color: #06122f;
    background: var(--accent);
    border-radius: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.question-block {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
}

.question-block legend {
    padding: 0;
    font-weight: 950;
}

.question-media img,
.question-media video {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #11181b;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.answer-list {
    display: grid;
    gap: 8px;
}

.answer-option {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 9px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
}

.answer-option:hover {
    border-color: var(--accent);
}

.answer-option input {
    width: 18px;
    min-height: 18px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.metric {
    display: grid;
    gap: 6px;
    min-height: 76px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.metric span {
    color: var(--muted);
    font-weight: 800;
}

.metric strong {
    color: var(--accent);
    font-size: 1.42rem;
}

.table-panel {
    overflow-x: auto;
    margin-bottom: 14px;
}

.challenge-form,
.table-panel {
    max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.challenge-form > .button[type="submit"] {
    position: sticky;
    bottom: 0;
    justify-self: start;
    margin-top: 2px;
    box-shadow: 0 -12px 24px rgba(32, 40, 45, 0.72), 0 14px 28px rgba(243, 183, 63, 0.18);
}

.live-region {
    display: grid;
    gap: 0;
}

.live-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    margin-bottom: 10px;
    padding: 8px 10px;
    color: var(--muted);
    background: rgba(6, 18, 47, 0.72);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 0.86rem;
    font-weight: 800;
}

.live-status strong {
    color: var(--accent);
}

.is-refreshing .live-status {
    border-color: rgba(255, 218, 0, 0.48);
}

.rank-position {
    display: inline-flex;
    min-width: 54px;
    align-items: center;
}

.rank-medal,
.rank-number {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    font-weight: 950;
}

.rank-medal {
    color: #06122f;
    border: 2px solid rgba(255, 255, 255, 0.36);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.rank-medal-gold {
    background: linear-gradient(135deg, #fff2a8, #FFDA00 52%, #b98400);
}

.rank-medal-silver {
    background: linear-gradient(135deg, #ffffff, #cfd7e2 54%, #7d8794);
}

.rank-medal-bronze {
    background: linear-gradient(135deg, #ffd2a2, #c46a2b 54%, #72370f);
    color: #fff8ec;
}

.rank-number {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
}

/* =========================================================================
   Pantalla de cierre (final.php, sesion FINISHED -- ya jugaron los 4
   juegos). Pedido explicito con "Elemento parte final.svg" (robot +
   fondo rosa, imagen "horneada" unica, sin variantes por tema porque
   esta pantalla es unica) + "Instrucciones finales.svg" (tarjeta con
   vinetas cuadradas, sin circulos numerados) de referencia. Los brillos
   van DETRAS del robot con el mismo criterio que .station-score-confetti
   (imagen con transparencia real, z-index menor dentro del mismo
   contexto de apilamiento).
   ========================================================================= */
.final-score-hero {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 12px auto 20px;
}

.final-score-robot {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
    margin-left: -30px;
}

.final-score-confetti {
    position: absolute;
    inset: -32%;
    z-index: 0;
    background: url("/assets/images/games/final/brillos-transparente.webp") no-repeat center / contain;
    pointer-events: none;
}

.final-lead {
    position: relative;
    z-index: 2;
    text-align: center;
}

.final-lead h1 {
    /* El h1 generico del sitio trae max-width:900px (para paginas anchas
       de escritorio) pero sin margin:auto, entonces quedaba pegado a la
       izquierda del bloque en vez de centrado -- se corrige aca. */
    max-width: 480px;
    margin: 0 auto 10px;
    color: var(--accent);
    font-size: clamp(1.1rem, 3.6vw, 1.35rem);
    line-height: 1.3;
}

.final-lead p {
    max-width: 420px;
    margin: 0 auto;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.4;
}

/* La tarjeta de instrucciones es la imagen que envio el usuario
   ("Instrucciones finales.svg", ya trae su propia sombra), no un
   div/lista reconstruido en CSS. */
.final-instructions-card {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    margin-top: -30px;
}

.final-action-row {
    justify-content: center;
}

.station-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

/* Layout de 2 columnas real (pedido explicito, ver referencia): la
   insignia numerada es su propia columna (centrada en TODO el alto de la
   tarjeta, sin importar cuantas lineas ocupe el titulo), y el titulo +
   barra + stats van en la segunda columna, apilados. Antes el numero solo
   estaba "en linea" con el titulo (flex) y la barra/stats quedaban abajo
   ocupando el ancho completo de la tarjeta (por debajo tambien del
   numero) -- eso es lo que se corrige aca. */
.station-result-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(32, 40, 45, 0.96);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.station-result-content {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.station-result-content h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    font-family: 'CS Cooper Hewitt';
}

.station-result-badge {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 950;
}

.station-result-bar {
    /* Ancho pedido explicitamente (mas gruesa que el 8px generico de otras
       pantallas -- esta clase solo la usa final.php, ver grep). */
    height: 14px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.station-result-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #ffef8a);
    border-radius: 999px;
}

.station-result-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.86rem;
}

.station-result-stats strong {
    color: var(--text);
}

/* Pantalla de puntaje por estacion (final.php), pedido explicito con
   Puntaje.svg como referencia: robot + brillos DETRAS + circulo navy con
   los puntos ganados. Es la MISMA estructura para los 4 juegos (solo
   cambia el fondo de la pagina, que ya viene del tema); por eso estas
   clases son genericas, sin prefijo de tema, y solo el confeti/brillos
   necesita una imagen distinta por tema (ver overrides mas abajo, cada uno
   con su propia copia de brillos-transparente.webp, mismo criterio que
   ya se uso en cs-ingenieria). */
.station-score-hero {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 12px auto 20px;
}

.station-score-robot {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
}

/* Brillos DETRAS del robot (no encima): mismo criterio que se corrigio en
   cs-ingenieria-confetti (z-index menor que el del robot, dentro del mismo
   contexto de apilamiento de .station-score-hero). La imagen ya trae
   transparencia real (no depende de mix-blend-mode), asi que se ve bien
   sin importar el fondo de cada tema. */
.station-score-confetti {
    position: absolute;
    /* inset negativo: el pedido explicito fue que los brillos "abarquen
       mas pantalla" -- con inset:0 quedaban ceñidos al tamaño del robot
       (muy chicos). Se agranda el lienzo del confeti mas alla del robot
       para que el patron se vea mas grande sin distorsionarse (sigue
       siendo "contain", solo con mas espacio disponible). */
    inset: -32%;
    z-index: 0;
    background: no-repeat center / contain;
    pointer-events: none;
}

.station-score-badge {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 164px;
    height: 164px;
    padding: 12px;
    transform: translate(-50%, -46%);
    background: #0006a3;
    border-radius: 50%;
    box-shadow: 0 14px 26px rgba(0, 3, 40, 0.35);
    text-align: center;
}

.station-score-badge-label {
    color: #fff;
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.station-score-badge-value {
    color: #ffda00;
    font-family: "CS Clash Display", sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.station-score-badge-unit {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}


.leaderboard-wrap {
    display: grid;
    gap: 0;
    margin-bottom: 14px;
}

.leaderboard-wrap > h2 {
    margin-bottom: 12px;
}

/* El podio con arte de medalla (ranking-final-slot) es mas alto que el
   viejo podium-slot que reemplazo, y leaderboard-wrap usa gap:0 -- sin este
   margen las placas quedaban pegadas a la tabla de abajo. */
.leaderboard-wrap .ranking-final-podium {
    margin-bottom: 22px;
}

.leaderboard-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
}

.podium-slot {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 16px 8px 14px;
    background: rgba(32, 40, 45, 0.96);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
}

.podium-slot-1 {
    order: 2;
    padding-top: 22px;
    transform: translateY(-10px);
    border-color: rgba(255, 218, 0, 0.5);
}

.podium-slot-2 {
    order: 1;
}

.podium-slot-3 {
    order: 3;
}

.podium-slot-rank {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 950;
}

.podium-slot-avatar {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    color: #06122f;
    font-size: 1.3rem;
    font-weight: 950;
}

.podium-slot-1 .podium-slot-avatar {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #fff2a8, #FFDA00 55%, #b98400);
    font-size: 1.5rem;
}

.podium-slot-2 .podium-slot-avatar {
    background: linear-gradient(135deg, #ffffff, #cfd7e2 54%, #7d8794);
}

.podium-slot-3 .podium-slot-avatar {
    background: linear-gradient(135deg, #ffd2a2, #c46a2b 54%, #72370f);
    color: #fff8ec;
}

/* Version "grande" del circulo de medalla (.rank-medal-*) para el podio del
   dashboard: mismo componente que la tabla de /admin/ranking, solo que aca
   hace de avatar principal (antes era una inicial + un numero suelto
   arriba, dos elementos para decir lo mismo). */
.podium-slot-medal {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
}

.podium-slot-1 .podium-slot-medal {
    width: 68px;
    height: 68px;
    font-size: 1.5rem;
}

.podium-slot-name,
.podium-slot-school {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-slot-name {
    font-weight: 900;
}

.podium-slot-school {
    color: var(--muted);
    font-size: 0.78rem;
}

.podium-slot-score {
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 950;
}

.rank-list-panel {
    padding: 12px;
}

.rank-list {
    display: grid;
    gap: 8px;
}

.rank-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(6, 18, 47, 0.55);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.rank-row-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rank-row-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-row-info span {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.rank-row-stats {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.rank-row-stats strong {
    color: var(--accent);
}

.rank-row-stats span {
    color: var(--muted);
    font-size: 0.78rem;
}

.rank-empty {
    padding: 14px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 560px) {
    .leaderboard-podium {
        gap: 6px;
    }

    .podium-slot {
        padding: 10px 4px 8px;
    }

    .podium-slot-avatar {
        width: 46px;
        height: 46px;
        font-size: 1.05rem;
    }

    .podium-slot-1 .podium-slot-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }

    .podium-slot-name,
    .podium-slot-school {
        font-size: 0.76rem;
    }
}

/* =========================================================================
   Pantalla de clasificacion final (/ranking, leaderboard/index.php).
   Pedido explicito con "Ranking final .svg" + "Puesto 1/2/3.svg" de
   referencia: mismo fondo rosa + brillos detras que ya usamos en las
   pantallas de Ciencias de la Computacion (se reusa el tema cs-fidebot
   completo via data-station-theme, en vez de duplicar variables/imagen).
   Clases 100% propias (ranking-final-*): NO se tocan leaderboard-podium/
   rank-row/rank-list, que siguen usandose en /leaderboard/screen (TV) y
   en las vistas de admin.
   ========================================================================= */
.ranking-final {
    position: relative;
    display: grid;
    gap: 22px;
}

.ranking-final-confetti {
    position: absolute;
    /* Mismo criterio que .station-score-confetti: "cover" recortaba la
       imagen y ampliaba solo 1-2 brillos (se veian gigantes); "contain"
       muestra el patron completo de brillos ya horneado en la imagen,
       a una escala mas chica y pareja. */
    inset: -6%;
    z-index: 0;
    background: url("/assets/images/games/computacion/brillos-transparente.webp") no-repeat center / contain;
    pointer-events: none;
}

/* Grid con columnas en "fr" (no porcentajes sobre flex): asi los 3 puestos
   SIEMPRE suman el 100% del ancho disponible, sin importar el viewport --
   con flex + width:30%/34% + gap el 3er puesto se salia del contenedor en
   pantallas angostas (el padre tiene overflow:hidden, asi que quedaba
   invisible en vez de solo recortado). La columna del centro (1er lugar)
   es mas ancha a proposito, para que se vea mas grande. */
.ranking-final-podium {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    align-items: end;
    gap: 8px;
    max-width: 380px;
    margin: 8px auto 0;
}

.ranking-final-slot {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ranking-final-slot-1 {
    z-index: 1;
    /* Pedido explicito: el puesto 1 debe ir un poco mas arriba que los
       otros dos (ademas de ya ser mas grande por su columna mas ancha). */
    margin-bottom: 14px;
}

.ranking-final-slot-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(0, 3, 40, 0.35));
}

.ranking-final-slot-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
    display: grid;
    gap: 4px;
    padding: 0 12%;
    text-align: center;
}

.ranking-final-slot-info strong {
    color: #fff;
    font-family: "CS Clash Display", sans-serif;
    font-size: clamp(0.72rem, 2.6vw, 0.86rem);
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ranking-final-slot-info span {
    color: #fff;
    font-size: clamp(0.66rem, 2.2vw, 0.76rem);
    font-weight: 700;
    opacity: 0.92;
}

.ranking-final-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.ranking-final-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(70, 3, 46, 0.18);
}

.ranking-final-row-number {
    flex-shrink: 0;
    min-width: 26px;
    color: var(--cs-navy-deep, #0006a3);
    font-family: "CS Clash Display", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
}

.ranking-final-row-info {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.ranking-final-row-info strong {
    color: var(--cs-navy-deep, #0006a3);
    font-size: 0.92rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-final-row-info span {
    color: var(--cs-navy-deep, #0006a3);
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-final-row-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cs-navy-deep, #0006a3);
    font-size: 0.86rem;
    font-weight: 800;
}

.ranking-final-row-divider {
    width: 2px;
    height: 18px;
    background: rgba(0, 6, 163, 0.35);
    border-radius: 999px;
}

.ranking-final-empty {
    padding: 14px;
    color: #fff;
    text-align: center;
}

.ranking-final-footer {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 4px auto 0;
}

.winner-badge-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
    padding: clamp(14px, 2.5vw, 22px);
    background:
        linear-gradient(135deg, rgba(0, 31, 96, 0.94), rgba(43, 51, 140, 0.88)),
        url("/assets/images/escape-grid.svg");
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.winner-badge-panel h2 {
    max-width: 520px;
    color: var(--text);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.winner-badge-panel p {
    max-width: 560px;
    margin: 8px 0 0;
}

.winner-badge-panel canvas {
    width: 100%;
    height: auto;
    background: var(--primary);
    border: 3px solid var(--accent);
    border-radius: 14px;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
}

.badge-medal-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 118px;
    padding: 14px;
    background: rgba(6, 18, 47, 0.62);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.badge-medal-preview .rank-medal {
    width: 62px;
    height: 62px;
    font-size: 1.45rem;
}

.danger-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 14px;
    align-items: end;
    border-color: rgba(218, 61, 150, 0.62);
    background: rgba(68, 17, 52, 0.82);
}

.cleanup-form {
    display: grid;
    gap: 12px;
}

table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    color: var(--accent);
    font-size: 0.82rem;
    text-transform: uppercase;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

code {
    padding: 3px 6px;
    color: var(--accent);
    background: #11181b;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.screen-body {
    overflow: hidden;
    color: #fff;
    background-color: #101417;
    background-image: linear-gradient(rgba(16, 20, 23, 0.86), rgba(16, 20, 23, 0.92)), url("/assets/images/escape-grid.svg");
    background-size: cover;
}

/* /pantalla (screen_layout.php) reutiliza el wrapper [data-station-theme]
   tal cual (mismo diseño que /ranking), pero aca el <body> no tiene un
   <main class="shell"> con padding que "absorba" el margen negativo
   vertical del truco de sangrado -- sin este reset se veia una franja del
   fondo oscuro de .screen-body asomando abajo (24px del margin-bottom
   negativo del wrapper). Horizontalmente no hace falta tocar nada: aca el
   wrapper ya es 100vw de ancho, asi que calc(50% - 50vw) ya da 0. */
.screen-body [data-station-theme] {
    margin-top: 0;
    margin-bottom: 0;
}

.screen-board {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    padding: clamp(16px, 3vh, 28px) 5vw;
    gap: 14px;
    overflow: hidden;
}

.screen-header p {
    margin: 0 0 6px;
    color: var(--accent);
    font-weight: 950;
    text-transform: uppercase;
}

.screen-header h1 {
    font-size: clamp(2.2rem, 6vw, 4.8rem);
}

.screen-leaderboard-body {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    gap: clamp(8px, 1.4vh, 16px);
    overflow: visible;
}

.screen-leaderboard .leaderboard-podium {
    gap: clamp(10px, 1.6vw, 22px);
    padding-top: 14px;
    margin-bottom: 0;
    overflow: visible;
}

.screen-leaderboard .podium-slot {
    gap: clamp(4px, 0.8vh, 8px);
    padding: clamp(10px, 1.8vh, 20px) 10px clamp(8px, 1.4vh, 14px);
}

.screen-leaderboard .podium-slot-1 {
    padding-top: clamp(14px, 2.4vh, 26px);
}

.screen-leaderboard .podium-slot-avatar {
    width: clamp(46px, 7vh, 78px);
    height: clamp(46px, 7vh, 78px);
    font-size: clamp(1rem, 2.2vh, 1.7rem);
}

.screen-leaderboard .podium-slot-1 .podium-slot-avatar {
    width: clamp(56px, 8.4vh, 94px);
    height: clamp(56px, 8.4vh, 94px);
    font-size: clamp(1.15rem, 2.6vh, 1.9rem);
}

.screen-leaderboard .podium-slot-rank {
    min-width: clamp(20px, 3vh, 28px);
    height: clamp(20px, 3vh, 28px);
    font-size: clamp(0.72rem, 1.4vh, 0.9rem);
}

.screen-leaderboard .podium-slot-name {
    font-size: clamp(0.95rem, 2vh, 1.35rem);
}

.screen-leaderboard .podium-slot-school {
    font-size: clamp(0.72rem, 1.5vh, 0.98rem);
}

.screen-leaderboard .podium-slot-score {
    font-size: clamp(0.95rem, 2vh, 1.4rem);
}

.screen-leaderboard .rank-list-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.screen-leaderboard .rank-list {
    gap: clamp(4px, 0.8vh, 8px);
    overflow: hidden;
}

.screen-leaderboard .rank-row {
    padding: clamp(6px, 1.1vh, 12px) clamp(10px, 1.6vw, 18px);
    font-size: clamp(0.95rem, 1.9vh, 1.3rem);
}

.screen-leaderboard .rank-row-info span,
.screen-leaderboard .rank-row-stats span {
    font-size: clamp(0.7rem, 1.3vh, 0.92rem);
}

@media (max-width: 980px) {
    .mission-hero,
    .registration-grid {
        grid-template-columns: 1fr;
    }

    .mission-card {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
    }

    .mission-card .card-kicker,
    .mission-card h2 {
        grid-column: 1 / -1;
    }

    .desktop-start {
        display: none;
    }

    .start-dock {
        display: flex;
    }

    .station-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .registration-panel {
        max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 310px);
    }
}

@media (max-width: 720px) {
    :root {
        --topbar-height: 33px;
        --stage-height: var(--mobile-stage-height);
        --shell-padding-y: 10px;
    }

    .topbar,
    .page-heading,
    .station-head,
    .admin-heading {
        align-items: center;
        flex-direction: row;
    }

    .topbar {
        display: none;
    }

    .brand {
        gap: 8px;
    }

    .brand > span:last-child {
        display: none;
    }

    .topnav {
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
    }

    .shell {
        width: min(100% - 20px, 1180px);
        padding-top: var(--shell-padding-y);
    }

    .page-heading,
    .station-head,
    .admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .mission-copy {
        min-height: 116px;
    }

    .mission-card {
        display: none;
    }

    .station-node {
        grid-template-columns: 32px 1fr;
        min-height: 46px;
        font-size: 0.86rem;
    }

    .registration-panel {
        max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 330px);
        min-height: 340px;
    }

    .member-grid {
        grid-template-columns: 1fr;
    }

    .mini-grid,
    .hint-grid,
    .access-code-panel,
    .hint-unlock-row {
        grid-template-columns: 1fr;
    }

    .fidebot-header {
        grid-template-columns: 1fr;
    }

    .member-row {
        grid-template-columns: minmax(0, 1fr) 116px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .scanner-panel,
    .challenge-form,
    .table-panel {
        max-height: calc(min(100svh, var(--stage-height)) - var(--topbar-height) - 112px);
    }

    .video-frame {
        max-height: 360px;
    }

    .member-grid,
    .metric-grid {
        gap: 10px;
    }

    h1 {
        font-size: clamp(1.85rem, 10vw, 2.7rem);
    }

    table {
        min-width: 620px;
    }
}

.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.team-details-row td {
    background: rgba(0, 31, 96, 0.30);
}

.details-loading {
    min-height: 58px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: rgba(6, 18, 47, 0.42);
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-weight: 800;
}

.member-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 12px 0;
}

.member-detail-card {
    min-height: 150px;
    padding: 16px;
    background: rgba(6, 18, 47, 0.82);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.member-detail-card h3 {
    margin: 10px 0 12px;
    color: var(--accent);
    font-size: 1.05rem;
}

.member-detail-card p {
    margin: 8px 0;
    color: var(--muted);
    line-height: 1.35;
}

.member-detail-card strong {
    color: var(--text);
}

.member-number {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 9px;
    color: var(--primary);
    background: var(--accent);
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 950;
}

.qr-download-card {
    display: grid;
    grid-template-columns: minmax(320px, 520px) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
    padding: clamp(18px, 4vw, 30px);
    background: rgba(16, 43, 99, 0.94);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.qr-preview-shell {
    display: grid;
    gap: 14px;
}

.qr-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--accent);
    font-weight: 950;
}

.qr-brand img {
    width: 170px;
    height: 58px;
    padding: 8px;
    object-fit: contain;
    background: #fff;
    border-radius: 14px;
}

.qr-preview-shell canvas {
    width: 100%;
    max-width: 520px;
    height: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.qr-download-copy {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: rgba(6, 18, 47, 0.64);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.qr-download-copy code {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .qr-download-card {
        grid-template-columns: 1fr;
    }

    .winner-badge-panel {
        grid-template-columns: 1fr;
    }

    .danger-zone {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page-heading {
        align-items: stretch;
    }

    .page-actions {
        justify-content: stretch;
    }

    .page-actions .button {
        width: 100%;
    }

    .brand {
        align-items: center;
        flex-direction: row;
    }

    .brand-logo {
        width: 102px;
        height: 34px;
    }

    .nav-back {
        min-height: 40px;
        padding: 8px 12px 8px 10px;
        font-size: 0.9rem;
    }
}

/* ===================================================================
   Estacion 4 - Ciencias de la Computacion ("El acceso perdido de Fidebot")
   Tema visual exclusivo de esta estacion. Todo va scoped a
   [data-station-theme="cs-fidebot"] (paginas: instrucciones, reto,
   resultado) y a [data-fidebot-access] (el propio formulario del reto).
   No toca .panel/.mini-card/etc. fuera de esos contenedores, asi que el
   resto de estaciones (Sociales, Ingenieria, Economicas) no se ven
   afectadas.
   =================================================================== */

@font-face {
    font-family: "CS Clash Display";
    src: url("/assets/fonts/computacion/ClashDisplay-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "CS Clash Display";
    src: url("/assets/fonts/computacion/ClashDisplay-Semibold.otf") format("opentype");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "CS Cooper Hewitt";
    src: url("/assets/fonts/computacion/CooperHewitt-Medium.otf") format("opentype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "CS Cooper Hewitt";
    src: url("/assets/fonts/computacion/CooperHewitt-Semibold.otf") format("opentype");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "CS Cooper Hewitt";
    src: url("/assets/fonts/computacion/CooperHewitt-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

[data-station-theme="cs-fidebot"] {
    --cs-pink: #e8127f;
    --cs-navy: #0006a3;
    --cs-navy-deep: #0006a3;
    --cs-yellow: #ffda00;
    position: relative;
    display: grid;
    gap: 8px;
    margin: -14px calc(50% - 50vw) -24px;
    padding: 56px clamp(16px, 5vw, 40px) 64px;
    background-color: #d6127f;
    background-image: url("/assets/images/games/computacion/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: "CS Cooper Hewitt", Arial, system-ui, sans-serif;
    overflow: hidden;
    /* Si el contenido de la pantalla es mas corto que el viewport (varia
       segun telefono/orientacion), esta caja terminaba antes de llegar
       abajo y se veia el azul marino del fondo general del sitio por
       debajo. Con min-height siempre cubre por lo menos la pantalla
       completa, sin importar el telefono. 100dvh (altura visible real,
       sin la barra del navegador) con fallback a 100vh en navegadores que
       no lo soportan. */
    min-height: 100vh;
    min-height: 100dvh;
}

[data-station-theme="cs-fidebot"] .page-heading,
[data-station-theme="cs-fidebot"] .station-head,
[data-station-theme="cs-fidebot"] .metric-grid,
[data-station-theme="cs-fidebot"] .closing-message,
[data-station-theme="cs-fidebot"] .action-row {
    position: relative;
    z-index: 2;
}

[data-station-theme="cs-fidebot"] h1,
[data-station-theme="cs-fidebot"] .station-title,
[data-station-theme="cs-fidebot"] h2 {
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-weight: bold;
    color: #fff;
}

[data-station-theme="cs-fidebot"] .station-title .station-order {
    color: var(--cs-yellow);
}

[data-station-theme="cs-fidebot"] .mission-lead,
[data-station-theme="cs-fidebot"] .muted {
    color: rgba(255, 255, 255, 0.9);
}

[data-station-theme="cs-fidebot"] .eyebrow {
    color: var(--cs-navy-deep);
    background: var(--cs-yellow);
}

/* Nota: la pantalla de instrucciones de Fidebot ya no usa .intro-panel /
   .intro-steps / .mission-lead (ver .cs-fidebot-instructions-card mas abajo);
   esas clases genericas se mantienen para las otras 3 estaciones. */

/* El formulario del reto no lleva tarjeta propia: sus hijos (mini-card,
   tabla, input) llevan su propio fondo, para que se vea igual que el
   mockup (tarjetas sueltas flotando sobre el fondo rosado). */
[data-station-theme="cs-fidebot"] .challenge-form.cs-fidebot-panel {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

[data-station-theme="cs-fidebot"] .fidebot-copy h3 {
    color: #fff;
}

[data-station-theme="cs-fidebot"] .fidebot-copy p {
    color: rgba(255, 255, 255, 0.86);
}

[data-station-theme="cs-fidebot"] .phase-pill {
    color: var(--cs-navy-deep);
    background: var(--cs-yellow);
    border-color: transparent;
}

/* Botones: en el mockup el canto inferior del boton es azul marino (no el
   dorado que usamos en el resto del sitio), como un boton "presionable". */
[data-station-theme="cs-fidebot"] .button-primary {
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--cs-navy, #0006a3), 0 14px 24px rgba(70, 3, 46, 0.3);
}

/* El hover generico del sitio aclara el amarillo casi a blanco; aca se
   mantiene el mismo amarillo de siempre y el "estilo" es sutil: solo sube
   un poco y la sombra se intensifica levemente. */
[data-station-theme="cs-fidebot"] .button-primary:hover {
    background: linear-gradient(180deg, #ffe454, var(--cs-yellow, #ffda00) 60%);
    box-shadow: 0 7px 0 var(--cs-navy, #0006a3), 0 16px 26px rgba(70, 3, 46, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-fidebot"] .button-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--cs-navy, #0006a3), 0 6px 14px rgba(70, 3, 46, 0.26);
}

/* Pantalla de reto (station.php): el mockup no muestra el nombre de la
   estacion, solo el timer grande ocupando casi todo el ancho. */
[data-station-theme="cs-fidebot"] .cs-fidebot-head {
    display: block;
    margin-top: 26px;
}

[data-station-theme="cs-fidebot"] .cs-fidebot-timer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1px;
}

[data-station-theme="cs-fidebot"] .cs-fidebot-timer-value {
    font-size: 2rem;
}

/* Barra de progreso separada, debajo del pill del timer (en el mockup no
   va dentro del pill): pista clara + linea azul fina siempre visible +
   "manija" circular que se mueve sola porque su posicion (left) esta
   animada de forma independiente, sincronizada con el mismo --duration. */
.cs-fidebot-progress {
    position: relative;
    z-index: 2;
    height: 16px;
    margin: 4px 8px 20px;
}

.cs-fidebot-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
}

/* La linea azul se va "encogiendo" (mismo --duration que la manija), asi
   que a medida que pasa el tiempo se retrae y deja ver el blanco de la
   pista de abajo, en vez de quedarse fija en todo el ancho para siempre. */
.cs-fidebot-progress::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: calc(100% - 20px);
    height: 3px;
    background: var(--cs-navy, #0006a3);
    border-radius: 999px;
    transform: translateY(-50%);
    animation: cs-fidebot-progress-line var(--duration, 900s) linear forwards;
}

@keyframes cs-fidebot-progress-line {
    from { width: calc(100% - 20px); }
    to { width: 0; }
}

/* Ya no hace falta un relleno aparte: la pista de fondo ya es blanca y la
   linea azul se encoge sobre ella. */
.cs-fidebot-progress-fill {
    display: none;
}

.cs-fidebot-progress-thumb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: #0006a3;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff inset, 0 1px 3px #0006a3;
    transform: translateY(-50%);
    animation: cs-fidebot-progress-thumb var(--duration, 900s) linear forwards;
}

@keyframes cs-fidebot-progress-thumb {
    from { left: 100%; }
    to { left: 0%; }
}

/* =========================================================================
   Engranajes SOLO de la pantalla de reto (station.php).
   Clase base independiente (cs-fidebot-station-gear), sin relacion con
   cs-fidebot-icon-gear que usa station_intro.php: no comparten selector,
   asi que un cambio en una pantalla no puede romper la otra.
   ========================================================================= */
.cs-fidebot-station-gear {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    opacity: 0.85;
    background: url("/assets/images/games/computacion/icon-gear.svg") no-repeat center / contain;
    animation: cs-fidebot-station-gear-spin 14s linear infinite;
    pointer-events: none;
}

@keyframes cs-fidebot-station-gear-spin {
    to { transform: rotate(360deg); }
}

/* Arriba a la derecha, separado del timer para no encimarse con el.
   (Posicion por defecto = fase 1. En fase 2 el JS agrega la clase
   cs-fidebot-station-gear-phase2, que la espeja hacia la izquierda,
   ver override mas abajo.) */
.cs-fidebot-station-gear-top {
    top: 15px;
    right: 25px;
    width: 62px;
    height: 60px;
}

.cs-fidebot-station-gear-top.cs-fidebot-station-gear-phase2 {
    right: auto;
    left: 25px;
}

/* Robot saludando: mas arriba, mas grande, y pegado a la orilla real de
   la tarjeta (el padding lateral del tema dejaba un espacio rosado antes
   de llegar al borde real, por eso se compensa con right negativo; el
   overflow:hidden del contenedor recorta el sobrante en el borde real). */
.cs-fidebot-mascot-wave {
    position: absolute;
    z-index: 3;
    right: calc(-1 * clamp(16px, 12vw, 42px));
    bottom: 110px;
    top: 71%;
    width: clamp(130px, 50vw, 190px);
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.35));
    pointer-events: none;
}

/* Mascota de Fidebot (pantalla de resultado / mision cumplida) */
.cs-fidebot-mascot {
    display: block;
    width: clamp(120px, 30vw, 190px);
    margin: 0 auto -20px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.cs-fidebot-mascot-result {
    width: clamp(150px, 36vw, 230px);
    margin-bottom: -8px;
}

/* Iconos decorativos (engranaje, interrogaciones) sueltos sobre el fondo rosado */
.cs-fidebot-icon-gear {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    background: url("/assets/images/games/computacion/icon-gear.svg") no-repeat center / contain;
    animation: cs-fidebot-spin 14s linear infinite;
    pointer-events: none;
}

.cs-fidebot-icon-gear-1 {
    right: 55px;
    bottom: 14px;
}

/* gear-2 vive dentro de .cs-fidebot-mascot-badge (ver mas abajo), anclado a
   su esquina inferior izquierda, igual que en el diseno original */
/* Sin transform propio: la clase base .cs-fidebot-icon-gear ya anima
   "transform" (rotacion infinita), asi que el centrado vertical se hace
   con top/calc en vez de translateY para no pisar la animacion. */
.cs-fidebot-mascot-badge .cs-fidebot-icon-gear-2 {
    left: -20px;
    bottom: auto;
    top: 190px;
    width: 54px;
    height: 54px;
}

@keyframes cs-fidebot-spin {
    to { transform: rotate(360deg); }
}

/* El mockup de mercadeo no lleva encabezado de estacion en esta pantalla:
   se mantiene el <h1> en el DOM (contexto para lectores de pantalla / SEO)
   pero se oculta visualmente para calzar exacto con el diseno. */
.cs-fidebot-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fila superior: robot en su tarjeta + globo de texto */
.cs-fidebot-lead {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-fidebot-mascot-badge {
    position: relative;
    flex-shrink: 0;
    width: clamp(112px, 38vw, 156px);
    /* La imagen ya trae la caja azul + el robot compuestos (recurso final
       de Illustrator), asi que este contenedor ya no dibuja su propio fondo
       ni redondeo: solo posiciona las decoraciones sueltas encima. */
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.3));
}

.cs-fidebot-mascot-badge img {
    display: block;
    width: 100%;
    height: auto;
}

.cs-fidebot-mascot-badge .cs-fidebot-icon-question {
    position: absolute;
    top: -50px;
    right: -12px;
    width: 76px;
    height: 80px;
    background: url("/assets/images/games/computacion/icon-question.svg") no-repeat center / contain;
    pointer-events: none;
}

/* Globo: rectangulo redondeado en CSS puro (en vez de estirar el SVG del
   mockup como fondo, que deformaba la forma cuando el texto real crecia
   mas alto que en el diseno) + una colita triangular hecha con borders,
   que apunta siempre hacia el robot sin importar cuanto crezca el globo. */
.cs-fidebot-bubble {
    position: relative;
    flex: 1 1 auto;
    padding: 14px 10px 20px 10px;
    background: #fff;
    border-radius: 20px;
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.25));
}

.cs-fidebot-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 13px solid #fff;
}

/* La pildora azul del globo: el mockup siempre parte el texto en dos
   lineas fijas ("Descifrá el" en blanco / "código de acceso" en amarillo),
   sin importar el ancho de pantalla, asi que se renderiza como dos <span>
   en bloque en vez de depender de como envuelva el texto.
   Illustrator: Clash Display Semibold 13pt. */
.cs-fidebot-bubble-title {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 8px 16px;
    background: var(--cs-navy, #0006a3);
    border-radius: 10px;
    font-family: "CS Clash Display", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 14pt;
}

.cs-fidebot-bubble-title-line1,
.cs-fidebot-bubble-title-line2 {
    display: block;
}

.cs-fidebot-bubble-title-line1 {
    color: #fff;
}

.cs-fidebot-bubble-title-line2 {
    color: var(--cs-yellow, #ffda00);
}

/* Illustrator: Cooper Hewitt Semibold 11pt, interlineado 14.4pt, tracking -22 */
.cs-fidebot-bubble p {
    margin-left: 10px;
    margin-top: 5px;
    color: #0006a3;
    font-size: 11px;
    font-weight: 600;
    line-height: 13pt;
    letter-spacing: -0.022em;
    font-family: 'Cooper Hewitt';
}

/* Tarjeta blanca de instrucciones */
.cs-fidebot-instructions-card {
    position: relative;
    z-index: 2;
    margin-top: 42px;
    padding: 36px clamp(16px, 4vw, 32px) 26px;
    background: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0 16px 34px rgba(70, 3, 46, 0.35);
    text-align: center;
}

.cs-fidebot-icon-warning-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 84px;
    height: 78px;
    background: url("/assets/images/games/computacion/icon-warning.svg") no-repeat center / contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transform: translateX(-50%);
}

/* Illustrator: Clash Display Bold 30pt, interlineado 36pt */
.cs-fidebot-instructions-card h2 {
    margin: 6px 0 14px;
    color: var(--cs-navy, #0006a3);
    font-size: 30px;
    line-height: 36pt;
    font-family: 'CS Clash Display';
}

.cs-fidebot-steps {
    display: grid;
    gap: 8px;
    max-width: 380px;
    margin: 0 auto 20px;
    padding: 0;
    list-style: none;
    color: var(--cs-navy-deep, #0006a3);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
}

.cs-fidebot-steps li {
    padding: 0;
}

.cs-fidebot-steps li::before {
    content: "\25AA ";
    color: var(--cs-navy, #0006a3);
}

/* Lista de instrucciones como imagen: recurso exacto de Illustrator
   (texto vectorizado) en vez de una lista HTML con fuente aproximada. */
.cs-fidebot-steps-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 20px;
}

/* Puntitos de paginacion decorativos (el mockup viene de un carrusel de
   pantallas; esta pantalla siempre se muestra como la primera). */
.cs-fidebot-dots {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.cs-fidebot-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}

.cs-fidebot-dot-active {
    width: 30px;
    background: #fff;
}

.cs-fidebot-start-button {
    display: flex;
    width: min(340px, 90%);
    min-height: 52px;
    margin: 4px auto 0;
    font-size: 22px;
}

.cs-fidebot-instructions-card .muted {
    color: #454a7a;
}

/* Temporizador: barra azul con progreso */
.cs-fidebot-timer {
    display: grid;
    gap: 8px;
    min-width: 170px;
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(180deg, #171bb0, var(--cs-navy, #0006a3) 70%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 6px 0 var(--cs-navy-deep, #0006a3), 0 10px 18px rgba(0, 0, 0, 0.28);
}

.cs-fidebot-timer-value {
    font-family: "CS Clash Display", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cs-fidebot-timer-track {
    position: relative;
    display: block;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    overflow: hidden;
}

.cs-fidebot-timer-fill {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
    animation: cs-fidebot-countdown var(--duration, 900s) linear forwards;
}

@keyframes cs-fidebot-countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* Minirretos: numero suelto sobre el rosado + tarjeta blanca solo con la
   pregunta (el mockup no mete el numero dentro de la caja blanca). */
[data-fidebot-access] .mini-grid {
    grid-template-columns: 1fr;
}

.mini-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-fidebot-access] .mini-number {
    flex-shrink: 0;
    width: 40px;
    background: none;
    box-shadow: none;
    color: #fff;
    font-family: "CS Clash Display", sans-serif;
    font-size: 30px;
    text-align: center;
}

[data-fidebot-access] .mini-card {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(70, 3, 46, 0.18);
}

/* El mockup no muestra el input/label/check individual de cada minirreto,
   solo la pregunta: se ocultan visualmente (clase cs-fidebot-heading) en
   vez de borrarlos, para no perder el autochequeo si se necesita despues. */
[data-fidebot-access] .mini-check {
    display: none;
}

[data-fidebot-access] .mini-prompt {
    margin: 0;
    color: var(--cs-navy, #0006a3);
    font-size: 11px;
    line-height: 10pt;
    font-family: 'CS Cooper Hewitt';
}

/* Panel del codigo alfanumerico: apilado (input, numeros 01-04, boton) en
   vez del layout lado a lado que tenia antes. */
[data-fidebot-access] .access-code-panel {
    display: grid;
    justify-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* 4 casillas reales y separadas (con espacio entre ellas), en vez de un
   solo input con lineas divisorias de fondo. */
[data-fidebot-access] .access-code-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

[data-fidebot-access] .access-code-cell {
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0;
    font-family: "CS Clash Display", monospace;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--cs-navy, #0006a3);
    background-color: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(70, 3, 46, 0.18);
    caret-color: var(--cs-navy, #0006a3);
}

[data-fidebot-access] .access-code-cell:focus {
    outline: 2px solid var(--cs-navy, #0006a3);
    outline-offset: 2px;
}

[data-fidebot-access] .access-code-cell:read-only {
    opacity: 0.75;
}

.access-code-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 280px;
    margin-top: 4px;
}

.access-code-labels span {
    color: white;
    font-family: "CS Clash Display", sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
}

/* Fila del boton: centrado el solo (el engranaje va suelto, un poco mas
   abajo, no en esta misma fila). */
.cs-fidebot-action-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Segundo engranaje: abajo a la izquierda, un poco mas abajo de donde cae
   el boton. Posicion por defecto = fase 1; en fase 2 el JS agrega la
   clase cs-fidebot-station-gear-phase2 (override justo abajo). */
.cs-fidebot-station-gear-bottom {
    left: 40px;
    top: 83%;
    bottom: 88px;
    width: 60px;
    height: 60px;
}

.cs-fidebot-station-gear-bottom.cs-fidebot-station-gear-phase2 {
    left: auto;
    right: 95px;
    top: 92%;
}

.cs-fidebot-validate-button {
    width: auto;
    max-width: 220px;
    margin-top: 0;
    padding: 10px 22px;
    font-size: 22px;
}

/* Recapitulacion del codigo ya validado (fase 2) */
.code-recap {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.code-recap-tile {
    display: inline-grid;
    width: 60px;
    height: 60px;
    place-items: center;
    color: var(--cs-navy, #0006a3);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(70, 3, 46, 0.25);
    font-family: "CS Clash Display", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Tabla de descifrado: tarjeta amarilla con pastillas azules, 4 columnas
   (el mockup muestra los 16 simbolos en una sola cuadricula compacta). */
[data-fidebot-access] .decode-table {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 14px;
    background: var(--cs-yellow, #ffda00);
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 22px rgba(70, 3, 46, 0.2);
}

[data-fidebot-access] .decode-item {
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    background: var(--cs-navy, #0006a3);
    border: none;
}

[data-fidebot-access] .decode-item strong {
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 0.62rem;
}

[data-fidebot-access] .decode-item span {
    overflow: visible;
    color: #fff;
    font-size: 0.62rem;
    white-space: normal;
}

[data-fidebot-access] .final-phrase-input {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 4px auto 0;
    padding: 14px 18px;
    color: var(--cs-navy, #0006a3);
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(70, 3, 46, 0.18);
    font-weight: 700;
    text-align: left;
}

[data-fidebot-access] .final-phrase-input::placeholder {
    color: #9aa0c9;
    font-weight: 600;
    text-transform: none;
}

/* Tarjeta emergente de retroalimentacion (codigo/frase correcto o
   incorrecto), reemplaza los mensajes de texto plano de antes. Cubre toda
   la pantalla (position: fixed) para que se vea igual sin importar en que
   fase del reto aparezca. Una sola instancia reutilizada por JS para las
   4 combinaciones fase 1/2 x correcto/incorrecto. */
.cs-fidebot-feedback {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
}

.cs-fidebot-feedback[hidden] {
    display: none;
}

/* Fondo del modal: el mismo fondo con el que ya se ve el resto del reto
   (color + textura), no transparente, con una capa oscura encima. Se hornea
   aca en vez de dejar "ver a traves" del contenido de atras, porque el
   overlay es position:fixed (a pantalla completa) y el contenido del reto
   puede ser mas corto que el viewport. */
.cs-fidebot-feedback-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #d6127f;
    background-image:
        linear-gradient(rgba(20, 0, 20, 0.6), rgba(20, 0, 20, 0.6)),
        url("/assets/images/games/computacion/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Cada imagen ya trae todo compuesto (tarjeta, candado, robot Y texto);
   este div solo la centra y le pone encima una X que si funciona (la de
   la imagen es solo decorativa). Nada se arma con CSS. */
.cs-fidebot-feedback-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
}

.cs-fidebot-feedback-illustration {
    display: block;
    width: 100%;
    height: auto;
}

/* Circulo invisible superpuesto sobre la X ya dibujada en la imagen, para
   que se pueda cerrar tocando ahi mismo (la X del recurso es decorativa,
   no es un boton real). */
.cs-fidebot-feedback-close {
    position: absolute;
    top: 1%;
    right: 3%;
    z-index: 3;
    width: 11%;
    aspect-ratio: 1;
    max-width: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

/* El modal se reubica como hijo directo de <body> (ver app.js), fuera del
   [data-station-theme="cs-fidebot"] que trae el estilo redondo/navy del
   boton; por eso ese estilo se repite aca de forma explicita en vez de
   depender de ese selector (que ademas trae fondo, margen y padding propios
   que romperian el overlay a pantalla completa si se reutilizara tal cual). */
.cs-fidebot-feedback-action {
    position: relative;
    z-index: 1;
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--cs-navy, #0006a3), 0 14px 24px rgba(70, 3, 46, 0.3);
}

.cs-fidebot-feedback-action:hover {
    background: linear-gradient(180deg, #ffe454, var(--cs-yellow, #ffda00) 60%);
    box-shadow: 0 7px 0 var(--cs-navy, #0006a3), 0 16px 26px rgba(70, 3, 46, 0.34);
    transform: translateY(-1px);
}

.cs-fidebot-feedback-action:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--cs-navy, #0006a3), 0 6px 14px rgba(70, 3, 46, 0.26);
}

/* Pantalla "Mision cumplida" */
/* El PNG del confeti tiene un fondo negro opaco (no transparente de
   verdad) detras de cada pieza de color; sin mix-blend-mode ese negro se
   ve como una capa oscura tapando el rosado del tema. Con "screen" el
   negro no aporta nada (se vuelve invisible) y solo quedan los colores
   del confeti, brillando sobre el fondo. */
.cs-fidebot-confetti {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/assets/images/games/computacion/confeti.png") repeat top -20px center;
    background-size: 320px auto;
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
}

[data-station-theme="cs-fidebot"] .metric-grid {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

[data-station-theme="cs-fidebot"] .metric {
    color: var(--cs-navy-deep);
    background: #fff;
}

[data-station-theme="cs-fidebot"] .metric strong {
    color: var(--cs-pink);
}

[data-station-theme="cs-fidebot"] .closing-message {
    background: #fff;
    color: var(--cs-navy-deep);
    border-left: 6px solid var(--cs-yellow);
}

[data-station-theme="cs-fidebot"] .closing-message p {
    color: #454a7a;
}

[data-station-theme="cs-fidebot"] .action-row {
    justify-content: center;
}

[data-station-theme="cs-economia"] .action-row {
    position: relative;
    z-index: 2;
    justify-content: center;
}

/* =========================================================================
   Pantalla "Mision cumplida" (station_result.php).
   Engranajes con su propia clase base (cs-fidebot-result-gear),
   independiente de station.php y station_intro.php: un cambio aca no
   puede romper los engranajes de las otras dos pantallas, ni al reves.
   ========================================================================= */
.cs-fidebot-result-gear {
    position: absolute;
    z-index: 1;
    width: 48px;
    height: 48px;
    opacity: 0.85;
    background: url("/assets/images/games/computacion/icon-gear.svg") no-repeat center / contain;
    animation: cs-fidebot-result-gear-spin 14s linear infinite;
    pointer-events: none;
}

@keyframes cs-fidebot-result-gear-spin {
    to { transform: rotate(360deg); }
}

.cs-fidebot-result-gear-top {
    top: 32%;
    left: 16px;
}

.cs-fidebot-result-gear-bottom {
    right: 24px;
    bottom: 130px;
}

/* Globo superior: un poco mas chico que antes, con margen a los lados
   (no ocupa todo el ancho), y con un "pico" apuntando hacia abajo (hacia
   el robot), como un globo de dialogo real en vez de una tarjeta suelta. */
.cs-fidebot-result-bubble {
    position: relative;
    z-index: 2;
    margin: 26px 14px 0px;
    padding: 18px 18px;
    background: #fff;
    border-radius: 22px;
    text-align: left;
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.25));
}

.cs-fidebot-result-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 13px solid #fff;
}

/* La pildora del titulo aca va en UNA sola linea, centrada, angosta
   (no ocupa todo el ancho como en la pantalla de instrucciones). */
.cs-fidebot-result-title {
    display: table;
    width: auto;
    margin: 0 auto 14px;
}

.cs-fidebot-result-title .cs-fidebot-bubble-title-line1,
.cs-fidebot-result-title .cs-fidebot-bubble-title-line2 {
    display: inline;
}

.cs-fidebot-result-title .cs-fidebot-bubble-title-line2 {
    margin-left: 0.3em;
}

.cs-fidebot-result-bubble p {
    margin: 0;
    color: var(--cs-navy, #0006a3);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-family: "CS Cooper Hewitt", 'Cooper Hewitt', sans-serif;
}

/* Ilustracion: recurso final unico (robot + patron "ingenio" + tarjeta),
   ya compuesto por completo, solo se centra y se le da un tamano maximo. */
.cs-fidebot-result-illustration {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 28px auto 8px;
}

.cs-fidebot-result-artwork {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35));
}

@media (max-width: 360px) {
    /* El mockup siempre muestra 4 columnas, incluso en mobile; solo se
       encoge un poco mas en pantallas muy angostas. */
    [data-fidebot-access] .decode-item {
        font-size: 0.56rem;
    }

    .code-recap-tile {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* =========================================================================
   Pantalla "Detalle por estacion" (final.php), cuando la ultima estacion
   completada es la de Fidebot. Se deja solo el bloque de resultados +
   boton, con la misma estetica rosada del resto del reto. (Los engranajes
   giratorios que tenia esta pantalla se quitaron a pedido explicito: esta
   vista ya no lleva ese elemento decorativo.)
   ========================================================================= */
[data-station-theme="cs-fidebot"] .station-score-confetti {
    background-image: url("/assets/images/games/computacion/brillos-transparente.webp");
}

[data-station-theme="cs-fidebot"] .station-result-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 12px;
}

[data-station-theme="cs-fidebot"] .station-result-card {
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(70, 3, 46, 0.18);
}

[data-station-theme="cs-fidebot"] .station-result-content h3 {
    color: var(--cs-navy-deep);
}

[data-station-theme="cs-fidebot"] .station-result-badge {
    background: var(--cs-pink);
    border: none;
    color: #fff;
}

[data-station-theme="cs-fidebot"] .station-result-bar {
    background: rgba(0, 0, 0, 0.08);
}

[data-station-theme="cs-fidebot"] .station-result-bar span {
    background: var(--cs-pink);
}

[data-station-theme="cs-fidebot"] .station-result-stats {
    color: #454a7a;
}

[data-station-theme="cs-fidebot"] .station-result-stats strong {
    color: var(--cs-navy-deep);
}

/* ===========================================================================
   Estacion 2 - Ciencias Economicas ("La oficina de los Fidebotcitos")
   Tema visual exclusivo de esta estacion. Todo va scoped a
   [data-station-theme="cs-economia"] (paginas: instrucciones, reto) y a
   [data-hidden-objects] (el propio formulario del reto). Mismo patron que
   cs-fidebot pero con la paleta invertida (fondo azul marino, tarjetas
   blancas, iconos propios): no comparte clases con cs-fidebot para que un
   cambio en un tema nunca rompa el otro.
   =========================================================================== */

[data-station-theme="cs-economia"] {
    --ce-navy: #0006a3;
    --ce-navy-deep: #000a8c;
    --ce-pink: #e31d93;
    --ce-cyan: #35c8ff;
    /* Unidad compartida para la fila de la ecuacion final: la imagen de
       arriba (las 4 ecuaciones) se exporto al triple de resolucion y se
       muestra a width:100% de un contenedor a pantalla completa, asi que
       978px de esa imagen equivalen a 100vw en pantalla. Los elementos de
       la fila final (imagen de operandos + input) se miden en multiplos de
       esta MISMA unidad en vez de un tamano fijo aparte, para que SIEMPRE
       queden alineados y a la misma escala que los iconos de arriba, sin
       importar el ancho de pantalla ni si se ajusta uno de los dos por
       separado. */
    --eco-unit: calc(100vw / 978);
    /* Espacio lateral compartido de TODA la pantalla (timer, barra de
       progreso, tarjetas, etc.): mismo valor que usa cs-fidebot, para que
       las tarjetas/cajas midan igual en ambos juegos. Se redujo a 10px en
       un momento para agrandar la foto de la fase 2 de "buscar
       Fidebotcitos", pero eso ENSANCHO de rebote TODAS las demas pantallas
       de este tema (resultado, reto cumplido, detalle final). La version
       reducida ahora se redefine SOLO dentro de esa pantalla especifica
       (ver el bloque :has(...) mas abajo), no aca a nivel general. */
    --ce-side-inset: clamp(16px, 5vw, 40px);
    position: relative;
    display: grid;
    gap: 8px;
    margin: -14px calc(50% - 50vw) -24px;
    padding: 56px var(--ce-side-inset) 64px;
    background-color: #000a8c;
    background-image: url("/assets/images/games/economia/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: "CS Cooper Hewitt", Arial, system-ui, sans-serif;
    overflow: hidden;
    /* Mismo fix que cs-fidebot: sin min-height, en pantallas cortas se
       alcanzaba a ver el azul marino generico del sitio por debajo del azul
       propio de este tema (se nota menos por ser el mismo tono, pero el
       corte seco en el borde inferior si se ve). */
    min-height: 100vh;
    min-height: 100dvh;
}

/* --eco-unit se definio arriba como 100vw/978 porque en movil el
   contenedor de este tema ES el ancho completo del viewport (full-bleed
   real, ver margin:-14px calc(50%-50vw) mas arriba). Pero desde
   min-width:640px, los HIJOS directos de este contenedor (.cs-economia-panel
   y el resto) quedan topeados a 520px reales por la regla general de la
   cabecera del archivo, mientras el viewport puede seguir siendo mucho mas
   ancho (un monitor de escritorio) -- eso hacia que --eco-unit siguiera
   creciendo con el viewport aunque el contenido ya no tuviera ese espacio,
   y la fila final de la ecuacion (imagen + input, medidas en multiplos de
   --eco-unit) se saliera del formulario con scroll horizontal/vertical.
   Esta regla va DESPUES de la definicion original (misma especificidad,
   gana por orden de cascada) y la redefine atada al mismo 520px fijo que
   van a tener los hijos de arriba en cualquier pantalla desde este
   breakpoint hacia arriba. */
@media (min-width: 640px) {
    [data-station-theme="cs-economia"] {
        --eco-unit: calc(520px / 978);
    }
}

[data-station-theme="cs-economia"] .page-heading,
[data-station-theme="cs-economia"] .station-head {
    position: relative;
    z-index: 2;
}

[data-station-theme="cs-economia"] h1,
[data-station-theme="cs-economia"] .station-title,
[data-station-theme="cs-economia"] h2 {
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-weight: bold;
    color: #fff;
}

[data-station-theme="cs-economia"] .station-title .station-order {
    color: var(--ce-cyan);
}

[data-station-theme="cs-economia"] .muted {
    color: rgba(255, 255, 255, 0.9);
}

/* El encabezado real de la estacion (h1) se mantiene en el DOM mismo motivo
   que en cs-fidebot: el mockup no lo muestra en estas pantallas, pero se
   conserva para lectores de pantalla / SEO. */
[data-station-theme="cs-economia"] .cs-economia-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El formulario del reto no lleva tarjeta propia: sus hijos llevan su
   propio fondo (mismo criterio que cs-fidebot-panel). El padding horizontal
   del tema (clamp(20px,0vw,40px), o sea 20px fijo con el ajuste manual que
   se le hizo) NO debe afectar a este formulario: se cancela con margenes
   negativos del MISMO valor exacto (antes decia clamp(16px,5vw,40px), que
   ya no coincidia con el padding real del tema y dejaba una franja de unos
   px de mas o de menos segun el ancho de pantalla), para que su contenido
   (la imagen de ecuaciones) pueda llegar a la orilla real sin depender de
   trucos de vw. Los demas elementos de adentro (boton, input, texto) siguen
   centrados con su propio margin:auto, asi que no necesitan ese padding. */
[data-station-theme="cs-economia"] .challenge-form.cs-economia-panel {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: calc(-1 * var(--ce-side-inset));
    margin-right: calc(-1 * var(--ce-side-inset));
}

/* Boton identico al de Juego 1 (misma forma/tipografia/sombra "presionable"),
   solo cambia el color de la sombra inferior (navy propio de este tema, que
   es el mismo tono en ambos juegos de todas formas). */
[data-station-theme="cs-economia"] .button-primary {
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--ce-navy), 0 14px 24px rgba(0, 3, 40, 0.3);
}

[data-station-theme="cs-economia"] .button-primary:hover {
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    box-shadow: 0 7px 0 var(--ce-navy), 0 16px 26px rgba(0, 3, 40, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-economia"] .button-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--ce-navy), 0 6px 14px rgba(0, 3, 40, 0.26);
}

/* Fila superior: robot en su tarjeta + globo de texto (misma estructura que
   cs-fidebot-lead, la imagen del badge ya trae compuestos el fondo azul
   redondeado y los iconos sueltos alrededor). */
.cs-economia-lead {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-economia-mascot-badge {
    flex-shrink: 0;
    width: clamp(122px, 40vw, 168px);
    filter: drop-shadow(0 10px 16px rgba(0, 3, 40, 0.35));
}

.cs-economia-mascot-badge img {
    display: block;
    width: 100%;
    height: auto;
}

/* Globo rosado (#E31D93, color exacto pedido), mismo patron que
   cs-fidebot-bubble (rectangulo redondeado + colita triangular hecha con
   borders, en vez de estirar un SVG), pero con la paleta invertida: aca el
   globo es rosado y adentro lleva la misma pildora navy de dos lineas que
   usa Juego 1. */
.cs-economia-bubble {
    position: relative;
    flex: 1 1 auto;
    padding: 14px 12px 18px;
    background: var(--ce-pink);
    border-radius: 20px;
    filter: drop-shadow(0 10px 16px rgba(0, 3, 40, 0.3));
}

.cs-economia-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 13px solid var(--ce-pink);
}

/* Pildora navy de dos lineas (identica en estructura a cs-fidebot-bubble-title):
   linea 1 blanca ("¡Bienvenidos a"), linea 2 amarilla ("mi oficina de
   Fidebotcitos!"). */
.cs-economia-bubble-title {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 16px;
    background: var(--ce-navy);
    border-radius: 10px;
    font-family: "CS Clash Display", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 14pt;
}

.cs-economia-bubble-title-line1,
.cs-economia-bubble-title-line2 {
    display: block;
}

.cs-economia-bubble-title-line1 {
    color: #fff;
}

.cs-economia-bubble-title-line2 {
    color: #ffda00;
}

.cs-economia-bubble p {
    margin: 4px 0 0 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 13pt;
    letter-spacing: -0.022em;
    font-family: "CS Cooper Hewitt";
}

/* Tarjeta blanca de instrucciones, mismo patron que cs-fidebot-instructions-card.
   Mas padding interno (arriba/lados/abajo) que la primera version: se veia
   muy apretado, el texto casi tocaba los bordes de la tarjeta. */
.cs-economia-instructions-card {
    position: relative;
    z-index: 2;
    margin-top: 46px;
    padding: 46px clamp(40px, 7vw, 44px) 34px;
    background: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0 16px 34px rgba(0, 3, 40, 0.4);
    text-align: center;
}

/* Mismo triangulo de advertencia del Juego 1 (icono compartido, no uno
   nuevo): se mantiene igual en todas las estaciones. */
.cs-economia-icon-warning-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 100px;
    height: 130px;
    background: url("/assets/images/games/computacion/icon-warning.svg") no-repeat center / contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transform: translateX(-50%);
}

.cs-economia-instructions-card h2 {
    margin: 6px 0 16px;
    color: var(--ce-navy);
    font-size: 30px;
    line-height: 34pt;
    font-family: "CS Clash Display";
}

.cs-economia-instructions-card .muted {
    color: #454a7a;
}

/* Lista de instrucciones como imagen (texto vectorizado exacto del
   mockup), mismo criterio que cs-fidebot-steps-img. Max-width mas chico
   para que quede mas aire entre el texto y el borde de la tarjeta. */
.cs-economia-steps-img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 20px;
}

.cs-economia-start-button {
    display: flex;
    width: min(340px, 90%);
    min-height: 52px;
    margin: 4px auto 0;
    font-size: 22px;
}

/* Puntitos de paginacion decorativos (mismo criterio que cs-fidebot-dots). */
.cs-economia-dots {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.cs-economia-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}

.cs-economia-dot-active {
    width: 30px;
    background: #fff;
}

/* Pantalla de reto (station.php): igual que cs-fidebot-head, timer grande
   ocupando casi todo el ancho, sin el nombre de la estacion visible. */
[data-station-theme="cs-economia"] .cs-economia-head {
    display: block;
    margin-top: 26px;
    
}

.cs-economia-timer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1px;
}

.cs-economia-timer-value {
    font-size: 2rem;
}

/* Barra de progreso, mismo patron que cs-fidebot-progress (pista blanca +
   linea que se encoge + manija circular), aca con el circulo en rosado
   para diferenciarse visualmente del azul del propio fondo. */
.cs-economia-progress {
    position: relative;
    z-index: 2;
    height: 16px;
    margin: 4px 0px 20px;
}

.cs-economia-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
}

.cs-economia-progress::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: calc(100% - 20px);
    height: 3px;
    background: #0006a3;
    border-radius: 999px;
    transform: translateY(-50%);
    animation: cs-economia-progress-line var(--duration, 900s) linear forwards;
}

@keyframes cs-economia-progress-line {
    from { width: calc(100% - 20px); }
    to { width: 0; }
}

.cs-economia-progress-fill {
    display: none;
}

.cs-economia-progress-thumb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: #0006a3;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff inset, 0 1px 3px rgba(0, 3, 40, 0.4);
    transform: translateY(-50%);
    animation: cs-economia-progress-thumb var(--duration, 900s) linear forwards;
}

@keyframes cs-economia-progress-thumb {
    from { left: 100%; }
    to { left: 0%; }
}

/* =========================================================================
   Reto (hidden_objects.php, fase 1): las 4 ecuaciones + el globo + el robot
   con lupa vienen todos horneados en UNA sola imagen por variante (recurso
   final de Illustrator, una por estacion 201/202/203). No se arma nada de
   esto con HTML/CSS: solo se coloca la imagen completa. Lo unico dinamico
   es la caja de la ecuacion final, donde el equipo escribe el numero.
   ========================================================================= */
.cs-economia-eq-full-img {
    /* Ahora que .cs-economia-panel (el formulario, su padre) ya cancelo el
       padding horizontal del tema y llega de orilla a orilla, esta imagen
       solo necesita ocupar el 100% de ESE contenedor (ya de por si a
       pantalla completa) para que el robot quede pegado al borde real. Sin
       trucos de vw ni ajustes manuales de left/width: si esto se toca,
       978px deja de equivaler a 100vw y la fila final (mas abajo, que usa
       esa MISMA equivalencia via --eco-unit) se desalinea. */
    position: relative;
    z-index: 2;
    display: block;
    width: 90%;
    height: auto;
    margin: 0 0 6px;
    left: 45px;
}

.cs-economia-eq-final-label {
    position: relative;
    z-index: 2;
    margin: 0 0 8px;
    color: #fff;
    font-family: "CS Clash Display", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

/* Fila final: los operandos (icono + operador + icono...) vienen en una
   imagen chica exportada al MISMO zoom/escala que la imagen de arriba (3x),
   sin caja ni borde alrededor (directo sobre el fondo azul, igual que el
   mockup); solo la caja del resultado es real (input). Tanto la imagen como
   el input se miden en multiplos de --eco-unit (definida en el contenedor
   del tema) en vez de px/% sueltos: asi quedan SIEMPRE a la misma escala
   que los iconos de la imagen de arriba, sin im portar el ancho de pantalla,
   y sin que ajustar uno rompa la alineacion del otro. */
.cs-economia-eq-row-final {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(14 * var(--eco-unit));
    margin: 0 auto;
}

.cs-economia-eq-final-img {
    display: block;
    /* Recortada a 578px de ancho x 108px de alto, al mismo zoom 3x que la
       imagen de arriba (978px de ancho): mismo criterio, distinto tamano. */
    width: calc(535 * var(--eco-unit));
    height: auto;
}

/* La caja del resultado ES el input real donde el equipo escribe el
   numero. Alto = mismo alto de fila que trae la imagen de operandos (108px
   a este mismo zoom), para que quede exactamente a la misma altura/escala,
   sin importar el tamano de pantalla. */
.cs-economia-eq-answer-input {
    margin-left: 15px;
    width: calc(150 * var(--eco-unit));
    height: calc(108 * var(--eco-unit));
    padding: 0 calc(6 * var(--eco-unit));
    background: #fff;
    border: none;
    border-radius: calc(10 * var(--eco-unit));
    box-shadow: 0 4px 10px rgba(0, 3, 40, 0.2);
    color: var(--ce-navy);
    font-family: "CS Clash Display", sans-serif;
    font-size: calc(46 * var(--eco-unit));
    font-weight: 700;
    text-align: center;
}

.cs-economia-eq-answer-input::placeholder {
    color: #9aa0c9;
}

.cs-economia-validate-button {
    position: relative;
    z-index: 2;
    display: flex;
    width: auto;
    max-width: 240px;
    margin: 14px auto 0;
    padding: 10px 22px;
    font-size: 22px;
}

.cs-economia-answer-feedback {
    position: relative;
    z-index: 2;
    margin: 10px auto 0;
    padding: 10px 16px;
    max-width: 320px;
    color: var(--ce-navy);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 3, 40, 0.2);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.cs-economia-answer-feedback:empty {
    display: none;
}

/* =========================================================================
   Tarjeta emergente de retroalimentacion del numero clave (correcto /
   incorrecto), mismo patron que .cs-fidebot-feedback*: cada imagen ya trae
   la tarjeta + candado + robot + texto compuestos, aca solo se centra y se
   le agrega la X (invisible, superpuesta sobre la ya dibujada en la imagen)
   y el boton de accion (dinamico, cambia de texto/comportamiento segun el
   estado). El modal se reubica como hijo directo de <body> (ver app.js),
   por eso el boton repite sus estilos en vez de depender de
   [data-station-theme="cs-economia"] .button-primary. */
.cs-economia-feedback {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
}

.cs-economia-feedback[hidden] {
    display: none;
}

/* Fondo del modal: mismo criterio que cs-fidebot-feedback-backdrop (color +
   textura del propio tema, no transparente, con capa oscura encima), asi se
   ve igual sin importar en que tan corto sea el contenido del reto detras. */
.cs-economia-feedback-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000a8c;
    background-image:
        linear-gradient(rgba(0, 0, 20, 0.55), rgba(0, 0, 20, 0.55)),
        url("/assets/images/games/economia/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: none;
    padding: 0;
    cursor: pointer;
}

.cs-economia-feedback-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
}

.cs-economia-feedback-illustration {
    display: block;
    width: 100%;
    height: auto;
}

/* Circulo invisible sobre la X ya dibujada en la imagen (la de la imagen es
   decorativa, esta es la que realmente cierra el popup). */
.cs-economia-feedback-close {
    position: absolute;
    top: 1%;
    right: 2%;
    z-index: 3;
    width: 9%;
    aspect-ratio: 1;
    max-width: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.cs-economia-feedback-action {
    position: relative;
    z-index: 1;
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 #0006a3, 0 14px 24px rgba(0, 3, 40, 0.3);
}

.cs-economia-feedback-action:hover {
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    box-shadow: 0 7px 0 #0006a3, 0 16px 26px rgba(0, 3, 40, 0.34);
    transform: translateY(-1px);
}

.cs-economia-feedback-action:active:not(:disabled) {
    box-shadow: 0 2px 0 #0006a3, 0 6px 14px rgba(0, 3, 40, 0.26);
}

/* =========================================================================
   Reto (hidden_objects.php, fase 2): "Busca los Fidebotcitos en la
   oficina". El fondo es la foto VACIA (sin bots). Cada Fidebotcito es una
   foto individual aparte, con su propio tamano/proporcion (ya trae su
   pedacito de fondo recortado para calzar exacto en su escondite), asi que
   aca NO se fuerza un width/aspect-ratio unico: el width/height de cada
   boton viene por style inline (calculado por Fidebotcito en
   hidden_objects.php a partir de bot_positions). Al tocarlo, se usa el
   mismo fundido+escala genericos de .office-bot.is-found (ver arriba) para
   que el Fidebotcito desaparezca y se vea el fondo vacio debajo.
   ========================================================================= */
.cs-economia-office-scene {
    /* La foto es vertical (mas alta que ancha), al contrario del
       740/493 horizontal generico de .office-scene. */
    aspect-ratio: 1437 / 2600;
    /* Se probo que la foto SIEMPRE quepa en pantalla sin scroll (encogida
       segun el alto disponible), pero a los Fidebotcitos mas pequenos
       (ej. bot-5) practicamente no se les podia ni ver ni tocar. Se
       prefiere una foto grande y USABLE, mostrada por ANCHO (como la
       imagen de ecuaciones) y dejar que esta seccion haga scroll si hace
       falta (el .challenge-form ya soporta scroll interno para cualquier
       otro reto, esto no es nada nuevo). El mismo espacio a los lados que
       usa el timer/barra de arriba (--ce-side-inset).
       IMPORTANTE: width FIJO (calc), no "auto". Este elemento es un grid
       item con aspect-ratio y SOLO contiene hijos position:absolute (los
       bots), que no le dan tamano de vuelta a la caja. Con "width:auto" el
       navegador lo colapsaba a practicamente 0 en vez de estirarlo (bug de
       stretch+aspect-ratio en grid), y solo se veia un bot flotando sin
       fondo. Con un ancho fijo esto no puede pasar. */
    width: calc(100% - 2 * var(--ce-side-inset));
    margin: 0 auto;
}

/* Pedido especifico: SOLO en esta pantalla (fase 2, buscar Fidebotcitos)
   el margen superior/inferior del tema cambia de -14px/-24px a
   -65px/-24px (sube todo el bloque para acomodar mejor esta foto en
   particular). El resto de pantallas de este tema (instrucciones, fase 1
   de ecuaciones, reto cumplido, detalle final) NO se tocan: se
   condiciona con :has() a que la fase 2 este visible ahora mismo. */
[data-station-theme="cs-economia"]:has(.hidden-objects-challenge > [data-hidden-objects-phase-two]:not([hidden])) {
    margin: -65px calc(50% - 50vw) -24px;
}

.cs-economia-office-bot {
    aspect-ratio: auto;
    background: transparent;
    filter: none;
}

.cs-economia-office-bot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Contador superpuesto sobre la propia foto (esquina inferior izquierda),
   segun el mockup: UNA sola barra rosada (poco redondeada, no en forma de
   pastilla) con el texto en blanco, y el numero en una pequena burbuja
   blanca con letras azul marino superpuesta al borde izquierdo de la
   barra. Antes eran 2 pastillas sueltas con separacion (se veian muy
   redondas y con un salto de color raro); ahora es una sola barra. */
.cs-economia-office-counter {
    /* Ya no va superpuesto sobre la foto (se llegaba a tapar con
       Fidebotcitos cerca de la orilla inferior, ej. bot-6): ahora es un
       elemento normal debajo de la foto, centrado, con su alto natural
       (no crece con flex, para no robarle espacio a la foto). La caja del
       numero va SUELTA, fuera de la caja rosada (antes iba superpuesta
       adentro/encima de ella). fidebot-phase es display:grid (no flex),
       asi que el centrado horizontal real lo da justify-self (align-self
       centraria en el otro eje). */
    flex: 0 0 auto;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
    margin-top: -45px;
    margin-bottom: 5px;
}

.cs-economia-office-counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 32px;
    padding: 0 8px;
    background: #fff;
    color: var(--ce-navy);
    font-family: "CS Clash Display", sans-serif;
    font-weight: 950;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 3, 40, 0.3);
}

.cs-economia-office-counter-label {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--ce-pink);
    color: #fff;
    font-weight: 750;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 3, 40, 0.3);
    white-space: nowrap;
}

/* =========================================================================
   Pantalla "Reto cumplido" (station_result.php) del Juego 2. A diferencia
   de cs-fidebot (donde la burbuja de texto es HTML aparte + una imagen
   solo de la ilustracion), aca mercadeo entrego UN solo recurso que ya
   trae TODO horneado (globo blanco con el titulo+mensaje, robot
   celebrando, patron "ingenio", iconos): por eso no hay .cs-economia-
   result-bubble por separado, solo se coloca la imagen completa.
   ========================================================================= */
.cs-economia-result-illustration {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto 8px;
}

/* =========================================================================
   Sistema visual del panel ADMIN, alineado con el mismo lenguaje visual
   del juego (variables de :root, tipografia "CS Clash Display"/"CS Cooper
   Hewitt", botones/paneles ya existentes). TODO en este bloque va scoped
   bajo body[data-admin-theme] (ver app/Views/layout.php: $isAdminArea) para
   no tocar ni una sola pantalla del juego -- las clases base (.panel,
   .button, table, .metric, .admin-tabs, etc.) siguen intactas para el
   juego; aca solo se agregan variantes que aplican unicamente dentro del
   admin. No se elimino ni renombro ningun atributo data-* usado por
   assets/js/app.js (data-admin-live, data-team-details, data-qr-download,
   data-download-badge, etc.), solo se agregaron clases de estilo.
   ========================================================================= */

/* Nota de historial: se probo primero un retone completo a teal/cian: se
   sentia desconectado del resto ("estilos 2000", pildoras/badges muy
   "glossy"). Se volvio a los MISMOS tonos navy+amarillo del juego (cero
   variables redefinidas: el admin ahora simplemente hereda :root tal cual)
   y se aplano la ejecucion visual: sin gradientes en pildoras, sin cajas
   con fondo/borde alrededor de las pestañas, sin franjas de color en las
   tarjetas de metricas. Solo texto, espaciado y un acento de color puntual
   (subrayado/borde), que es lo que de verdad lee como "limpio". */

/* Ronda 2 (pedido explicito: "ya dejamos atras esta estetica... que no se
   vea tan aparte de los juegos"): el admin deja de verse como un dashboard
   generico oscuro y reutiliza el mismo lenguaje visual que /registro y las
   pantallas de juego -- fondo navy con la MISMA textura de fondo-textura.jpg
   (rotada 90° a horizontal, ver assets/images/admin/fondo-textura-horizontal.jpg,
   pedido explicito porque el original es vertical/retrato) y tarjetas
   blancas con acento rosa en vez de cajas gris oscuro. Los botones SI se
   tocan mas abajo (pedido explicito posterior: el bisel/degradado tipo
   "boton de juego" se sentia muy 2000 sobre las tarjetas blancas del
   admin). Se excluye
   a proposito /ranking (leaderboard/index.php) y /pantalla
   (leaderboard/screen.php), que ya tienen su propio rediseño rosa
   "ranking-final-*" y no usan body[data-admin-theme]. */
body[data-admin-theme] {
    --admin-navy: #0006a3;
    --admin-navy-deep: #000a8c;
    --admin-pink: #e8127f;
    /* --admin-navy/--admin-navy-deep se dejan intactos (los usa el texto y
       los acentos dentro de las tarjetas blancas). El FONDO de pagina pasa
       a un azul bastante mas claro/desaturado (pedido explicito: "todo se
       ve muy azul") -- las tarjetas blancas resaltan mas y el navy deja de
       dominar el espacio entre ellas. El texto blanco que vive fuera de las
       tarjetas (titulos, pestañas, "Top actual", etc.) sigue teniendo
       contraste de sobra porque este tono todavia es medio-oscuro. */
    background-color: #3b4c8c;
    background-image:
        linear-gradient(rgba(83, 102, 176, 0.5), rgba(59, 76, 140, 0.68)),
        url("/assets/images/admin/fondo-textura-horizontal.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Chips "Administración"/"Panel administrativo" en rosa (antes amarillo). */
body[data-admin-theme] .eyebrow,
body[data-admin-theme] .card-kicker {
    color: #fff;
    background: var(--admin-pink);
}

body[data-admin-theme] .live-status strong {
    color: var(--admin-pink);
}

/* Tarjeta blanca base: casi TODO el contenido de admin (metricas, tablas,
   ranking, login, zona critica) usa la clase .panel como envoltorio, asi
   que este solo bloque cubre la mayor parte de la superficie visual. */
body[data-admin-theme] .panel {
    background: #fff;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 3, 40, 0.18);
    color: var(--admin-navy);
}

body[data-admin-theme] .panel h2,
body[data-admin-theme] .panel h3 {
    color: var(--admin-navy);
}

body[data-admin-theme] .panel .muted,
body[data-admin-theme] .panel > p {
    color: #5a5fa8;
}

body[data-admin-theme] .panel .field span {
    color: rgba(0, 6, 163, 0.6);
}

body[data-admin-theme] .panel input {
    color: var(--admin-navy);
    background: #f4f5ff;
    border-color: rgba(0, 6, 163, 0.22);
}

body[data-admin-theme] .panel input::placeholder {
    color: rgba(0, 6, 163, 0.35);
}

body[data-admin-theme] .panel input:focus {
    border-color: var(--admin-pink);
    outline-color: rgba(232, 18, 127, 0.2);
}

/* Encabezados mas discretos (antes rosa fuerte + mayusculas pesadas, se
   sentia recargado): gris-navy apagado, letras espaciadas, un poco mas
   chicas. El color pasa a ser un acento (botones/pills), no el texto de
   cada columna. */
body[data-admin-theme] .panel th {
    padding-top: 12px;
    padding-bottom: 14px;
    color: rgba(0, 6, 163, 0.48);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    border-bottom: 2px solid rgba(0, 6, 163, 0.1);
}

body[data-admin-theme] .panel td {
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom-color: rgba(0, 6, 163, 0.07);
}

body[data-admin-theme] .panel tr:hover td {
    background: rgba(0, 6, 163, 0.035);
}

body[data-admin-theme] .panel code {
    color: var(--admin-pink);
    background: rgba(0, 6, 163, 0.06);
    border-color: rgba(0, 6, 163, 0.15);
}

/* Formulario compacto para restablecer contraseña dentro de una celda de
   tabla (admin/users.php): dos campos angostos + boton, en fila, sin que
   se rompa el alto de la fila. */
body[data-admin-theme] .inline-password-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

body[data-admin-theme] .inline-password-form input {
    width: 132px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 6, 163, 0.16);
    font-size: 0.82rem;
}

body[data-admin-theme] .inline-password-form input:focus {
    outline: none;
    border-color: var(--admin-navy);
    box-shadow: 0 0 0 3px rgba(0, 6, 163, 0.12);
}

/* Botones planos para el admin: se quita el degradado/bisel 3D de los
   botones de juego (pensados para pantallas oscuras y una experiencia
   arcade) y se cambia por sombra suave + estados simples, que se ve mas
   limpio sobre las tarjetas blancas del panel. */
body[data-admin-theme] .button {
    min-height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 750;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(0, 3, 40, 0.1);
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body[data-admin-theme] .button.compact {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.85rem;
}

body[data-admin-theme] .button:active:not(:disabled) {
    transform: translateY(1px);
}

body[data-admin-theme] .button-primary {
    color: #fff;
    background: var(--admin-navy);
    border-color: var(--admin-navy);
    box-shadow: 0 2px 6px rgba(0, 6, 163, 0.26);
}

body[data-admin-theme] .button-primary:hover {
    background: #0007c9;
}

body[data-admin-theme] .button-primary:active:not(:disabled) {
    box-shadow: 0 1px 3px rgba(0, 6, 163, 0.26);
}

body[data-admin-theme] .button-secondary {
    color: var(--admin-navy);
    background: #fff;
    border-color: rgba(0, 6, 163, 0.22);
    box-shadow: none;
}

body[data-admin-theme] .button-secondary:hover {
    background: rgba(0, 6, 163, 0.06);
    border-color: var(--admin-navy);
}

body[data-admin-theme] .button-secondary:active:not(:disabled) {
    box-shadow: none;
}

body[data-admin-theme] .button-danger {
    color: #fff;
    background: var(--admin-pink);
    border-color: var(--admin-pink);
    box-shadow: 0 2px 6px rgba(232, 18, 127, 0.26);
}

body[data-admin-theme] .button-danger:hover {
    background: #c60e6c;
    filter: none;
}

body[data-admin-theme] .button-danger:active:not(:disabled) {
    box-shadow: 0 1px 3px rgba(232, 18, 127, 0.26);
}

body[data-admin-theme] .button:disabled {
    box-shadow: none;
}

/* Metricas: mosaicos con tinte navy suave dentro de la tarjeta blanca. */
body[data-admin-theme] .metric {
    background: rgba(0, 6, 163, 0.05);
    border-color: rgba(0, 6, 163, 0.12);
}

body[data-admin-theme] .metric span {
    color: var(--admin-navy);
    opacity: 0.72;
}

body[data-admin-theme] .metric strong {
    color: var(--admin-pink);
}

/* Podio "Top actual" (fuera de .panel, flota sobre el fondo navy): mismas
   tarjetas blancas que el resto, acento rosa en el puntaje. */
body[data-admin-theme] .podium-slot {
    background: #fff;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 3, 40, 0.18);
    color: var(--admin-navy);
}

body[data-admin-theme] .podium-slot-1 {
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(0, 3, 40, 0.26);
}

body[data-admin-theme] .podium-slot-rank {
    background: #fff;
    border-color: rgba(0, 6, 163, 0.18);
    color: var(--admin-navy);
}

body[data-admin-theme] .podium-slot-school {
    color: rgba(0, 6, 163, 0.55);
}

body[data-admin-theme] .podium-slot-score {
    color: var(--admin-pink);
}

/* Filas de ranking dentro de rank-list-panel (ya blanco via .panel): cada
   fila queda como mosaico navy suave, igual que .metric. */
body[data-admin-theme] .rank-row {
    background: rgba(0, 6, 163, 0.05);
    border-color: rgba(0, 6, 163, 0.12);
    color: var(--admin-navy);
}

body[data-admin-theme] .rank-row-info span {
    color: rgba(0, 6, 163, 0.6);
}

body[data-admin-theme] .rank-row-stats strong {
    color: var(--admin-pink);
}

body[data-admin-theme] .rank-number {
    background: rgba(0, 6, 163, 0.08);
    border-color: rgba(0, 6, 163, 0.2);
    color: var(--admin-navy);
}

/* Zona critica: tarjeta blanca con borde rosa, ya no caja rojo oscuro. */
body[data-admin-theme] .danger-zone {
    background: #fff;
    border: 2px solid rgba(218, 61, 150, 0.4);
}

/* Panel de badges de ganadores (admin/ranking.php): no usa .panel, se
   convierte aparte con el mismo criterio. */
body[data-admin-theme] .winner-badge-panel {
    background: #fff;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 3, 40, 0.18);
}

body[data-admin-theme] .winner-badge-panel h2 {
    color: var(--admin-navy);
}

body[data-admin-theme] .winner-badge-panel p {
    color: #5a5fa8;
}

body[data-admin-theme] .badge-medal-preview {
    background: rgba(0, 6, 163, 0.05);
    border-color: rgba(0, 6, 163, 0.12);
}

/* Tarjeta de login (mission-card, fuera de .panel): tinte navy translucido
   consistente con el nuevo fondo en vez del gris oscuro generico. */
body[data-admin-theme] .mission-card {
    background: rgba(0, 6, 163, 0.4);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Pildoras de estado: el amarillo de warning no se lee sobre fondo blanco;
   se reusa --accent-dark (mismo tono, mas oscuro) para mantener contraste. */
body[data-admin-theme] .admin-pill-warning {
    color: var(--accent-dark);
    background: rgba(201, 153, 0, 0.16);
}

body[data-admin-theme] .admin-pill-muted {
    color: #5a5fa8;
    background: rgba(0, 6, 163, 0.08);
}

/* Insignia junto al logo en el topbar: texto simple, sin capsula. */
.admin-topbar-badge {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-family: "CS Clash Display", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .admin-topbar-badge {
        display: none;
    }
}

/* Barra de pestañas: enlaces simples con un subrayado de acento al pasar el
   mouse, sin caja contenedora. */
body[data-admin-theme] .admin-tabs {
    gap: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

body[data-admin-theme] .admin-tabs a {
    padding: 0 2px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

body[data-admin-theme] .admin-tabs a:hover {
    color: var(--text);
    background: none;
    border-bottom-color: var(--admin-pink);
}

/* Pildoras de estado: texto de color sobre fondo tenue, sin gradiente ni
   sombra -- un punto de color, no un "boton". Se usan para Activa/Inactiva,
   Activo/Inactivo, ACTIVE/FINISHED/CANCELLED, IN_PROGRESS/COMPLETED/
   TIMED_OUT. Aparte de .status-pill (esa es del escaner del juego). */
.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 10px 0 8px;
    border-radius: 6px;
    font-family: "CS Cooper Hewitt", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
}

.admin-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.admin-pill-success {
    color: var(--success);
    background: rgba(52, 179, 109, 0.14);
}

.admin-pill-warning {
    color: var(--accent);
    background: rgba(255, 218, 0, 0.12);
}

.admin-pill-muted {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
}

.admin-pill-danger {
    color: var(--danger);
    background: rgba(218, 61, 150, 0.14);
}

/* Tablas del admin: cebra sutil + esquinas redondeadas consistentes con el
   .panel que las envuelve (table-panel ya recorta overflow-x, aca solo se
   agrega el redondeo visual del contenedor y la cebra de filas). */
body[data-admin-theme] .table-panel {
    padding: 0;
    margin-top: 20px;
}

body[data-admin-theme] .table-panel > h2,
body[data-admin-theme] .table-panel > p {
    padding: clamp(14px, 2.5vw, 22px) clamp(14px, 2.5vw, 22px) 0;
}

body[data-admin-theme] .table-panel table {
    margin-top: 4px;
}

body[data-admin-theme] .table-panel thead th:first-child,
body[data-admin-theme] .table-panel tbody td:first-child {
    padding-left: clamp(14px, 2.5vw, 22px);
}

body[data-admin-theme] .table-panel thead th:last-child,
body[data-admin-theme] .table-panel tbody td:last-child {
    padding-right: clamp(14px, 2.5vw, 22px);
}

/* Cebra simple par/impar. En teams_table.php cada equipo tiene una fila
   visible + una fila de detalle oculta (hidden) que igual cuenta para el
   conteo de nth-child; el resultado ahi es que las filas visibles caen
   siempre en posicion impar (sin sombreado) -- no se ve mal, simplemente
   esa tabla no tiene cebra, sin romper nada. En el resto de tablas
   (resultados, grupos, estaciones, QR) sí alterna fila por fila. */
body[data-admin-theme] tbody tr:nth-child(even):not(:hover) td {
    background: rgba(0, 6, 163, 0.035);
}

/* Fila expandible de detalle de integrantes (teams.php): que se note que
   es contenido "anidado" del equipo de arriba. */
body[data-admin-theme] .team-details-row td {
    background: rgba(0, 6, 163, 0.05);
}

/* Login: layout de dos columnas reutilizando .mission-card/.mission-stat
   (los mismos componentes del hero de /registro) para que se sienta como
   parte del mismo sistema, sin duplicar CSS de tarjeta. */
.admin-login-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 760px) {
    .admin-login-grid {
        grid-template-columns: 1fr;
    }

    .admin-login-grid .mission-card {
        position: static;
    }
}

.admin-login-grid .panel.narrow {
    margin: 0;
}

.cs-economia-result-artwork {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35));
}

/* =========================================================================
   Pantalla "Detalle por estacion" (final.php), cuando la ultima estacion
   completada es la de economia. Mismo patron/estetica que el bloque
   [data-station-theme="cs-fidebot"] equivalente de arriba: se deja solo el
   bloque de resultados + boton, con la paleta propia de este tema (fondo
   azul marino, tarjetas blancas). Sin engranajes decorativos (se pidio
   quitarlos).
   ========================================================================= */

[data-station-theme="cs-economia"] .station-score-confetti {
    background-image: url("/assets/images/games/economia/brillos-transparente.webp");
}

[data-station-theme="cs-economia"] .station-result-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 12px;
}

[data-station-theme="cs-economia"] .station-result-card {
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(0, 3, 40, 0.18);
    gap: 5px;
}

[data-station-theme="cs-economia"] .station-result-content h3 {
    color: var(--ce-navy);
}

[data-station-theme="cs-economia"] .station-result-badge {
    background: var(--ce-pink);
    border: none;
    color: #fff;
}

[data-station-theme="cs-economia"] .station-result-bar {
    background: rgba(0, 0, 0, 0.08);
}

[data-station-theme="cs-economia"] .station-result-bar span {
    background: var(--ce-pink);
}

[data-station-theme="cs-economia"] .station-result-stats {
    color: #454a7a;
}

[data-station-theme="cs-economia"] .station-result-stats strong {
    color: var(--ce-navy);
}

/* =========================================================================
   Juego 3 (Ciencias Sociales / "Acceso bloqueado: alerta de desinformacion",
   challenge type misinformation_response). Mismo patron que cs-fidebot y
   cs-economia arriba: fondo con imagen propia, globo de robot con titulo de
   dos lineas, tarjeta blanca de instrucciones, puntitos de paginacion.
   Mercadeo solo entrego mockup de las primeras 2 pantallas (instrucciones y
   Parte 1: "que mensaje puede circular"), asi que SOLO esas dos llevan
   estilos pixel-exactos aca. Las partes 2-4 (fuente, orden del rumor,
   dilema final) siguen usando el render generico (.fidebot-copy,
   .choice-grid, .drag-list) hasta que llegue su propio mockup -- por eso
   ninguna regla de abajo toca esas clases sin calificar con
   .cs-sociales-themed-part / .cs-sociales-carousel, para no des-estilizar
   nada que ya funcionaba.
   ========================================================================= */
[data-station-theme="cs-sociales"] {
    --soc-pink: #e31d93;
    --soc-navy: #0006a3;
    --soc-yellow: #ffda00;
    /* Variable compartida con .cs-sociales-part-bubble (mismo criterio que
       --ce-side-inset en cs-economia): un solo valor fuente de verdad para
       el padding lateral del tema, para que la cancelacion con margenes
       negativos del bubble de la Parte 1 nunca pueda desincronizarse de
       este padding si se ajusta a futuro. */
    --soc-side-inset: clamp(16px, 5vw, 40px);
    position: relative;
    display: grid;
    gap: 8px;
    margin: -14px calc(50% - 50vw) -24px;
    padding: 56px var(--soc-side-inset) 64px;
    /* rayo-luz.webp es el recurso ya recortado (sin los margenes negros del
       SVG original) con el degradado amarillo/naranja de mercadeo. Igual que
       fondo-textura.jpg en cs-fidebot/cs-economia, va a pantalla completa
       con "cover": al estar recortado a su contenido real (sin sobrante
       transparente/negro alrededor), cubre todo el fondo sin dejar espacios
       en negro. */
    background-color: #f7941e;
    background-image: url("/assets/images/games/sociales/rayo-luz.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: "CS Cooper Hewitt", Arial, system-ui, sans-serif;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

[data-station-theme="cs-sociales"] .page-heading,
[data-station-theme="cs-sociales"] .station-head,
[data-station-theme="cs-sociales"] .metric-grid,
[data-station-theme="cs-sociales"] .closing-message,
[data-station-theme="cs-sociales"] .action-row {
    position: relative;
    z-index: 2;
}

[data-station-theme="cs-sociales"] h1,
[data-station-theme="cs-sociales"] .station-title,
[data-station-theme="cs-sociales"] h2 {
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-weight: bold;
    color: #fff;
}

[data-station-theme="cs-sociales"] .station-title .station-order {
    color: var(--soc-navy);
}

[data-station-theme="cs-sociales"] .mission-lead,
[data-station-theme="cs-sociales"] .muted {
    color: rgba(255, 255, 255, 0.92);
}

[data-station-theme="cs-sociales"] .challenge-form.cs-sociales-panel {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    /* .challenge-form (regla compartida por TODOS los juegos) trae
       "overflow-y: auto"; por como funciona overflow en CSS, con un solo eje
       en "auto" el otro eje (overflow-x, que aca no se toca) tambien pasa a
       computarse "auto" en vez de "visible". Eso recortaba/hacia scrolleable
       el desborde horizontal de .cs-sociales-part-bubble (el margen negativo
       que la lleva a sangrado completo), aunque ese margen estuviera bien
       calculado: el desborde nunca se veia porque el formulario lo recortaba
       antes de llegar al borde real. Con overflow:visible aca (solo en este
       formulario transparente de cs-sociales, sin afectar el
       .challenge-form generico de los demas juegos/estaciones) ese desborde
       se muestra normal. */
    overflow: visible;
}

.cs-sociales-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Pantalla de instrucciones (station_intro.php) --- */

.cs-sociales-lead {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-sociales-mascot-badge {
    flex-shrink: 0;
    width: clamp(112px, 38vw, 156px);
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.3));
}

.cs-sociales-mascot-badge img {
    display: block;
    width: 100%;
    height: auto;
}

.cs-sociales-bubble {
    position: relative;
    flex: 1 1 auto;
    padding: 14px 10px 20px 10px;
    background: var(--soc-pink);
    border-radius: 20px;
    filter: drop-shadow(0 10px 16px rgba(70, 3, 46, 0.25));
}

.cs-sociales-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 13px solid var(--soc-pink);
}

.cs-sociales-bubble-title {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 8px 16px;
    background: var(--soc-navy);
    border-radius: 10px;
    font-family: "CS Clash Display", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 14pt;
}

.cs-sociales-bubble-title-line1,
.cs-sociales-bubble-title-line2 {
    display: block;
}

.cs-sociales-bubble-title-line1 {
    color: #fff;
}

.cs-sociales-bubble-title-line2 {
    color: var(--soc-yellow);
}

.cs-sociales-bubble p {
    margin-left: 10px;
    margin-top: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 13pt;
    letter-spacing: -0.022em;
    font-family: "CS Cooper Hewitt", sans-serif;
}

.cs-sociales-instructions-card {
    position: relative;
    z-index: 2;
    margin-top: 42px;
    padding: 36px clamp(16px, 4vw, 32px) 26px;
    background: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0 16px 34px rgba(70, 3, 46, 0.35);
    text-align: center;
}

.cs-sociales-icon-warning-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 100px;
    height: 100px;
    background: url("/assets/images/games/computacion/icon-warning.svg") no-repeat center / contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transform: translateX(-50%);
}

.cs-sociales-instructions-card h2 {
    margin: 6px 0 14px;
    color: var(--soc-navy);
    font-size: 30px;
    line-height: 36pt;
    font-family: "CS Clash Display";
}

.cs-sociales-steps-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 20px;
}

.cs-sociales-instructions-card .muted {
    color: #454a7a;
}

.cs-sociales-start-button {
    display: flex;
    width: min(340px, 90%);
    min-height: 52px;
    margin: 4px auto 0;
    font-size: 22px;
}

[data-station-theme="cs-sociales"] .button-primary {
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--soc-navy), 0 14px 24px rgba(70, 3, 46, 0.3);
}

/* El hover generico del sitio aclara el amarillo casi a blanco (se ve como
   un tono raro encima); igual que en cs-fidebot/cs-economia, aca se
   mantiene el mismo amarillo de siempre y la animacion queda en solo subir
   un poco + intensificar la sombra. */
[data-station-theme="cs-sociales"] .button-primary:hover {
    background: linear-gradient(180deg, #ffe454, var(--soc-yellow) 60%);
    box-shadow: 0 7px 0 var(--soc-navy), 0 16px 26px rgba(70, 3, 46, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-sociales"] .button-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--soc-navy), 0 6px 14px rgba(70, 3, 46, 0.26);
}

.cs-sociales-dots {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.cs-sociales-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(227, 29, 147, 0.4);
}

.cs-sociales-dot-active {
    width: 30px;
    background: var(--soc-pink);
}

/* --- Pantalla de reto (station.php): timer + barra de progreso --- */

[data-station-theme="cs-sociales"] .cs-sociales-head {
    display: block;
    margin-top: 26px;
}

[data-station-theme="cs-sociales"] .cs-sociales-timer {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 10px 20px;
    background: var(--soc-pink);
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 0 #a8135f, 0 10px 18px rgba(0, 0, 0, 0.22);
}

[data-station-theme="cs-sociales"] .cs-sociales-timer-value {
    font-family: "CS Clash Display", sans-serif;
    font-size: 2rem;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.cs-sociales-progress {
    position: relative;
    z-index: 2;
    height: 16px;
    margin: 4px 8px 20px;
}

.cs-sociales-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
}

.cs-sociales-progress::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: calc(100% - 20px);
    height: 3px;
    background: var(--soc-pink);
    border-radius: 999px;
    transform: translateY(-50%);
    animation: cs-sociales-progress-line var(--duration, 900s) linear forwards;
}

@keyframes cs-sociales-progress-line {
    from { width: calc(100% - 20px); }
    to { width: 0; }
}

.cs-sociales-progress-fill {
    display: none;
}

.cs-sociales-progress-thumb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: var(--soc-pink);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff inset, 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
    animation: cs-sociales-progress-thumb var(--duration, 900s) linear forwards;
}

@keyframes cs-sociales-progress-thumb {
    from { left: 100%; }
    to { left: 0%; }
}

/* --- Parte 1: burbuja horneada + carrusel de tarjetas-imagen --- */
/* Mientras la Parte 1 esta visible, se oculta el header generico
   ("Parte 1 de 4" + titulo) porque el mockup no lo muestra: la burbuja
   horneada ya trae su propio titulo+texto, y el avance de fase lo
   comunican los puntitos de abajo (cs-sociales-dots). En cuanto el JS
   oculta la Parte 1 y muestra la Parte 2 (generica), el header vuelve a
   aparecer normalmente para esas partes sin mockup todavia. */
[data-station-theme="cs-sociales"]:has(.cs-sociales-themed-part:not([hidden])) .fidebot-header {
    display: none;
}

.cs-sociales-part-bubble {
    /* Unicamente esta seccion rompe el padding horizontal del contenedor
       [data-station-theme="cs-sociales"] (clamp(16px, 5vw, 40px) por lado),
       para que la imagen de la burbuja de la Parte 1 llegue a sangrado
       completo de lado a lado. El resto de la pantalla (bubble de
       instrucciones, tarjeta blanca, carrusel, etc.) sigue respetando ese
       padding normalmente. */
    margin-left: calc(-1 * var(--soc-side-inset));
    margin-right: calc(-1 * var(--soc-side-inset));
}

.cs-sociales-part-bubble img {
    display: block;
    width: 135%;
    height: auto;
    margin-left: -19px;
    margin-top: -30px;
}

/* Los botones "‹ ›" ya NO son hermanos en fila (eso le robaba ~100px de
   ancho horizontal al carrusel, achicando las tarjetas). Ahora el shell es
   simplemente el contenedor relativo y los botones van superpuestos ENCIMA
   de las tarjetas (position:absolute, ver .cs-sociales-carousel-nav mas
   abajo), como pide la referencia -- asi el carrusel usa el 100% del ancho
   disponible y las tarjetas pueden ser mas grandes. */
.cs-sociales-carousel-shell {
    position: relative;
    margin-top: -108px;
    /* Mismo criterio que .cs-sociales-part-bubble mas arriba: sangrado
       completo de lado a lado con margenes negativos del MISMO
       --soc-side-inset (unica fuente de verdad), en vez de repetir el
       numero a mano. Esta seccion tambien necesitaba salirse del padding
       lateral del tema (lo pedido: quitar la franja amarilla a los lados
       del carrusel). El .challenge-form.cs-sociales-panel ya tiene
       overflow:visible (ver mas arriba), asi que este desborde no se
       recorta. */
}

/* Carrusel reescrito para NO usar scroll nativo + scroll-snap: ese enfoque
   (probado a fondo en rondas anteriores) nunca lograba un loop de verdad --
   el scroll maximo se quedaba corto y la primera/ultima tarjeta jamas
   terminaba de "centrarse", quedando pegada / sola. Ahora el carrusel es
   100% manejado por JS (ver initSociales3CardCarousel en app.js): guarda un
   indice (currentIndex) y en cada render() calcula, con aritmetica de
   modulo, cual tarjeta va al centro, cual a la izquierda (prev) y cual a la
   derecha (next); el resto queda oculta. Dar la vuelta del ultimo al primero
   (o al reves) es aritmetica simple y SIEMPRE funciona, sin casos de borde
   ni "fantasmas" clonados. Por eso: overflow hidden (nada que scrollear) y
   las tarjetas son position:absolute, centradas por defecto (left:50% +
   translateX(-50%)), corridas a los lados solo via transform segun su rol. */
.cs-sociales-carousel {
    position: relative;
    width: 107%;
    overflow: hidden;
    cursor: grab;
    left: -20px;
}

.cs-sociales-carousel.is-grabbing {
    cursor: grabbing;
}

.cs-sociales-carousel .swipe-track {
    position: relative;
    display: block;
    /* El track es el unico hijo de .cs-sociales-carousel, que es
       display:flex (heredado de .swipe-carousel). Con TODAS las tarjetas en
       position:absolute (sin contenido en el flujo normal) su ancho de
       contenido es 0, asi que como flex-item con flex-basis:auto se
       encogia a 0 de ancho -- por eso width:100% explicito aca, para que
       siempre ocupe todo el ancho del carrusel sin importar que no tenga
       contenido "real" en el flujo. */
    width: 100%;
    padding: 6px 0 14px;
    box-sizing: border-box;
    /* La altura la fija JS (updateHeight en initSociales3CardCarousel),
       igual a la altura real de la tarjeta enfocada: al ser
       position:absolute, las tarjetas no aportan altura al flujo normal. */
}

/* Las tarjetas ya son imagenes completas (robot + texto horneados por
   mercadeo): el card generico (.swipe-card) trae padding/texto pensado
   para texto plano, aca se anula para que la imagen ocupe toda la tarjeta.
   El mockup muestra la tarjeta activa AL FRENTE y las otras dos DETRAS
   (mismo tamano, tapadas en su mayor parte por la de enfrente, asomando
   solo un filo a cada lado) -- no tarjetas planas una al lado de la otra
   con borde/sombra propios. Todas las tarjetas comparten la MISMA base de
   posicion (centradas) y solo se diferencian por el transform de su rol. */
.cs-sociales-card {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    /* 82% (mas grande que el 72% anterior) porque ahora el carrusel ya no
       pierde ~100px de ancho en botones-hermanos (ver .cs-sociales-carousel
       arriba: los botones van superpuestos, no en fila). El corrimiento de
       las vecinas (-60%/-40% mas abajo) esta calculado para que quepan
       ENTERAS dentro del carrusel (que tiene overflow:hidden): si el
       corrimiento fuera mayor, el borde lejano de la vecina saldria del
       contenedor y quedaria cortado en linea recta en vez de mostrar su
       esquina redondeada real -- que fue exactamente el bug reportado. Con
       ancho=82% el corrimiento maximo sin recortar es (100%-82%)/2 / 82% =
       ~10.98% del propio ancho; se uso 9% para dejar un margen chico de
       sobra.
       Bajado despues a 84% (era 90%), y ahora a 78%: para que las vecinas
       asomen mas ("sacar un poco las cartas de atras") hace falta mas
       "aire" a los lados de la enfocada -- ese aire maximo sin recortar es
       (100%-ancho)/2, asi que un ancho mas chico le da mas margen a las
       vecinas para asomar sin que su borde lejano se salga del carrusel
       (que tiene overflow:hidden). Con 84% ya se habia usado casi todo ese
       margen disponible (13% de corrimiento contra un maximo seguro de
       ~13.5%): pedir mas asome ahi sin bajar el ancho solo lograba
       recortar la vecina contra el borde del carrusel (por eso se veia
       "saltar"/correrse raro al tocar el limite). Con 78% el margen
       maximo sube a ~18%, dejando espacio real para asomar mas sin
       recortes. */
    width: 78%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 18px;
    overflow: visible;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.cs-sociales-card.is-focused {
    z-index: 3;
    /* -50% = centrada de verdad (mismo espacio libre a cada lado). Antes
       tenia -48%, un ajuste manual que la corria hacia la derecha y dejaba
       mas aire a la izquierda que a la derecha (reportado como "espacio
       desigual a los lados"). */
    transform: translateX(-50%);
}

/* Tarjetas de atras: LIGERAMENTE mas chicas que la enfocada (scale 0.92),
   ademas del corrimiento (translateX) que las mete casi por completo detras
   de la enfocada y el z-index (la enfocada queda arriba y las tapa). El
   scale se agrega DESPUES del translateX en el mismo transform: los
   porcentajes de translateX se calculan sobre el tamano ORIGINAL de la
   tarjeta (no sobre el tamano ya escalado), asi que el corrimiento lateral
   no cambia, solo se ven un poco mas chicas y "detras" de la de enfrente.
   -59%/-41% son simetricos respecto al -50% central (offset de 9% a cada
   lado), para que prev y next asomen la MISMA cantidad de cada lado. */
.cs-sociales-card[data-carousel-neighbor="prev"] {
    z-index: 2;
    transform: translateX(-67%) scale(0.92);
}

.cs-sociales-card[data-carousel-neighbor="next"] {
    z-index: 2;
    transform: translateX(-33%) scale(0.92);
}

/* Con mas de 3 tarjetas, la que no es ni la enfocada ni una vecina real
   queda oculta del todo (nunca deberia notarse un "salto" porque nunca es
   visible mientras se oculta/aparece: el JS solo la destapa cuando ya paso
   a ser vecina real). */
.cs-sociales-card[data-carousel-hidden] {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
}

.cs-sociales-card::before {
    display: none;
}

.cs-sociales-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

/* Ni la CORRECTA ni la INCORRECTA llevan ningun contorno/marca sobre la
   tarjeta: esos avisos inline se quitan porque cada resultado (acierto o
   error) va a tener su propia pantalla dedicada mas adelante, en vez de
   remarcarse aca encima de la tarjeta misma. */
.cs-sociales-card.is-correct img,
.cs-sociales-card.is-wrong img {
    outline: none;
}

/* .choice-card.is-correct/.is-wrong (arriba en el archivo, para el
   choice-grid generico) pintan un tinte de fondo verde/rosa sobre toda la
   tarjeta -- .cs-sociales-card tambien lleva la clase "choice-card" asi que
   heredaba ese tinte de fondo detras de la imagen. Aca se anula (la
   retroalimentacion de correcto/incorrecto del carrusel ya la da el
   outline amarillo/rojo sobre la imagen, arriba). */
.cs-sociales-card.is-correct,
.cs-sociales-card.is-wrong {
    background: transparent;
    border-color: transparent;
}

/* Superpuestos ENCIMA de las tarjetas (position:absolute, centrados en el
   eje vertical), no como hermanos en fila -- asi no le restan ancho al
   carrusel y las tarjetas pueden ser mas grandes. z-index por encima de la
   tarjeta enfocada (que es 3) para que siempre queden visibles arriba. */
/* El circulo navy + sombra ya vienen dentro del SVG (flecha-back.svg /
   flecha-next.svg), asi que el boton en si queda transparente/sin forma
   propia -- solo posiciona y dimensiona la imagen. */
.cs-sociales-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 60px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
}

.cs-sociales-carousel-nav img {
    display: block;
    width: 100%;
    height: 100%;
}

.cs-sociales-carousel-prev {
    left: -15px;
}

.cs-sociales-carousel-next {
    right: -10px;
}

/* Segunda referencia: color solido (sin degrade), esquinas redondeadas
   normales (no la pildora 999px que trae
   [data-station-theme="cs-sociales"] .button-primary para el resto de
   botones del juego), sombra suave y difusa (no la sombra "solida" de 3D
   que usan los demas botones del sitio), y mas delgado/compacto que antes
   (menos alto, menos margen arriba).
   OJO especificidad: [data-station-theme="cs-sociales"] .button-primary
   (mas arriba en este archivo) tiene la MISMA especificidad que un simple
   ".cs-sociales-select-button" ya que agrega el atributo de tema -- un
   selector de una sola clase pierde ese empate porque queda antes en el
   archivo. Por eso aca se repite el mismo calificador de atributo, para
   igualar especificidad y ganar por orden (esta regla esta despues). */
[data-station-theme="cs-sociales"] .cs-sociales-select-button {
    display: flex;
    width: min(165px, 90%);
    min-height: 44px;
    margin: -0px auto 15px;
    border-radius: 15px;
    background: var(--soc-pink);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
    font-size: 18px;
    color: white;
    border-color: #e31d93;
}

[data-station-theme="cs-sociales"] .cs-sociales-select-button:hover {
    background: var(--soc-pink);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

[data-station-theme="cs-sociales"] .cs-sociales-select-button:active:not(:disabled) {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* Rastreador persistente de digitos: siempre visible en las 4 partes (ver
   comentario en misinformation.php sobre por que no vive dentro de una
   <section> ni del <header>). Reemplaza el mensaje de "Correcto" + aviso
   con cuenta regresiva que habia antes -- el numero real queda escrito
   arriba de su linea apenas se descifra esa parte (ver handleCorrect en
   app.js) y se queda ahi, sin depender de leerlo a tiempo. */
.cs-sociales-digit-tracker {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: -65px auto 0;
    padding: 0 12px;
    max-width: 360px;
    box-sizing: border-box;
}

/* OJO: el atributo HTML "hidden" no alcanza para ocultar este elemento por
   si solo -- como el CSS de arriba le pone "display: flex" con la misma
   especificidad (0,1,0) que el selector nativo "[hidden]" del navegador,
   una regla de autor normal le gana a la regla del user-agent aunque
   empate en especificidad, y el elemento se queda visible igual. Por eso
   hace falta esta regla aparte para que digitTracker.hidden = true (ver
   revealCode en app.js) realmente lo oculte. */
.cs-sociales-digit-tracker[hidden] {
    display: none;
}

.cs-sociales-digit-slot {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    max-width: 64px;
}

.cs-sociales-digit-value {
    min-height: 1.3em;
    color: var(--soc-navy);
    font-family: "CS Clash Display", sans-serif;
    font-size: 59px;
    font-weight: 700;
    margin-bottom: -15px;

}

.cs-sociales-digit-line {
    display: block;
    width: 100%;
    height: 7px;
    background: var(--soc-pink);
    border-radius: 999px;
}

/* Pantalla de codigo (aparece SOLO al terminar la Parte 4, ver revealCode
   en app.js): tarjeta rosa redondeada con los 4 digitos ya conocidos (dentro
   de pildoras blancas) + boton amarillo "Adelante" debajo, replica del
   mockup. Ocupa el lugar de las <section> de partes (todas ocultas para
   este punto) y del rastreador chico (tambien se oculta, ver JS). */
.cs-sociales-code-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin-top: 10px;
}

/* Mismo motivo que .cs-sociales-digit-tracker[hidden] arriba: sin esta
   regla, el atributo "hidden" con el que arranca esta pantalla en el HTML
   (ver misinformation.php) no la ocultaria de verdad durante las Partes
   1-3, por el "display: flex" de la regla de arriba. */
.cs-sociales-code-reveal[hidden] {
    display: none;
}

.cs-sociales-code-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 360px;
    padding: 34px 24px 30px;
    background: var(--soc-pink);
    border-radius: 32px;
    box-shadow: 0 14px 26px rgba(70, 3, 46, 0.3);
}

.cs-sociales-code-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fff;
    color: var(--soc-pink);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.cs-sociales-code-title {
    margin: 0;
    color: var(--soc-yellow);
    font-family: "CS Clash Display", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.cs-sociales-code-digits {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.cs-sociales-code-digit {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    max-width: 64px;
    background: #fff;
    border-radius: 999px;
    color: var(--soc-navy);
    font-family: "CS Clash Display", sans-serif;
    font-size: 62px;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.cs-sociales-code-continue {
    width: min(280px, 90%);
    min-height: 52px;
}

/* Cuando aparece una pantalla "de foco" -- el pop-up de "¡Correcto!" al
   acertar CADA parte (ver showCorrectPopup en app.js), o la pantalla final
   de codigo (ver revealCode) -- ambas le ponen data-focus-screen-active al
   wrapper de tema mientras estan visibles. En los dos casos la pantalla
   pasa a ser SOLO la tarjeta/imagen + boton "Adelante": por eso el
   cronometro, la barra de progreso, los puntitos y el titulo "Acceso
   bloqueado..."/"Parte X de Y" de arriba se esconden (no aportan nada ahi)
   y el fondo se oscurece, igual a la referencia, en vez de seguir con el
   amarillo/naranja brillante de las 4 partes. El pop-up de "¡Correcto!" lo
   quita de nuevo (removeAttribute) apenas tocan "Adelante" para seguir
   jugando con el look normal; la pantalla de codigo nunca lo quita, porque
   de ahi se pasa derecho a "Mision cumplida". */
[data-station-theme="cs-sociales"][data-focus-screen-active] {
    background-color: #2f2408;
    background-image: none;
}

[data-station-theme="cs-sociales"][data-focus-screen-active] .cs-sociales-head,
[data-station-theme="cs-sociales"][data-focus-screen-active] .cs-sociales-progress,
[data-station-theme="cs-sociales"][data-focus-screen-active] .cs-sociales-dots,
[data-station-theme="cs-sociales"][data-focus-screen-active] .fidebot-header {
    display: none;
}

/* :not([hidden]) es importante aca: cuando termina la Parte 4, el pop-up
   de "¡Correcto!" ya esta oculto (su propio boton "Adelante" lo oculta
   antes de llamar a revealCode) pero data-focus-screen-active se mantiene
   activo para la pantalla de codigo que sigue. Sin :not([hidden]), esta
   regla (mas especifica que ".cs-sociales-popup-correct[hidden]") le
   ganaria al display:none del atributo hidden y el pop-up (vacio, pero
   con min-height:80vh) apareceria superpuesto encima de la tarjeta de
   codigo. */
[data-station-theme="cs-sociales"][data-focus-screen-active] .cs-sociales-code-reveal:not([hidden]),
[data-station-theme="cs-sociales"][data-focus-screen-active] .cs-sociales-popup-correct:not([hidden]) {
    display: flex;
    min-height: 80vh;
    min-height: 80dvh;
    justify-content: center;
}

/* Pop-up de "¡Correcto!" (una imagen horneada distinta por parte, ver
   data-popup-src-0..3 en misinformation.php) + boton "Adelante" real
   debajo, mismo patron que .cs-sociales-code-reveal de mas abajo. */
.cs-sociales-popup-correct {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin-top: 10px;
}

.cs-sociales-popup-correct[hidden] {
    display: none;
}

.cs-sociales-popup-correct-artwork {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
}

.cs-sociales-popup-correct-continue {
    width: min(280px, 90%);
    min-height: 52px;
}

/* Parte 3 tematizada ("Reconstruyan la ruta del rumor"): lista para
   ordenar con el mismo tratamiento visual del resto de cs-sociales --
   insignia rosa numerada (01, 02...) fuera de una tarjeta blanca tipo
   pildora, con un handle de 6 puntos a la derecha para arrastrar. Un
   unico boton "Validar orden" (sin "Reiniciar orden"), mismo estilo que
   cs-sociales-select-button. */
.cs-sociales-drag-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: -75px 0 0;
    padding: 0;
    list-style: none;
}

.cs-sociales-drag-item {
    /* align-items:stretch (no "center"): asi la insignia siempre toma el
       MISMO alto real de la tarjeta blanca (la que manda, por su texto/
       padding), sea cual sea -- si se centrara por altura fija (52px) en
       vez de estirarse, y la tarjeta terminaba mas alta que eso (texto
       largo que ocupa dos lineas, por ejemplo), la insignia se quedaba mas
       corta que la fila y su numero aparecia desplazado hacia arriba
       respecto al centro real de la tarjeta. Ver
       .cs-sociales-drag-badge para el centrado interno del numero dentro
       de esa altura ya estirada. */
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.cs-sociales-drag-item.is-dragging {
    opacity: 0.6;
}

.cs-sociales-drag-badge {
    /* Con .cs-sociales-drag-item ahora en align-items:stretch, esta caja
       siempre mide lo mismo que .cs-sociales-drag-card (el hermano que
       manda la altura de la fila) sin importar si esa tarjeta crece por
       texto largo. display:flex + align-items:center + justify-content:
       center adentro centra el numero dentro de esa altura ya igualada,
       en vez de depender de line-height:1 (con una tipografia display
       como "CS Clash Display" el glifo no siempre queda centrado dentro
       de su propia caja de linea). */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--soc-pink);
    font-family: "CS Clash Display", sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
}

.cs-sociales-drag-card {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.cs-sociales-drag-text {
    color: var(--soc-navy);
    font-size: 11px;
    line-height: 1.25;
    font-family: "CS Cooper Hewitt";

}

.cs-sociales-drag-handle {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 5px);
    grid-template-rows: repeat(3, 5px);
    gap: 4px;
    cursor: grab;
}

.cs-sociales-drag-handle i {
    width: 5px;
    height: 5px;
    background: #e31d93;
    border-radius: 50%;
}

/* Parte 2 tematizada ("Cual fuente tiene mas respaldo"): lista tipo radio,
   opciones en pildora blanca con un punto/circulo indicador a la izquierda
   que se rellena de rosa al elegirla. Igual que las otras partes, un unico
   boton "Seleccionar" (cs-sociales-select-button) confirma la opcion
   marcada -- tocar la opcion solo la marca, no valida al toque (ver
   validateOption/isRadioThemed en app.js). */
.cs-sociales-radio-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    margin-top: -80px;

}

.cs-sociales-radio-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

/* Tarjeta blanca del texto: antes el propio .cs-sociales-radio-option era
   la pildora blanca (con el circulo adentro, pegado al padding izquierdo).
   Ahora, igual que .cs-sociales-letter-card en la Parte 4, la pildora
   blanca es un elemento aparte que envuelve SOLO el texto, y el circulo
   (.cs-sociales-radio-dot) queda afuera de ella, a la izquierda -- tal
   como la referencia del mockup. */
.cs-sociales-radio-card {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Circulo del radio: un aro blanco grueso (no un simple borde de 2px --
   segun la referencia el aro blanco es bien ancho) con un circulo mas
   chico adentro que es el que cambia de color segun el estado. El aro
   blanco es el propio .cs-sociales-radio-dot; el circulo de color es un
   pseudo-elemento centrado encima. Ni is-wrong ni is-correct cambian el
   color aca (esos avisos inline se quitaron, ver comentario junto a
   .cs-sociales-card.is-correct/.is-wrong mas arriba): solo hover/selected
   lo pintan de rosa. */
.cs-sociales-radio-dot {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.cs-sociales-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #c7c7d1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.15s ease;
}

.cs-sociales-radio-option:hover .cs-sociales-radio-dot::after,
.cs-sociales-radio-option.is-selected .cs-sociales-radio-dot::after {
    background: var(--soc-pink);
}

.cs-sociales-radio-text {
    color: var(--soc-navy);
    font-size: 11px;
    line-height: 1.25;
    font-family: 'Cooper Hewitt';
}

/* Parte 4 tematizada ("Dilema final"): lista "elegir y confirmar" igual
   que la de radio (Parte 2), pero con insignias de letra (A./B./C./D.)
   fuera de la tarjeta en vez de un circulo -- mismo patron visual que las
   insignias numeradas de la parte de orden (Parte 3). Tocar una opcion
   solo la marca (ver hasChoiceConfirm en app.js); el boton "Seleccionar"
   valida la marcada. Ni is-wrong ni is-correct llevan marca propia (ver
   nota junto a .cs-sociales-card.is-correct/.is-wrong).*/
.cs-sociales-letter-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: -45px 0 0;
    padding: 0;
}

.cs-sociales-letter-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.cs-sociales-letter-badge {
    flex: 0 0 auto;
    color: var(--soc-pink);
    font-family: "CS Clash Display", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.cs-sociales-letter-card {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s ease;
}

.cs-sociales-letter-option.is-selected .cs-sociales-letter-card {
    box-shadow: 0 0 0 3px var(--soc-pink), 0 6px 14px rgba(0, 0, 0, 0.12);
}

.cs-sociales-letter-text {
    color: var(--soc-navy);
    font-size: 11px;
    line-height: 1.3;
    font-family: 'CS Cooper Hewitt';
}

/* =========================================================================
   Pantalla "Detalle por estacion" (final.php), cuando la ultima estacion
   completada es la de Ciencias Sociales. Mismo patron/estetica que los
   bloques [data-station-theme="cs-fidebot"] y [data-station-theme="cs-economia"]
   equivalentes de arriba: se deja solo el bloque de resultados + boton (el
   <h1>/<h2> de encabezado generico se oculta visualmente via
   .cs-sociales-heading, igual que en esos dos), con la paleta propia de
   este tema (fondo naranja/amarillo de rayo-luz.webp ya puesto por
   [data-station-theme="cs-sociales"], tarjetas blancas con acentos rosa/
   navy). Sin engranajes decorativos (tampoco los tiene cs-economia).
   ========================================================================= */
[data-station-theme="cs-sociales"] .station-score-confetti {
    background-image: url("/assets/images/games/sociales/brillos-transparente.webp");
}

[data-station-theme="cs-sociales"] .station-result-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 12px;
}

[data-station-theme="cs-sociales"] .station-result-card {
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(0, 6, 163, 0.18);
    gap: 5px;
}

[data-station-theme="cs-sociales"] .station-result-content h3 {
    color: var(--soc-navy);
}

[data-station-theme="cs-sociales"] .station-result-badge {
    background: var(--soc-pink);
    border: none;
    color: #fff;
}

[data-station-theme="cs-sociales"] .station-result-bar {
    background: rgba(0, 0, 0, 0.08);
}

[data-station-theme="cs-sociales"] .station-result-bar span {
    background: var(--soc-pink);
}

[data-station-theme="cs-sociales"] .station-result-stats {
    color: #454a7a;
}

[data-station-theme="cs-sociales"] .station-result-stats strong {
    color: var(--soc-navy);
}

/* El boton "Siguiente estacion"/"Ver clasificacion" de esta pantalla viene
   dentro de .action-row (fila flex generica, alineada a la izquierda por
   defecto): igual que ya se hace en cs-fidebot y cs-economia (ver sus
   reglas ".action-row { justify-content: center; }" equivalentes), se
   centra aca tambien. */
[data-station-theme="cs-sociales"] .action-row {
    justify-content: center;
}

body > main > div > form > div > section.fidebot-phase.misinformation-part.cs-sociales-themed-part.is-active > div.cs-sociales-drag-list > div:nth-child(1) {gap: 20px;}

/* ===========================================================================
   Estacion 4 - Ingenieria ("Verificacion de palabras clave")
   Tema visual exclusivo de esta estacion, challenge_type keyword_verification.
   Mismo fondo que cs-economia (pedido explicito: "usemos el mismo fondo que
   el juego 2" -- copia propia de fondo-textura.jpg en su propia carpeta,
   mismo criterio de "cada tema con su propia copia" que ya se sigue en
   computacion/economia/sociales) y la misma paleta navy+rosa que ya usa
   cs-economia (--ce-navy/--ce-pink son literalmente los mismos valores),
   pero con variables propias (--ing-*) para que este tema quede aislado y
   un ajuste aca nunca pueda romper cs-economia ni al reves.
   ========================================================================= */
[data-station-theme="cs-ingenieria"] {
    --ing-navy: #0006a3;
    --ing-navy-deep: #000a8c;
    --ing-pink: #e31d93;
    --ing-cyan: #35c8ff;
    --ing-yellow: #ffda00;
    --ing-side-inset: clamp(16px, 5vw, 40px);
    position: relative;
    display: grid;
    gap: 8px;
    margin: -14px calc(50% - 50vw) -24px;
    padding: 56px var(--ing-side-inset) 64px;
    background-color: #000a8c;
    background-image: url("/assets/images/games/ingenieria/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: "CS Cooper Hewitt", Arial, system-ui, sans-serif;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

[data-station-theme="cs-ingenieria"] .page-heading,
[data-station-theme="cs-ingenieria"] .station-head {
    position: relative;
    z-index: 2;
}

[data-station-theme="cs-ingenieria"] h1,
[data-station-theme="cs-ingenieria"] .station-title,
[data-station-theme="cs-ingenieria"] h2 {
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-weight: bold;
    color: #fff;
}

[data-station-theme="cs-ingenieria"] .station-title .station-order {
    color: var(--ing-cyan);
}

[data-station-theme="cs-ingenieria"] .muted {
    color: rgba(255, 255, 255, 0.9);
}

/* El encabezado real de la estacion (h1) se mantiene en el DOM (lectores de
   pantalla/SEO) pero el mockup no lo muestra en estas pantallas. */
[data-station-theme="cs-ingenieria"] .cs-ingenieria-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[data-station-theme="cs-ingenieria"] .challenge-form.cs-ingenieria-panel {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* El header generico ("Palabra X de N" + titulo del reto) no aparece en el
   mockup: todas las palabras de este reto usan el tratamiento tematizado
   (a diferencia de cs-sociales, no hace falta condicionar esto a que la
   parte activa sea tematizada -- aca SIEMPRE lo es), asi que se oculta sin
   condicion. */
[data-station-theme="cs-ingenieria"] .fidebot-header {
    display: none;
}

/* Boton identico al de los otros temas (misma forma/tipografia/sombra
   "presionable"), solo cambia el color de la sombra inferior. */
[data-station-theme="cs-ingenieria"] .button-primary {
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--ing-navy), 0 14px 24px rgba(0, 3, 40, 0.3);
}

[data-station-theme="cs-ingenieria"] .button-primary:hover {
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    box-shadow: 0 7px 0 var(--ing-navy), 0 16px 26px rgba(0, 3, 40, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-ingenieria"] .button-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--ing-navy), 0 6px 14px rgba(0, 3, 40, 0.26);
}

/* --- Pantalla de instrucciones (station_intro.php) --- */

.cs-ingenieria-lead {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.cs-ingenieria-mascot-badge {
    flex-shrink: 0;
    width: clamp(122px, 40vw, 168px);
    filter: drop-shadow(0 10px 16px rgba(0, 3, 40, 0.35));
}

.cs-ingenieria-mascot-badge img {
    display: block;
    width: 100%;
    height: auto;
}

/* Globo de esta estacion: a diferencia de los otros 3 temas (una tarjeta de
   un solo color con una pildora de titulo adentro), aca el mockup usa una
   burbuja blanca con una etiqueta rosada EMBEBIDA adentro (no montada
   afuera de la esquina) cerca del borde superior, colita apuntando al
   robot abajo a la izquierda (::before), y el cuerpo en dos parrafos sin
   subrayado (el primero mas remarcado, el segundo mas liviano). */
.cs-ingenieria-bubble {
    position: relative;
    flex: 1 1 auto;
    padding: 10px 14px 18px;
    background: #fff;
    border-radius: 20px;
    filter: drop-shadow(0 10px 16px rgba(0, 3, 40, 0.3));
}

.cs-ingenieria-bubble::before {
    content: "";
    position: absolute;
    bottom: 14px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 13px solid #fff;
}

/* El mockup muestra esta etiqueta DENTRO de la burbuja blanca (con margen
   blanco alrededor), como un bloque rectangular de radio chico, no una
   pildora flotante afuera: "Verificacion" en blanco arriba, "de palabras
   clave" en amarillo negrita abajo, ambas alineadas a la izquierda. */
.cs-ingenieria-bubble-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin: 0 0 10px;
    padding: 8px 16px 9px;
    background: var(--ing-pink);
    border-radius: 10px;
    text-align: left;
    font-family: "CS Clash Display", sans-serif;
    width: -webkit-fill-available;
}

.cs-ingenieria-bubble-tag-line1 {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.cs-ingenieria-bubble-tag-line2 {
    color: var(--ing-yellow);
    font-size: 13px;
    font-weight: 800;
}

.cs-ingenieria-bubble-lead {
    margin: 6px 0 6px;
    color: var(--ing-navy);
    font-size: 11px;
    line-height: 13pt;
    font-family: "CS Cooper Hewitt";
}

.cs-ingenieria-bubble-sub {
    margin: 0;
    color: var(--ing-navy);
    font-size: 11px;
    line-height: 13pt;
    font-family: "CS Cooper Hewitt";
}

/* Tarjeta blanca de instrucciones, mismo patron que
   cs-economia-instructions-card (triangulo de advertencia compartido +
   boton amarillo), pero con una lista real (no una imagen horneada: el
   texto de estos pasos vino como copy, no como recurso grafico) de
   pasos con cuadrito rosado, cada linea centrada como una unidad
   (bullet+texto), igual que el mockup. */
.cs-ingenieria-instructions-card {
    position: relative;
    z-index: 2;
    margin-top: 46px;
    padding: 46px clamp(24px, 7vw, 34px) 34px;
    background: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0 16px 34px rgba(0, 3, 40, 0.4);
    text-align: center;
}

.cs-ingenieria-icon-warning-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 100px;
    height: 130px;
    background: url("/assets/images/games/computacion/icon-warning.svg") no-repeat center / contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transform: translateX(-50%);
}

.cs-ingenieria-instructions-card h2 {
    margin: 6px 0 16px;
    color: var(--ing-navy);
    font-size: 30px;
    line-height: 34pt;
    font-family: "CS Clash Display";
}

/* Igual criterio que cs-economia-steps-img/cs-sociales-steps-img: el copy
   de los pasos vino como recurso grafico (SVG del usuario), no como texto
   para tipear a mano, asi que se muestra como imagen horneada en vez de
   una lista real. Mas ancha que las otras 2 (max-width mayor) porque son
   6 renglones con frases mas largas que necesitan mas espacio horizontal
   para seguir siendo legibles. */
.cs-ingenieria-steps-img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto 20px;
}

.cs-ingenieria-start-button {
    display: flex;
    width: min(340px, 90%);
    min-height: 52px;
    margin: 4px auto 0;
    font-size: 22px;
}

/* Puntitos de paginacion decorativos (mismo criterio que
   cs-economia-dots). */
.cs-ingenieria-dots {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.cs-ingenieria-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}

.cs-ingenieria-dot-active {
    width: 30px;
    background: #fff;
}

/* --- Pantalla de reto (station.php): timer + barra de progreso, mismo
   patron rosa que cs-sociales-timer --- */

[data-station-theme="cs-ingenieria"] .cs-ingenieria-head {
    display: block;
    margin-top: 26px;
}

[data-station-theme="cs-ingenieria"] .cs-ingenieria-timer {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 10px 20px;
    background: var(--ing-pink);
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 0 #a8135f, 0 10px 18px rgba(0, 0, 0, 0.22);
}

[data-station-theme="cs-ingenieria"] .cs-ingenieria-timer-value {
    font-family: "CS Clash Display", sans-serif;
    font-size: 2rem;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.cs-ingenieria-progress {
    position: relative;
    z-index: 2;
    height: 16px;
    margin: 4px 8px 20px;
}

.cs-ingenieria-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 999px;
}

.cs-ingenieria-progress::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: calc(100% - 20px);
    height: 3px;
    background: var(--ing-pink);
    border-radius: 999px;
    transform: translateY(-50%);
    animation: cs-ingenieria-progress-line var(--duration, 900s) linear forwards;
}

@keyframes cs-ingenieria-progress-line {
    from { width: calc(100% - 20px); }
    to { width: 0; }
}

.cs-ingenieria-progress-fill {
    display: none;
}

.cs-ingenieria-progress-thumb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: var(--ing-pink);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff inset, 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
    animation: cs-ingenieria-progress-thumb var(--duration, 900s) linear forwards;
}

@keyframes cs-ingenieria-progress-thumb {
    from { left: 100%; }
    to { left: 0%; }
}

/* --- Reto (keyword_verification.php): tarjetas por palabra --- */

.cs-ingenieria-word {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

/* Timer y nombre van lado a lado (fila), no en filas separadas. El bug
   anterior era que un nombre largo desbordaba en vez de envolver, porque
   los flex items por defecto tienen min-width:auto (nunca se encogen mas
   alla del ancho de su texto en una sola linea) -- eso empujaba toda la
   fila hacia el lado en vez de quedar centrada. La correccion real es
   min-width:0 en .cs-ingenieria-word-career (ver abajo): con eso el
   nombre SI puede encogerse y su texto envuelve a una segunda linea
   dentro de la misma fila, con el timer siempre centrado verticalmente
   a su par y la fila entera centrada como unidad. */
.cs-ingenieria-word-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

/* Insignia circular con el tiempo restante de ESTA palabra (distinto del
   cronometro general de arriba, que es el de toda la estacion): fondo
   rosado + borde blanco + numeros blancos (antes era al reves -- fondo
   blanco/borde y texto rosado -- pero asi calzaba mal con la referencia). */
.cs-ingenieria-word-timer-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--ing-pink);
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-family: "CS Clash Display", sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px rgba(0, 3, 40, 0.2);
}

/* La carrera va en blanco (no navy) junto a la insignia, y toda la fila
   queda centrada (ver justify-content:center en .cs-ingenieria-word-head).
   text-align:center es necesario ademas del justify-content de la fila:
   ese centra el bloque de texto COMO UNIDAD dentro de la fila, pero un
   nombre de carrera largo que envuelve a 2 lineas (ej. "Ingenieria en
   Cadena de Suministros y Logistica") se alineaba a la izquierda DENTRO
   de su propia caja en la segunda linea (el texto no tiene text-align
   propio, solo hereda la posicion del bloque completo) -- por eso se veia
   centrado unicamente cuando el texto era corto y cabia en una sola
   linea. */
.cs-ingenieria-word-career {
    flex: 0 1 auto;
    min-width: 0;
    /* Sin este tope, el nombre se estiraba a TODO el espacio que le
       quedaba libre en la fila (el resto del ancho de la tarjeta), y el
       texto se centraba dentro de esa caja ancha -- se veia como si el
       timer quedara pegado a la izquierda y el nombre centrado lejos, en
       el otro extremo, en vez de los dos juntos. Con un maximo angosto el
       nombre solo ocupa lo que necesita (hasta este limite) y envuelve
       ahi mismo, quedando pegado al timer como un solo bloque centrado. */
    max-width: 220px;
    margin: 0;
    color: #fff;
    font-family: "CS Clash Display";
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.cs-ingenieria-hint-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 4px;
    margin-left: 20px;
    width: 90%;
}

/* La etiqueta amarilla "Pista N" ya NO va al lado de la pildora blanca:
   se monta sobre su borde superior (position:absolute con top negativo,
   mismo criterio que .cs-ingenieria-bubble-tag de la pantalla de
   instrucciones), asomando justo arriba del borde. El gap grande de
   .cs-ingenieria-hint-list (arriba) le deja espacio para asomar sin pisar
   el renglon anterior. */
.cs-ingenieria-hint-row {
    position: relative;
}

.cs-ingenieria-hint-row[hidden] {
    display: none;
}

.cs-ingenieria-hint-tag {
    position: absolute;
    z-index: 1;
    top: -11px;
    left: 18px;
    padding: 6px 14px;
    background: #ffda00;
    border-radius: 999px;
    color: var(--ing-navy);
    font-family: 'CS Cooper Hewitt';
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 6px rgba(0, 3, 40, 0.2);
}

.cs-ingenieria-hint-pill {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 999px;
    color: var(--ing-navy);
    font-size: 12px;
    font-family: 'CS Cooper Hewitt';
    line-height: 1.3;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 3, 40, 0.15);
}

/* Botones "Revelar pista N": existen los 2 desde el inicio (igual que el
   mockup), "Revelar pista 3" arranca deshabilitado hasta que se revele la
   2. Al tocar cualquiera desaparece del todo (ver app.js), asi que si se
   llega a revelar la ultima pista no queda ningun boton, tal como el
   mockup. */
.cs-ingenieria-reveal-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    margin-left: 20px;
}

.cs-ingenieria-reveal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    border: 1px solid #ffd77e;
    border-radius: 999px;
    box-shadow: 0 4px 0 #caa900, 0 10px 18px rgba(0, 3, 40, 0.2);
    color: var(--ing-navy);
    font-family: 'CS Cooper Hewitt';
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Sin cambio de tono en hover (eso se veia como un brillo dorado raro al
   pasar el mouse durante las pruebas): la unica interaccion es el mismo
   "presionado" (translateY) que usan TODOS los botones del sitio via la
   clase base .button, aca replicado porque este boton no usa esa clase
   compartida. */
.cs-ingenieria-reveal-button:active:not(:disabled) {
    transform: translateY(3px);
}

.cs-ingenieria-reveal-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-ingenieria-reveal-button[hidden] {
    display: none;
}

/* Iconito de lupa: recurso propio del usuario (icon-lupa.svg), reemplaza al
   que se dibujaba con CSS (aro + mango) en la primera version. */
.cs-ingenieria-reveal-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background: url("/assets/images/games/ingenieria/icon-lupa.svg") no-repeat center / contain;
}

.cs-ingenieria-answer-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.cs-ingenieria-answer-label {
    margin: 0;
    color: #fff;
    font-family: "CS Clash Display", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.cs-ingenieria-answer-input {
    width: 90%;
    min-height: 48px;
    padding: 0 20px;
    background: var(--ing-navy-deep);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-family: "CS Cooper Hewitt", Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 55px;
}

.cs-ingenieria-answer-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.cs-ingenieria-answer-input:focus {
    outline: 2px solid var(--ing-pink);
    outline-offset: 2px;
}

.cs-ingenieria-validate-button {
    display: flex;
    width: min(185px, 70%);
    min-height: 48px;
    margin: 2px auto 0;
    font-size: 18px;
}

/* Robot decorativo asomandose desde la esquina inferior derecha (recurso
   propio de esta pantalla, se queda fijo mientras cambian las palabras).
   right usa un valor negativo igual al inset lateral del tema para
   cancelarlo y quedar al ras del borde real de la pantalla (mismo criterio
   que otros elementos de sangrado completo del proyecto). */
.cs-ingenieria-mascot-corner {
    position: absolute;
    z-index: 1;
    right: calc(-1 * var(--ing-side-inset));
    bottom: 36px;
    width: clamp(140px, 42vw, 210px);
    height: auto;
    pointer-events: none;
}

/* --- Pantalla de resultado por estacion (station_result.php) ---
   Mismo enfoque que cs-economia-result-illustration: el recurso ya trae
   todo horneado (globo + titulo + mensaje + patron "ingenio" + robot), asi
   que solo se centra la imagen completa, sin armar nada mas encima. */
.cs-ingenieria-result-illustration {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto 8px;
}

.cs-ingenieria-result-artwork {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    filter: drop-shadow(0 14px 20px rgba(0, 3, 40, 0.35));
}

/* Brillos/confeti de fondo SOLO en la pantalla de exito (ver
   station_result.php): va DETRAS del recurso horneado (globo + robot +
   patron "ingenio"), nunca encima -- por eso .cs-ingenieria-result-artwork
   tiene z-index:1 y este elemento se queda en 0, dentro del mismo contexto
   de apilamiento creado por .cs-ingenieria-result-illustration. El recurso
   original traia el fondo negro solido detras de cada brillo (pensado para
   mix-blend-mode:screen), pero ese truco depende de que el elemento
   comparta el mismo contexto de apilamiento que el fondo de la pagina --
   aca no ocurre, asi que el "screen" terminaba mezclandose con nada
   (transparente) y el negro quedaba visible tal cual. Se reemplazo el PNG
   por una version pre-procesada con canal alfa real (el negro se convirtio
   en transparencia de verdad, no simulada; tambien se recorto un borde
   blanco de 1px que traia el recurso original y causaba una linea visible),
   asi que ahora es un recorte normal que se ve bien sin importar el
   contexto de apilamiento. */
.cs-ingenieria-confetti {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/assets/images/games/ingenieria/brillos-transparente.webp") no-repeat center / contain;
    pointer-events: none;
}

/* El boton "Ver puntaje" de esta pantalla y el "Siguiente estacion"/"Ver
   clasificacion" de la pantalla de puntaje final (final.php) deben quedar
   centrados, igual pedido/criterio que ya se aplico para cs-sociales. */
[data-station-theme="cs-ingenieria"] .action-row {
    justify-content: center;
}

/* --- Pantalla de puntaje final (final.php), cuando la ultima estacion
   completada es la de ingenieria --- */
[data-station-theme="cs-ingenieria"] .station-score-confetti {
    background-image: url("/assets/images/games/ingenieria/brillos-transparente.webp");
}

/* Mismo patron/valores que cs-sociales para las tarjetas de "Detalle por
   estacion" en esta pantalla, con la paleta propia (--ing-*). */
[data-station-theme="cs-ingenieria"] .station-result-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    gap: 12px;
}

[data-station-theme="cs-ingenieria"] .station-result-card {
    background: #fff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(0, 6, 163, 0.18);
    gap: 5px;
}

[data-station-theme="cs-ingenieria"] .station-result-content h3 {
    color: var(--ing-navy);
}

[data-station-theme="cs-ingenieria"] .station-result-badge {
    background: var(--ing-pink);
    border: none;
    color: #fff;
}

[data-station-theme="cs-ingenieria"] .station-result-bar {
    background: rgba(0, 0, 0, 0.08);
}

[data-station-theme="cs-ingenieria"] .station-result-bar span {
    background: var(--ing-pink);
}

[data-station-theme="cs-ingenieria"] .station-result-stats {
    color: #454a7a;
}

[data-station-theme="cs-ingenieria"] .station-result-stats strong {
    color: var(--ing-navy);
}

/* Pop-ups de "Correcto" (3 variantes por pistas usadas) y "Tiempo
   agotado" al resolver cada palabra (ver showCorrectPopup/showTimeoutPopup
   en app.js): mientras estan visibles, la pantalla del reto pasa a ser
   SOLO la tarjeta/imagen + boton real, igual patron que
   data-focus-screen-active en cs-sociales -- cronometro general, barra de
   progreso y puntitos se esconden y el fondo se oscurece en vez de seguir
   con la textura navy brillante normal. */
[data-station-theme="cs-ingenieria"][data-focus-screen-active] {
    background-color: #04021c;
    background-image: none;
}

[data-station-theme="cs-ingenieria"][data-focus-screen-active] .cs-ingenieria-head,
[data-station-theme="cs-ingenieria"][data-focus-screen-active] .cs-ingenieria-progress,
[data-station-theme="cs-ingenieria"][data-focus-screen-active] .cs-ingenieria-dots,
[data-station-theme="cs-ingenieria"][data-focus-screen-active] .cs-ingenieria-mascot-corner {
    display: none;
}

[data-station-theme="cs-ingenieria"][data-focus-screen-active] .cs-ingenieria-popup-correct:not([hidden]) {
    display: flex;
    min-height: 80vh;
    min-height: 80dvh;
    justify-content: center;
}

/* Imagen ya horneada (tarjeta + candado + robot + mensaje) + boton real
   "¡Adelante!"/"Continuar" debajo, mismo patron que
   cs-sociales-popup-correct. */
.cs-ingenieria-popup-correct {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin-top: 10px;
}

.cs-ingenieria-popup-correct[hidden] {
    display: none;
}

.cs-ingenieria-popup-correct-artwork {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
}

.cs-ingenieria-popup-correct-continue {
    width: min(280px, 90%);
    min-height: 52px;
}

/* --- Pantalla de inicio / registro (register.php) ---
   Rediseno pedido explicitamente: usar el mismo fondo que cs-economia/
   cs-ingenieria (juego 2 y 4) -- copia propia de fondo-textura.jpg en
   assets/images/games/registro/, mismos valores hex de navy/rosa que esos
   2 temas (--reg-navy/--reg-navy-deep/--reg-pink son literalmente los
   mismos que --ce-navy/--ce-navy-deep/--ce-pink). La tarjeta de arriba
   (Hola Fidebot + robot + globo con el mensaje) es UN SOLO recurso ya
   horneado (mismo criterio que las demas pantallas de este proyecto), asi
   que aca solo se centra esa imagen; el resto del formulario (colegio,
   integrantes, nombre de equipo, boton) se arma con HTML/CSS propio encima
   del mismo fondo, sin tarjeta blanca de por medio (igual que la
   referencia: todo flota directo sobre el navy). */
[data-station-theme="cs-registro"] {
    --reg-navy: #0006a3;
    --reg-navy-deep: #000a8c;
    --reg-pink: #e31d93;
    --reg-cyan: #35c8ff;
    position: relative;
    display: grid;
    gap: 22px;
    margin: -14px calc(50% - 50vw) -24px;
    padding: 32px clamp(16px, 5vw, 40px) 48px;
    background-color: var(--reg-navy-deep);
    background-image: url("/assets/images/games/registro/fondo-textura.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: "CS Cooper Hewitt", Arial, system-ui, sans-serif;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

[data-station-theme="cs-registro"] .cs-registro-intro-art {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
    margin-left: 30px;
}

[data-station-theme="cs-registro"] .cs-registro-form {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 480px;
    margin: 15px auto;
}

[data-station-theme="cs-registro"] .cs-registro-field {
    display: grid;
    gap: 8px;
}

[data-station-theme="cs-registro"] .cs-registro-field-label,
[data-station-theme="cs-registro"] .cs-registro-field span:first-child {
    color: #fff;
    font-family: 'CS Cooper Hewitt';
    font-size: 0.95rem;

}

[data-station-theme="cs-registro"] .cs-registro-field input {
    width: 100%;
    min-height: 40px;
    padding: 0px 16px;
    color: #fff;
    background: rgba(0, 4, 60, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
}

[data-station-theme="cs-registro"] .cs-registro-field input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

[data-station-theme="cs-registro"] .cs-registro-field input:focus {
    outline: 3px solid rgba(255, 218, 0, 0.28);
    border-color: #ffda00;
}

[data-station-theme="cs-registro"] .cs-registro-members-block {
    display: grid;
    gap: 10px;
}

[data-station-theme="cs-registro"] .cs-registro-members {
    display: grid;
    gap: 10px;
}

/* Los 2 campos (nombre + cedula) van a la par en vez de uno debajo del
   otro (pedido explicito): el legend ocupa las 2 columnas de arriba y los
   2 inputs se auto-acomodan en la fila siguiente, uno por columna. En
   pantallas muy angostas se vuelve a apilar (ver media query abajo) para
   que el input de nombre no quede demasiado angosto. */
[data-station-theme="cs-registro"] .cs-registro-member {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    margin: 0;
    padding: 10px;
    background: rgba(0, 4, 60, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
}

[data-station-theme="cs-registro"] .cs-registro-member legend {
    grid-column: 1 / -1;
    padding: 0 0 2px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'CS Cooper Hewitt';
    font-size: 0.78rem;
}

/* Un poco mas delgados que antes: menos alto/padding y peso de fuente mas
   liviano (pedido explicito: "no tan gruesos"). */
[data-station-theme="cs-registro"] .cs-registro-member input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 10px;
    color: #fff;
    background: rgba(0, 4, 60, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
}

@media (max-width: 360px) {
    [data-station-theme="cs-registro"] .cs-registro-member {
        grid-template-columns: 1fr;
    }
}

[data-station-theme="cs-registro"] .cs-registro-member input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

[data-station-theme="cs-registro"] .cs-registro-member input:focus {
    outline: 3px solid rgba(255, 218, 0, 0.28);
    border-color: #ffda00;
}

/* Resalta solo la cedula que el sistema no encontro en el registro de la
   feria, cuando el formulario se vuelve a mostrar con los demas datos ya
   conservados (ver TeamController::register() + $invalid_members). */
[data-station-theme="cs-registro"] .cs-registro-member input.is-invalid {
    background: rgba(218, 61, 150, 0.18);
    border-color: var(--danger);
}

[data-station-theme="cs-registro"] .cs-registro-member-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #ffd7e8;
    font-size: 0.74rem;
    font-weight: 700;
}

[data-station-theme="cs-registro"] .cs-registro-name-block {
    display: grid;
    gap: 8px;
    text-align: center;
}

/* El "pill" rosa ES el boton que dispara la generacion via Ollama (ver
   TeamNameGeneratorService + app.js): antes de generar muestra un texto
   invitando a tocarlo, despues muestra el nombre generado. El input real
   que viaja en el submit es un hidden aparte (mismo valor, name="team_name"). */
[data-station-theme="cs-registro"] .cs-registro-name-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 35px;
    color: #fff;
    background: var(--reg-pink);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.15s ease;
}

[data-station-theme="cs-registro"] .cs-registro-name-pill:hover {
    filter: brightness(1.08);
}

[data-station-theme="cs-registro"] .cs-registro-name-pill:active {
    transform: translateY(2px);
}

[data-station-theme="cs-registro"] .cs-registro-name-pill[data-loading] {
    opacity: 0.75;
    cursor: wait;
}

[data-station-theme="cs-registro"] .cs-registro-name-hint {
    margin: 0;
    color: #ffb4d8;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

[data-station-theme="cs-registro"] .cs-registro-name-hint[hidden] {
    display: none;
}

[data-station-theme="cs-registro"] .cs-registro-submit {
    width: 60%;
    padding: 15px;
    max-width: 480px;
    margin: 4px auto 0;
    font-size: 20px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    box-shadow: 0 6px 0 var(--reg-navy), 0 14px 24px rgba(0, 3, 40, 0.3);
}

[data-station-theme="cs-registro"] .cs-registro-submit:hover {
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    box-shadow: 0 7px 0 var(--reg-navy), 0 16px 26px rgba(0, 3, 40, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-registro"] .cs-registro-submit:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--reg-navy), 0 6px 14px rgba(0, 3, 40, 0.26);
}

[data-station-theme="cs-registro"] .cs-registro-logo {
    display: block;
    width: 140px;
    height: auto;
    margin: 8px auto 0;
}

/* Secciones que se conservan debajo de la tarjeta principal (mapa de
   estaciones, instrucciones, reingreso): mismas clases genericas del sitio
   (.panel/.station-map/.intro-steps/.resume-form), solo se retinan los
   colores para que combinen con el navy/rosa de este tema en vez del tema
   oscuro generico. */
[data-station-theme="cs-registro"] .cs-registro-section {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: clamp(14px, 2.5vw, 22px);
    background: rgba(0, 4, 60, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
}

[data-station-theme="cs-registro"] .eyebrow {
    color: var(--reg-navy-deep);
    background: #ffda00;
}

[data-station-theme="cs-registro"] .cs-registro-section h2,
[data-station-theme="cs-registro"] .cs-registro-section .mission-lead {
    color: #fff;
}

[data-station-theme="cs-registro"] .station-map {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

[data-station-theme="cs-registro"] .station-node {
    background: rgba(0, 4, 60, 0.45);
    border-color: rgba(255, 255, 255, 0.16);
}

[data-station-theme="cs-registro"] .station-node strong {
    color: #fff;
}

[data-station-theme="cs-registro"] .station-node.active {
    border-color: #ffda00;
    box-shadow: inset 0 0 0 1px rgba(255, 218, 0, 0.35);
}

[data-station-theme="cs-registro"] .intro-steps li {
    background: rgba(0, 4, 60, 0.45);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

[data-station-theme="cs-registro"] .resume-form input {
    color: #fff;
    background: rgba(0, 4, 60, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

[data-station-theme="cs-registro"] .resume-form .field span {
    color: rgba(255, 255, 255, 0.85);
}

[data-station-theme="cs-registro"] .button-secondary {
    color: #fff;
    background: rgba(0, 4, 60, 0.55);
    border-color: rgba(255, 255, 255, 0.24);
}

[data-station-theme="cs-registro"] .button-secondary:hover {
    border-color: #ffda00;
}

/* "Ver clasificacion" de la pantalla de cierre (final.php): mismo pedido
   explicito que ya se aplico en los otros 4 temas -- 22px + la franja
   azul solida debajo (box-shadow), en vez del boton generico plano. */
[data-station-theme="cs-registro"] .button-primary {
    font-size: 22px;
    border-radius: 999px;
    font-family: "CS Clash Display", sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 0 var(--reg-navy), 0 14px 24px rgba(0, 3, 40, 0.3);
}

[data-station-theme="cs-registro"] .button-primary:hover {
    background: linear-gradient(180deg, #ffe454, #ffda00 60%);
    box-shadow: 0 7px 0 var(--reg-navy), 0 16px 26px rgba(0, 3, 40, 0.34);
    transform: translateY(-1px);
}

[data-station-theme="cs-registro"] .button-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--reg-navy), 0 6px 14px rgba(0, 3, 40, 0.26);
}

@media (min-width: 720px) {
    [data-station-theme="cs-registro"] .cs-registro-members {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pantalla "Equipo registrado" (registered.php): se muestra justo despues
   de inscribirse, antes de escanear el primer QR. La tarjeta (robot +
   titulo + globo con el mensaje) es UN SOLO recurso ya horneado (mismo
   criterio que el resto del proyecto), centrada en el mismo fondo navy de
   este tema; abajo va un boton real (no horneado) con el icono de camara
   para que puedan abrir el escaner. */
[data-station-theme="cs-registro"] .cs-registro-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: 24px 0;
}

[data-station-theme="cs-registro"] .cs-registro-confirm-art {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
}

[data-station-theme="cs-registro"] .cs-registro-scan-button {
    display: inline-flex;
    width: 96px;
    height: 96px;
    transition: transform 0.08s ease, filter 0.15s ease;
}

[data-station-theme="cs-registro"] .cs-registro-scan-button img {
    display: block;
    width: 100%;
    height: 100%;
}

[data-station-theme="cs-registro"] .cs-registro-scan-button:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

[data-station-theme="cs-registro"] .cs-registro-scan-button:active {
    transform: translateY(1px);
}

/* Pantalla del escaner (scanner.php, GET /qr): pedido explicito de dejar
   SOLO el recuadro de la camara centrado sobre el mismo fondo navy de este
   tema, sin titulo/badge/texto de colegio-estacion ni input manual de
   codigo. */
[data-station-theme="cs-registro"] .cs-registro-scanner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 0;
}

[data-station-theme="cs-registro"] .cs-registro-video-frame {
    position: relative;
    width: min(360px, 86vw);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(0, 4, 60, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    box-shadow: 0 20px 40px rgba(0, 3, 40, 0.35);
}

[data-station-theme="cs-registro"] .cs-registro-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-station-theme="cs-registro"] .cs-registro-scan-line {
    position: absolute;
    inset: 12%;
    border: 3px solid #ffda00;
    border-radius: 20px;
    box-shadow: inset 0 0 30px rgba(255, 218, 0, 0.18);
    pointer-events: none;
}

/* Boton "Toca para activar la camara": vive ENCIMA del video (no al lado,
   como antes), asi que se oculta apenas se toca para no taparlo mientras
   escanea (ver app.js). */
[data-station-theme="cs-registro"] .cs-registro-scan-start {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 24px;
    color: #fff;
    background: rgba(0, 4, 60, 0.72);
    border: none;
    font: inherit;
    font-family: "CS Clash Display", "CS Cooper Hewitt", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

[data-station-theme="cs-registro"] .cs-registro-scan-start[hidden] {
    display: none;
}

[data-station-theme="cs-registro"] .cs-registro-scan-start-icon {
    display: block;
    width: 64px;
    height: 64px;
}

[data-station-theme="cs-registro"] .cs-registro-scan-status {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    z-index: 3;
    margin: 0;
    padding: 8px 12px;
    color: #fff;
    background: rgba(207, 56, 145, 0.9);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

[data-station-theme="cs-registro"] .cs-registro-scan-status[hidden] {
    display: none;
}