:root {
  --fondo: #f7f9fd;
  --panel: #ffffff;
  --texto: #26354a;
  --texto-suave: #607087;
  --borde: #e3e9f2;
  --primario: #3167e3;
  --primario-oscuro: #19439d;
  --primario-suave: #eaf1ff;
  --secundario: #18b8a8;
  --secundario-oscuro: #087c73;
  --secundario-suave: #e2faf7;
  --acento: #ffc857;
  --acento-suave: #fff5d9;
  --peligro: #e5484d;
  --peligro-suave: #fff0f1;
  --exito: #18865f;
  --exito-suave: #e9f8ef;
  --sombra: 0 14px 35px rgba(29, 52, 86, .10);
  --radio: 22px;
  --radio-menor: 15px;
  --cabecera-alto: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; min-width: 320px; color: var(--texto); background: var(--fondo); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(47, 127, 114, .35); outline-offset: 3px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.barra-superior {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: var(--cabecera-alto);
  padding: 12px clamp(16px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(12px);
}
.marca-juego { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.marca-juego strong, .marca-juego small { display: block; }
.marca-juego strong { font-size: 1rem; line-height: 1.2; }
.marca-juego small { color: var(--texto-suave); font-size: .78rem; margin-top: 2px; }
.marca-sello { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: white; background: var(--primario); }
.acciones-superiores, .perfil-acciones { display: flex; align-items: center; gap: 8px; }
.boton-icono {
  min-width: 43px;
  height: 43px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  color: var(--texto);
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.boton-icono:hover { background: #f3f5f7; border-color: #cbd2da; }
.boton-icono:active { transform: translateY(1px); }
.boton-texto span { font-size: .9rem; font-weight: 650; }
.icon-sonido-on { display: none; }
#btnSonido[aria-pressed="true"] .icon-sonido-on { display: block; }
#btnSonido[aria-pressed="true"] .icon-sonido-off { display: none; }

.contenedor-juego { width: min(1500px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 52px); }
.sobretitulo { margin: 0 0 7px; color: var(--secundario); font-weight: 750; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -.04em; }
h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
h3 { margin: 0; font-size: 1.13rem; }
p { margin: 0; }
.texto-principal { color: var(--texto-suave); font-size: clamp(1rem, 2vw, 1.16rem); max-width: 650px; }

.pantalla-acceso, .pantalla-inicio {
  min-height: calc(100vh - var(--cabecera-alto) - 80px);
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 7vw, 100px);
}
.acceso-ilustracion, .inicio-ilustracion { display: grid; place-items: center; }
.gestante-svg { width: min(100%, 520px); height: auto; overflow: visible; filter: drop-shadow(0 18px 35px rgba(95, 45, 91, .13)); }
.gestante-fondo { fill: #eaf1ff; }
.gestante-cabello { fill: #49323f; }
.gestante-piel, .gestante-cuello { fill: #efb69f; }
.gestante-ropa { fill: #3167e3; }
.gestante-barriga { fill: #18b8a8; opacity: .88; }
.gestante-brazo, .gestante-mano, .gestante-ojo, .gestante-sonrisa { fill: none; stroke: #633e48; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.gestante-mano { stroke: #efb69f; stroke-width: 18; }
.gestante-ojo { stroke-width: 8; }
.gestante-sonrisa { stroke-width: 5; }
.corazon-flotante { fill: #ff7669; transform-origin: 326px 126px; animation: latido 2.4s ease-in-out infinite; }
.brillo { fill: #f4b942; opacity: .55; animation: brillo 3s ease-in-out infinite; }
.brillo-2 { animation-delay: .7s; }
.brillo-3 { animation-delay: 1.4s; }
.inicio-ilustracion .gestante-svg { animation: respirar 4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes respirar { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.008); } }
@keyframes latido { 0%,100% { transform: scale(1); } 45% { transform: scale(1.08); } 55% { transform: scale(1.02); } 65% { transform: scale(1.1); } }
@keyframes brillo { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: .8; transform: scale(1.15); } }

.acceso-contenido, .inicio-contenido { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.auth-panel { width: min(100%, 550px); margin-top: 8px; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; padding: 5px; background: #f1f3f5; border-radius: 13px; }
.auth-tab { min-height: 43px; border: 0; border-radius: 10px; color: var(--texto-suave); background: transparent; font-weight: 700; }
.auth-tab.activo { color: var(--primario-oscuro); background: var(--panel); box-shadow: 0 2px 9px rgba(32, 39, 51, .08); }
.auth-form { display: grid; gap: 10px; }
.auth-form label:not(.check-linea) { margin-top: 5px; font-weight: 700; font-size: .9rem; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #cfd6de; border-radius: 11px; color: var(--texto); background: white; }
.auth-form input:focus { border-color: var(--secundario); box-shadow: 0 0 0 3px rgba(47, 127, 114, .12); outline: none; }
.check-linea { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 4px; color: var(--texto-suave); font-size: .9rem; }
.check-linea input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--secundario); }
.mensaje-formulario { min-height: 24px; margin-top: 10px; color: var(--peligro); font-weight: 650; font-size: .9rem; }
.mensaje-formulario.exito { color: var(--exito); }
.nota-modo { margin-top: 8px; color: var(--texto-suave); font-size: .82rem; }

.boton-principal, .boton-secundario {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.boton-principal { border: 1px solid var(--primario); color: white; background: var(--primario); }
.boton-principal:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); transform: translateY(-1px); }
.boton-secundario { border: 1px solid #cbd2da; color: var(--texto); background: white; }
.boton-secundario:hover { background: #f4f6f8; border-color: #b9c2cc; }
.boton-principal:disabled, .boton-secundario:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.boton-grande { min-height: 56px; min-width: min(100%, 310px); font-size: 1.04rem; }
.boton-compacto { min-height: 41px; padding: 8px 13px; font-size: .86rem; }
.inicio-resumen { display: flex; flex-wrap: wrap; gap: 9px; }
.inicio-resumen span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--borde); border-radius: 999px; background: white; color: var(--texto-suave); font-size: .88rem; }
.inicio-resumen .icon { color: var(--secundario); }

.game-app { display: grid; gap: 22px; }
.perfil-barra { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border: 1px solid var(--borde); border-radius: var(--radio-menor); background: var(--panel); }
.perfil-usuario { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--primario); font-weight: 800; font-size: 1.15rem; }
.perfil-usuario strong, .perfil-usuario span { display: block; }
.perfil-usuario span { color: var(--texto-suave); font-size: .88rem; margin-top: 2px; }
.estado-servidor { padding: 5px 9px; border-radius: 999px; color: var(--secundario-oscuro); background: var(--secundario-suave); font-size: .74rem; font-weight: 750; }
.estado-servidor.local { color: #7d592b; background: var(--acento-suave); }

.resumen-superior { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.resumen-item { min-width: 0; min-height: 82px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio-menor); background: var(--panel); display: flex; align-items: center; gap: 10px; }
.resumen-icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.resumen-icono.vida { color: #e5484d; background: #fff0f1; }
.resumen-icono.punto { color: #256f65; background: #eaf0ff; }
.resumen-icono.estrella { color: #9b651e; background: #fff1db; }
.resumen-icono.logro { color: #8667df; background: #f1edff; }
.resumen-icono.comunidad { color: #3d638a; background: #e9f0f7; }
.resumen-item strong, .resumen-item small { display: block; }
.resumen-item strong { font-size: 1.15rem; }
.resumen-item small { color: var(--texto-suave); font-size: .76rem; line-height: 1.25; margin-top: 2px; }

.layout-principal { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr); align-items: start; gap: 22px; }
.panel { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); box-shadow: 0 5px 20px rgba(32, 39, 51, .04); }
.panel:not(.mapa-panel) { padding: clamp(18px, 3vw, 26px); }
.panel-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-titulo p { margin-top: 6px; color: var(--texto-suave); max-width: 700px; }
.panel-titulo.compacto h2 { font-size: 1.35rem; }
.panel-titulo.compacto p { font-size: .9rem; }
.ayuda-contextual { flex: 0 0 auto; }
.panel-sticky { position: sticky; top: calc(var(--cabecera-alto) + 18px); }

.mapa-panel { overflow: hidden; }
.mapa-panel > .panel-titulo { padding: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--borde); }
.mapa-progreso { position: relative; min-height: 1160px; padding: 40px 25px; overflow: hidden; background: linear-gradient(180deg, #fbfdfc 0%, #f5faf8 45%, #faf7fb 100%); }
.mapa-progreso::before, .mapa-progreso::after { content: ""; position: absolute; border-radius: 50%; opacity: .7; filter: blur(1px); }
.mapa-progreso::before { width: 260px; height: 260px; left: -100px; top: 130px; background: #e8f3eb; }
.mapa-progreso::after { width: 300px; height: 300px; right: -110px; bottom: 90px; background: #f1e8f2; }
.mapa-ruta { position: absolute; inset: 40px 9% 35px 9%; width: 82%; height: calc(100% - 75px); overflow: visible; }
.ruta-base, .ruta-avance { fill: none; stroke-linecap: round; stroke-width: 18; }
.ruta-base { stroke: #dfe6e2; stroke-dasharray: 1 2.2; }
.ruta-avance { stroke: var(--secundario); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .8s ease; }
.mapa-inicio, .mapa-meta { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--texto-suave); font-size: .78rem; font-weight: 700; }
.mapa-inicio { left: 7%; top: 22px; }
.mapa-meta { right: 9%; bottom: 20px; }
.mapa-inicio .icon, .mapa-meta .icon { width: 30px; height: 30px; color: var(--primario); }
.niveles-lista { position: absolute; inset: 0; z-index: 5; }
.nivel-mapa { position: absolute; width: min(320px, 43%); display: flex; align-items: center; gap: 13px; }
.nivel-mapa[data-level="1"] { left: 13%; top: 7%; }
.nivel-mapa[data-level="2"] { right: 10%; top: 23%; flex-direction: row-reverse; text-align: right; }
.nivel-mapa[data-level="3"] { left: 10%; top: 39%; }
.nivel-mapa[data-level="4"] { right: 8%; top: 55%; flex-direction: row-reverse; text-align: right; }
.nivel-mapa[data-level="5"] { left: 12%; top: 71%; }
.nivel-mapa[data-level="6"] { right: 10%; top: 87%; flex-direction: row-reverse; text-align: right; }
.nivel-boton { position: relative; width: 84px; height: 84px; flex: 0 0 84px; border: 7px solid white; border-radius: 50%; color: white; background: var(--secundario); box-shadow: 0 0 0 3px #cfe4de, 0 10px 20px rgba(34, 100, 90, .17); display: grid; place-items: center; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.nivel-boton:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 0 0 4px #c5e1da, 0 15px 25px rgba(34, 100, 90, .2); }
.nivel-boton:disabled { cursor: not-allowed; color: #75808c; background: #d7dce1; box-shadow: 0 0 0 3px #e6e9ec; }
.nivel-boton.actual { background: var(--primario); box-shadow: 0 0 0 4px #e4cfe2, 0 12px 25px rgba(95, 45, 91, .25); animation: pulsoNivel 2.2s ease-in-out infinite; }
.nivel-boton.completado { background: var(--exito); }
.nivel-boton.pendiente { color: #684a23; background: #e9b65a; box-shadow: 0 0 0 3px #f6e2bb; }
.nivel-boton.rechazado { color: #7c3d3d; background: #e5a5a5; box-shadow: 0 0 0 3px #f3d7d7; }
.nivel-boton .numero { font-size: 1.5rem; font-weight: 850; }
.nivel-boton .icon { width: 30px; height: 30px; }
.nivel-boton .estado-mini { position: absolute; right: -5px; bottom: -5px; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; color: var(--texto); background: white; box-shadow: 0 3px 9px rgba(32,39,51,.18); }
.nivel-boton .estado-mini .icon { width: 17px; height: 17px; }
@keyframes pulsoNivel { 0%,100% { box-shadow: 0 0 0 4px #e4cfe2, 0 12px 25px rgba(95,45,91,.23); } 50% { box-shadow: 0 0 0 10px rgba(228,207,226,.45), 0 15px 29px rgba(95,45,91,.26); } }
.nivel-info { min-width: 0; padding: 10px 13px; border: 1px solid rgba(223, 228, 234, .9); border-radius: 13px; background: rgba(255,255,255,.95); box-shadow: 0 5px 15px rgba(32,39,51,.05); }
.nivel-info strong, .nivel-info span, .nivel-info small { display: block; }
.nivel-info strong { font-size: .95rem; }
.nivel-info span { color: var(--texto-suave); font-size: .78rem; margin-top: 1px; }
.nivel-info small { color: var(--secundario); font-size: .72rem; font-weight: 700; margin-top: 5px; }
.estrellas-mapa { display: inline-flex !important; flex-direction: row; gap: 1px; margin-top: 4px; color: #d29a3f; }
.estrellas-mapa .icon { width: 14px; height: 14px; }
.estrellas-mapa .vacia { opacity: .22; }
.cofre-mapa { position: absolute; z-index: 8; width: 56px; height: 51px; border: 0; border-radius: 13px; color: #87601d; background: #f4c05d; box-shadow: 0 8px 16px rgba(93, 67, 27, .16); display: grid; place-items: center; }
.cofre-mapa .icon { width: 30px; height: 30px; }
.cofre-mapa[data-level="2"] { left: 16%; top: 31%; }
.cofre-mapa[data-level="4"] { right: 18%; top: 63%; }
.cofre-mapa[data-level="6"] { left: 23%; top: 91%; }
.cofre-mapa:disabled { cursor: default; color: #8a929b; background: #e0e4e8; }
.cofre-mapa.disponible { animation: cofreBrillo 1.6s ease-in-out infinite; }
@keyframes cofreBrillo { 0%,100% { transform: translateY(0); box-shadow: 0 8px 16px rgba(93,67,27,.16); } 50% { transform: translateY(-5px); box-shadow: 0 13px 24px rgba(216,139,55,.35); } }

.progreso-circular { --progreso: 0; width: 170px; aspect-ratio: 1; margin: 24px auto; border-radius: 50%; background: conic-gradient(var(--secundario) calc(var(--progreso) * 1%), #e5e9ec 0); display: grid; place-items: center; position: relative; }
.progreso-circular::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: white; }
.progreso-circular > div { position: relative; z-index: 2; display: grid; text-align: center; }
.progreso-circular strong { font-size: 1.85rem; line-height: 1.15; }
.progreso-circular span { color: var(--texto-suave); font-size: .78rem; }
.estado-control, .estado-validaciones { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: #f5f7f8; }
.estado-control { justify-content: space-between; }
.estado-control span { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: .82rem; }
.estado-control strong { font-size: .85rem; }
.estadisticas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.estadisticas-grid div { padding: 11px; border: 1px solid var(--borde); border-radius: 11px; }
.estadisticas-grid strong, .estadisticas-grid small { display: block; }
.estadisticas-grid strong { font-size: 1rem; }
.estadisticas-grid small { color: var(--texto-suave); font-size: .73rem; margin-top: 2px; }
.estado-validaciones { color: var(--primario-oscuro); background: var(--primario-suave); font-size: .83rem; }

.secciones-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ranking-panel, .certificado-panel { grid-column: 1 / -1; }
.misiones-lista { display: grid; gap: 10px; margin-top: 20px; }
.mision-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--borde); border-radius: 13px; }
.mision-icono { width: 41px; height: 41px; border-radius: 11px; display: grid; place-items: center; color: var(--secundario); background: var(--secundario-suave); }
.mision-contenido strong, .mision-contenido span { display: block; }
.mision-contenido strong { font-size: .9rem; }
.mision-contenido span { color: var(--texto-suave); font-size: .77rem; margin-top: 2px; }
.mision-progreso { margin-top: 7px; height: 8px; border-radius: 999px; background: #e7ebee; overflow: hidden; }
.mision-progreso span { height: 100%; background: var(--secundario); border-radius: inherit; }
.mision-estado { min-width: 84px; min-height: 37px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 10px; color: var(--texto-suave); background: white; font-size: .76rem; font-weight: 750; }
.mision-estado.lista { color: white; border-color: var(--secundario); background: var(--secundario); }
.mision-estado:disabled { cursor: default; }

.ruleta-contenido { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(220px, 1fr); align-items: center; gap: 24px; margin-top: 18px; }
.ruleta-escena { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.ruleta-disco { position: absolute; inset: 14px; border: 9px solid white; border-radius: 50%; background: conic-gradient(from -30deg, #3167e3 0 60deg, #4a72dc 60deg 120deg, #f4b942 120deg 180deg, #5e7691 180deg 240deg, #9b5a67 240deg 300deg, #548565 300deg 360deg); box-shadow: 0 0 0 2px var(--borde), 0 16px 35px rgba(32,39,51,.15); transition: transform 4.5s cubic-bezier(.13,.72,.11,1); }
.ruleta-disco::after { content: ""; position: absolute; inset: 19%; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; }
.ruleta-puntero { position: absolute; z-index: 8; top: -1px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 31px solid var(--texto); filter: drop-shadow(0 4px 4px rgba(32,39,51,.15)); }
.ruleta-centro { position: relative; z-index: 7; width: 68px; height: 68px; border: 8px solid white; border-radius: 50%; display: grid; place-items: center; color: var(--primario); background: white; box-shadow: 0 5px 15px rgba(32,39,51,.16); }
.ruleta-centro .icon { width: 29px; height: 29px; }
.ruleta-marca { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; color: white; transform: translate(-50%,-50%); }
.ruleta-marca .icon { width: 24px; height: 24px; }
.marca-1 { left: 50%; top: 17%; }
.marca-2 { left: 79%; top: 34%; transform: translate(-50%,-50%) rotate(-60deg); }
.marca-3 { left: 79%; top: 67%; transform: translate(-50%,-50%) rotate(-120deg); }
.marca-4 { left: 50%; top: 83%; transform: translate(-50%,-50%) rotate(-180deg); }
.marca-5 { left: 21%; top: 67%; transform: translate(-50%,-50%) rotate(-240deg); }
.marca-6 { left: 21%; top: 34%; transform: translate(-50%,-50%) rotate(-300deg); }
.ruleta-detalle { display: grid; gap: 17px; }
.premios-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.premios-lista li { padding: 8px 10px; border-radius: 10px; display: flex; align-items: center; gap: 7px; color: var(--texto-suave); background: #f4f6f7; font-size: .8rem; }
.premios-lista .icon { color: var(--primario); }

.tabla-scroll { margin-top: 18px; overflow-x: auto; }
.ranking-tabla { width: 100%; border-collapse: collapse; min-width: 580px; }
.ranking-tabla th, .ranking-tabla td { padding: 12px 10px; border-bottom: 1px solid var(--borde); text-align: left; }
.ranking-tabla th { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.ranking-tabla td { font-size: .9rem; }
.ranking-puesto { width: 42px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; background: #f1f3f5; font-weight: 800; }
.ranking-puesto.top { color: #81571e; background: #fff0d6; }
.ranking-nombre { display: flex; align-items: center; gap: 9px; }
.ranking-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--primario); font-size: .78rem; font-weight: 800; }
.ranking-yo { color: var(--primario-oscuro); font-weight: 750; }

.logros-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 18px; }
.logro-item { min-height: 150px; padding: 15px; border: 1px solid var(--borde); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.logro-item.bloqueado { opacity: .63; background: #f6f7f8; }
.logro-item.conseguido { border-color: #cfe4dc; background: #f4fbf8; }
.logro-icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #818a94; background: #e6e9ec; }
.logro-item.conseguido .logro-icono { color: var(--exito); background: var(--exito-suave); }
.logro-item strong { font-size: .91rem; }
.logro-item p { color: var(--texto-suave); font-size: .78rem; }
.logro-fecha { margin-top: auto; color: var(--secundario); font-size: .7rem; font-weight: 700; }

.certificado-resumen { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; }
.certificado-sello { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; color: var(--primario); background: var(--primario-suave); }
.certificado-sello .icon { width: 38px; height: 38px; }
.certificado-resumen p:not(.sobretitulo) { color: var(--texto-suave); margin-top: 5px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.modal-fondo { position: absolute; inset: 0; background: rgba(25, 31, 40, .62); backdrop-filter: blur(5px); }
.modal-contenido { position: relative; z-index: 2; width: min(760px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; background: white; box-shadow: 0 24px 60px rgba(20,25,32,.28); }
.modal-nivel { width: min(850px, 100%); }
.modal-pequeno { width: min(520px, 100%); padding: 22px; }
.modal-diploma { width: min(820px, 100%); padding: 22px; }
.modal-cabecera { padding: 20px 22px; border-bottom: 1px solid var(--borde); display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.modal-cabecera p { color: var(--texto-suave); margin-top: 3px; }
.modal-paso { display: block; margin-bottom: 4px; color: var(--secundario); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.modal-acciones-cabecera { display: flex; gap: 7px; }
.barra-pasos { height: 8px; background: #e8ecee; }
.barra-pasos span { display: block; width: 0; height: 100%; background: var(--secundario); transition: width .3s ease; }
.nivel-meta { padding: 12px 22px; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 16px; color: var(--texto-suave); }
.nivel-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; }
.nivel-meta .icon { color: var(--primario); }
.nivel-cuerpo { padding: clamp(22px, 5vw, 42px); }
.pregunta-etiqueta { color: var(--secundario); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.pregunta-titulo { margin-top: 8px; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.2; max-width: 710px; }
.pregunta-ayuda { margin-top: 8px; color: var(--texto-suave); }
.opciones-lista { display: grid; gap: 11px; margin-top: 24px; }
.opcion-respuesta { width: 100%; min-height: 58px; padding: 13px 15px; border: 1px solid #cfd6de; border-radius: 13px; display: flex; align-items: center; gap: 12px; color: var(--texto); background: white; text-align: left; }
.opcion-respuesta:hover:not(:disabled) { border-color: var(--secundario); background: #f6fbf9; }
.opcion-letra { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--secundario-oscuro); background: var(--secundario-suave); font-weight: 800; }
.opcion-respuesta.seleccionada { border-color: var(--primario); background: var(--primario-suave); }
.opcion-respuesta.segura { border-color: var(--exito); background: var(--exito-suave); }
.opcion-respuesta.revisar { border-color: #d6a14e; background: var(--acento-suave); }
.feedback-caja { margin-top: 18px; padding: 14px 15px; border-radius: 13px; display: flex; align-items: flex-start; gap: 10px; background: #f4f6f7; }
.feedback-caja.positivo { color: #205c44; background: var(--exito-suave); }
.feedback-caja.orientacion { color: #6d4a1e; background: var(--acento-suave); }
.feedback-caja .icon { margin-top: 2px; }
.feedback-caja strong, .feedback-caja p { display: block; }
.feedback-caja p { color: inherit; margin-top: 3px; font-size: .9rem; }
.acciones-nivel { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.escenario-caja { margin-top: 18px; padding: 18px; border-left: 5px solid var(--acento); border-radius: 11px; background: var(--acento-suave); }
.escenario-caja p { font-size: 1.05rem; }
.resultado-nivel { text-align: center; }
.resultado-sello { width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--secundario); animation: aparecerSello .45s ease both; }
.resultado-sello .icon { width: 45px; height: 45px; }
@keyframes aparecerSello { from { opacity: 0; transform: scale(.6) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.resultado-nivel h3 { font-size: 1.8rem; }
.resultado-nivel > p { max-width: 570px; margin: 8px auto 0; color: var(--texto-suave); }
.resultado-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.resultado-datos div { padding: 13px; border: 1px solid var(--borde); border-radius: 12px; }
.resultado-datos strong, .resultado-datos span { display: block; }
.resultado-datos strong { font-size: 1.15rem; }
.resultado-datos span { color: var(--texto-suave); font-size: .75rem; }
.estrellas-resultado { display: flex; justify-content: center; gap: 6px; color: #d29a3f; margin: 14px 0; }
.estrellas-resultado .icon { width: 34px; height: 34px; }
.estrellas-resultado .vacia { opacity: .2; }
.asistencia-caja { margin-top: 20px; padding: 18px; border: 1px solid var(--borde); border-radius: 14px; text-align: left; background: #fafbfc; }
.asistencia-caja h3 { font-size: 1.1rem; }
.asistencia-caja p { color: var(--texto-suave); margin-top: 5px; font-size: .9rem; }
.asistencia-caja .check-linea { color: var(--texto); margin: 15px 0; }
.estado-validacion-caja { margin-top: 15px; padding: 13px; border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; background: var(--primario-suave); color: var(--primario-oscuro); }
.estado-validacion-caja.aprobada { color: var(--exito); background: var(--exito-suave); }
.estado-validacion-caja.rechazada { color: var(--peligro); background: var(--peligro-suave); }
.mochila-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.objeto-mochila { min-height: 65px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; display: flex; align-items: center; gap: 10px; background: white; text-align: left; }
.objeto-mochila .icon { color: var(--primario); }
.objeto-mochila.seleccionado { border-color: var(--secundario); background: var(--secundario-suave); }
.objeto-mochila.incorrecto { border-color: #d9a154; background: var(--acento-suave); }

.ayuda-cuerpo { margin: 18px 0; display: flex; align-items: flex-start; gap: 13px; }
.ayuda-icono { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--secundario); background: var(--secundario-suave); flex: 0 0 auto; }
.ayuda-cuerpo p { color: var(--texto-suave); }
.recompensa-modal { text-align: center; }
.recompensa-icono { width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 24px; display: grid; place-items: center; color: var(--primario); background: var(--primario-suave); }
.recompensa-icono .icon { width: 48px; height: 48px; }
.recompensa-modal p:not(.sobretitulo) { color: var(--texto-suave); margin: 7px 0 20px; }

.diploma-vista { margin: 18px 0; padding: clamp(28px, 6vw, 58px); border: 9px double var(--primario); border-radius: 7px; text-align: center; background: linear-gradient(145deg, #fff 0%, #faf4f9 100%); }
.diploma-marca { width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #8f5c1f; background: #f7dca7; }
.diploma-marca .icon { width: 44px; height: 44px; }
.diploma-vista > p:first-of-type { color: var(--secundario); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.diploma-vista h3 { margin-top: 7px; color: var(--primario-oscuro); font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); }
.diploma-vista > span { display: block; margin-top: 22px; color: var(--texto-suave); }
.diploma-vista > strong { display: block; margin: 7px 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 4vw, 2.5rem); }
.diploma-vista > p:not(:first-of-type) { max-width: 560px; margin: 8px auto; color: var(--texto-suave); }
.diploma-datos { margin: 25px auto 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; font-weight: 750; }
.diploma-vista small { color: var(--texto-suave); }
.diploma-acciones { display: flex; flex-wrap: wrap; gap: 9px; }

.toast-contenedor { position: fixed; z-index: 150; right: 18px; bottom: 18px; width: min(390px, calc(100% - 36px)); display: grid; gap: 9px; }
.toast { padding: 13px 15px; border: 1px solid var(--borde); border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; color: var(--texto); background: white; box-shadow: var(--sombra); animation: toastEntrada .25s ease both; }
.toast .icon { color: var(--secundario); }
.toast p { font-size: .88rem; }
@keyframes toastEntrada { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.confeti-capa { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.confeti { position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 2px; animation: caerConfeti 2.4s linear forwards; }
@keyframes caerConfeti { to { transform: translate3d(var(--desvio), 110vh, 0) rotate(760deg); opacity: .2; } }

@media (max-width: 1180px) {
  .resumen-superior { grid-template-columns: repeat(3, 1fr); }
  .layout-principal { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); }
  .nivel-mapa { width: 46%; }
  .logros-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --cabecera-alto: 66px; }
  .contenedor-juego { padding: 20px 15px 40px; }
  .pantalla-acceso, .pantalla-inicio { min-height: auto; grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
  .acceso-ilustracion, .inicio-ilustracion { order: -1; }
  .gestante-svg { width: min(75vw, 390px); }
  .acceso-contenido, .inicio-contenido { align-items: stretch; }
  .layout-principal { grid-template-columns: 1fr; }
  .panel-sticky { position: static; }
  .secciones-secundarias { grid-template-columns: 1fr; }
  .ranking-panel, .certificado-panel { grid-column: auto; }
  .certificado-resumen { grid-template-columns: auto 1fr auto; }
  .certificado-resumen .ayuda-contextual { grid-column: 3; grid-row: 1; }
  .certificado-resumen .boton-principal { grid-column: 1 / -1; }
  .mapa-progreso { min-height: 1060px; }
  .nivel-mapa { width: 48%; }
  .nivel-info { padding: 9px 10px; }
}

@media (max-width: 680px) {
  .barra-superior { padding: 10px 13px; }
  .marca-juego small { display: none; }
  .boton-texto span { display: none; }
  .acciones-superiores { gap: 5px; }
  .boton-icono { min-width: 41px; height: 41px; padding: 0 9px; }
  h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .resumen-superior { grid-template-columns: repeat(2, 1fr); }
  .perfil-barra { align-items: flex-start; }
  .perfil-acciones { flex-wrap: wrap; justify-content: flex-end; }
  .estado-servidor { display: none; }
  .mapa-progreso { min-height: 1140px; padding: 30px 8px; }
  .mapa-ruta { inset-inline: 3%; width: 94%; }
  .nivel-mapa { width: 69%; gap: 9px; }
  .nivel-mapa[data-level="1"] { left: 4%; top: 7%; }
  .nivel-mapa[data-level="2"] { right: 3%; top: 23%; }
  .nivel-mapa[data-level="3"] { left: 3%; top: 39%; }
  .nivel-mapa[data-level="4"] { right: 3%; top: 55%; }
  .nivel-mapa[data-level="5"] { left: 4%; top: 71%; }
  .nivel-mapa[data-level="6"] { right: 3%; top: 87%; }
  .nivel-boton { width: 70px; height: 70px; flex-basis: 70px; border-width: 6px; }
  .nivel-info strong { font-size: .86rem; }
  .nivel-info span { font-size: .7rem; }
  .cofre-mapa { width: 48px; height: 44px; }
  .cofre-mapa[data-level="2"] { left: 7%; top: 31%; }
  .cofre-mapa[data-level="4"] { right: 8%; top: 63%; }
  .cofre-mapa[data-level="6"] { left: 12%; top: 92%; }
  .ruleta-contenido { grid-template-columns: 1fr; }
  .premios-lista { grid-template-columns: 1fr 1fr; }
  .logros-lista { grid-template-columns: 1fr; }
  .certificado-resumen { grid-template-columns: 1fr auto; }
  .certificado-sello { width: 58px; height: 58px; grid-row: 1; }
  .certificado-resumen > div { grid-column: 1 / -1; grid-row: 2; }
  .certificado-resumen .ayuda-contextual { grid-column: 2; grid-row: 1; }
  .resultado-datos { grid-template-columns: 1fr; }
  .mochila-grid { grid-template-columns: 1fr; }
  .modal { padding: 8px; align-items: end; }
  .modal-contenido { max-height: calc(100vh - 8px); border-radius: 20px 20px 0 0; }
  .modal-cabecera { padding: 17px; }
  .nivel-meta { padding: 10px 17px; }
  .nivel-cuerpo { padding: 22px 17px 28px; }
  .diploma-acciones { display: grid; }
  .diploma-acciones > * { width: 100%; }
}

@media (max-width: 430px) {
  .marca-juego strong { font-size: .88rem; }
  .marca-sello { width: 37px; height: 37px; }
  .resumen-item { min-height: 74px; padding: 10px; }
  .resumen-icono { width: 34px; height: 34px; }
  .resumen-item small { font-size: .69rem; }
  .nivel-info { max-width: 155px; }
  .mision-item { grid-template-columns: auto 1fr; }
  .mision-estado { grid-column: 1 / -1; width: 100%; }
  .premios-lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body * { visibility: hidden !important; }
  #diplomaModal, #diplomaModal *, #diplomaVista, #diplomaVista * { visibility: visible !important; }
  #diplomaModal { position: static; display: block !important; padding: 0; }
  #diplomaModal .modal-fondo, #diplomaModal .modal-cabecera, #diplomaModal .diploma-acciones, #diplomaMensaje { display: none !important; }
  #diplomaModal .modal-contenido { width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; }
  #diplomaVista { margin: 0; min-height: 95vh; display: flex; flex-direction: column; justify-content: center; }
}

/* =========================================================
   REDISEÑO 2026 · MISMO LENGUAJE VISUAL DE INDEX.HTML
   ========================================================= */
:root {
  --fondo: #fff1f6;
  --panel: #ffffff;
  --texto: #19293e;
  --texto-suave: #5d5559;
  --borde: #19293e;
  --primario: #19293e;
  --primario-oscuro: #000000;
  --primario-suave: #eaf1ff;
  --secundario: #3167e3;
  --secundario-oscuro: #19439d;
  --secundario-suave: #ffe4ee;
  --acento: #f2b544;
  --acento-suave: #fff2c9;
  --peligro: #a84255;
  --peligro-suave: #ffe9ed;
  --exito: #267159;
  --exito-suave: #e3f7ef;
  --sombra: 6px 6px 0 #19293e;
  --radio: 22px;
  --radio-menor: 16px;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: Arial, Helvetica, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(circle at 10% 20%, #f8a7c4 0 7px, transparent 8px),
    radial-gradient(circle at 85% 15%, #f8a7c4 0 6px, transparent 7px),
    radial-gradient(circle at 40% 70%, #f8a7c4 0 5px, transparent 6px);
  background-size: 210px 210px;
}

.barra-superior {
  min-height: 76px;
  padding: 13px max(4%, calc((100% - 1200px) / 2));
  background: #eaf1ff;
  border-bottom: 3px solid #19293e;
  backdrop-filter: none;
}

.marca-sello,
.avatar {
  color: #fff;
  background: #ff7a67;
  border: 2px solid #19293e;
}

.marca-sello {
  border-radius: 50%;
  box-shadow: 3px 3px 0 #19293e;
}

.marca-juego strong { font-size: 1.05rem; }
.marca-juego small { color: #5d5559; }

.boton-icono {
  border: 2px solid #19293e;
  border-radius: 12px;
  color: #19293e;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.boton-icono:hover {
  background: #fff6f9;
  border-color: #19293e;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #19293e;
}

.boton-icono:active,
.boton-icono.toque-activo {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #19293e;
}

.contenedor-juego {
  width: min(1200px, 92%);
  padding: 40px 0 70px;
  position: relative;
  z-index: 1;
}

.sobretitulo {
  color: #19439d;
  letter-spacing: .06em;
}

h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.02em; }

.pantalla-acceso,
.pantalla-inicio {
  min-height: calc(100vh - 150px);
  grid-template-columns: .9fr 1.1fr;
  gap: 45px;
}

.acceso-ilustracion,
.inicio-ilustracion {
  min-height: 500px;
  padding: 28px;
  background: #eaf1ff;
  border: 3px solid #19293e;
  border-radius: 28px;
  box-shadow: 8px 8px 0 #19293e;
  overflow: hidden;
}

.gestante-svg {
  filter: none;
  animation: flotarIlustracion 4s ease-in-out infinite;
}

.gestante-fondo { fill: #fff1f6; stroke: #19293e; stroke-width: 4; }
.gestante-ropa { fill: #ff7a67; }
.gestante-barriga { fill: #f7abc6; }
.corazon-flotante { fill: #3167e3; }

@keyframes flotarIlustracion {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(.5deg); }
}

.acceso-contenido,
.inicio-contenido { gap: 17px; }

.auth-panel,
.panel,
.perfil-barra,
.resumen-item,
.siguiente-paso,
.doctor-cabecera,
.doctor-resumen article {
  border: 3px solid #19293e;
  background: #fff;
  box-shadow: var(--sombra);
}

.auth-panel {
  border-radius: 22px;
  padding: 25px;
}

.auth-tabs {
  padding: 4px;
  background: #eaf1ff;
  border: 2px solid #19293e;
  border-radius: 14px;
}

.auth-tab {
  color: #4d4548;
  border: 2px solid transparent;
}

.auth-tab.activo {
  color: #19293e;
  background: #fff;
  border-color: #19293e;
  box-shadow: 3px 3px 0 #19293e;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  min-height: 50px;
  border: 2px solid #19293e;
  border-radius: 12px;
  color: #19293e;
  background: #fff;
}

.auth-form input:focus {
  border-color: #3167e3;
  box-shadow: 0 0 0 4px rgba(217, 79, 131, .18);
}

.acceso-personal {
  margin-top: 13px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px dashed #19293e;
  border-radius: 12px;
  background: #fff5cf;
  font-size: .86rem;
  font-weight: 700;
}

.boton-principal,
.boton-secundario {
  min-height: 49px;
  border: 2px solid #19293e;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #19293e;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.boton-principal {
  color: #fff;
  background: #19293e;
}

.boton-principal:hover {
  color: #fff;
  background: #000;
  border-color: #19293e;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #ff7a67;
}

.boton-secundario {
  color: #19293e;
  background: #fff;
}

.boton-secundario:hover {
  color: #19293e;
  background: #eaf1ff;
  border-color: #19293e;
  transform: translate(-1px, -1px);
}

.boton-principal:active,
.boton-secundario:active,
.boton-principal.toque-activo,
.boton-secundario.toque-activo {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #19293e;
}

.inicio-resumen span {
  border: 2px solid #19293e;
  color: #19293e;
  background: #fff;
  font-weight: 700;
}

.game-app,
.doctor-app { gap: 24px; }

.pantalla-entrada {
  animation: pantallaEntrada .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pantallaEntrada {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.perfil-barra {
  border-radius: 18px;
  padding: 16px 18px;
}

.estado-servidor {
  border: 2px solid #19293e;
  color: #145c48;
  background: #dff5ec;
}

.estado-servidor.local {
  color: #705015;
  background: #fff2c9;
}

.menu-juego {
  position: sticky;
  top: 92px;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 9px;
  border: 3px solid #19293e;
  border-radius: 18px;
  background: #fff;
  box-shadow: 5px 5px 0 #19293e;
}

.menu-juego button {
  min-height: 46px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #19293e;
  background: transparent;
  font-weight: 800;
}

.menu-juego button:hover,
.menu-juego button:focus-visible {
  border-color: #19293e;
  background: #eaf1ff;
}

.siguiente-paso {
  padding: 22px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: #eaf1ff;
}

.siguiente-icono {
  width: 66px;
  height: 66px;
  border: 3px solid #19293e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ff7a67;
  box-shadow: 3px 3px 0 #19293e;
  animation: pulsoSuave 2.2s ease-in-out infinite;
}

.siguiente-icono .icon { width: 33px; height: 33px; }
.siguiente-paso p:not(.sobretitulo) { color: #4f4549; margin-top: 5px; }

@keyframes pulsoSuave {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.resumen-superior {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.resumen-item {
  min-height: 88px;
  border-radius: 16px;
  padding: 13px;
  transition: transform .18s ease;
}

.resumen-item:hover { transform: translateY(-3px); }

.resumen-icono {
  border: 2px solid #19293e;
  border-radius: 50%;
}

.resumen-icono.vida { color: #b73561; background: #eaf1ff; }
.resumen-icono.punto { color: #155f50; background: #dff5ec; }
.resumen-icono.estrella { color: #875c0b; background: #fff2c9; }
.resumen-icono.logro { color: #7d3560; background: #f7d9e7; }
.resumen-icono.comunidad { color: #255b7e; background: #dceefa; }

.stat-cambio { animation: statCambio .5s ease both; }
@keyframes statCambio {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); color: #3167e3; }
  100% { transform: scale(1); }
}

.layout-principal {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 24px;
}

.panel {
  border-radius: 22px;
  padding: 24px;
}

.panel-titulo {
  padding-bottom: 17px;
  border-bottom: 2px dashed #dca7bb;
}

.panel-titulo p { color: #5d5559; }
.panel-sticky { top: 172px; }

.mapa-progreso {
  border: 3px solid #19293e;
  border-radius: 24px;
  background: #fff7fa;
  overflow: hidden;
}

.mapa-progreso::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 18% 16%, #eaf1ff 0 34px, transparent 35px),
    radial-gradient(circle at 82% 34%, #fff2c9 0 27px, transparent 28px),
    radial-gradient(circle at 20% 72%, #dff5ec 0 31px, transparent 32px),
    radial-gradient(circle at 78% 86%, #dceefa 0 24px, transparent 25px);
}

.ruta-base { stroke: #d8cbd0; stroke-width: 21; }
.ruta-avance { stroke: #ff7a67; stroke-width: 21; }

.nivel-boton {
  border: 6px solid #19293e;
  color: #fff;
  background: #ff7a67;
  box-shadow: 0 8px 0 #19293e;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.nivel-boton.actual {
  background: #ff7a67;
  animation: nivelActual 1.9s ease-in-out infinite;
}

.nivel-boton.completado { background: #4aa988; }
.nivel-boton.bloqueado { color: #6b6568; background: #ded7da; filter: grayscale(.25); }

.nivel-boton:not(:disabled):hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 13px 0 #19293e;
}

.nivel-boton:not(:disabled):active,
.nivel-boton.toque-activo {
  transform: translateY(7px);
  box-shadow: 0 1px 0 #19293e;
}

@keyframes nivelActual {
  0%,100% { box-shadow: 0 8px 0 #19293e, 0 0 0 0 rgba(245,140,177,.4); }
  50% { box-shadow: 0 8px 0 #19293e, 0 0 0 12px rgba(245,140,177,0); }
}

.nivel-info {
  border: 2px solid #19293e;
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
}

.cofre-mapa {
  border: 3px solid #19293e;
  color: #7a4b12;
  background: #fff2c9;
  box-shadow: 4px 4px 0 #19293e;
}

.cofre-mapa.disponible { animation: cofreListo 1.25s ease-in-out infinite; }
@keyframes cofreListo {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-5px); }
}

.progreso-circular {
  filter: drop-shadow(3px 3px 0 #19293e);
}

.estado-control,
.estadisticas-grid > div,
.estado-validaciones {
  border: 2px solid #19293e;
  background: #fff;
}

.estado-control { background: #eaf1ff; }
.estado-validaciones { background: #fff2c9; color: #19293e; }

.secciones-secundarias { gap: 24px; }

.mision-item {
  border: 2px solid #19293e;
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
  transition: transform .18s ease;
}

.mision-item:hover { transform: translateY(-2px); }
.mision-asistencia { background: #fff5cf; }
.mision-asistencia.enviada { background: #e3f7ef; }

.mision-icono {
  border: 2px solid #19293e;
  color: #19293e;
  background: #eaf1ff;
}

.mision-icono.asistencia { background: #fff2c9; }
.mision-progreso { height: 10px; border: 1px solid #19293e; background: #eee5e8; }
.mision-progreso span { background: #ff7a67; }

.mision-estado {
  border: 2px solid #19293e;
  border-radius: 11px;
  color: #19293e;
  background: #eee8ea;
}

.mision-estado.lista {
  color: #fff;
  background: #19293e;
  box-shadow: 3px 3px 0 #ff7a67;
}

.mision-aviso,
.resultado-mision-aviso,
.doctor-vacio {
  padding: 14px;
  border: 2px dashed #19293e;
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fff5cf;
}

.ruleta-contenido { align-items: center; }

.ruleta-escena {
  filter: drop-shadow(7px 9px 0 #19293e);
}

.ruleta-disco {
  border: 7px solid #19293e;
  background: conic-gradient(
    #eaf1ff 0deg 60deg,
    #fff2c9 60deg 120deg,
    #dff5ec 120deg 180deg,
    #dceefa 180deg 240deg,
    #f3dff0 240deg 300deg,
    #ffe4d1 300deg 360deg
  );
  transition: transform var(--duracion-giro, 5200ms) cubic-bezier(.11,.64,.12,1);
  will-change: transform;
}

.ruleta-disco.girando { filter: saturate(1.1); }
.ruleta-puntero { border-top-color: #19293e; z-index: 7; }
.ruleta-centro {
  border: 4px solid #19293e;
  color: #fff;
  background: #ff7a67;
  box-shadow: 3px 3px 0 #19293e;
}

.ruleta-disco.girando + .ruleta-centro { animation: centroGiro .45s ease-in-out infinite alternate; }
@keyframes centroGiro { to { transform: translate(-50%, -50%) scale(1.08); } }

.premios-lista li {
  border: 2px solid #19293e;
  border-radius: 12px;
  background: #fff;
}

.ranking-tabla { border-collapse: separate; border-spacing: 0 8px; }
.ranking-tabla th { color: #5d5559; }
.ranking-tabla td {
  border-top: 2px solid #19293e;
  border-bottom: 2px solid #19293e;
  background: #fff;
}
.ranking-tabla td:first-child { border-left: 2px solid #19293e; border-radius: 12px 0 0 12px; }
.ranking-tabla td:last-child { border-right: 2px solid #19293e; border-radius: 0 12px 12px 0; }
.ranking-yo td { background: #eaf1ff; }
.ranking-puesto { border: 2px solid #19293e; background: #fff; }
.ranking-puesto.top { color: #19293e; background: #fff2c9; }
.ranking-avatar { border: 2px solid #19293e; color: #fff; background: #ff7a67; }

.logro-item {
  border: 2px solid #19293e;
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
  transition: transform .18s ease;
}
.logro-item:hover { transform: translateY(-3px) rotate(-.3deg); }
.logro-item.conseguido { background: #fff2c9; }
.logro-icono { border: 2px solid #19293e; }

.certificado-resumen { border-radius: 18px; background: #eaf1ff; }
.certificado-sello { border: 3px solid #19293e; color: #8b5a00; background: #fff2c9; box-shadow: 3px 3px 0 #19293e; }

.modal-fondo { background: rgba(32, 32, 32, .62); }
.modal-contenido {
  border: 3px solid #19293e;
  border-radius: 22px;
  box-shadow: 10px 10px 0 #19293e;
  background: #fff;
}

.modal-cabecera { background: #eaf1ff; border-bottom: 3px solid #19293e; }
.barra-pasos { height: 12px; border-bottom: 2px solid #19293e; background: #eee4e8; }
.barra-pasos span { background: #ff7a67; }
.nivel-meta { border-bottom: 2px solid #19293e; background: #fff5cf; }

.opcion-respuesta,
.objeto-mochila {
  border: 2px solid #19293e;
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.opcion-respuesta:hover,
.objeto-mochila:hover { transform: translate(-1px, -2px); box-shadow: 5px 5px 0 #19293e; }
.opcion-respuesta:active,
.objeto-mochila:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #19293e; }
.opcion-respuesta.segura { background: #e3f7ef; animation: respuestaSegura .48s ease both; }
.opcion-respuesta.revisar { background: #fff2c9; animation: respuestaRevisar .42s ease both; }

@keyframes respuestaSegura {
  0% { transform: scale(.97); }
  55% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes respuestaRevisar {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-7px); }
  65% { transform: translateX(7px); }
}

.opcion-letra { border: 2px solid #19293e; color: #19293e; background: #eaf1ff; }
.escenario-caja { border: 2px solid #19293e; background: #fff5cf; }
.feedback-caja { border: 2px solid #19293e; }
.feedback-caja.positivo { color: #195b47; background: #e3f7ef; }
.feedback-caja.orientacion { color: #6e4a0e; background: #fff2c9; }

.resultado-sello {
  border: 4px solid #19293e;
  color: #fff;
  background: #4aa988;
  box-shadow: 5px 5px 0 #19293e;
}
.resultado-datos div { border: 2px solid #19293e; background: #fff; }

.asistencia-mision-cuerpo { padding: 22px; }
.asistencia-premio {
  width: max-content;
  margin: 0 auto 18px;
  padding: 12px 18px;
  border: 3px solid #19293e;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #19439d;
  background: #eaf1ff;
  box-shadow: 4px 4px 0 #19293e;
  animation: pulsoSuave 1.8s ease-in-out infinite;
}

.recompensa-icono,
.ayuda-icono {
  border: 3px solid #19293e;
  box-shadow: 4px 4px 0 #19293e;
}

.diploma-vista {
  border: 8px double #19293e;
  background: #fff7fa;
  box-shadow: inset 0 0 0 10px #eaf1ff;
}
.diploma-marca { border: 3px solid #19293e; box-shadow: 4px 4px 0 #19293e; }
.diploma-vista h3 { color: #19439d; }

.toast {
  border: 3px solid #19293e;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #19293e;
}

.toque-activo { animation: toqueRapido .25s ease; }
@keyframes toqueRapido {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(.92); }
}

/* Panel del personal dentro del mismo login */
.doctor-app { display: grid; }
.doctor-cabecera {
  padding: 26px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #eaf1ff;
}
.doctor-cabecera h1 { font-size: clamp(2rem, 5vw, 3.6rem); white-space: normal; }
.doctor-cabecera p:not(.sobretitulo) { max-width: 720px; margin-top: 8px; }
.doctor-acciones { display: flex; align-items: center; gap: 10px; }
.doctor-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.doctor-resumen article {
  min-height: 105px;
  padding: 17px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.doctor-resumen article > span {
  width: 48px;
  height: 48px;
  border: 2px solid #19293e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff2c9;
}
.doctor-resumen strong,
.doctor-resumen small { display: block; }
.doctor-resumen strong { font-size: 1.55rem; }
.doctor-resumen small { color: #5d5559; }
.doctor-validaciones { display: grid; gap: 13px; margin-top: 18px; }
.doctor-solicitud {
  padding: 15px;
  border: 2px solid #19293e;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 #19293e;
}
.doctor-solicitud.approved { background: #e3f7ef; }
.doctor-solicitud.rejected { background: #fff2c9; }
.doctor-solicitud-icono {
  width: 45px;
  height: 45px;
  border: 2px solid #19293e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf1ff;
}
.doctor-solicitud-info strong,
.doctor-solicitud-info span,
.doctor-solicitud-info p,
.doctor-solicitud-info small { display: block; }
.doctor-solicitud-info span,
.doctor-solicitud-info p,
.doctor-solicitud-info small { color: #5d5559; font-size: .86rem; }
.doctor-solicitud-acciones { display: flex; gap: 8px; }
.solicitud-estado { padding: 7px 10px; border: 2px solid #19293e; border-radius: 999px; background: #fff; font-weight: 800; font-size: .8rem; }

@media (max-width: 1100px) {
  .resumen-superior { grid-template-columns: repeat(3, 1fr); }
  .menu-juego { grid-template-columns: repeat(3, 1fr); top: 86px; }
  .doctor-resumen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pantalla-acceso,
  .pantalla-inicio { grid-template-columns: 1fr; }
  .acceso-ilustracion,
  .inicio-ilustracion { min-height: 330px; }
  .gestante-svg { width: min(72vw, 370px); }
  .layout-principal { grid-template-columns: 1fr; }
  .panel-sticky { position: static; }
  .siguiente-paso { grid-template-columns: auto 1fr; }
  .siguiente-paso .boton-principal { grid-column: 1 / -1; width: 100%; }
  .doctor-cabecera { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
  .contenedor-juego { width: min(94%, 1200px); padding-top: 22px; }
  .barra-superior { padding: 10px 3%; }
  .menu-juego {
    position: static;
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .menu-juego button { min-width: 116px; }
  .resumen-superior { grid-template-columns: repeat(2, 1fr); }
  .resumen-item { box-shadow: 3px 3px 0 #19293e; }
  .panel { padding: 18px; }
  .siguiente-paso { padding: 17px; }
  .siguiente-icono { width: 54px; height: 54px; }
  .doctor-resumen { grid-template-columns: 1fr 1fr; }
  .doctor-solicitud { grid-template-columns: auto 1fr; }
  .doctor-solicitud-acciones { grid-column: 1 / -1; }
  .doctor-solicitud-acciones > * { flex: 1; }
}

@media (max-width: 430px) {
  .resumen-superior,
  .doctor-resumen { grid-template-columns: 1fr; }
  .resumen-item { min-height: 70px; }
  .siguiente-paso { grid-template-columns: 1fr; text-align: center; }
  .siguiente-icono { margin: auto; }
  .doctor-acciones { width: 100%; }
  .doctor-acciones .boton-secundario { flex: 1; }
}

/* Navegación por secciones: evita una pantalla interminable y muestra una sola tarea a la vez. */
.game-app .siguiente-paso,
.game-app .resumen-superior,
.game-app .layout-principal,
.game-app .secciones-secundarias > section {
  display: none;
}

.game-app[data-view="ruta"] .siguiente-paso {
  display: grid;
}

.game-app[data-view="ruta"] .resumen-superior {
  display: grid;
}

.game-app[data-view="ruta"] .layout-principal {
  display: grid;
}

.game-app[data-view="guia"] #guiaJuego,
.game-app[data-view="misiones"] #misionesJuego,
.game-app[data-view="premios"] #ruletaJuego,
.game-app[data-view="ranking"] #rankingJuego,
.game-app[data-view="logros"] #logrosJuego,
.game-app[data-view="chat"] #chatJuego,
.game-app[data-view="perfil"] #perfilJuego,
.game-app[data-view="diploma"] #diplomaJuego {
  display: block;
  grid-column: 1 / -1;
  animation: aparecerSeccion .42s ease both;
}

.game-app[data-view="diploma"] #diplomaJuego {
  display: block;
}

.menu-juego button.activo {
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-2px);
}

.menu-juego button.activo .icon {
  color: #eaf1ff;
}

.secciones-secundarias {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.game-app:not([data-view="ruta"]) .secciones-secundarias {
  min-height: 520px;
}

.game-app:not([data-view="ruta"]) .secciones-secundarias > section {
  width: 100%;
}

@keyframes aparecerSeccion {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .menu-juego {
    position: sticky;
    top: 8px;
    z-index: 20;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .menu-juego::-webkit-scrollbar { display: none; }
  .menu-juego button { min-width: 104px; flex: 0 0 auto; }
  .game-app:not([data-view="ruta"]) .secciones-secundarias { min-height: 0; }
}


/* Mejoras de sensación de juego: ruleta, microanimaciones y diploma personalizable */
.ruleta-escena {
  width: min(100%, 350px);
  isolation: isolate;
  filter: drop-shadow(9px 11px 0 #19293e);
}

.ruleta-escena::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 4px solid #19293e;
  border-radius: 50%;
  background: repeating-conic-gradient(#19293e 0deg 3deg, #fff 3deg 15deg);
  animation: aroRuletaReposo 16s linear infinite;
}

.ruleta-disco {
  inset: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: rotate(0deg) translateZ(0);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.8), 0 0 0 3px #19293e;
}

.ruleta-disco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from -2deg, rgba(32,32,32,.95) 0deg 1.4deg, transparent 1.4deg 59deg, rgba(32,32,32,.95) 59deg 60deg),
    radial-gradient(circle at center, transparent 0 70%, rgba(255,255,255,.28) 71% 76%, transparent 77%);
}

.ruleta-disco::after {
  inset: 28%;
  border: 3px solid #19293e;
  background: rgba(255,255,255,.38);
}

.ruleta-disco.girando {
  filter: saturate(1.18) contrast(1.04);
  animation: vibracionRuleta .16s linear infinite alternate;
}

.ruleta-marca {
  width: 48px;
  height: 54px;
  grid-template-rows: 30px 18px;
  color: #19293e;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  transform-origin: center;
}

.ruleta-marca .icon { width: 28px; height: 28px; margin: auto; }
.ruleta-marca small { display: block; font-size: .66rem; line-height: 1; text-align: center; }
.ruleta-marca.ganadora {
  animation: premioGanador 1s cubic-bezier(.2,.9,.25,1) 2;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 10px #ff7a67);
}

.ruleta-puntero {
  top: -8px;
  z-index: 12;
  border: 0;
  width: 42px;
  height: 55px;
  transform: translateX(-50%);
  filter: drop-shadow(3px 4px 0 rgba(32,32,32,.26));
  transform-origin: 50% 7px;
}

.ruleta-puntero span {
  display: block;
  width: 100%;
  height: 100%;
  background: #19293e;
  clip-path: polygon(50% 100%, 0 22%, 18% 0, 82% 0, 100% 22%);
}

.ruleta-puntero.golpeando { animation: punteroGolpe .13s ease-out; }
.ruleta-puntero.celebrando { animation: punteroCelebra .7s cubic-bezier(.2,.9,.25,1); }

.ruleta-centro {
  width: 82px;
  height: 82px;
  z-index: 10;
  grid-template-rows: 35px 14px;
  align-content: center;
  border: 5px solid #19293e;
  box-shadow: 5px 5px 0 #19293e;
}

.ruleta-centro .icon { width: 32px; height: 32px; margin: auto; }
.ruleta-centro small { color: #19293e; font-size: .58rem; font-weight: 950; letter-spacing: .08em; }
.ruleta-disco.girando + .ruleta-centro { animation: centroGiroVisible .38s ease-in-out infinite alternate; }

#btnGirar.procesando {
  position: relative;
  overflow: hidden;
  animation: botonGiro 1s ease-in-out infinite;
}
#btnGirar.procesando::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.75) 50%, transparent 75%);
  animation: brilloBoton 1s linear infinite;
}

.panel,
.nivel-info,
.mision-item,
.logro-item,
.estadisticas-grid > div,
.doctor-resumen article {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.panel:hover { transform: translateY(-2px); }
.estadisticas-grid > div:hover,
.logro-item:hover,
.doctor-resumen article:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: 5px 6px 0 #19293e; }

.barra-pasos span,
.mision-progreso span,
.ruta-avance {
  position: relative;
  overflow: hidden;
}

.barra-pasos span::after,
.mision-progreso span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: brilloProgreso 2.3s ease-in-out infinite;
}

.modal:not([hidden]) .modal-contenido { animation: modalRebote .45s cubic-bezier(.18,.9,.28,1.2) both; }
.modal-celebracion:not([hidden]) .recompensa-icono { animation: recompensaSalto .72s cubic-bezier(.18,.9,.28,1.3) both; }
.modal-celebracion:not([hidden]) h2 { animation: textoCelebracion .48s .12s ease both; }

.nivel-mapa { animation: elementoRutaEntrada .48s both; }
.nivel-mapa:nth-of-type(2) { animation-delay: .06s; }
.nivel-mapa:nth-of-type(3) { animation-delay: .12s; }
.nivel-mapa:nth-of-type(4) { animation-delay: .18s; }
.nivel-mapa:nth-of-type(5) { animation-delay: .24s; }
.nivel-mapa:nth-of-type(6) { animation-delay: .30s; }

.mision-item { animation: tarjetaEntrada .38s both; }
.mision-item:nth-child(2) { animation-delay: .05s; }
.mision-item:nth-child(3) { animation-delay: .1s; }
.mision-item:nth-child(4) { animation-delay: .15s; }

.logro-item.conseguido .logro-icono { animation: logroVivo 2.1s ease-in-out infinite; }
.certificado-sello { animation: selloRespira 2.4s ease-in-out infinite; }

.diploma-icono-personalizado {
  width: 112px;
  height: 112px;
  padding: 10px;
  background: #fff;
  overflow: hidden;
  animation: iconoDiploma 2.5s ease-in-out infinite;
}
.diploma-icono-personalizado img { width: 100%; height: 100%; display: block; object-fit: contain; }

@keyframes aroRuletaReposo { to { transform: rotate(360deg); } }
@keyframes vibracionRuleta { from { scale: 1; } to { scale: 1.012; } }
@keyframes punteroGolpe { 0% { transform: translateX(-50%) rotate(0); } 45% { transform: translateX(-50%) rotate(18deg); } 100% { transform: translateX(-50%) rotate(0); } }
@keyframes punteroCelebra { 0%,100% { transform: translateX(-50%) rotate(0) scale(1); } 35% { transform: translateX(-50%) rotate(-15deg) scale(1.12); } 65% { transform: translateX(-50%) rotate(15deg) scale(1.12); } }
@keyframes premioGanador { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.34); } }
@keyframes centroGiroVisible { from { transform: rotate(-4deg) scale(.96); } to { transform: rotate(4deg) scale(1.04); } }
@keyframes botonGiro { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes brilloBoton { to { transform: translateX(120%); } }
@keyframes brilloProgreso { 0%,35% { transform: translateX(-120%); } 75%,100% { transform: translateX(120%); } }
@keyframes modalRebote { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes recompensaSalto { 0% { opacity: 0; transform: translateY(20px) scale(.55) rotate(-16deg); } 65% { transform: translateY(-7px) scale(1.12) rotate(5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes textoCelebracion { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elementoRutaEntrada { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tarjetaEntrada { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes logroVivo { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(3deg) scale(1.07); } }
@keyframes selloRespira { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(2deg); } }
@keyframes iconoDiploma { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }

@media (max-width: 680px) {
  .ruleta-escena { width: min(100%, 310px); }
  .ruleta-marca { width: 42px; height: 49px; grid-template-rows: 27px 16px; }
  .ruleta-marca .icon { width: 24px; height: 24px; }
  .ruleta-marca small { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ruleta-disco.girando { animation: none !important; }
  .ruleta-escena::before { animation: none !important; }
}

/* Los premios quedan centrados dentro de cada porción de la ruleta. */
.ruleta-disco .marca-1 { left: 66%; top: 22%; transform: translate(-50%,-50%); }
.ruleta-disco .marca-2 { left: 83%; top: 50%; transform: translate(-50%,-50%); }
.ruleta-disco .marca-3 { left: 66%; top: 78%; transform: translate(-50%,-50%); }
.ruleta-disco .marca-4 { left: 34%; top: 78%; transform: translate(-50%,-50%); }
.ruleta-disco .marca-5 { left: 17%; top: 50%; transform: translate(-50%,-50%); }
.ruleta-disco .marca-6 { left: 34%; top: 22%; transform: translate(-50%,-50%); }


/* === COMPARTIR: estilos del menú de opciones del diploma === */
.share-modal .modal-cabecera p { max-width: 420px; }
.share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 22px 18px; }
.share-opcion { min-height: 108px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; }
.share-opcion .icon { width: 24px; height: 24px; }
.share-opcion span { font-weight: 800; }
.share-opcion small { color: var(--texto-suave); font-size: .77rem; line-height: 1.35; }
.share-modal #shareMensaje { padding: 0 22px 16px; }

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

/* === RECURSOS VISUALES: imágenes que reemplazan iconos SVG desde game-media.js === */
.icon-media {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
  object-position: center;
}

/* Si una foto debe llenar completamente su espacio, usa fit: "cover" en game-media.js. */
img.icon-media { border-radius: inherit; }

/* === RECURSOS VISUALES: fotos opcionales para niveles e ilustraciones principales === */
.nivel-boton .nivel-imagen {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  object-position: center;
}

.acceso-ilustracion .ilustracion-personalizada,
.inicio-ilustracion .ilustracion-personalizada {
  width: min(100%, 430px);
  max-height: 430px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 24px;
}


/* === REGISTRO: controles adicionales para DNI y datos personales === */
.auth-form select,
.auth-form textarea,
.perfil-form input,
.perfil-form select,
.perfil-form textarea,
.chat-salud-form textarea {
  width: 100%;
  border: 2px solid #19293e;
  border-radius: 12px;
  padding: 12px 13px;
  color: #19293e;
  background: #fff;
  font: inherit;
}
.auth-form select:focus,
.auth-form textarea:focus,
.perfil-form input:focus,
.perfil-form select:focus,
.perfil-form textarea:focus,
.chat-salud-form textarea:focus {
  border-color: #3167e3;
  box-shadow: 0 0 0 4px rgba(217, 79, 131, .18);
  outline: none;
}

/* === PERFIL: edición de datos personales === */
.perfil-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.perfil-form label {
  display: grid;
  gap: 7px;
  font-weight: 750;
}
.perfil-form .perfil-direccion,
.perfil-form .perfil-acciones {
  grid-column: 1 / -1;
}
.perfil-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.perfil-acciones .mensaje-formulario { margin: 0; }

/* === CHAT: conversación en vivo entre paciente y personal === */
.chat-salud {
  display: grid;
  gap: 14px;
}
.chat-salud-mensajes {
  min-height: 340px;
  max-height: 520px;
  overflow-y: auto;
  padding: 16px;
  border: 2px solid #19293e;
  border-radius: 16px;
  background: #fffafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-mensaje {
  width: min(82%, 560px);
  padding: 11px 13px;
  border: 2px solid #19293e;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #19293e;
  background: #fff;
}
.chat-mensaje.propio { align-self: flex-end; background: #eaf1ff; }
.chat-mensaje.recibido { align-self: flex-start; background: #e9fbf5; }
.chat-mensaje strong,
.chat-mensaje p,
.chat-mensaje time { display: block; }
.chat-mensaje p { margin-top: 4px; white-space: pre-wrap; }
.chat-mensaje time { margin-top: 7px; color: var(--texto-suave); font-size: .72rem; }
.chat-mensaje img {
  width: min(100%, 320px);
  max-height: 300px;
  margin-top: 8px;
  border-radius: 10px;
  object-fit: cover;
}
.chat-vacio { margin: auto; text-align: center; color: var(--texto-suave); }
.chat-salud-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.chat-adjunto {
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid #19293e;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: #fff;
  font-weight: 750;
}
.chat-adjunto input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

/* === ADMINISTRACIÓN: navegación y tablas === */
.admin-herramientas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-tabs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.admin-tabs button {
  min-height: 44px;
  padding: 9px 15px;
  border: 2px solid #19293e;
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
}
.admin-tabs button.activo { color: #fff; background: #19293e; }
.admin-tabla { width: 100%; border-collapse: collapse; min-width: 850px; }
.admin-tabla th,
.admin-tabla td { padding: 11px 12px; border-bottom: 1px solid #d9dde2; text-align: left; vertical-align: top; }
.admin-tabla th { background: #fff0f5; }
.admin-emergencias-lista { display: grid; gap: 12px; }
.admin-emergencia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 2px solid #19293e;
  border-radius: 15px;
  background: #fff;
  box-shadow: 4px 4px 0 #19293e;
}
.admin-emergencia.pendiente { background: #fff1e8; }
.admin-emergencia.atendida { background: #edf9f4; }
.admin-emergencia-icono {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #8c3d1e;
  background: #ffd8c8;
}
.admin-emergencia span,
.admin-emergencia p { display: block; color: var(--texto-suave); }
.admin-emergencia a { display: inline-block; margin-top: 5px; font-weight: 800; }
.admin-emergencia-acciones { display: grid; justify-items: end; gap: 8px; }
.admin-chat-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px;
}
.admin-chat-usuarios {
  max-height: 590px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
}
.admin-chat-usuarios button {
  padding: 11px;
  border: 2px solid #19293e;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}
.admin-chat-usuarios button.activo { background: #eaf1ff; }
.admin-chat-usuarios strong,
.admin-chat-usuarios span { display: block; }
.admin-chat-usuarios span { margin-top: 3px; color: var(--texto-suave); font-size: .76rem; }
.admin-chat-conversacion { display: grid; gap: 10px; }

@media (max-width: 760px) {
  .perfil-form { grid-template-columns: 1fr; }
  .perfil-form .perfil-direccion,
  .perfil-form .perfil-acciones { grid-column: auto; }
  .chat-salud-form { grid-template-columns: 1fr; }
  .chat-adjunto { justify-content: center; }
  .chat-mensaje { width: 92%; }
  .admin-chat-layout { grid-template-columns: 1fr; }
  .admin-chat-usuarios { max-height: 220px; }
  .admin-emergencia { grid-template-columns: auto 1fr; }
  .admin-emergencia-acciones { grid-column: 1 / -1; justify-items: stretch; }
}


/* === GUÍA EDUCATIVA: contenido de orientación separado de las preguntas === */
.guia-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guia-grid article { padding: 17px; border: 2px solid #19293e; border-radius: 16px; display: flex; align-items: flex-start; gap: 13px; background: #fff; box-shadow: 4px 4px 0 #19293e; }
.guia-grid article > span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primario); background: var(--primario-suave); }
.guia-grid h3 { margin-bottom: 5px; font-size: 1rem; }
.guia-grid p { color: var(--texto-suave); font-size: .88rem; }
.guia-enlace { margin-top: 18px; }
@media (max-width: 680px) { .guia-grid { grid-template-columns: 1fr; } }


/* === ACCESIBILIDAD: texto visible solo para lectores de pantalla === */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* === GUÍA: orientación organizada por los seis controles === */
.orientacion-niveles { display: grid; gap: 12px; margin-top: 22px; }
.orientacion-control { border: 2px solid #19293e; border-radius: 16px; background: #fff; overflow: hidden; }
.orientacion-control summary { min-height: 72px; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; background: #fff7fa; }
.orientacion-control summary::-webkit-details-marker { display: none; }
.orientacion-control summary strong, .orientacion-control summary small { display: block; }
.orientacion-control summary small { margin-top: 3px; color: var(--texto-suave); font-size: .8rem; }
.orientacion-control summary > .icon { transition: transform .2s ease; }
.orientacion-control[open] summary > .icon { transform: rotate(90deg); }
.orientacion-numero { width: 40px; height: 40px; border: 2px solid #19293e; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--primario); font-weight: 900; }
.orientacion-contenido { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; border-top: 2px solid #19293e; background: #fff; }
.orientacion-contenido article { min-width: 0; padding: 14px; border: 1px solid var(--borde); border-radius: 13px; background: #fafbfc; }
.orientacion-contenido h3 { font-size: .96rem; }
.orientacion-contenido p { margin-top: 7px; color: var(--texto-suave); font-size: .85rem; }
.guia-misiones-resumen { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guia-misiones-resumen span { min-width: 0; padding: 13px; border: 1px solid var(--borde); border-radius: 13px; display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; background: var(--secundario-suave); }
.guia-misiones-resumen .icon { grid-row: 1 / span 2; color: var(--secundario); }
.guia-misiones-resumen strong, .guia-misiones-resumen small { display: block; }
.guia-misiones-resumen small { color: var(--texto-suave); }

/* === CITAS: agenda visible para la paciente === */
.citas-paciente-lista, .admin-citas-lista { display: grid; gap: 12px; margin-top: 20px; }
.cita-paciente, .cita-vacia, .admin-cita { padding: 15px; border: 1px solid var(--borde); border-radius: 14px; display: flex; align-items: center; gap: 13px; background: #fff; }
.cita-paciente { border-left: 5px solid var(--secundario); }
.cita-paciente.atendida { border-left-color: var(--exito); background: var(--exito-suave); }
.cita-paciente.cancelada { border-left-color: var(--peligro); opacity: .76; }
.cita-icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primario); background: var(--primario-suave); }
.cita-info { min-width: 0; }
.cita-info strong, .cita-info span { display: block; }
.cita-info span { margin-top: 3px; color: var(--secundario); font-size: .82rem; font-weight: 750; }
.cita-info > p:not(.sobretitulo) { margin-top: 7px; color: var(--texto-suave); font-size: .86rem; }
.cita-vacia { justify-content: center; min-height: 120px; color: var(--texto-suave); text-align: left; background: #fafbfc; }
.cita-vacia strong { display: block; color: var(--texto); }

/* === CITAS ADMIN: formulario y listado de controles === */
.admin-cita-form { margin-top: 20px; padding: 18px; border: 1px solid var(--borde); border-radius: 15px; display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(130px, .65fr)); gap: 12px; background: #fafbfc; }
.admin-cita-form label { display: grid; gap: 6px; font-size: .84rem; font-weight: 750; }
.admin-cita-form input, .admin-cita-form select, .admin-cita-form textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #cfd6de; border-radius: 11px; color: var(--texto); background: #fff; font: inherit; }
.admin-cita-indicaciones { grid-column: 1 / -1; }
.admin-cita-acciones { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-cita { align-items: flex-start; }
.admin-cita-info { min-width: 0; flex: 1; }
.admin-cita-info strong, .admin-cita-info span { display: block; }
.admin-cita-info span, .admin-cita-info small { color: var(--texto-suave); }
.admin-cita-info p { margin-top: 5px; font-weight: 750; }
.admin-cita-info small { display: block; margin-top: 5px; }
.admin-cita-estado { min-width: 150px; display: grid; justify-items: end; gap: 8px; }
.admin-cita-estado > span { padding: 5px 9px; border-radius: 999px; color: var(--secundario-oscuro); background: var(--secundario-suave); font-size: .74rem; font-weight: 800; }
.admin-cita.cancelada { opacity: .72; }
.admin-cita.atendida { background: var(--exito-suave); }

/* === NIVELES: estado pendiente de asistencia o validación === */
.nivel-boton.pendiente { color: #6d4a1e; background: var(--acento-suave); border-color: #d6a14e; }
.nivel-boton.pendiente.observado { color: var(--peligro); background: var(--peligro-suave); border-color: #d79494; }

/* === VISTAS: habilita la sección Mis citas === */
.game-app[data-view="citas"] #citasJuego { display: block; }

/* === RESPONSIVE FINAL: panel de juego y administración === */
.game-app, .doctor-app, .panel, .modal-contenido, .auth-panel { min-width: 0; max-width: 100%; }
.menu-juego { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.menu-juego button { flex: 0 0 auto; }
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-tabla, .ranking-tabla { min-width: 720px; }

@media (max-width: 1100px) {
  .resumen-superior { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orientacion-contenido { grid-template-columns: 1fr 1fr; }
  .guia-misiones-resumen { grid-template-columns: 1fr; }
  .admin-cita-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .contenedor-juego { padding: 20px; }
  .pantalla-acceso, .pantalla-inicio { min-height: auto; grid-template-columns: 1fr; gap: 24px; }
  .acceso-ilustracion, .inicio-ilustracion { order: 2; }
  .acceso-contenido, .inicio-contenido { order: 1; }
  .gestante-svg { max-height: 390px; }
  .perfil-barra, .doctor-cabecera { align-items: flex-start; flex-wrap: wrap; }
  .perfil-acciones, .doctor-acciones { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .layout-principal { grid-template-columns: 1fr; }
  .panel-sticky { position: static; }
  .doctor-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-chat-layout { grid-template-columns: 1fr; }
  .admin-chat-usuarios { max-height: 220px; }
}

@media (max-width: 680px) {
  :root { --cabecera-alto: 64px; }
  .barra-superior { padding: 9px 12px; }
  .marca-juego small, .boton-texto span { display: none; }
  .marca-sello { width: 38px; height: 38px; }
  .contenedor-juego { padding: 14px 12px 28px; }
  .pantalla-acceso, .pantalla-inicio { gap: 18px; }
  .gestante-svg { max-height: 300px; }
  .auth-panel { padding: 17px; }
  .menu-juego { margin-inline: -12px; padding-inline: 12px; border-radius: 0; }
  .menu-juego button { min-width: 92px; padding: 10px 12px; }
  .siguiente-paso { grid-template-columns: auto minmax(0, 1fr); }
  .siguiente-paso .boton-principal { grid-column: 1 / -1; width: 100%; }
  .resumen-superior { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .resumen-item { min-height: 72px; padding: 11px; }
  .resumen-icono { width: 36px; height: 36px; }
  .panel:not(.mapa-panel) { padding: 16px; }
  .panel-titulo { gap: 10px; }
  .panel-titulo h2 { font-size: 1.35rem; }
  .orientacion-control summary { padding: 12px; grid-template-columns: auto minmax(0, 1fr) 22px; }
  .orientacion-contenido { grid-template-columns: 1fr; }
  .admin-cita-form { grid-template-columns: 1fr; padding: 14px; }
  .admin-cita-indicaciones, .admin-cita-acciones { grid-column: auto; }
  .admin-cita, .cita-paciente { align-items: flex-start; }
  .admin-cita { flex-wrap: wrap; }
  .admin-cita-estado { width: 100%; min-width: 0; grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .admin-cita-estado > span { grid-column: 1 / -1; justify-self: start; }
  .admin-cita-estado button { width: 100%; }
  .doctor-resumen { grid-template-columns: 1fr; }
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .admin-tabs button { flex: 0 0 auto; }
  .chat-salud-form { grid-template-columns: 1fr; }
  .chat-salud-form .chat-adjunto, .chat-salud-form textarea, .chat-salud-form button { width: 100%; }
  .perfil-form { grid-template-columns: 1fr; }
  .perfil-direccion, .perfil-acciones { grid-column: auto; }
  .certificado-resumen { grid-template-columns: auto 1fr; }
  .certificado-resumen > .boton-principal, .certificado-resumen > .ayuda-contextual { grid-column: 1 / -1; width: 100%; }
  .modal { padding: 8px; align-items: end; }
  .modal-contenido { width: 100%; max-height: calc(100dvh - 16px); border-radius: 18px 18px 0 0; }
  .modal-cabecera { padding: 16px; }
  .nivel-cuerpo { padding: 18px 15px; }
  .nivel-meta { padding: 10px 15px; gap: 10px; }
  .opcion-respuesta { min-height: 54px; }
  .resultado-datos { grid-template-columns: 1fr; }
  .mochila-grid { grid-template-columns: 1fr; }
  .diploma-acciones, .share-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .resumen-superior { grid-template-columns: 1fr; }
  .perfil-usuario { width: 100%; }
  .perfil-acciones { justify-content: stretch; }
  .perfil-acciones .boton-secundario { flex: 1; }
  .orientacion-numero { width: 34px; height: 34px; }
  .cita-paciente, .cita-vacia { align-items: flex-start; }
}

@media (max-width: 760px) {
  .menu-juego { top: calc(var(--cabecera-alto) + 6px); }
}


/* === HIPERTENSIÓN: ajustes visuales y responsive finales === */
.pagina-juego { background: var(--fondo); }
.ilustracion-personalizada { width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: 30px; }
.acceso-ilustracion, .inicio-ilustracion { min-width: 0; overflow: hidden; border-radius: 30px; }
.marca-sello { background: var(--primario); }
.diploma-vista { background: linear-gradient(145deg, #fff, #f7f9fd); }
.diploma-icono-personalizado { border: 2px solid var(--borde); }
.doctor-app, .game-app, .layout-principal, .panel, .tabla-scroll, .admin-chat-layout { min-width: 0; }
.ranking-tabla, .admin-usuarios-tabla { width: 100%; }

@media (max-width: 900px) {
  .pantalla-acceso, .pantalla-inicio { grid-template-columns: 1fr; }
  .acceso-ilustracion, .inicio-ilustracion { max-height: 360px; }
  .perfil-barra, .doctor-cabecera { align-items: flex-start; }
}

@media (max-width: 620px) {
  .barra-superior { padding-inline: 12px; }
  .marca-juego small, .boton-texto span { display: none; }
  .contenedor-juego { padding: 14px 12px 32px; }
  .perfil-barra, .doctor-cabecera { padding: 13px; }
  .perfil-acciones, .doctor-acciones { width: 100%; flex-wrap: wrap; }
  .perfil-acciones .boton-secundario, .doctor-acciones .boton-secundario { flex: 1 1 150px; }
  .menu-juego, .admin-menu { grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .menu-juego button, .admin-menu button { scroll-snap-align: start; white-space: nowrap; }
  .siguiente-paso { grid-template-columns: auto minmax(0,1fr); }
  .siguiente-paso .boton-principal { grid-column: 1 / -1; width: 100%; }
  .resumen-superior { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .resumen-item { min-height: 74px; padding: 11px; }
  .mapa-progreso { min-height: 1040px; }
  .nivel-mapa { max-width: 100%; }
  .nivel-info { max-width: 190px; }
  .panel-titulo { align-items: flex-start; }
  .mision-item { grid-template-columns: auto minmax(0,1fr); }
  .mision-estado { grid-column: 1 / -1; width: 100%; }
  .ruleta-layout { grid-template-columns: 1fr; }
  .doctor-resumen { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-cita-form { grid-template-columns: 1fr; }
  .admin-cita-indicaciones, .admin-cita-acciones { grid-column: auto; }
  .modal { padding: 10px; }
  .modal-contenido { max-height: calc(100dvh - 20px); border-radius: 18px; }
  .diploma-acciones { flex-direction: column; }
  .diploma-acciones button { width: 100%; }
}

@media (max-width: 390px) {
  .resumen-superior, .doctor-resumen, .estadisticas-grid { grid-template-columns: 1fr; }
  .acceso-ilustracion, .inicio-ilustracion { max-height: 270px; }
  .nivel-boton { width: 72px; height: 72px; flex-basis: 72px; }
}


/* === ACCESO SALUD INFANTIL: identidad visual alineada con index.html === */
.pantalla-acceso {
  position: relative;
  padding: clamp(18px, 4vw, 44px);
  border: 1px solid rgba(43, 58, 79, .08);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 12%, rgba(227, 79, 97, .13), transparent 34%),
    radial-gradient(circle at 90% 86%, rgba(74, 114, 220, .12), transparent 34%),
    #fffdfb;
  box-shadow: 0 24px 70px rgba(38, 50, 72, .10);
}
.acceso-salud-infantil { position: relative; width: 100%; min-height: 520px; padding: 18px; align-content: center; }
.acceso-salud-infantil .ilustracion-personalizada {
  width: min(100%, 560px);
  max-height: 520px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(38, 50, 72, .16);
}
.acceso-etiqueta {
  position: absolute;
  right: clamp(12px, 3vw, 34px);
  bottom: clamp(12px, 3vw, 34px);
  width: min(330px, calc(100% - 48px));
  padding: 17px 19px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  color: #334052;
  background: rgba(255,255,255,.93);
  box-shadow: 0 14px 36px rgba(38,50,72,.14);
  backdrop-filter: blur(10px);
}
.acceso-etiqueta strong, .acceso-etiqueta span { display: block; }
.acceso-etiqueta strong { color: #19439d; font-size: 1.05rem; }
.acceso-etiqueta span { margin-top: 3px; color: #687386; font-size: .88rem; }
.auth-panel { border-color: rgba(43,58,79,.10); border-radius: 24px; box-shadow: 0 18px 48px rgba(38,50,72,.10); }
.auth-tabs { background: #fff0ea; }
.auth-tab.activo { color: #19439d; box-shadow: 0 5px 16px rgba(167,45,66,.10); }
.auth-form input, .auth-form select, .auth-form textarea { border-color: rgba(43,58,79,.18); }
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { border-color: #3167e3; box-shadow: 0 0 0 4px rgba(227,79,97,.13); }
.auth-form .boton-principal { background: linear-gradient(135deg, #3167e3, #ff7a67); border-color: transparent; }
.auth-form .boton-principal:hover { background: linear-gradient(135deg, #c73e52, #e96555); }

@media (max-width: 900px) {
  .pantalla-acceso { grid-template-columns: 1fr; padding: 20px; }
  .acceso-contenido { order: 1; }
  .acceso-salud-infantil { order: 2; min-height: 340px; padding: 0; }
  .acceso-salud-infantil .ilustracion-personalizada { max-height: 360px; }
}
@media (max-width: 560px) {
  .contenedor-juego { padding: 14px; }
  .pantalla-acceso { padding: 16px; border-radius: 24px; }
  .acceso-salud-infantil { min-height: 260px; }
  .acceso-salud-infantil .ilustracion-personalizada { min-height: 250px; border-radius: 22px; }
  .acceso-etiqueta { position: static; width: 100%; margin-top: 10px; }
  .auth-panel { padding: 16px; border-radius: 20px; }
  .auth-tabs { margin-bottom: 17px; }
}


/* Ajustes finales de identidad y adaptación móvil */
body {
  background:
    radial-gradient(circle at 8% 8%, rgba(49, 103, 227, .08), transparent 26%),
    radial-gradient(circle at 92% 30%, rgba(24, 184, 168, .08), transparent 28%),
    var(--fondo);
}

.marca-sello,
.avatar {
  background: linear-gradient(135deg, var(--primario), var(--secundario));
}

.acceso-ilustracion .ilustracion-personalizada,
.inicio-ilustracion .ilustracion-personalizada {
  border: 1px solid var(--borde);
  box-shadow: 0 22px 50px rgba(30, 61, 105, .16);
}

.acceso-etiqueta {
  border-color: rgba(49, 103, 227, .16);
  background: rgba(255, 255, 255, .94);
}

.boton-sesion-global {
  border-color: rgba(229, 72, 77, .35);
  color: #a9252a;
  background: #fff0f1;
  font-weight: 800;
}

.boton-sesion-global:hover {
  border-color: #e5484d;
  color: #ffffff;
  background: #e5484d;
}

#btnCerrarSesion,
#btnCerrarSesionDoctor {
  display: none !important;
}

#btnActualizarDoctor,
#estadoServidor,
#doctorModo,
#authNota {
  display: none !important;
}

.admin-tabla-wrap,
.tabla-responsive,
.admin-chat-layout,
.citas-paciente-lista,
.admin-citas-lista,
.doctor-validaciones,
.admin-emergencias-lista {
  min-width: 0;
  max-width: 100%;
}

.admin-tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 900px) {
  .pantalla-acceso,
  .pantalla-inicio {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .acceso-contenido,
  .inicio-contenido {
    width: 100%;
    align-items: stretch;
  }

  .auth-panel {
    width: 100%;
  }

  .layout-principal,
  .secciones-secundarias,
  .admin-chat-layout {
    grid-template-columns: 1fr !important;
  }

  .panel-sticky {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .barra-superior {
    min-height: 66px;
    padding: 9px 12px;
    gap: 10px;
  }

  .marca-juego strong {
    font-size: .9rem;
  }

  .marca-juego small {
    display: none;
  }

  .marca-sello {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .acciones-superiores {
    gap: 5px;
  }

  .acciones-superiores .boton-icono {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .acciones-superiores .boton-texto span {
    display: none;
  }

  .acciones-superiores .boton-sesion-global {
    width: auto;
    min-width: 66px;
    padding: 0 10px;
  }

  .acciones-superiores .boton-sesion-global span {
    display: inline;
    font-size: .78rem;
  }

  .contenedor-juego {
    width: 100%;
    padding: 16px 12px 92px;
  }

  .perfil-barra {
    align-items: flex-start;
    flex-direction: column;
  }

  .perfil-acciones {
    width: 100%;
  }

  #btnVolverInicio {
    width: 100%;
  }

  .menu-juego {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .menu-juego button {
    min-width: max-content;
    scroll-snap-align: start;
  }

  .resumen-superior {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .resumen-item {
    min-height: 76px;
    padding: 11px;
  }

  .siguiente-paso,
  .panel-titulo,
  .modal-cabecera {
    align-items: stretch;
    flex-direction: column;
  }

  .siguiente-paso > button {
    width: 100%;
  }

  .modal {
    padding: 8px;
  }

  .modal-contenido {
    width: 100%;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border-radius: 18px;
  }

  .modal-acciones-cabecera {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .auth-form {
    gap: 8px;
  }

  .auth-form input,
  .auth-form select,
  .auth-form textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .admin-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tabs button {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .admin-cita-form {
    grid-template-columns: 1fr !important;
  }

  .admin-cita-acciones {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-cita-acciones button {
    width: 100%;
  }

  .chat-salud-form,
  .admin-chat-conversacion form {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.75rem, 10vw, 2.35rem);
  }

  h2 {
    font-size: 1.3rem;
  }

  .resumen-superior {
    grid-template-columns: 1fr !important;
  }

  .resumen-item {
    min-height: 66px;
  }

  .panel,
  .auth-panel {
    border-radius: 17px;
  }

  .panel:not(.mapa-panel),
  .auth-panel {
    padding: 16px;
  }

  .acceso-salud-infantil {
    min-height: 220px !important;
  }

  .acceso-salud-infantil .ilustracion-personalizada,
  .inicio-ilustracion .ilustracion-personalizada {
    min-height: 210px;
    max-height: 280px;
    border-radius: 20px;
  }

  .orientacion-item summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .diploma-acciones,
  .share-grid {
    grid-template-columns: 1fr !important;
  }

  .ruleta {
    width: min(290px, 88vw);
    height: min(290px, 88vw);
  }
}

@media (max-width: 360px) {
  .marca-juego strong {
    font-size: .8rem;
  }

  .acciones-superiores .boton-icono {
    min-width: 36px;
    width: 36px;
    height: 36px;
  }

  .acciones-superiores .boton-sesion-global {
    min-width: 58px;
    width: auto;
  }

  .contenedor-juego {
    padding-inline: 9px;
  }
}

/* =========================================================
   TEMA FINAL · SALUD INFANTIL
   Mantiene la paleta azul, turquesa, coral y amarillo del inicio.
   ========================================================= */
:root {
  --fondo: #f7f9fd;
  --panel: #ffffff;
  --texto: #1b2f4b;
  --texto-suave: #5d708c;
  --borde: #dce6f3;
  --primario: #3167e3;
  --primario-oscuro: #19439d;
  --primario-suave: #eaf1ff;
  --secundario: #18b8a8;
  --secundario-oscuro: #087c73;
  --secundario-suave: #e2faf7;
  --acento: #ffc857;
  --acento-suave: #fff5d9;
  --peligro: #e5484d;
  --peligro-suave: #fff0f1;
  --exito: #18865f;
  --exito-suave: #e9f8ef;
  --sombra: 0 14px 36px rgba(29, 52, 86, .10);
}

body {
  color: var(--texto);
  background:
    radial-gradient(circle at 8% 8%, rgba(49, 103, 227, .09), transparent 27%),
    radial-gradient(circle at 92% 26%, rgba(24, 184, 168, .09), transparent 28%),
    radial-gradient(circle at 22% 92%, rgba(255, 200, 87, .12), transparent 25%),
    var(--fondo);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before { display: none; }

.barra-superior {
  min-height: 74px;
  padding: 11px clamp(14px, 4vw, 52px);
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 20px rgba(29, 52, 86, .06);
  backdrop-filter: blur(12px);
}

.marca-sello,
.avatar {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primario), var(--secundario));
  box-shadow: none;
}

.marca-sello { border-radius: 13px; }
.marca-juego small { color: var(--texto-suave); }

.boton-icono {
  border: 1px solid var(--borde);
  color: var(--texto);
  background: #fff;
  box-shadow: none;
}

.boton-icono:hover {
  border-color: #bfd0e7;
  background: var(--primario-suave);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(29, 52, 86, .09);
}

.boton-icono:active,
.boton-icono.toque-activo {
  transform: translateY(0);
  box-shadow: none;
}

.contenedor-juego {
  width: min(1280px, calc(100% - 36px));
  padding: 40px 0 74px;
}

.pantalla-acceso {
  border: 1px solid rgba(49, 103, 227, .10);
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 200, 87, .22), transparent 27%),
    radial-gradient(circle at 88% 12%, rgba(49, 103, 227, .14), transparent 29%),
    linear-gradient(135deg, #f4f8ff 0%, #effdfa 52%, #fffaf0 100%);
  box-shadow: 0 26px 70px rgba(29, 52, 86, .10);
}

.acceso-ilustracion,
.inicio-ilustracion {
  min-height: 460px;
  padding: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.acceso-salud-infantil .ilustracion-personalizada,
.inicio-ilustracion .ilustracion-personalizada {
  border: 8px solid rgba(255, 255, 255, .96);
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(29, 52, 86, .17);
}

.acceso-etiqueta {
  border: 1px solid rgba(49, 103, 227, .14);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 32px rgba(29, 52, 86, .13);
}

.auth-panel,
.panel,
.perfil-barra,
.resumen-item,
.siguiente-paso,
.doctor-cabecera,
.doctor-resumen article {
  border: 1px solid var(--borde);
  background: #fff;
  box-shadow: var(--sombra);
}

.auth-panel { border-radius: 22px; }

.auth-tabs {
  border: 0;
  background: var(--primario-suave);
}

.auth-tab {
  border: 0;
  color: var(--texto-suave);
}

.auth-tab.activo {
  border: 0;
  color: var(--primario-oscuro);
  background: #fff;
  box-shadow: 0 5px 15px rgba(29, 52, 86, .10);
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.perfil-form input,
.perfil-form select,
.perfil-form textarea,
.chat-salud-form textarea {
  border: 1px solid #cbd9ea;
  color: var(--texto);
  background: #fff;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.perfil-form input:focus,
.perfil-form select:focus,
.perfil-form textarea:focus,
.chat-salud-form textarea:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 4px rgba(49, 103, 227, .13);
}

.boton-principal,
.boton-secundario {
  border-radius: 13px;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.boton-principal {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primario), var(--secundario));
  box-shadow: 0 9px 22px rgba(49, 103, 227, .19);
}

.boton-principal:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primario-oscuro), var(--secundario-oscuro));
  transform: translateY(-2px);
  box-shadow: 0 12px 27px rgba(49, 103, 227, .24);
}

.boton-secundario {
  border: 1px solid #cbd9ea;
  color: var(--texto);
  background: #fff;
}

.boton-secundario:hover {
  border-color: #aebfda;
  color: var(--primario-oscuro);
  background: var(--primario-suave);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(29, 52, 86, .08);
}

.boton-principal:active,
.boton-secundario:active,
.boton-principal.toque-activo,
.boton-secundario.toque-activo {
  transform: translateY(0);
  box-shadow: none;
}

.inicio-resumen span,
.estado-control,
.estadisticas-grid > div,
.estado-validaciones,
.resultado-datos div {
  border: 1px solid var(--borde);
  background: #fff;
}

.perfil-barra { border-radius: 18px; }

.menu-juego {
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(29, 52, 86, .09);
  backdrop-filter: blur(10px);
}

.menu-juego button {
  border: 0;
  color: var(--texto-suave);
}

.menu-juego button:hover,
.menu-juego button:focus-visible,
.menu-juego button.activo {
  border-color: transparent;
  color: var(--primario-oscuro);
  background: var(--primario-suave);
}

.siguiente-paso { background: linear-gradient(135deg, var(--primario-suave), var(--secundario-suave)); }

.siguiente-icono {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primario), var(--secundario));
  box-shadow: 0 10px 24px rgba(49, 103, 227, .20);
}

.resumen-icono { border: 0; }
.resumen-icono.vida { color: #c0394b; background: #fff0f1; }
.resumen-icono.punto { color: var(--secundario-oscuro); background: var(--secundario-suave); }
.resumen-icono.estrella { color: #8a6200; background: var(--acento-suave); }
.resumen-icono.logro { color: #744eb1; background: #f1ebff; }
.resumen-icono.comunidad { color: var(--primario-oscuro); background: var(--primario-suave); }

.panel-titulo { border-bottom: 1px solid var(--borde); }
.panel-titulo p { color: var(--texto-suave); }

.mapa-progreso {
  border: 1px solid var(--borde);
  background: linear-gradient(180deg, #f8fbff, #f4fffc);
}

.ruta-base { stroke: #d7e2ef; }
.ruta-avance { stroke: var(--secundario); }

.nivel-boton {
  border: 5px solid #fff;
  background: linear-gradient(135deg, var(--primario), #4e83ee);
  box-shadow: 0 10px 24px rgba(49, 103, 227, .25);
}

.nivel-boton.actual { background: linear-gradient(135deg, var(--primario), var(--secundario)); }
.nivel-boton.completado { background: linear-gradient(135deg, var(--secundario), var(--exito)); }
.nivel-boton.bloqueado { color: #78889e; background: #e3e9f1; box-shadow: none; }

.nivel-boton:not(:disabled):hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 30px rgba(49, 103, 227, .28);
}

.nivel-boton:not(:disabled):active,
.nivel-boton.toque-activo {
  transform: translateY(0);
  box-shadow: 0 7px 17px rgba(49, 103, 227, .20);
}

@keyframes nivelActual {
  0%, 100% { box-shadow: 0 10px 24px rgba(49, 103, 227, .24), 0 0 0 0 rgba(24, 184, 168, .25); }
  50% { box-shadow: 0 10px 24px rgba(49, 103, 227, .24), 0 0 0 12px rgba(24, 184, 168, 0); }
}

.nivel-info,
.cofre-mapa,
.mision-item,
.premios-lista li,
.logro-item,
.guia-grid article,
.orientacion-control,
.chat-salud-mensajes,
.chat-mensaje,
.chat-adjunto,
.admin-emergencia,
.admin-chat-usuarios button {
  border: 1px solid var(--borde);
  background: #fff;
  box-shadow: 0 8px 22px rgba(29, 52, 86, .08);
}

.cofre-mapa { color: #8a6200; background: var(--acento-suave); }

.mision-icono,
.orientacion-numero {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primario), var(--secundario));
}

.mision-progreso {
  border: 0;
  background: #e5ecf5;
}
.mision-progreso span { background: linear-gradient(90deg, var(--primario), var(--secundario)); }

.mision-estado {
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  background: #f1f4f8;
}
.mision-estado.lista {
  border: 0;
  color: #fff;
  background: var(--primario);
  box-shadow: none;
}

.mision-aviso,
.resultado-mision-aviso,
.doctor-vacio {
  border: 1px dashed #d7b64e;
  background: var(--acento-suave);
}

.ruleta-escena { filter: drop-shadow(0 16px 22px rgba(29, 52, 86, .18)); }
.ruleta-escena::before { border-color: #c8d7ea; background: repeating-conic-gradient(#dce6f3 0deg 3deg, #fff 3deg 15deg); }
.ruleta-disco { border-color: #fff; box-shadow: inset 0 0 0 4px rgba(255,255,255,.82), 0 0 0 2px #c8d7ea; }
.ruleta-disco::before { background: repeating-conic-gradient(from -2deg, rgba(29,52,86,.35) 0deg 1.2deg, transparent 1.2deg 59deg, rgba(29,52,86,.35) 59deg 60deg), radial-gradient(circle at center, transparent 0 70%, rgba(255,255,255,.28) 71% 76%, transparent 77%); }
.ruleta-disco::after { border-color: #c8d7ea; }
.ruleta-puntero span { background: var(--primario-oscuro); }
.ruleta-centro { border-color: #fff; background: linear-gradient(135deg, var(--primario), var(--secundario)); box-shadow: 0 8px 20px rgba(29,52,86,.20); }
.ruleta-centro small { color: #fff; }

.ranking-tabla td {
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.ranking-tabla td:first-child { border-left: 1px solid var(--borde); }
.ranking-tabla td:last-child { border-right: 1px solid var(--borde); }
.ranking-yo td { background: var(--primario-suave); }
.ranking-puesto { border: 1px solid var(--borde); }
.ranking-avatar { border: 0; background: linear-gradient(135deg, var(--primario), var(--secundario)); }

.logro-item.conseguido { background: var(--acento-suave); }
.logro-icono { border: 0; }
.certificado-resumen { background: linear-gradient(135deg, var(--primario-suave), var(--secundario-suave)); }
.certificado-sello { border: 0; color: #8a6200; background: var(--acento-suave); box-shadow: 0 8px 20px rgba(29,52,86,.10); }

.modal-fondo { background: rgba(20, 40, 67, .64); }
.modal-contenido {
  border: 1px solid var(--borde);
  box-shadow: 0 28px 70px rgba(20, 40, 67, .28);
}
.modal-cabecera { border-bottom: 1px solid var(--borde); background: #f5f9ff; }
.barra-pasos { border-bottom: 0; background: #e6edf6; }
.barra-pasos span { background: linear-gradient(90deg, var(--primario), var(--secundario)); }
.nivel-meta { border-bottom: 1px solid var(--borde); background: var(--acento-suave); }

.opcion-respuesta,
.objeto-mochila,
.resultado-datos div,
.escenario-caja,
.feedback-caja,
.asistencia-premio,
.recompensa-icono,
.ayuda-icono,
.toast {
  border: 1px solid var(--borde);
  box-shadow: 0 8px 20px rgba(29, 52, 86, .08);
}

.opcion-respuesta:hover,
.objeto-mochila:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(29, 52, 86, .12);
}

.opcion-respuesta:active,
.objeto-mochila:active { transform: translateY(0); box-shadow: none; }
.opcion-letra { border: 0; color: var(--primario-oscuro); background: var(--primario-suave); }
.escenario-caja { background: var(--acento-suave); }
.resultado-sello { border: 0; background: var(--exito); box-shadow: 0 12px 25px rgba(24,134,95,.20); }
.asistencia-premio { color: var(--primario-oscuro); background: var(--primario-suave); }

.diploma-vista {
  border: 6px double var(--primario);
  background: #fffdf6;
  box-shadow: inset 0 0 0 9px var(--primario-suave);
}
.diploma-marca { border: 0; box-shadow: 0 8px 20px rgba(29,52,86,.12); }
.toast { box-shadow: 0 14px 30px rgba(20,40,67,.18); }

.doctor-cabecera { background: linear-gradient(135deg, var(--primario-suave), var(--secundario-suave)); }
.doctor-resumen article:hover,
.estadisticas-grid > div:hover,
.logro-item:hover { box-shadow: 0 13px 28px rgba(29,52,86,.12); }

.admin-tabs button {
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  background: #fff;
}
.admin-tabs button.activo { border-color: var(--primario); color: #fff; background: var(--primario); }
.admin-tabla th { background: var(--primario-suave); }
.admin-emergencia.pendiente { background: #fff8ef; }
.admin-emergencia.atendida { background: var(--exito-suave); }
.admin-chat-usuarios button.activo { border-color: var(--primario); background: var(--primario-suave); }
.chat-salud-mensajes { background: #f8fbff; }
.chat-mensaje.propio { background: var(--primario-suave); }
.chat-mensaje.recibido { background: var(--secundario-suave); }

.orientacion-control summary { background: #f7fbff; }
.orientacion-contenido { border-top: 1px solid var(--borde); }
.guia-grid article > span { color: var(--primario); background: var(--primario-suave); }

@media (max-width: 900px) {
  .contenedor-juego { width: 100%; padding: 18px 14px 90px; }
  .pantalla-acceso { padding: 18px; }
  .acceso-ilustracion, .inicio-ilustracion { min-height: 310px; }
}

@media (max-width: 560px) {
  .pantalla-acceso { border-radius: 24px; }
  .auth-panel { border-radius: 18px; }
  .acceso-salud-infantil .ilustracion-personalizada,
  .inicio-ilustracion .ilustracion-personalizada { border-width: 5px; border-radius: 20px; }
}

/* === Acceso: botón principal alineado con la identidad de Salud Infantil === */
.auth-form .boton-principal {
  border: 0;
  background: linear-gradient(135deg, var(--primario), var(--secundario));
  box-shadow: 0 9px 22px rgba(49, 103, 227, .19);
}

.auth-form .boton-principal:hover {
  background: linear-gradient(135deg, var(--primario-oscuro), var(--secundario-oscuro));
}