/* TASK-2026-09-27-f2-avisos-hub-visibles: colores iguales en claro y oscuro;
   cada aviso trae su propio fondo y contraste. */
:root{
  --hub-aviso-exito:#2c5410;
  --hub-aviso-aviso:#7a4a0c;
  --hub-aviso-error:#A32D2D;
  --hub-aviso-texto:#fff;
  --hub-aviso-anillo:#fff;
  --hub-aviso-contorno:#1f1f1a;
  --hub-peligro-texto:#A32D2D;
}
/* TASK-2026-09-27-f2-10-sesion-30-dias H15: rojo legible en tema oscuro. */
@media (prefers-color-scheme: dark){:root{--hub-peligro-texto:#e8a9a0}}
.hub-aviso{
  position:fixed;
  left:var(--hub-aviso-centro, 50%);
  bottom:calc(24px + env(safe-area-inset-bottom, 0px) + var(--hub-aviso-tapado, 0px));
  /* TASK-2026-09-27-f2-avisos-hub-visibles: sobre las pantallas (100),
     bajo el aviso de girar (999999); misma capa 120 que Recría. */
  z-index:120;
  width:max-content;
  max-width:min(420px, calc(var(--hub-aviso-ancho, 100vw) - 32px));
  padding:12px 20px;
  border-radius:16px;
  background:var(--hub-aviso-exito);
  color:var(--hub-aviso-texto);
  font-size:14.5px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  overflow-wrap:anywhere;
  /* TASK-2026-09-27-f2-avisos-hub-visibles: anillo blanco + contorno casi
     negro; cualquier fondo contrasta al menos 3:1 con uno de los dos. */
  box-shadow:0 0 0 2px var(--hub-aviso-anillo), 0 0 0 3px var(--hub-aviso-contorno), var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(10px);
  transition:opacity .3s, transform .3s;
}
.hub-aviso.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hub-aviso[data-tipo="aviso"]{background:var(--hub-aviso-aviso)}
.hub-aviso[data-tipo="error"]{background:var(--hub-aviso-error)}
.hub-aviso[data-tipo="aviso"]::before,
.hub-aviso[data-tipo="error"]::before{
  content:"!";
  content:"!" / "";
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  margin-right:8px;
  border-radius:50%;
  background:#fff;
  color:var(--hub-aviso-aviso);
  font-size:13px;
  line-height:1;
}
.hub-aviso[data-tipo="aviso"]::before{content:"i";content:"i" / ""}
.hub-aviso[data-tipo="error"]::before{color:var(--hub-aviso-error)}
#offline-banner.show{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:110;
  padding-top:calc(9px + var(--safe-top));
}
/* TASK-2026-09-27-f2-avisos-hub-visibles: reservar alto para las dos líneas
   del banner; en horizontal bajo se compacta para no tapar los controles. */
body:has(#offline-banner.show) .login-overlay{
  padding-top:calc(max(22px, calc(var(--safe-top) + 12px)) + 52px);
}
@media (orientation:landscape) and (max-height:640px) and (min-width:640px){
  body:has(#offline-banner.show) .login-overlay{padding-top:calc(var(--safe-top) + 40px)}
}
@media (prefers-reduced-motion: reduce){
  .hub-aviso,.hub-aviso.show{transition:none;transform:translateX(-50%)}
}
/* H15: botones de 44 px y separación de 10 px para toque en terreno. */
.us-fila-acciones{gap:10px;margin-top:10px;align-items:center}
.us-fila-acciones button{min-height:44px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--field);color:var(--text);font:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer}
/* El corte deja Borrar sola, al menos a 26 px de cualquier otro botón. */
.us-fila-acciones .us-fila-corte{flex:0 0 100%;height:0;margin:2px 0 3px;border-top:1px dashed var(--line2)}
.us-fila-acciones button.danger{margin-left:auto;color:var(--hub-peligro-texto);background:var(--red-bg);border-color:var(--red)}
/* H15: sin opacidad; borde en --text3 distingue la fila en ambos temas. */
.us-row.off{opacity:1;border-style:dashed;border-color:var(--text3)}
.us-row.off .ord-name{color:var(--text2)}
/* Alta exacta: el pie acompaña a su matriz dentro de Usuarios. */
#hub-usuarios .fcard.us-alta{overflow:visible}
.us-alta .fhead{border-radius:16px 16px 0 0}
.us-barra{--us-hueco:max(22px, calc(var(--safe-bottom, 0px) + 12px));position:sticky;bottom:calc(-1 * var(--us-hueco));z-index:2;background:var(--card);border-top:1px solid var(--line2);box-shadow:0 -5px 12px rgba(0,0,0,.08);padding:10px 2px calc(10px + var(--us-hueco))}
.us-barra .save{margin:0;width:100%;border-radius:14px}
.us-resumen{font-size:13px;line-height:1.35;color:var(--text);margin:0 8px 8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.us-pendiente{font-size:13px;font-weight:700;line-height:1.35;color:var(--amber-tx);margin:0 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em}
.perm-nota{display:block;font-size:11.5px;color:var(--text2);font-weight:400}
.perm-presets-nota{display:block;flex-basis:100%;font-size:12px;color:var(--text2);line-height:1.4}
.perm-appbar.perm-aparte{background:var(--amber-bg);color:var(--amber-tx)}
#hub-usuarios .perm-presets button{min-height:44px;padding:10px 14px;font-size:13px}
#hub-usuarios.login-overlay{scroll-padding-bottom:calc(200px + var(--safe-bottom, 0px))}
@media (orientation:landscape) and (max-height:640px) and (min-width:640px){
  .us-barra{--us-hueco:max(14px, var(--safe-bottom, 0px));display:flex;align-items:center;gap:12px}
  .us-barra > p{flex:1 1 auto;margin:0}
  .us-barra .save{width:auto;flex:0 1 auto;max-width:55%}
  #hub-usuarios.login-overlay{scroll-padding-bottom:calc(140px + var(--safe-bottom, 0px))}
}
/* m39 · Entrar con huella (TASK-2026-10-10-f5-m39-huella). */
.login-clave{display:flex;flex-direction:column;gap:11px}
.login-clave[hidden],.huella-ingreso[hidden],.huella-registro[hidden],.huella-registro [hidden],.huella-otra[hidden]{display:none}
.huella-ingreso{display:flex;flex-direction:column;gap:12px}
.huella-saludo{font-size:16px;font-weight:700;color:var(--text)}
.huella-btn{min-height:56px;font-size:18px}
.huella-otra{margin-bottom:0;min-height:48px}
.huella-ingreso:not([hidden]) ~ .login-ingresar{display:none}
.huella-registro{display:flex;flex-direction:column;gap:10px}
/* Aviso único del selector (decisión 19-B). */
.huella-aviso{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px;padding:14px;border-radius:14px;border:1.5px solid var(--green-bd);background:var(--green-bg);color:var(--text);text-align:left}
.huella-aviso[hidden]{display:none}
.huella-aviso-titulo{margin:0;font-size:17px;font-weight:700;color:var(--text)}
.huella-aviso-texto{margin:0;font-size:15px;line-height:1.4;color:var(--text)}
.huella-aviso .save,.huella-aviso .ghost{width:100%;margin:0}
.huella-aviso .ghost{background:var(--card)}
/* n26 (H22): la lista primero; «+ Nuevo usuario» y «+ Agregar persona» abren su alta. */
#hub-usuarios .us-abrir{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0 0 12px;padding:10px 14px;border:1px dashed var(--green-d);border-radius:14px;background:var(--green-bg);color:var(--green-d);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
#hub-usuarios .us-abrir[aria-expanded="true"]{border-style:solid}
/* n26 (H22): etiquetas con for/id sin cambiar la letra de las filas (.login-card label las ponía en columna y en 12 px). */
#hub-usuarios .row > label.lab{display:block;flex:0 1 auto;font-size:14.5px;font-weight:400;color:var(--text)}
#hub-usuarios .fcard > .perm-hint,#hub-usuarios .fcard > p.perm-hint{margin:8px 15px 10px}
/* n26 (H21): casilla de 22 px al lado de su texto, en filas de 44 px. */
#hub-usuarios label.chk-inline{flex-direction:row;align-items:center;gap:10px;min-height:44px;margin:0;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.25}
#hub-usuarios .chk-inline input[type="checkbox"]{width:22px;height:22px;margin:0;padding:0;flex:0 0 auto;accent-color:var(--green-d)}
#hub-usuarios .us-casillas{display:flex;flex-direction:column;padding:2px 15px;border-bottom:1px solid var(--line)}
#hub-usuarios .row.us-roles{flex-wrap:wrap;justify-content:flex-start;column-gap:18px;row-gap:0;padding-top:4px;padding-bottom:4px}
#hub-usuarios .row.us-roles > .lab{flex:0 0 100%;padding-top:6px}
#hub-usuarios .us-ventana{max-width:6rem}
#hub-usuarios .us-flags .us-ayuda{margin:6px 15px 4px}
/* n26 (H22): foco visible en los interruptores (la casilla real es invisible). */
#hub-usuarios .perm-toggle input:focus-visible + .perm-sw{outline:3px solid var(--green);outline-offset:2px}
/* n26 (H21): plantillas y matriz del alta con margen dentro de su tarjeta; el desplegable usa el ancho que queda. */
#hub-usuarios .us-alta > .us-menus{padding:0 12px}
#hub-usuarios .row > select.sel{width:auto;margin:0;flex:1 1 auto;min-width:0;max-width:65%}
#hub-usuarios .row.us-apilada{flex-wrap:wrap;gap:6px}
#hub-usuarios .row.us-apilada > *,#hub-usuarios .row.us-apilada > select.sel{flex:1 1 100%;width:100%;max-width:none}
#hub-usuarios .fcard[hidden]{display:none}