/* ──────────────────────────────────────────────────────────────────
   school/style_index_onboarding.css
   Look glass para el panel de bienvenida/avatar/sobreti del index.
   NO toca .cuadrodentro/.cuadrofuera (su tamano/opacidad/transicion
   controla las transiciones entre pasos), solo arregla el ASPECTO.
   ──────────────────────────────────────────────────────────────── */

/* ── Cuerpo y fondo del index ───────────────────────────────────── */
body {
    background-color: #050505 !important;
}

/* ── Sustituye la card blanca .central por un panel glass ─────────
   Mantenemos el centrado original (top:0/bottom:0/margin:auto) para
   no romper la coordinacion con .cuadrodentro (que tambien es fixed
   y se centra igual). Solo arreglamos el width para que no desborde. */
.central {
    background: linear-gradient(180deg,
                rgba(22,22,22,.78) 0%,
                rgba(10,10,10,.86) 100%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 30px 80px rgba(0,0,0,.65),
        0 0 40px rgba(224,188,46,.05);
    /* original era width:800px - lo paso a min(800, viewport-28) */
    width: min(800px, calc(100vw - 28px)) !important;
    /* original era height:600px - lo respetamos pero permitimos scroll */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-sizing: border-box;
    animation: schPanelIn .55s cubic-bezier(.2,.9,.3,1);
}
/* En moviles bajos, dejar que la card se reduzca en alto tambien */
@media (max-height: 720px) {
    .central { height: calc(100vh - 90px) !important; }
}
/* La .cuadrodentro original tiene width:700/height:600 fixed. Si la
   pantalla es muy estrecha, tambien hay que escalarla para que no
   desborde su contenido. */
.cuadrodentro {
    width: min(700px, calc(100vw - 60px)) !important;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    pointer-events: auto !important;
}

/* IMPORTANTE: los demas pasos (#sobreti, #avatar, #final, #sobretidime)
   son .cuadrofuera (width:0, height:0, opacity:0). El opacity:0 NO
   desactiva pointer-events: sus hijos (textarea, inputs, botones)
   siguen interceptando clicks AUNQUE sean invisibles, tapando la
   mitad derecha del boton "clic aqui" del paso actual.
   Solucion: pointer-events:none en cuadrofuera. */
.cuadrofuera {
    pointer-events: none !important;
}
.cuadrofuera * {
    pointer-events: none !important;
}

/* Reflejo dorado superior y abajo */
.central::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(224,188,46,.45) 50%,
                transparent 100%);
    pointer-events: none;
}
.central::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,255,255,.10) 50%,
                transparent 100%);
    pointer-events: none;
}

@keyframes schPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Footer copy en glass discreto y RESPONSIVE (alineado izq) ──── */
.footer {
    background: rgba(10,10,10,.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.55) !important;
    height: auto !important;
    min-height: 26px;
    padding: 8px 18px !important;
    box-sizing: border-box;
    text-align: left;
}
/* El div interno tenia width:1200px y left:-600px con margin-left:50%
   (tecnica antigua de centrado). Lo reseteamos al flujo natural,
   alineado a la izquierda. */
.footer > div {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    left: auto !important;
    text-align: left !important;
    font-size: clamp(11px, 2.2vw, 13px) !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,.55) !important;
}

