/* =======================================
   LOGIN ADMIN — limpio, centrado y moderno
   (Aislado a body.admin-login)
   ======================================= */
   
   body.admin-login {
    overflow-x: hidden; /* Evita el scroll lateral en todo el cuerpo */
    width: 100%;
    position: relative;
}

body.admin-login .login-wrapper {
    width: 100%;
    overflow: hidden; /* Mantiene todo dentro del contenedor */
}
body.admin-login{
  --bg: #f6f8fb;
  --text: #0f172a;
  --muted:#64748b;
  --ring:#9bd0a8;
  --brand:#5fa24a;
  --brand-700:#3f7c34;
  --panel-deg: linear-gradient(160deg, #6cab54 0%, #4a7d3a 100%);

  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 300px at 75% -120px, rgba(95,162,74,.10), transparent 60%),
    var(--bg);
}

/* ===== Split layout ===== */
body.admin-login .login-wrapper{
  display:flex; min-height:100vh;
}

body.admin-login .left-panel{
  width:20%;
  min-width:340px;
  background: var(--panel-deg);
  color:#fff;
  padding: 3.2rem 3rem;
  display:flex; flex-direction:column; justify-content:flex-start; gap:1rem;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18);
}
body.admin-login .left-panel img{ width:350px; height:auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.18)); }
body.admin-login .left-panel h1{
  margin: 1rem 0 .25rem;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing:.2px;
  margin-left: 31px;
}
body.admin-login .left-panel p{
  margin:0; line-height:1.6; color:rgba(255,255,255,.92);
}

/* derecha */
body.admin-login .right-panel{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(16px, 4vw, 56px);
}

/* ===== Card ===== */
body.admin-login .login-box{
  width:100%; max-width: 460px;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius: 18px;
  padding: 24px;
  box-shadow:
    0 22px 60px rgba(15,23,42,.08),
    0 2px 10px rgba(15,23,42,.04);
}
body.admin-login .login-box h3{
  margin:0 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--text);
}

/* ===== Inputs ===== */
body.admin-login .form-control{
  width:95%;
  height: 44px;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  padding: 0 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  margin-bottom: 12px;
}
body.admin-login .form-control::placeholder{ color:#9aa3b2; }
body.admin-login .form-control:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(155,208,168,.28);
}

