/* Pantallas de ingreso (módulo de VIBE). Sale de la hoja base de Marca/Claude_guia-visual-vibe.html: Nunito, fondo
   blanco, botones blancos, un color por sistema. El color se cambia con --fuerte desde la hoja del sitio (ING_HOJA_EXTRA). */
:root{--fuerte:#152A43; --linea:#E4E8ED; --suave:#F5F7F9; --texto:#0F1721; --texto-2:#6B7684; --borde-campo:#7F8C9A;
  --verde:#1F7A5C; --verde-suave:#E7F2EE; --rojo:#C2432F; --rojo-suave:#FBEBE8;
  --sombra:0 0 0 1px var(--linea), 0 1px 3px rgba(15,23,33,.08); --r:8px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ing{margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--suave);
  color:var(--texto); font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:17px; line-height:1.5}
.ing-caja{width:100%; max-width:420px; margin:16px; padding:28px 24px; background:#fff; border-radius:var(--r); box-shadow:var(--sombra)}
.ing-logo{display:block; width:168px; height:auto; margin:0 0 8px}
.ing-sitio{margin:0; font-size:15px; font-weight:700; color:var(--texto-2)}
.ing h1{margin:2px 0 18px; font-size:27px; font-weight:800; line-height:1.2; color:var(--fuerte)}
.ing p{margin:0 0 14px}
.ing a{color:var(--fuerte); font-weight:700}
.ing-form{display:flex; flex-direction:column}
.ing-form label{margin:0 0 4px; font-size:15px; font-weight:700}
.ing-form input{width:100%; min-height:48px; margin:0 0 16px; padding:8px 12px; background:#fff; color:var(--texto);
  border:1px solid var(--borde-campo); border-radius:6px; font:inherit}
.ing-form input[readonly]{background:var(--suave); border-color:var(--linea); color:var(--texto)}
.ing-form input:focus{outline:2px solid var(--fuerte); outline-offset:0; border-color:var(--fuerte)}
.ing-pista{margin:-12px 0 16px !important; font-size:15px; color:var(--texto-2)}
.ing-pista.ing-spam{margin:0 0 14px !important}   /* la línea de Spam va suelta, no pegada a un campo */
.ing-boton{display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin:4px 0 0; padding:0 16px;
  background:#fff; color:var(--fuerte); border:0; border-radius:var(--r); box-shadow:0 0 0 1px var(--fuerte), 0 1px 3px rgba(15,23,33,.08);
  font:inherit; font-weight:800; text-decoration:none; cursor:pointer}
.ing-boton:hover{box-shadow:0 0 0 2px var(--fuerte)}
.ing-boton:focus-visible, .ing a:focus-visible{outline:2px solid var(--fuerte); outline-offset:2px}
.ing-pie{margin:18px 0 0 !important; text-align:center}
.ing-aviso{padding:10px 14px; border-left:4px solid var(--fuerte); background:var(--suave)}
.ing-aviso.mal{border-left-color:var(--rojo); background:var(--rojo-suave)}
.ing-aviso.bien{border-left-color:var(--verde); background:var(--verde-suave)}
/* Usuarios (pantalla ancha) */
.ing-caja.ing-ancha{max-width:760px}
.ing h2{margin:0 0 6px; font-size:20px; font-weight:800; color:var(--fuerte)}
.ing-subtitulo{margin:24px 0 10px !important}
.ing-panel{margin:0 0 14px; padding:16px; border-radius:var(--r); box-shadow:0 0 0 1px var(--linea)}
.ing-panel .ing-pista{margin:0 0 12px !important}
.ing-dos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.ing-dos > div{min-width:0}
.ing-secciones{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 12px; padding:0; border:0; min-width:0}
.ing-secciones legend{padding:0; margin:0 0 4px; font-size:15px; font-weight:700}
.ing-form .ing-secciones label{display:flex; align-items:center; gap:8px; min-height:44px; margin:0; font-size:17px; font-weight:400; cursor:pointer}
.ing-form .ing-secciones input{width:22px; min-height:0; height:22px; margin:0; accent-color:var(--fuerte)}
.ing-nombre{margin:0 !important; font-size:20px; font-weight:800; overflow-wrap:anywhere}
.ing-vos{font-size:15px; font-weight:700; color:var(--texto-2)}
.ing-dato{margin:0 0 4px !important; color:var(--texto-2); overflow-wrap:anywhere}
.ing-dato b{color:var(--texto)}
.ing-usuario .ing-form{margin-top:12px}
.ing-usuario.baja{background:var(--suave)}
.ing-usuario.baja .ing-dato{color:#56616E}   /* sobre el gris claro, el gris de siempre no llega a 4,5:1 */
.ing-acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.ing-acciones form{flex:1 1 220px}
.ing-boton.peligro{color:var(--rojo); box-shadow:0 0 0 1px var(--rojo)}
.ing-boton.peligro:hover{box-shadow:0 0 0 2px var(--rojo)}
@media (max-width:480px){
  body.ing{align-items:flex-start; background:#fff}
  .ing-caja{margin:0; padding:24px 16px; box-shadow:none}
  .ing-panel{padding:14px 12px}
}
@media (max-width:700px){
  .ing-dos{grid-template-columns:1fr}
}