/* =====================================================================
   GRUPO QBK · Hub de acceso
   public/assets/css/hub.css

   El Hub es la puerta, no una aplicación más. Por eso es deliberadamente
   sobrio: el color lo ponen las tarjetas de cada aplicación, con el suyo
   propio, y todo lo demás se retira para que se vean ellas.

   El teal #01717F es el color del grupo; ya lo usan Caja Menor y la Mesa
   de Ayuda para identificar a QBK.
   ===================================================================== */

:root{
  --teal:#01717F;
  --teal-hondo:#015865;
  --teal-claro:#E4F0F1;

  --tinta:#0E1B21;
  --tinta-2:#33484F;
  --apagado:#5F757D;
  --linea:#D6E1E4;
  --linea-suave:#E7EEF0;
  --papel:#FFFFFF;
  --fondo:#F4F7F8;
  --fondo-2:#EDF3F4;

  --ok:#1F7A5A;
  --ok-fondo:#E6F3ED;
  --aviso:#8A6512;
  --aviso-fondo:#FBF3E0;
  --malo:#A33A30;
  --malo-fondo:#FBEDEB;

  --sombra:0 1px 2px rgba(14,27,33,.05), 0 10px 28px -18px rgba(14,27,33,.35);
  --sombra-alta:0 2px 4px rgba(14,27,33,.06), 0 18px 40px -20px rgba(14,27,33,.45);

  --letra:ui-sans-serif,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --titulo:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas","SF Mono",Menlo,monospace;

  --radio:4px;
  --transicion:120ms ease;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--letra);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--teal);text-underline-offset:2px;}
a:hover{color:var(--teal-hondo);}

/* Un solo anillo de foco en toda la aplicación. */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}

/* =====================================================================
   Pantallas limpias: entrar y cambiar contraseña
   ===================================================================== */
.h-limpio{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(1,113,127,.16), transparent 60%),
    linear-gradient(165deg, #0E1B21, #06343B 55%, #01717F);
}

.h-caja{
  width:100%;
  max-width:420px;
  background:var(--papel);
  border-radius:8px;
  padding:34px 34px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.h-marca{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--linea-suave);
}
.h-marca-nombre{
  font-family:var(--titulo);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tinta);
}
.h-marca-sub{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
}

.h-caja h1{
  font-family:var(--titulo);
  font-size:21px;
  font-weight:670;
  letter-spacing:-.015em;
  margin:0 0 6px;
}
.h-caja .h-lead{
  margin:0 0 22px;
  font-size:14px;
  color:var(--apagado);
  line-height:1.5;
}

/* =====================================================================
   Formularios
   ===================================================================== */
label{
  display:block;
  font-size:12.5px;
  font-weight:640;
  color:var(--tinta-2);
  margin:0 0 5px;
}
label .h-opcional{font-weight:400;color:var(--apagado);}

input[type=text],
input[type=email],
input[type=password],
input[type=search],
select,
textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-size:14.5px;
  font-family:inherit;
  color:var(--tinta);
  background:var(--papel);
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
input:hover:not(:disabled), select:hover:not(:disabled){border-color:#B9CBD0;}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(1,113,127,.14);
}
input:disabled, select:disabled{background:var(--fondo-2);color:var(--apagado);}

/* Flecha propia: la del navegador cambia de forma en cada sistema. */
select{
  appearance:none;
  padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F757D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}

.h-campo{margin-bottom:15px;}
.h-campo .h-ayuda{
  font-size:12px;
  color:var(--apagado);
  margin-top:5px;
  line-height:1.45;
}

.h-fila{display:flex;gap:14px;flex-wrap:wrap;}
.h-fila > *{flex:1 1 200px;min-width:0;}

.h-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  color:var(--tinta-2);
  cursor:pointer;
  margin-bottom:9px;
}
.h-check input{width:auto;margin:3px 0 0;accent-color:var(--teal);flex:none;}
.h-check span b{color:var(--tinta);font-weight:640;}
.h-check .h-check-desc{display:block;font-size:12.5px;color:var(--apagado);line-height:1.4;}

/* =====================================================================
   Botones
   ===================================================================== */
