/* portada.css */

@keyframes scIn    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes orbPulse{ 0%,100% { transform:scale(1); opacity:.95; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes ringOut { 0%   { transform:scale(.7); opacity:.55; } 100% { transform:scale(1.6); opacity:0; } }

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.cl-portada-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif;
    color: rgba(255,255,255,0.95);
    background: radial-gradient(125% 80% at 50% -8%, #0A1E3A 0%, #0A0E15 46%, #07090E 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Anula gradiente y posición del theme base */
.cl-portada-body::before { display: none; }
.cl-portada-body body    { margin: 0; }

#clApp {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    padding: 0 20px 56px;
    min-height: 100vh;
}

.cl-inner  { width: 100%; }
.cl-screen { width: 100%; }
.cl-anim   { animation: scIn .5s ease both; }

.cl-ring {
    position: absolute;
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(0,214,184,0.4);
    animation: ringOut 2.6s ease-out infinite;
}

.wz-step { animation: scIn .4s ease both; display: flex; flex-direction: column; }

.wz-title {
    margin: 0 0 20px;
    font-size: 23px; font-weight: 700;
    line-height: 1.3; letter-spacing: -0.01em;
    color: rgba(255,255,255,0.95);
}

.wz-label-wrap { display: flex; flex-direction: column; gap: 7px; }
.wz-label { font-size: 13.5px; color: rgba(226,242,255,0.72); }

.wz-input {
    width: 100%; height: 54px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.11);
    color: #fff; padding: 0 16px; font-size: 16px;
    outline: none; font-family: inherit;
    transition: border .18s ease, box-shadow .18s ease;
}
.wz-input:focus { border-color: #5BAAE0; box-shadow: 0 0 0 3px rgba(91,170,224,0.15); }
.wz-input::placeholder { color: rgba(226,242,255,0.45); }

.wz-btn-continue {
    width: 100%; height: 54px; border: none;
    border-radius: 16px;
    background: linear-gradient(135deg,#0a4fb3,#5BAAE0);
    color: #fff; font-size: 16px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 32px -14px rgba(91,170,224,0.7);
    transition: opacity .15s ease, transform .12s ease;
    font-family: inherit;
}
.wz-btn-continue:active   { transform: scale(0.985); }
.wz-btn-continue:disabled {
    background: rgba(255,255,255,0.08);
    color: rgba(226,242,255,0.4);
    cursor: not-allowed;
    box-shadow: none;
}

#clCodigoInput:focus { border-color: #5BAAE0 !important; box-shadow: 0 0 0 4px rgba(91,170,224,0.16) !important; }
#wzNote:focus { border-color: rgba(217,142,74,0.6) !important; box-shadow: 0 0 0 3px rgba(217,142,74,0.14) !important; }
#clBtnIngresar:active, #ldBtnSolicitar:active { transform: scale(0.985); }

::placeholder { color: rgba(226,242,255,0.45); }
textarea, input { font-family: inherit; }