/* 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 p, .ing-aviso .ing-spam{margin:0 0 6px !important}
.ing-aviso > :last-child{margin-bottom:0 !important}
.ing-aviso ul{margin:4px 0 0; padding-left:20px}
.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:1080px}
.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)}
/* Usuarios como tabla (14-nov-2026): números arriba, filtros, la tabla y las páginas. Bajo 700 px, la tabla pasa a fichas. */
.ing-form input::placeholder, .ing-filtros input::placeholder{color:#8A94A0; opacity:1}
.ing-volver{margin:0 0 12px !important}
.ing-numeros{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0 0 16px}
.ing-numero{display:flex; flex-direction:column; align-items:center; padding:12px 8px; background:#fff; border-radius:var(--r);
  box-shadow:0 0 0 1px var(--linea); text-decoration:none; color:var(--texto) !important; font-weight:400 !important}
.ing-numero b{font-size:30px; font-weight:800; line-height:1.1; color:var(--fuerte)}
.ing-numero span{font-size:15px; color:var(--texto-2)}
.ing-numero.actual{box-shadow:0 0 0 2px var(--fuerte)}
.ing-barra{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 10px}
.ing-filtros{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px}
.ing-filtro{display:flex; flex-direction:column; min-width:0}
.ing-filtro label, .ing-lote-barra label{margin:0 0 4px; font-size:15px; font-weight:700}
.ing-filtros input, .ing-filtros select, .ing-lote-barra select{min-height:48px; padding:8px 12px; background:#fff; color:var(--texto);
  border:1px solid var(--borde-campo); border-radius:6px; font:inherit}
.ing-filtro-q input{width:240px}
.ing-filtros select{width:210px}
.ing-filtros .ing-boton, .ing-barra > .ing-boton, .ing-lote-barra .ing-boton, .ing-paginas .ing-boton, .ing-columnas .ing-boton{width:auto; margin:0}
.ing-boton.ing-principal{background:var(--fuerte); color:#fff}
.ing-limpiar{align-self:center}
.ing-columnas{margin:0 0 12px}
.ing-columnas summary{display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-weight:700; color:var(--fuerte)}
.ing-columnas form{padding:12px 16px; border-radius:var(--r); box-shadow:0 0 0 1px var(--linea)}
.ing-columnas .ing-secciones label{display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer}
.ing-columnas .ing-secciones input{width:22px; height:22px; margin:0; accent-color:var(--fuerte)}
.ing-lote-barra{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px}
.ing-lote-barra label{margin:0}
.ing-lote-barra select{width:280px; max-width:100%}
.ing-todas{margin-right:auto}
.ing-tabla-caja{overflow-x:auto; border-radius:var(--r); box-shadow:0 0 0 1px var(--linea)}
.ing-tabla{width:100%; border-collapse:collapse; background:#fff; font-size:17px}
.ing-tabla th{background:var(--fuerte); color:#fff; text-align:left; font-weight:700; padding:10px 12px; white-space:nowrap}
.ing-tabla td{padding:10px 12px; border-top:1px solid var(--linea); vertical-align:top; overflow-wrap:anywhere}
.ing-tabla tbody tr{position:relative}
@media (min-width:701px){ .ing-tabla td.ing-c-estado, .ing-tabla td.ing-c-ultimo{white-space:nowrap} }   /* solo en la tabla: en las fichas del teléfono, nunca (se iba de costado a 375 px) */
.ing-tabla tbody tr:hover{background:var(--suave)}
.ing-tabla tr.baja td{color:#56616E}
.ing-tabla .ing-tilde{width:48px; text-align:center}
.ing-tabla td.ing-tilde{position:relative; z-index:1}
.ing-tabla .ing-tilde input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--fuerte); cursor:pointer}
.ing-nom a{text-decoration:none}
.ing-nom a::after{content:""; position:absolute; inset:0}   /* tocar la fila abre la ficha */
.ing-nadie{text-align:center; color:var(--texto-2); padding:24px 12px !important}
.ing-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ing-paginas{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0}
.ing-paginas span{margin-right:auto; color:var(--texto-2)}
.ing-elegidos{margin:8px 0 14px; padding-left:20px}
.ing-desplegable summary{cursor:pointer; font-weight:800; color:var(--fuerte); min-height:44px; display:flex; align-items:center}
.ing-invitar .ing-acciones{margin-top:0}
.ing-usuario, .ing-invitar, .ing-volver + .ing-panel{max-width:680px}   /* la ficha no se estira a todo el ancho de la tabla */
.ing-columnas summary, .ing-desplegable summary{list-style:none}
.ing-columnas summary::-webkit-details-marker, .ing-desplegable summary::-webkit-details-marker{display:none}
.ing-columnas summary::before, .ing-desplegable summary::before{content:"›"; display:inline-block; width:18px; font-size:22px; line-height:1; transition:transform .15s}
.ing-columnas[open] summary::before, .ing-desplegable[open] summary::before{transform:rotate(90deg)}
.ing-invitar .ing-acciones .ing-boton{flex:1 1 200px}
@media (max-width:700px){
  .ing-numeros{gap:6px}
  .ing-numero b{font-size:24px}
  .ing-barra{flex-direction:column; align-items:stretch}
  .ing-filtros{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* Estado y Entra a, uno al lado del otro */
  .ing-filtro-q, .ing-filtros .ing-boton, .ing-limpiar{grid-column:1 / -1}
  .ing-filtro-q input, .ing-filtros select, .ing-lote-barra select{width:100%}
  .ing-tabla-caja{overflow:visible; box-shadow:none}
  .ing-tabla, .ing-tabla tbody, .ing-tabla tr, .ing-tabla td{display:block; width:100%}
  .ing-tabla thead{display:none}
  .ing-tabla tbody tr{margin:0 0 10px; padding:10px 12px 10px 52px; border-radius:var(--r); box-shadow:0 0 0 1px var(--linea)}
  .ing-tabla td{border:0; padding:2px 0}
  .ing-tabla td[data-rot]:not(.ing-nom)::before{content:attr(data-rot) ": "; font-weight:700; color:var(--texto-2)}
  .ing-tabla td.ing-nom{font-size:19px; font-weight:800}
  .ing-tabla td.ing-tilde{position:absolute; left:12px; top:12px; width:auto; padding:0}
  .ing-tabla td.ing-nadie{padding:16px 0 !important}
}
@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}
}