.h-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--radio);
  background:var(--teal);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:640;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.h-btn:hover{background:var(--teal-hondo);color:#fff;}
.h-btn:disabled{opacity:.5;cursor:not-allowed;}
.h-btn.h-ancho{width:100%;padding:11px 16px;font-size:15px;}

.h-btn.h-suave{
  background:var(--papel);
  color:var(--tinta-2);
  border-color:var(--linea);
}
.h-btn.h-suave:hover{background:var(--fondo-2);color:var(--tinta);border-color:#B9CBD0;}

.h-btn.h-peligro{background:var(--papel);color:var(--malo);border-color:#EBC9C4;}
.h-btn.h-peligro:hover{background:var(--malo-fondo);color:var(--malo);}

.h-btn.h-menudo{padding:5px 10px;font-size:12.5px;}

/* =====================================================================
   Avisos
   ===================================================================== */
.h-aviso{
  border-radius:var(--radio);
  padding:11px 14px;
  margin-bottom:16px;
  font-size:13.5px;
  line-height:1.5;
  border:1px solid;
}
.h-aviso.ok{background:var(--ok-fondo);color:var(--ok);border-color:#BEE0D2;}
.h-aviso.error{background:var(--malo-fondo);color:var(--malo);border-color:#EBC9C4;}
.h-aviso.aviso{background:var(--aviso-fondo);color:var(--aviso);border-color:#EBDCB4;}
.h-aviso b{font-weight:700;}

/* =====================================================================
   Marco general
   ===================================================================== */
.h-shell{min-height:100vh;display:flex;flex-direction:column;}

.h-barra{
  background:var(--tinta);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.h-barra-in{
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
  height:54px;
  display:flex;
  align-items:center;
  gap:26px;
}
.h-barra-marca{
  display:flex;
  align-items:baseline;
  gap:8px;
  text-decoration:none;
  flex:none;
}
.h-barra-marca .n{
  font-family:var(--titulo);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.015em;
  color:#fff;
}
.h-barra-marca .s{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#6FC3CE;
}

.h-nav{display:flex;gap:2px;align-items:center;height:100%;}
.h-nav a{
  display:flex;
  align-items:center;
  gap:7px;
  height:100%;
  padding:0 13px;
  color:#A8BEC5;
  text-decoration:none;
  font-size:13.5px;
  font-weight:560;
  border-bottom:2px solid transparent;
  transition:color var(--transicion), border-color var(--transicion);
}
.h-nav a:hover{color:#fff;}
.h-nav a.on{color:#fff;border-bottom-color:var(--teal);}

.h-yo{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:11px;
}
.h-yo-nombre{
  font-size:13px;
  color:#CFDDE1;
  text-align:right;
  line-height:1.25;
}
.h-yo-nombre small{display:block;font-size:11px;color:#7E959C;}
.h-avatar{
  width:31px;
  height:31px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  flex:none;
}
.h-salir{
  background:none;
  border:1px solid rgba(255,255,255,.18);
  color:#CFDDE1;
  border-radius:var(--radio);
  padding:5px 10px;
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background var(--transicion), color var(--transicion);
}
.h-salir:hover{background:rgba(255,255,255,.1);color:#fff;}

.h-cuerpo{
  flex:1;
  max-width:1160px;
  width:100%;
  margin:0 auto;
  padding:30px 24px 64px;
}

.h-cabecera{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.h-cabecera h1{
  font-family:var(--titulo);
  font-size:25px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
  line-height:1.2;
}
.h-cabecera .h-sub{
  margin:4px 0 0;
  font-size:14px;
  color:var(--apagado);
}
.h-cabecera .h-acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}

/* =====================================================================
   Tarjetas del lanzador
   ===================================================================== */
.h-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:16px;
}

.h-app{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--sombra);
  transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
a.h-app:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-alta);
  border-color:#BFD2D7;
}
a.h-app:hover .h-app-ir{opacity:1;transform:translateX(0);}

.h-app-tapa{
  padding:16px 18px 15px;
  color:#fff;
}
.h-app-inicial{
  font-family:var(--titulo);
  font-size:21px;
  font-weight:750;
  letter-spacing:-.02em;
  line-height:1;
  opacity:.55;
  margin-bottom:12px;
}
.h-app-nombre{
  font-family:var(--titulo);
  font-size:17px;
  font-weight:680;
  letter-spacing:-.012em;
  line-height:1.25;
}

.h-app-pie{
  padding:14px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
/* --- Pulso: lo que hay esperando dentro de cada aplicación ---
   La cifra manda y va en monoespaciada; la palabra que la explica va
   debajo, apagada. Se lee en el mismo golpe de vista que el nombre. */
.h-app-pulso{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding-bottom:10px;
  border-bottom:1px solid var(--linea-suave);
}
.h-app-pulso-n{
  font:650 26px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  color:var(--tinta);
}
.h-app-pulso-t{
  font-size:11.5px;
  color:var(--apagado);
  line-height:1.3;
}

.h-app-desc{
  font-size:13px;
  color:var(--apagado);
  line-height:1.45;
  flex:1;
}
.h-app-abajo{
  display:flex;
  align-items:center;
  gap:9px;
}
.h-app-rol{
  font-size:12px;
  font-weight:640;
  color:var(--tinta-2);
  background:var(--fondo-2);
  border-radius:20px;
  padding:3px 10px;
}
.h-app-ir{
  margin-left:auto;
  color:var(--teal);
  display:flex;
  align-items:center;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity var(--transicion), transform var(--transicion);
}

.h-app.h-apagada{opacity:.62;}
.h-app.h-apagada .h-app-tapa{filter:saturate(.25);}

.h-etiqueta{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  padding:2px 7px;
  border-radius:2px;
  border:1px solid;
  white-space:nowrap;
}
.h-etiqueta.ok{color:var(--ok);border-color:#BEE0D2;background:var(--ok-fondo);}
.h-etiqueta.aviso{color:var(--aviso);border-color:#EBDCB4;background:var(--aviso-fondo);}
.h-etiqueta.malo{color:var(--malo);border-color:#EBC9C4;background:var(--malo-fondo);}
.h-etiqueta.gris{color:var(--apagado);border-color:var(--linea);background:var(--fondo-2);}

/* =====================================================================
   Paneles y tablas
   ===================================================================== */
.h-panel{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:6px;
  box-shadow:var(--sombra);
  margin-bottom:20px;
  overflow:hidden;
}
.h-panel-cab{
  padding:14px 18px;
  border-bottom:1px solid var(--linea-suave);
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--fondo-2);
}
.h-panel-cab h2{
  font-family:var(--titulo);
  font-size:15px;
  font-weight:670;
  letter-spacing:-.008em;
  margin:0;
}
.h-panel-cab .h-panel-sub{font-size:12.5px;color:var(--apagado);margin-left:auto;}
.h-panel-cuerpo{padding:18px;}

.h-tabla-scroll{overflow-x:auto;}

table.h-tabla{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:620px;
}
table.h-tabla th{
  text-align:left;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--apagado);
  font-weight:600;
  padding:10px 16px;
  background:var(--fondo-2);
  border-bottom:1px solid var(--linea);
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:1;
}
table.h-tabla td{
  padding:11px 16px;
  border-bottom:1px solid var(--linea-suave);
  vertical-align:middle;
}
table.h-tabla tbody tr:last-child td{border-bottom:0;}
table.h-tabla tbody tr:hover{background:var(--fondo);}
table.h-tabla td.h-num{font-variant-numeric:tabular-nums;white-space:nowrap;}

.h-quien{display:flex;align-items:center;gap:10px;min-width:0;}
.h-quien .h-avatar{width:29px;height:29px;font-size:11px;background:var(--fondo-2);color:var(--tinta-2);}
.h-quien-txt{min-width:0;}
.h-quien-nom{font-weight:640;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h-quien-sub{font-size:12px;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h-quien a{text-decoration:none;color:inherit;}
.h-quien a:hover .h-quien-nom{color:var(--teal);text-decoration:underline;}

.h-vacio{
  padding:44px 20px;
  text-align:center;
  color:var(--apagado);
  font-size:14px;
}
.h-vacio strong{display:block;color:var(--tinta);font-size:15px;font-weight:640;margin-bottom:5px;}

/* Cifras de resumen */
.h-cifras{
  display:flex;
  flex-wrap:wrap;
  border:1px solid var(--linea);
  border-radius:6px;
  background:var(--papel);
  overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--sombra);
}
.h-cifra{
  flex:1 1 130px;
  padding:14px 18px;
  border-right:1px solid var(--linea-suave);
}
.h-cifra:last-child{border-right:0;}
.h-cifra b{
  display:block;
  font-family:var(--titulo);
  font-size:25px;
  font-weight:730;
  letter-spacing:-.02em;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.h-cifra span{display:block;font-size:12px;color:var(--apagado);margin-top:2px;}
.h-cifra.h-ojo b{color:var(--aviso);}

/* Filtros */
.h-filtros{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px;
}
.h-buscar{position:relative;flex:1 1 260px;max-width:380px;}
.h-buscar input{padding-left:34px;}
.h-buscar svg{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--apagado);
  pointer-events:none;
}
.h-pestanas{display:flex;gap:2px;background:var(--fondo-2);border-radius:var(--radio);padding:2px;}
.h-pestanas a{
  padding:6px 12px;
  border-radius:3px;
  font-size:13px;
  font-weight:580;
  color:var(--apagado);
  text-decoration:none;
  transition:background var(--transicion), color var(--transicion);
}
.h-pestanas a:hover{color:var(--tinta);}
.h-pestanas a.on{background:var(--papel);color:var(--tinta);box-shadow:0 1px 2px rgba(14,27,33,.1);}

/* =====================================================================
   Reparto de accesos
   ===================================================================== */
.h-acceso{
  display:grid;
  grid-template-columns:8px 1fr 230px;
  gap:0 16px;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--linea-suave);
}
.h-acceso:last-child{border-bottom:0;}
.h-acceso-color{
  width:8px;
  height:38px;
  border-radius:2px;
}
.h-acceso-nom{font-weight:640;font-size:14.5px;}
.h-acceso-desc{font-size:12.5px;color:var(--apagado);line-height:1.4;margin-top:2px;}
.h-acceso-extra{
  grid-column:2 / -1;
  margin-top:10px;
  padding:11px 13px;
  background:var(--fondo-2);
  border-radius:var(--radio);
}
.h-acceso-extra .h-tit{
  font-size:12px;
  font-weight:640;
  color:var(--tinta-2);
  margin-bottom:7px;
}
.h-acceso-extra .h-opciones{display:flex;gap:16px;flex-wrap:wrap;}
.h-acceso-extra .h-check{margin-bottom:0;font-size:13px;}

.h-clave-nueva{
  font-family:var(--mono);
  font-size:19px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--tinta);
  background:var(--papel);
  border:1px dashed var(--aviso);
  border-radius:var(--radio);
  padding:11px 16px;
  display:inline-block;
  margin-top:9px;
  user-select:all;
}

/* Detalle en dos columnas */
.h-dos{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.h-datos{list-style:none;margin:0;padding:0;font-size:14px;}
.h-datos li{
  display:flex;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--linea-suave);
}
.h-datos li:last-child{border-bottom:0;}
.h-datos .k{color:var(--apagado);flex:none;width:120px;font-size:13px;}
.h-datos .v{min-width:0;word-break:break-word;}

.h-mono{font-family:var(--mono);font-size:12.5px;color:var(--tinta-2);}

/* =====================================================================
   Errores
   ===================================================================== */
.h-error{
  max-width:520px;
  margin:80px auto;
  text-align:center;
  padding:0 24px;
}
.h-error .h-codigo{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--apagado);
  margin-bottom:14px;
}
.h-error h1{
  font-family:var(--titulo);
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.h-error p{color:var(--apagado);margin:0 0 22px;line-height:1.55;}

/* =====================================================================
   Pie
   ===================================================================== */
.h-pie{
  border-top:1px solid var(--linea);
  padding:18px 24px;
  text-align:center;
  font-size:12px;
  color:var(--apagado);
}

@media (max-width:820px){
  .h-dos{grid-template-columns:1fr;}
  .h-acceso{grid-template-columns:8px 1fr;}
  .h-acceso > select{grid-column:2;margin-top:9px;}
  .h-barra-in{gap:14px;padding:0 16px;}
  .h-nav a{padding:0 9px;font-size:12.5px;}
  .h-yo-nombre{display:none;}
  .h-cuerpo{padding:22px 16px 48px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  a.h-app:hover{transform:none;}
}

/* ---------------------------------------------------------------------
   Accesibilidad: saltar al contenido y textos solo para lectores
   El enlace vive fuera de la pantalla hasta que alguien lo enfoca con el
   teclado. Quien navega con tabulador no tiene que recorrer todo el menu
   en cada pagina para llegar a lo que vino a hacer.
   --------------------------------------------------------------------- */
.qbk-saltar{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:#0E1B21;color:#fff;padding:10px 16px;border-radius:0 0 4px 0;
  font:600 14px/1 ui-sans-serif,"Segoe UI",system-ui,sans-serif;text-decoration:none;
}
.qbk-saltar:focus{left:0;}
.qbk-solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}