/* ojo contraseña */
body.admin-login .position-relative{ position:relative; }
body.admin-login .toggle-password{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:18px; color:#9aa3b2; cursor:pointer; transition:color .15s ease;
}
body.admin-login .toggle-password:hover{ color:#6b7280; }

/* enlaces */
body.admin-login a{ color:#2563eb; text-decoration:none; }
body.admin-login a:hover{ text-decoration:underline; }

/* ===== Botón ===== */
body.admin-login .btn-primary,
body.admin-login button[type="submit"]{
  display:block; width:102%; height:46px;
  border:0; border-radius:12px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  color:#fff; font-weight:700; letter-spacing:.1px; cursor:pointer;
  box-shadow: 0 10px 26px rgba(63,124,52,.22);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  margin-top: 16px;
}
body.admin-login .btn-primary:hover,
body.admin-login button[type="submit"]:hover{
  filter: brightness(.98);
  box-shadow: 0 12px 30px rgba(63,124,52,.26);
}
body.admin-login .btn-primary:active,
body.admin-login button[type="submit"]:active{
  transform: translateY(1px);
}

/* mensajes */
body.admin-login .error-msg{
  background:#fff1f2; color:#ff0000; border:1px solid #fecaca;
  padding:10px 12px; border-radius:12px; font-size:14px; margin-bottom:12px; text-align:center;
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  body.admin-login .left-panel{ width: 36%; padding: 2.4rem; }
}
@media (max-width: 900px){
  body.admin-login .login-wrapper{ flex-direction:column; }
  body.admin-login .left-panel{ width:100%; min-height:170px; align-items:center; text-align:center; }
  body.admin-login .right-panel{ padding: 22px; }
  body.admin-login .login-box{ max-width: 520px; }
}

@media (max-width: 900px) {
    /* Forzamos a que nada mida más del 100% del contenedor padre */
    body.admin-login .login-box {
        width: 90% !important; /* Deja un pequeño margen estético a los lados */
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box; /* Asegura que el padding no sume al ancho */
    }

    body.admin-login .form-control {
        width: 100% !important; 
        box-sizing: border-box; 
    }

    body.admin-login .btn-primary,
    body.admin-login button[type="submit"] {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Evita que el panel izquierdo empuje hacia afuera */
    body.admin-login .left-panel {
        box-sizing: border-box;
    }
}

/* ============================================================
   RESPONSIVE RESCUE — Arreglo para móviles y tablets
   (Reemplaza tus @media anteriores con este bloque)
   ============================================================ */

/* 1. Ajuste para Laptops medianas (evita que el panel verde se coma la pantalla) */
@media (max-width: 1200px) {
    body.admin-login .left-panel {
        width: 30%; /* Reducimos de 36% a 30% */
        min-width: 300px;
        padding: 2.5rem 2rem;
    }
}

/* 2. El cambio crítico: Tablets y Móviles (Pasa a diseño vertical) */
@media (max-width: 900px) {
    body.admin-login .login-wrapper {
        flex-direction: column; /* Apila los paneles verticalmente */
    }

    /* Estilizamos el panel verde como una franja superior elegante */
    body.admin-login .left-panel {
        width: 100%;
        min-width: 100%;
        min-height: auto; /* Quitamos el alto total */
        padding: 2rem 1.5rem 3.5rem; /* Padding inferior extra para el efecto de superposición */
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        justify-content: center;
        border-radius: 0 0 25px 25px; /* Curva inferior sutil */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    /* Ajuste de imagen y textos en el panel superior */
    body.admin-login .left-panel img {
        width: 180px; /* Reducimos el logo drásticamente para móvil */
        margin-bottom: 0.5rem;
    }

    body.admin-login .left-panel h1 {
        margin: 0;
        margin-left: 0; /* Quitamos ese margen izquierdo que lo descentraba */
        font-size: 24px; /* Un tamaño más razonable */
        line-height: 1.2;
    }

    body.admin-login .left-panel p {
        font-size: 14px;
        opacity: 0.85;
        max-width: 300px; /* Evita que el texto ocupe todo el ancho */
        margin: 0 auto;
    }

    /* Panel derecho (blanco) */
    body.admin-login .right-panel {
        padding: 0 1rem 2rem; /* Quitamos padding superior para el efecto de superposición */
        flex: none;
        align-items: flex-start; /* Alinea la tarjeta hacia arriba */
        justify-content: center;
        margin-top: -25px; /* EFECTO CLAVE: Superpone la tarjeta blanca sobre la franja verde */
        z-index: 2; /* Asegura que la tarjeta esté por encima */
    }

    /* Ajuste de la tarjeta de login (Login Box) */
    body.admin-login .login-box {
        width: 100%;
        max-width: 400px; /* Ancho máximo para que no se vea gigante en tablets */
        padding: 24px 20px;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(15,23,42,0.1); /* Sombra más suave en móvil */
    }

    body.admin-login .login-box h3 {
        text-align: center;
        font-size: 19px;
        margin-bottom: 16px;
    }

    /* Normalizamos anchos de inputs y botones (eliminamos el 95% y 102%) */
    body.admin-login .form-control {
        width: 100% !important; /* Fuerza el ancho total dentro de la tarjeta */
        margin-bottom: 12px;
    }

    body.admin-login .btn-primary,
    body.admin-login button[type="submit"] {
        width: 100% !important; /* Fuerza el ancho total */
        margin-top: 10px;
    }
}

/* 3. Ajustes finos para Móviles muy pequeños */
@media (max-width: 400px) {
    body.admin-login .left-panel {
        padding: 1.5rem 1rem 3rem;
    }
    
    body.admin-login .left-panel img {
        width: 150px;
    }

    body.admin-login .left-panel h1 {
        font-size: 20px;
    }

    body.admin-login .left-panel p {
        display: none; /* Opcional: oculta el texto descriptivo si la pantalla es diminuta */
    }

    body.admin-login .login-box {
        padding: 18px 15px;
    }
}

@media (max-width: 900px) {
    /* ... otros estilos ... */

    body.admin-login .right-panel {
        padding: 1rem; /* Un poco de espacio arriba */
        margin-top: 10px; /* <--- CAMBIA ESTO. Si pones un número positivo, la caja baja */
        flex: none;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    body.admin-login .login-box {
        margin-top: 0; /* Asegúrate de que la caja misma no tenga márgenes locos */
        /* ... el resto igual ... */
    }
}