/* ====== Paleta ====== */
:root{
  --primary:#004070;  /* azul */
  --accent:#e15616;   /* naranja */
  --bg:#fff7f2;       /* fondo */
  --white:#ffffff;
  --text:#0f172a;     /* gris muy oscuro */
  --muted:#6b7280;    /* gris medio */
  --line:#e5e7eb;     /* borde claro */
}

/* ====== Reset base ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#c1ebf8,var(--bg));
  display:grid;
  place-items:center;
  padding:12px;               /* móvil: menos padding */
}

/* ====== Shell (base = móvil, 1 columna) ====== */
.shell{
  width:100%;
  max-width: 560px;           /* ancho cómodo en móvil */
  height:auto;
  display:grid;
  grid-template-columns:1fr;  /* móvil = 1 columna */
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}

/* ====== Lado izquierdo (branding) ====== */
/* En móvil NO se muestra (mobile-first) */
.side{ display:none; }

/* Si lo necesitas visible en desktop, el contenido sigue aquí */
.side{
  position:relative;
  background:url("https://images.pexels.com/photos/20192812/pexels-photo-20192812.jpeg") no-repeat center/cover;
  place-items:center;
}
.side__content{ width:80%; max-width:440px; }
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.brand__logo{
  width:52px; height:52px; border-radius:12px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 10px 24px rgba(0,64,112,.25);
  background:url("https://scontent.fchm1-1.fna.fbcdn.net/v/t39.30808-6/470072168_122200384808208844_5333520744442988448_n.jpg?_nc_cat=109&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHs_pUtI5EgN8oTcgVfRoSmShXGyO8ZC7ZKFcbI7xkLtvh2mh-4q1Lkvvmmu9PSr8uGjPWuSfBYZ9On0aCOIuTS&_nc_ohc=Hft8IndcJPwQ7kNvwHo3NsP&_nc_oc=Admt5qzvmMxw91bCXHfNG-XZRmO_C3MFFg818UJZXsk2_hA3_j2pAwIb2n2W3OiM_LyHaCtZxgl6oHnp9xYqFgRG&_nc_zt=23&_nc_ht=scontent.fchm1-1.fna&_nc_gid=eV-wPhkOMCrE0amZA807Vg&oh=00_AfXh1w1jmDH7RjmD3pTE_FeFIJdwGCQ-GX020FKLjJfypw&oe=68AD7DA3") no-repeat center/contain;
}
.brand__text h1{ margin:0; font-size:22px; color:var(--primary); font-weight:800; }
.brand__text p{ margin:2px 0 0; color:#375e7e; font-size:13px; }
.side h2{ font-size:28px; margin:12px 0 6px; color:var(--primary); }
.lead{ margin:0 0 18px; color:#3f5060; line-height:1.6; }
.art{ position:relative; height:140px; margin-top:8px; }
.art__dot{ position:absolute; border-radius:50%; filter:blur(18px); opacity:.5; }

/* ====== Lado derecho (panel login) ====== */
.panel{
  padding:22px 18px;          /* móvil compacto */
  display:grid; 
  align-content:center;
  background:var(--white);
  min-height: 50dvh;          /* sensación de bloque alto en móvil */
}
.panel__head h3{ margin:0; font-size:22px; font-weight:800; color:var(--primary); }
.panel__head p{ margin:6px 0 18px; color:var(--muted); font-size:14px; }

/* ====== Formulario ====== */
.form{ display:grid; gap:14px; }
.field{ position:relative; }
.field input{
  width:100%;
  height: clamp(42px, 6vh, 50px);        /* fluido en móvil */
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff; color:var(--text);
  padding:0 16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.field input::placeholder{ color:#97a4b0; }
.field input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,64,112,.16);
}

/* icono a la izquierda dentro del input */
.has-icon .icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#7790a5; font-size:15px; pointer-events:none;
}
.has-icon input{ padding-left:40px; }

/* botón mostrar/ocultar a la derecha */
.has-toggle .toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  height:36px; width:40px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc; color:#5f6b7a;
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.has-toggle .toggle:hover{ background:#f1f5f9; }
.has-toggle input{ padding-right:56px; }

/* meta */
.meta{
  margin-top:2px;
  display:flex; justify-content:space-between; align-items:center;
  gap:6px;
  font-size:14px; color:#445566;
  flex-wrap:wrap;                       /* evita desbordes estrechos */
}
.remember{ display:flex; align-items:center; gap:8px; }
.link{ color:var(--accent); text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* botón principal */
.btn{
  height:clamp(42px, 6vh, 50px);
  width:100%;
  border:1px solid var(--primary);
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-weight:800; letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 14px 26px rgba(0,64,112,.18);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease, border-color .2s;
}
.btn:hover{ filter:brightness(1.06); box-shadow:0 16px 28px rgba(0,64,112,.22); }
.btn:active{ transform:translateY(1px); }
.btn:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(225,86,22,.18); }

/* ===== Toast Notifications ===== */
.toast-container{
  position:fixed; top:20px; right:20px;
  display:flex; flex-direction:column; gap:10px; z-index:9999;
}
.toast{
  background:#e15616; color:#fff;
  padding:12px 18px; border-radius:8px; font-weight:600; font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateX(100%); animation:slideIn .4s forwards;
}
.toast.success{ background:#004070; }
.toast.warning{ background:gray; }
@keyframes slideIn{ to{ opacity:1; transform:translateX(0); } }
@keyframes fadeOut{ to{ opacity:0; transform:translateX(100%); } }

/* ====== Breakpoints (escalar hacia arriba) ====== */

/* Tablet */
@media (min-width: 600px){
  body{ padding:16px; }
  .panel{ padding:26px 22px; }
  .panel__head h3{ font-size:24px; }
}

/* Desktop */
@media (min-width: 981px){
  body{ padding:20px; }
  .shell{
    max-width:96%;
    width:1100px;
    height:640px;
    max-height:92vh;
    grid-template-columns:1fr 1fr;   /* 2 columnas solo en desktop */
  }
  .side{ display:grid; }             /* ahora sí aparece el lado visual */
  .panel{ padding:42px 40px; }
}