/*
  Entrada al Super Admin de NSM: una sola tarjeta blanca al centro, campos
  rellenos sin borde, sobre el verde selva de la marca (#00582a) llevado a
  casi negro. Un amanecer dorado arriba recuerda el sol del logo.
  La pantalla del intro (el pin que cae) vive en entrada.css.
*/
:root{
    --fondo:#012414;
    --tarjeta:#ffffff;
    --tinta:#1b1d1c;
    --tinta-2:#3d423f;
    --suave:#68706b;
    --tenue:#8a918c;
    --linea:#e6ebe8;
    --campo:#f1f4f2;
    --campo-hover:#e9eeeb;
    --marca:#00582a;
    --marca-hover:#006b34;
    --marca-anillo:rgba(0,88,42,.15);
    --oro:#f2c14e;
    --rojo:#c4302b;
}

*{ box-sizing:border-box }

html,body{ margin:0; min-height:100% }

body{
    min-height:100vh;
    min-height:100dvh;
    font-family:Inter,"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:var(--tinta);
    background-color:var(--fondo);
    background-image:
        radial-gradient(900px 520px at 50% -18%, rgba(242,193,78,.14), transparent 62%),
        radial-gradient(900px 600px at 0% 110%, rgba(16,140,72,.20), transparent 60%),
        radial-gradient(700px 500px at 105% 100%, rgba(0,88,42,.35), transparent 60%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:48px 16px;
}

/* La tarjeta */
.acceso{
    width:100%;
    max-width:440px;
    padding:42px 40px 28px;
    background:var(--tarjeta);
    border-radius:26px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.035),
        0 1px 2px rgba(0,0,0,.05),
        0 30px 80px -20px rgba(0,0,0,.55);
    animation:aparecer-tarjeta .55s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes aparecer-tarjeta{
    from{ opacity:0; transform:translateY(12px) scale(.985) }
    to{ opacity:1; transform:none }
}

/* Cabecera */
.cabecera{ text-align:center; margin-bottom:26px }

.logo-enlace{
    display:block;
    width:max-content;
    margin:0 auto 14px;
    border-radius:10px;
}

.logo-enlace:focus-visible{ outline:2px solid var(--marca); outline-offset:4px }

.logo{ display:block; width:190px; height:auto }

.kicker{
    margin:0 0 8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--tenue);
}

.cabecera h1{
    margin:0;
    font-size:28px;
    font-weight:700;
    letter-spacing:-.022em;
    line-height:1.15;
}

.subtitulo{
    margin:8px auto 0;
    max-width:320px;
    font-size:14px;
    line-height:1.5;
    color:var(--suave);
}

/* Campos */
.campo{ margin-bottom:16px }

.campo label{
    display:block;
    margin:0 0 7px 2px;
    font-size:13px;
    font-weight:600;
    color:var(--tinta-2);
}

.caja{ position:relative }

.caja input{
    width:100%;
    height:50px;
    padding:0 46px 0 44px;
    border:0;
    border-radius:13px;
    outline:none;
    background:var(--campo);
    color:var(--tinta);
    font:inherit;
    font-size:15.5px;
    transition:background .18s ease, box-shadow .18s ease;
}

.caja input:hover{ background:var(--campo-hover) }

.caja input:focus{
    background:var(--tarjeta);
    box-shadow:0 0 0 1.5px var(--marca), 0 0 0 5px var(--marca-anillo);
}