/* ── Textos: que el blanco puro sea suave y los titulares doraditos ── */
.central .textos {
    color: #e6e6e6 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.central .textostitulos {
    color: #E0BC2E !important;
    text-shadow:
        0 0 18px rgba(224,188,46,.30),
        0 1px 0 rgba(0,0,0,.55);
    letter-spacing: .02em;
    /* Tamaño fluido para que no se salga: minimo 20, maximo 30 */
    font-size: clamp(20px, 4.5vw, 30px) !important;
    line-height: 1.18 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Titulares con tamano gigante (font-size: 45px inline) → fluido */
.central [style*="font-size: 45px"],
.central [style*="font-size:45px"] {
    font-size: clamp(22px, 5.5vw, 38px) !important;
    line-height: 1.15 !important;
}
/* Cualquier texto inline forzado a tamanos grandes que se desborda */
.central [style*="font-size: 30px"],
.central [style*="font-size:30px"] {
    font-size: clamp(18px, 3.8vw, 26px) !important;
    line-height: 1.25 !important;
}

/* Los textos negros forzados con style inline siguen rotos en glass;
   los promovemos a un gris claro */
.central [style*="color: #000000"],
.central [style*="color:#000000"] {
    color: #e6e6e6 !important;
}

/* ── "Clic aqui" / "Clic here..." convertidos en BOTONES glass ──── */
/* Selector: <a class="botonimagenopacidad"> dentro de la central. */
.central a.botonimagenopacidad,
.central .botonimagenopacidad a {
    display: inline-block;
    padding: 12px 22px;
    margin: 6px 4px;
    border-radius: 999px;
    background: linear-gradient(180deg,
                rgba(40,40,40,.65),
                rgba(15,15,15,.75));
    border: 1px solid rgba(255,255,255,.12);
    color: #E0BC2E !important;
    font: 600 14px/1 -apple-system, Helvetica, Arial, sans-serif;
    letter-spacing: .4px;
    text-decoration: none !important;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 6px 18px rgba(0,0,0,.45);
    transition: all .25s cubic-bezier(.2,.9,.3,1);
    cursor: pointer !important;
    position: relative;
    z-index: 2;
}
.central a.botonimagenopacidad:hover,
.central .botonimagenopacidad a:hover {
    background: linear-gradient(180deg,
                rgba(70,55,15,.7),
                rgba(30,22,5,.8));
    border-color: rgba(224,188,46,.55);
    color: #fce394 !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 24px rgba(224,188,46,.20),
        0 10px 28px rgba(0,0,0,.55);
}

/* Cursor pointer en cualquier wrapper con onclick (los <div> que
   envuelven el "clic aqui" tienen onClick=cambiadivs y por defecto
   muestran I-beam de seleccion de texto). */
.central [onclick],
.central [onClick] {
    cursor: pointer !important;
}

/* El div padre del "clic aqui" tiene un padding-top: 200px inline que
   con la nueva altura compacta del glass empuja el boton FUERA del
   panel. Reseteo ese excedente al usar overflow=hidden en la card. */
#bienvenido > div > div[style*="padding-top: 200px"] {
    padding-top: 32px !important;
    margin-top: 24px;
    padding-bottom: 8px;
}

/* El boton "clic aqui" (paso 1) tambien con un buen aire arriba */
#bienvenido > div > div[style*="padding-top: 30px"][onClick*="cambiadivs"] {
    padding-top: 40px !important;
}

/* Forzar texto del "clic here for change languaje" a oro suave para
   diferenciarlo del CTA principal. El style inline marca #CCCCCC. */
#bienvenido a[href="cambiaidioma.php"] {
    background: transparent !important;
    border: 1px dashed rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.65) !important;
    padding: 9px 18px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
#bienvenido a[href="cambiaidioma.php"]:hover {
    border-color: rgba(224,188,46,.45) !important;
    color: #E0BC2E !important;
    background: rgba(224,188,46,.06) !important;
    box-shadow: 0 0 18px rgba(224,188,46,.12) !important;
}

/* ── Botones de submit/standar (incluye input[type=submit|button])
   Los <input> tienen estilos por defecto del navegador (appearance,
   background gris, fuente, padding) que pisan el shorthand background.
   Hay que usar appearance:none + background-color y background-image
   por separado para forzar el glass. ───────────────────────────── */
.central .botonstandarnaranja,
.central .botonstandarnaranja_activo,
.central .botonverde,
.central .botongris,
.central input.botonstandarnaranja,
.central input.botonstandarnaranja_activo,
.central input.botonverde,
.central input.botongris,
.central input[type="submit"].botonstandarnaranja,
.central input[type="button"].botonstandarnaranja {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: rgba(20,20,20,.65) !important;
    background-image: linear-gradient(180deg,
                rgba(40,40,40,.65),
                rgba(15,15,15,.75)) !important;
    color: #E0BC2E !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font: 600 14.5px/1 -apple-system, Helvetica, Arial, sans-serif !important;
    letter-spacing: .5px !important;
    text-transform: uppercase;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 22px rgba(0,0,0,.45);
    transition: all .25s cubic-bezier(.2,.9,.3,1);
    cursor: pointer !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.central .botonstandarnaranja:hover,
.central .botonstandarnaranja_activo:hover,
.central .botonverde:hover,
.central .botongris:hover,
.central input.botonstandarnaranja:hover,
.central input.botonstandarnaranja_activo:hover,
.central input.botonverde:hover,
.central input.botongris:hover,
.central input[type="submit"].botonstandarnaranja:hover,
.central input[type="button"].botonstandarnaranja:hover {
    background-color: rgba(50,38,8,.75) !important;
    background-image: linear-gradient(180deg,
                rgba(80,62,18,.78),
                rgba(35,25,6,.85)) !important;
    border-color: rgba(224,188,46,.6) !important;
    color: #fce394 !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 28px rgba(224,188,46,.25),
        0 14px 36px rgba(0,0,0,.55) !important;
}
.central input[type="submit"].botonstandarnaranja:active,
.central input[type="button"].botonstandarnaranja:active,
.central .botonstandarnaranja:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.4),
        0 0 18px rgba(224,188,46,.18) !important;
}

