/* =====================================================================
   Login en pantalla partida
   ---------------------------------------------------------------------
   Para cambiar el color de la marca, tocá solo --marca y --marca-oscuro.
   Ejemplos:  violeta #6D28D9 / #5B21B6     ·  magenta #D6006E / #A80057
              verde   #0B5D4E / #0A4C40     ·  azul    #1D4ED8 / #1E40AF
   ===================================================================== */

:root{
  --marca:#0B5D4E;
  --marca-oscuro:#0A4C40;
  --marca-suave:#E2EFE9;
  --tinta:#141A1E;
  --tinta-70:#4A5560;
  --linea:#DCE0DA;
  --campo:#F1F4F1;
  --rojo:#A3232B;
  --rojo-claro:#F8E5E5;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:var(--marca);
  -webkit-font-smoothing:antialiased;
}

/* ---------- estructura ---------- */
.acceso{display:flex;min-height:100vh;background:var(--marca)}

.acceso-izq{
  flex:1 1 50%;background:#fff;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;position:relative;
  border-top-right-radius:34px;border-bottom-right-radius:34px;
}

.acceso-der{
  flex:1 1 50%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:52px 46px;color:#fff;
  background:
    radial-gradient(120% 90% at 15% 15%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--marca) 0%, var(--marca-oscuro) 62%, #071B17 100%);
}

/* Si subís assets/portada.jpg se usa como fondo del panel derecho */
.acceso-der.con-foto{background-image:linear-gradient(180deg, rgba(10,25,22,.25) 0%, rgba(10,25,22,.82) 100%), var(--foto);
  background-size:cover;background-position:center}

/* formas decorativas, puro CSS */
.acceso-der::before{
  content:'';position:absolute;top:-90px;right:-70px;width:340px;height:340px;
  border:1.5px solid rgba(255,255,255,.16);border-radius:50%;
}
.acceso-der::after{
  content:'';position:absolute;top:120px;right:90px;width:170px;height:170px;
  border:1.5px solid rgba(255,255,255,.10);border-radius:50%;
}

.marca-der{position:absolute;top:46px;left:46px;display:flex;align-items:center;gap:10px}
.marca-der img{height:34px;width:auto;display:block}
.marca-der b{
  font-family:'IBM Plex Sans Condensed',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
}

.lema{position:relative;z-index:2;max-width:430px}
.lema h2{
  font-family:'IBM Plex Sans Condensed',sans-serif;
  font-size:41px;line-height:1.08;font-weight:700;letter-spacing:-.01em;margin-bottom:14px;
}
.lema p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}
.lema .puntos{display:flex;gap:8px;margin-top:26px}
.lema .puntos span{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.28)}
.lema .puntos span:first-child{background:#fff;width:52px}

/* ---------- tarjeta del formulario ---------- */
.tarjeta-acceso{width:100%;max-width:378px}

.logo-acceso{text-align:center;margin-bottom:26px}
.logo-acceso img{max-height:62px;width:auto;margin:0 auto 14px;display:block}
.logo-acceso .nombre{
  font-family:'IBM Plex Sans Condensed',sans-serif;font-size:23px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--marca);display:block;margin-bottom:14px;
}
.logo-acceso h1{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:31px;font-weight:700;letter-spacing:-.01em}
.logo-acceso p{font-size:14.5px;color:var(--tinta-70);margin-top:5px}

.campo-acceso{margin-bottom:17px}
.campo-acceso label{display:block;font-size:14px;font-weight:500;margin-bottom:7px}

.entrada{
  width:100%;padding:13px 15px;border:1px solid transparent;border-radius:11px;
  background:var(--campo);font-family:inherit;font-size:15px;color:var(--tinta);
  transition:border-color .15s, background .15s;
}
.entrada::placeholder{color:#9AA5A0}
.entrada:focus{outline:none;background:#fff;border-color:var(--marca);box-shadow:0 0 0 3px rgba(11,93,78,.13)}

.con-ojo{position:relative}
.con-ojo .entrada{padding-right:46px}
.ojo{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:8px;line-height:0;color:var(--tinta-70);border-radius:8px;
}
.ojo:hover{color:var(--marca);background:rgba(0,0,0,.04)}
.ojo svg{width:20px;height:20px;display:block}

.fila-acceso{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px}
.recordar{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;user-select:none}
.recordar input{width:17px;height:17px;accent-color:var(--marca);cursor:pointer;margin:0}
.enlace{font-size:14px;color:var(--marca);text-decoration:none}
.enlace:hover{text-decoration:underline}

.boton-acceso{
  width:100%;padding:14px;border:0;border-radius:11px;background:var(--marca);color:#fff;
  font-family:'IBM Plex Sans',sans-serif;font-size:15.5px;font-weight:500;cursor:pointer;
  transition:background .15s;
}
.boton-acceso:hover{background:var(--marca-oscuro)}
.boton-acceso.secundario{
  background:#fff;color:var(--marca);border:1.5px solid var(--linea);margin-top:11px;
}
.boton-acceso.secundario:hover{background:#F7F9F7;border-color:var(--marca)}

.error-acceso{
  background:var(--rojo-claro);border:1px solid #E7BEBE;color:#7E1A21;
  padding:12px 14px;border-radius:11px;font-size:14px;margin-bottom:18px;
}
.pie-acceso{text-align:center;font-size:13px;color:var(--tinta-70);margin-top:26px}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .acceso-der{display:none}
  .acceso-izq{flex:1 1 100%;border-radius:0}
}
@media (max-width:420px){
  .acceso-izq{padding:28px 18px}
  .logo-acceso h1{font-size:27px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}