.caja input::placeholder{ color:#a3aaa6 }

.icono{
    position:absolute;
    left:15px;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    color:#a3aaa6;
    pointer-events:none;
    transition:color .18s ease;
}

.caja:focus-within .icono{ color:var(--marca) }

.ver-clave{
    position:absolute;
    right:7px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--tenue);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.ver-clave:hover{ background:rgba(0,0,0,.05); color:var(--tinta) }
.ver-clave:focus-visible{ outline:2px solid var(--marca); outline-offset:1px }
.ver-clave svg{ width:18px; height:18px; grid-area:1/1 }
.ver-clave .ojo-tachado,
.ver-clave[aria-pressed="true"] .ojo{ display:none }
.ver-clave[aria-pressed="true"] .ojo-tachado{ display:block }

.mayusculas{
    margin:7px 0 0 2px;
    font-size:12.5px;
    color:#9a6a00;
}

.mayusculas[hidden]{ display:none }

/* Boton principal */
.ingresar{
    position:relative;
    width:100%;
    height:50px;
    margin-top:8px;
    border:0;
    border-radius:13px;
    background:var(--marca);
    color:#fff;
    font:inherit;
    font-size:15.5px;
    font-weight:650;
    letter-spacing:-.005em;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 8px 18px -8px rgba(0,88,42,.75);
    transition:background .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}

.ingresar:hover{ background:var(--marca-hover) }
.ingresar:active{ transform:scale(.99) }
.ingresar:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--marca-anillo) }
.ingresar:disabled{ cursor:progress; opacity:.92 }

/* Mientras viaja la clave: un brillo que recorre el boton */
.ingresar[aria-busy="true"]{
    background-image:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    background-size:220% 100%;
    animation:recorrer 1.1s linear infinite;
}

@keyframes recorrer{
    from{ background-position:130% 0 }
    to{ background-position:-90% 0 }
}

/* Avisos */
.error{
    margin-bottom:18px;
    padding:12px 14px;
    border-radius:12px;
    background:#fdf0ef;
    color:var(--rojo);
    font-size:13.5px;
    line-height:1.45;
    animation:sacudir .4s cubic-bezier(.36,.07,.19,.97) both;
}

.error[hidden]{ display:none }

@keyframes sacudir{
    20%,60%{ transform:translateX(-4px) }
    40%,80%{ transform:translateX(4px) }
}

/* Solicitar acceso */
.separador{
    height:1px;
    margin:26px 0 20px;
    background:var(--linea);
}

.invitar{
    margin:0 0 12px;
    font-size:13px;
    color:var(--suave);
    text-align:center;
}

.boton-secundario{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    border:1px solid #d3dad6;
    border-radius:13px;
    color:var(--marca);
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
}

.boton-secundario:hover{ background:#eff7f2; border-color:#a6c7b3 }
.boton-secundario:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--marca-anillo) }
.boton-secundario svg{ width:17px; height:17px }

/* Pie de la tarjeta */
.seguro{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--linea);
    font-size:12px;
    color:var(--tenue);
}

.seguro svg{ width:14px; height:14px; flex:none }

/* Debajo de la tarjeta */
.pie{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px 14px;
    font-size:12px;
    color:rgba(255,255,255,.62);
    animation:aparecer-tarjeta .55s cubic-bezier(.2,.8,.2,1) .08s both;
}

.pie a{ color:inherit; text-decoration:none }
.pie a:hover{ color:#fff }

.estado{ display:inline-flex; align-items:center; gap:7px }

.escudo{
    width:16px;
    height:16px;
    flex:none;
    color:var(--oro);
    filter:drop-shadow(0 0 6px rgba(242,193,78,.45));
}

.estado strong{
    font-weight:600;
    letter-spacing:.02em;
    color:rgba(255,255,255,.9);
}

.pie .sep{ color:rgba(255,255,255,.3) }

@media (max-width:480px){
    body{ padding:24px 16px; justify-content:flex-start }
    .acceso{ padding:32px 22px 22px; border-radius:22px }
    .logo{ width:170px }
    .cabecera h1{ font-size:25px }
    .pie{ flex-direction:column; gap:4px }
    .pie .sep{ display:none }
}

@media (prefers-reduced-motion:reduce){
    .acceso,.pie,.error{ animation:none }
    .ingresar[aria-busy="true"]{ animation:none }
}

/* Al entrar, la tarjeta se va: se aleja y se desenfoca. Va con animacion
   porque la de llegada (con relleno) manda sobre cualquier transicion. */
.entrando .acceso,
.entrando .pie{
    animation:irse .5s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes irse{
    to{ opacity:0; transform:scale(.95) translateY(-6px); filter:blur(8px) }
}
.logo--jagzon{ width:170px; margin-inline:auto }