/* ── Textareas glass coherentes con la web ──────────────────────── */
.central textarea,
.central .cajatextosimple,
.central .cajatextosimplenota {
    background-color: rgba(15,15,15,.55);
    background-image: none;
    color: #e8e8e8;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 14px 16px;
    font: 14px/1.55 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    letter-spacing: normal;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
        inset 0 2px 10px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    outline: none;
    resize: vertical;
    caret-color: #E0BC2E;
    box-sizing: border-box;
}
.central textarea:hover {
    border-color: rgba(255,255,255,.18);
    background-color: rgba(20,20,20,.62);
}
.central textarea:focus {
    border-color: rgba(224,188,46,.55);
    background-color: rgba(18,16,8,.68);
    box-shadow:
        inset 0 2px 10px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 26px rgba(224,188,46,.18);
}
.central textarea::placeholder {
    color: rgba(255,255,255,.35);
}
.central textarea::selection {
    background: rgba(224,188,46,.32);
    color: #fff;
}

/* ── Input file: ocultamos el feo y damos un boton glass ────────── */
.central input[type="file"] {
    color: #cfcfcf;
    font: 13px/1.4 -apple-system, Helvetica, Arial, sans-serif;
}
.central input[type="file"]::file-selector-button {
    background: linear-gradient(180deg,
                rgba(40,40,40,.65),
                rgba(15,15,15,.75));
    color: #E0BC2E;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600; letter-spacing: .3px;
    cursor: pointer;
    margin-right: 12px;
    transition: all .2s ease;
}
.central input[type="file"]::file-selector-button:hover {
    background: linear-gradient(180deg,
                rgba(70,55,15,.7),
                rgba(30,22,5,.8));
    border-color: rgba(224,188,46,.55);
    color: #fce394;
}

/* ── Input type="image" (avatar) ──────────────────────────────── */
.central input[type="image"] {
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.08);
    box-shadow:
        0 12px 36px rgba(0,0,0,.55),
        0 0 26px rgba(224,188,46,.10);
    transition: all .3s ease;
}
.central input[type="image"]:hover {
    border-color: rgba(224,188,46,.5);
    box-shadow:
        0 14px 40px rgba(0,0,0,.6),
        0 0 36px rgba(224,188,46,.25);
    transform: translateY(-2px);
}

/* ── Radios del cuestionario: marca dorada ─────────────────────── */
.central input[type="radio"] {
    accent-color: #E0BC2E;
    transform: scale(1.15);
    cursor: pointer;
}

/* ── Mensajitos auxiliares (max 400, mensaje rojo, etc.) ────────── */
.central #mensaje0, .central #mensaje1 {
    background: rgba(60,0,0,.55);
    color: #ffb4b4;
    border: 1px solid rgba(255,80,80,.35);
    padding: 8px 12px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Adaptativo movil para la card central ────────────────────── */
@media (max-width: 760px) {
    .central {
        width: calc(100% - 24px) !important;
        max-width: 560px;
        height: auto !important;
        max-height: calc(100vh - 110px);
        overflow-y: auto !important;
        top: 80px !important; bottom: 40px !important;
        padding: 0 !important;
    }
    .central .textostitulos { font-size: 26px !important; line-height: 1.2 !important; }
    .central a.botonimagenopacidad,
    .central .botonimagenopacidad a { padding: 11px 18px; font-size: 13.5px; }
}
@media (max-width: 420px) {
    .central .textostitulos { font-size: 22px !important; }
}