/* Reserva SIEMPRE el espacio de la barra de scroll vertical → el ancho del
   viewport NO cambia cuando aparece/desaparece el scroll al navegar entre
   recursos, así el título del encabezado fijo no se desplaza a la derecha y
   vuelve. En móviles (scroll overlay) es no-op. */
html {
  scrollbar-gutter: stable;
}

/* fallback inmediato antes de cargar el fondo definitivo */
body {
  background-color: #000;
  margin: 0;
}

.login-body {
  background-color: #000;
  color: #0a0000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  font-family: Roboto-latin, Inter-tight, Calibri, Arial, sans-serif;
  text-align: center;
  background-color: #000;
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
}

.logo {
  width: 150px;
  margin-bottom: 5px;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  display: block;
  margin: 1em auto;
  padding: 0.5em; 
  width: 60%;
  border: none;
  border-radius: 5px;
}

button {
  padding: 0.7em 2em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: #14156d;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

button:hover {
  background-color: #252525;
  border-color: rgba(255, 255, 255, 0.6);
}

.dashboard-body {
  background-color: var(--brand-body-bg, #000);
  color: var(--brand-nav-text, #fff);
}

.header {
  background-color: var(--brand-nav-bg, #000);
  color: var(--brand-nav-text, white);
  border-bottom: 1px solid var(--brand-nav-border, rgba(255,255,255,0.07));
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.logo-small {
  height: 60px;              /* header 40px + padding top 10 + padding bottom 10 */
  width: auto;
  max-width: 200px;
  /* contain: el logo se escala COMPLETO dentro del espacio sin recortarse,
     cualquiera sea su forma (cuadrado, vertical o apaisado). */
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  align-self: stretch;
  margin: -10px 12px -10px -10px; /* compensa padding del header en 3 lados; right=gap */
}

/* Contenedor de ancho FIJO para el logo del encabezado: reserva el espacio
   desde el primer pintado, así el título NO se desplaza cuando la imagen del
   logo (que carga async) aparece. Scoped: no altera .logo-small suelto.
   La imagen va en position:absolute → queda FUERA del flujo y no puede alterar
   el layout del encabezado en ningún momento de su carga. */
.logo-box {
  flex: 0 0 168px;          /* ancho fijo: ni crece ni encoge */
  width: 168px;
  align-self: stretch;
  margin: -10px 12px -10px -10px;
  overflow: hidden;
  position: relative;
}
.logo-box .logo-small {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}

/* ── Buscador de la cabecera ─────────────────────────────────────────────────
   Ocupa el lugar del antiguo rótulo fijo «Portal de Usuarios».

   NO introduce colores propios: el texto hereda `--brand-nav-text` y el relleno
   usa el MISMO gris neutro a baja opacidad que los botones de servicio
   (`.sidebar-tool`, más abajo). Ese gris es deliberado: al ser acromático se ve
   igual de bien sobre una paleta negra que sobre una blanca sin imponerle un
   tono a la marca del cliente. El realce al enfocar sí toma el acento de la
   paleta, para que el buscador se sienta parte de SU marca y no de la nuestra. */
.hd-buscar {
  position: relative;
  flex: 1 1 auto;
  max-width: 420px;
  min-width: 0;              /* sin esto el input no puede encogerse (flex) */
  margin: 0 auto;
}
.hd-buscar-caja {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;              /* control de una línea: alto explícito */
  padding: 0 12px;
  /* Relleno MUY tenue a propósito: cuanto más cerca queda del fondo de la
     cabecera, más separación hay entre la letra y su fondo. Sobre una paleta
     clara el gris al 10% aclara la caja (#f2f2f2 sobre blanco) y sobre una
     oscura la oscurece (#0d0d0d sobre negro): en ambos casos el texto gana
     contraste. La caja se define por el BORDE, no por el relleno — que es
     además lo que la saca del aspecto de campo de formulario antiguo. */
  border: 1px solid rgba(127, 127, 127, 0.32);
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.10);
  color: var(--brand-nav-text, #fff);
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-buscar-caja:hover { border-color: rgba(127, 127, 127, 0.52); }
.hd-buscar:focus-within .hd-buscar-caja {
  border-color: var(--brand-sidebar-accent, #93c5fd);
  /* Anillo de foco con el acento de la paleta del cliente, no un color propio. */
  box-shadow: 0 0 0 3px color-mix(in srgb,
              var(--brand-sidebar-accent, #93c5fd) 22%, transparent);
}
.hd-buscar-caja > svg { flex: none; opacity: .72; }

.hd-buscar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  outline: none;             /* el realce lo da la caja vía :focus-within */
}
/* .78 y no menos: a .55 el marcador de posición no llegaba a 4.5:1 sobre las
   paletas claras (3.3:1 en «plata frost»). Verificado en las 4 familias. */
.hd-buscar-input::placeholder { color: currentColor; opacity: .78; }


/* Panel de resultados. Usa los tokens de superficie de la paleta: en las tres
   familias (oscura, clara y de color) `surface-bg` y `sidebar-text` ya vienen
   emparejados con contraste suficiente. */
.hd-buscar-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1002;             /* sobre el header (1001) */
  max-height: 60vh;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--brand-surface-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  background: var(--brand-surface-bg, #111);
  color: var(--brand-sidebar-text, #d1d5db);
  box-shadow: 0 10px 15px rgba(0,0,0,.18), 0 4px 6px rgba(0,0,0,.12);
}
.hd-buscar-panel[hidden] { display: none; }

.hd-buscar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
}
.hd-buscar-item:hover,
.hd-buscar-item.marcado {
  background: var(--brand-sidebar-active-bg, #1e3a8a);
  color: var(--brand-sidebar-active-text, #fff);
}
.hd-buscar-item .bq-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-buscar-item .bq-grupo {
  flex: none;
  font-size: 11px;
  opacity: .60;
  white-space: nowrap;
}
.hd-buscar-item .icono-menu { flex: none; opacity: .75; }
.hd-buscar-vacio {
  padding: 12px 10px;
  font-size: 12.5px;
  opacity: .70;
  text-align: center;
}

/* En pantallas chicas el buscador cede el paso: el rótulo ya no existe y el
   menú se alcanza por la hamburguesa. */
@media (max-width: 520px) {
  .hd-buscar { max-width: none; margin: 0 8px 0 0; }
}

.hamburger {
  font-size: 20px;
  cursor: pointer;
  background: var(--brand-nav-hamburger-bg, transparent);
  border: 0px solid rgb(0, 0, 0);
  color: var(--brand-nav-text, white);
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.15s;
}
/* Hover de la hamburguesa: editable desde la paleta; el predeterminado es un
   velo distinto del fondo normal para que SIEMPRE se note el cambio al pasar. */
.hamburger:hover {
  background: var(--brand-nav-hamburger-hover-bg, rgba(255,255,255,0.15));
}

.sidebar {
  height: 100vh;
  width: 220px;
  position: fixed;
  top: 0;                 /* se despliega sobre la cabecera, sin margen superior */
  left: -220px;
  background-color: var(--brand-sidebar-bg, #000);
  border-right: 1px solid var(--brand-sidebar-border, rgba(255,255,255,0.07));
  padding-top: 0;
  overflow-y: auto;
  transition: left 0.3s;
  z-index: 1002;          /* por encima del .header (1001): lo tapa al abrirse */
}

/* Cabecera del menú: nombre + rol, botón de cierre pequeño arriba-derecha y
   una barra de iconos de servicios rápidos. Tokens del SIDEBAR para contraste. */
.sidebar-userbox {
  position: relative;
  z-index: 2;                 /* la caja (y sus iconos) queda al frente del menú */
  padding: 10px 12px 16px;    /* holgura inferior para los iconos */
  margin-bottom: 0;
  background: var(--brand-sidebar-hover-bg, rgba(255,255,255,0.07));
  /* Sin border-bottom: esa línea de 1px caía sobre/junto al borde inferior de
     los botones y se veía como una franja tenue que los "cubría". */
}
/* La primera celda del menú se despliega claramente más abajo, para que el
   borde inferior de los botones quede siempre visible y separado de la celda. */
#cliente-menu-items {
  margin-top: 10px;
}
/* Holgura garantizada bajo la fila de botones, independiente del padding. */
.sidebar-toolbar {
  margin-bottom: 4px;
}
/* Botón de cierre: pequeño, esquina superior derecha, margen mínimo. */
.sidebar-close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--brand-sidebar-text, #d1d5db);
  opacity: 0.7;
  cursor: pointer;
  transition: background 120ms, color 120ms, opacity 120ms;
}
.sidebar-close-btn:hover {
  opacity: 1;
  background: var(--brand-sidebar-bg, rgba(0,0,0,0.35));
  color: var(--brand-sidebar-accent, #93c5fd);
}
.sidebar-close-btn:focus-visible {
  outline: 2px solid var(--brand-sidebar-accent, #93c5fd);
  outline-offset: 2px;
}
.sidebar-user-nombre {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand-sidebar-text, #ffffff);
  word-break: break-word;
  padding-right: 20px;   /* deja sitio al botón de cierre */
}
.sidebar-user-rol {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-sidebar-accent, #93c5fd);
}
/* Barra de iconos de servicios rápidos. */
.sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  position: relative;
  z-index: 1;                 /* iconos al frente, sin que el borde inferior los cubra */
}
/* Iconos de servicio (estilo vectorial de los iconos de tipo de gráfico).
   Mayor especificidad que `.sidebar a` para anular su padding/display. */
.sidebar a.sidebar-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Caja del botón más compacta (el ícono SVG conserva su tamaño 15×15), para
     que el borde inferior quede holgado dentro de la barra y no parezca cubierto. */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  /* Borde con contraste propio (no depende del token de borde, que puede ser muy
     tenue en algunas paletas) + relleno sutil tipo "chip": así la caja completa,
     incluido el borde inferior, queda SIEMPRE definida, no solo en hover. */
  border: 1px solid rgba(127, 127, 127, 0.55);
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.16);
  color: var(--brand-sidebar-text, #fff);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sidebar a.sidebar-tool:hover {
  background: var(--brand-sidebar-bg, rgba(0,0,0,0.35));
  color: var(--brand-sidebar-accent, #93c5fd);
  border-color: var(--brand-sidebar-accent, #93c5fd);
}
.sidebar a.sidebar-tool:focus-visible {
  outline: 2px solid var(--brand-sidebar-accent, #93c5fd);
  outline-offset: 2px;
}
/* Botón-icono ACTIVO (su vista está abierta): mismo esquema de color que sus
   pares de la barra (no el de los ítems de menú de ancho completo). Mayor
   especificidad que `a.load-view-usuario.activo` para que predomine. */
.sidebar a.sidebar-tool.activo,
.sidebar a.sidebar-tool.activo:hover {
  background: var(--brand-sidebar-active-bg, #1e3a8a);
  color: var(--brand-sidebar-active-text, #ffffff);
  border-color: var(--brand-sidebar-accent, #93c5fd);
}
/* Alertas con mensajes sin leer: destaca el icono y muestra el badge. */
.sidebar a.sidebar-tool-alertas.tiene-no-leidas {
  color: #fca5a5;
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.35), 0 0 8px rgba(239,68,68,0.25);
}
.sidebar-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--brand-sidebar-bg, #000);
}
.sidebar-cargando {
  padding: 12px;
  color: var(--brand-sidebar-text, #9ca3af);
  font-size: 0.85em;
}

.sidebar a {
  padding: 10px 10px;
  text-decoration: none;
  font-size: 14px;
  color: var(--brand-sidebar-text, white);
  display: block;
}

.sidebar a:hover {
  background-color: var(--brand-sidebar-hover-bg, #252525);
}

.sidebar-visible {
  left: 0px !important;
}

.submenu {
  padding-left: 10px;
  display: none;
}

.submenu.visible {
  display: block;
}

.message.success {
  color: green;
}

.message.error {
  color: red;
}

.main {
  margin-left: 10px;
  /* El separador superior va como PADDING, no como margin. Con margin-top, al ser
     .main el primer hijo en flujo del body (header y sidebar son fixed), el margen
     colapsaba hacia afuera y empujaba el body 20px; como el body mide 100vh, la
     página terminaba en 100vh+20 y quedaba una barra de desplazamiento permanente
     aunque no hubiera nada que scrollear (su carril se ve como una franja clara a
     la derecha, porque el .header es fixed con right:0 y termina antes de ella).
     Con padding el espacio es idéntico, pero sin colapso y sin desborde. */
  padding: 20px 3px 3px;
  display: flex;
  justify-content: center;
}

.oculto {
  display: none;
}

.boton-centro {
  display: block;
  margin: 0 auto;
}

/* ==== RESPONSIVE CELULAR ==== */
@media (max-width: 480px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background-color: #f4f4f4;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
  }
  
    body.login-body {
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: top center;
  }

    #chat-container {
    position: relative;
    width: 100%;
    margin-top: 60px; /* corregido */
    padding: 0px 5px;
    box-sizing: border-box;
  }
  .hamburger {
  font-size: 28px;
  padding: 5px 5px;
}
.header{
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
  .login-container {
    width: 90%;
    max-width: 300px;
  }

.main,
.dashboard-container,
#chat-container,
#cuerpo_organizacion-container {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}
.contenido-embebido {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

  #chat-container {
    position: relative;
    margin-top: 50px; /* corregido */
    padding: 0 10px;
    box-sizing: border-box;
  }

  #chat {
    overflow-y: auto;
    padding-bottom: 80px;
  }

  #input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f1f1f1;
    padding: 6px 10px;
    display: flex;
    gap: 3px;
    align-items: center;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    z-index: 1000;
  }
  body {
  overflow-x: hidden;
  width: 100vw;
}

.container,
.card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

  #input-container button,
  #input-container input[type="text"] {
    flex-shrink: 0;
  }

  #user-input {
    flex: 1;
    font-size: 14px;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
  }

  .btn-microfono svg,
  .btn-carga svg,
  .btn-camara svg,
  .btn-tts-toggle,
  .btn-tts-last {
    width: 18px;
    height: 18px;
  }

  .btn-microfono,
  .btn-carga,
  .btn-camara,
  .btn-tts-toggle,
  .btn-tts-last{
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-cuerpo_organizacion {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .card-cuerpo_organizacion .campo {
    margin-bottom: 6px;
  }

  .card-cuerpo_organizacion .campo span {
    display: block;
    font-weight: bold;
    font-size: 13px;
    color: #333;
  }

  .card-cuerpo_organizacion .campo .valor {
    display: block;
    font-size: 14px;
    color: #111;
  }
}

body.login-body {
  background: url("../img/fondonucleo.jpg") no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Geologica, Inter-tight, Roboto-latin, Calibri, Arial, sans-serif;
}

.login-container {
  background-color: rgba(0, 0, 0, 0.65); /* fondo oscuro transparente */
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  max-width: 360px;
  width: 90%;
  text-align: center;
  color: white;
}
.login-container input,
.login-container button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  font-size: 0.95rem;
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
}
.login-container input {
  background-color: #f0f0f0;
  color: #333;
}
.login-container button {
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;

}

.login-container button:hover {
  background-color: lab(24.7% 11.15 -40.92);
}
.login-footer {
  margin-top: 1rem;

}

/* Selección de organización (login con correo en varias organizaciones) */
.login-sub { font-size: 0.9rem; color: #cbd5e1; margin: 4px 0 14px; }
.login-org-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.login-org-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border-radius: 8px; cursor: pointer; text-align: left;
  background-color: #f0f0f0; color: #333; font-size: 0.92rem;
  border: 2px solid transparent; box-sizing: border-box;
}
.login-org-item:hover { border-color: #2563eb; }
.login-org-item input { width: auto; margin: 0; }
.login-volver { margin-top: 10px; font-size: 0.85rem; }
.login-volver a { color: #93c5fd; text-decoration: none; }


.login-footer {
  margin-top: 1em;
}

.login-footer a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9em;
  transition: color 0.4s;
  color: #bdbeec;
  text-decoration: none;
  font-size: 0.9rem;
}

.login-footer a:hover {
  color: #fcfcfc;
  /*text-decoration: underline;*/
}
.login-title {
  letter-spacing: 3px; 
  padding-bottom: 15px;
  opacity: 0;                    /* inicia invisible */
}

/* Animación general */
@keyframes fadeInUp {
  0% {
    opacity: 0;

  }
  100% {
    opacity: 1;

  }
}

/* Aplica animación a cada input */
.login-container input, .login-footer, .login-title, .login-container input:nth-of-type(1), .login-container input:nth-of-type(2), .login-container button {
  animation: fadeInUp 6s ease-out forwards;
  opacity: 0;
}

/* === Chat IA: unificar estilo de los botones del input === */
#input-container .btn-microfono,
#input-container .btn-carga,
#input-container .btn-camara, 
#input-container .btn-tts-toggle,
#input-container .btn-tts-last {
  background: transparent !important;
  border: 0 !important;
  color: #444;              /* mismo tono que íconos “normales” */
  padding: 4px;
  line-height: 1;
  box-shadow: none;
}

#input-container .btn-microfono svg,
#input-container .btn-carga svg,
#input-container .btn-camara svg,
#input-container .btn-tts-toggle svg,
#input-container .btn-tts-last svg {
  width: 24px;
  height: 24px;
  fill: currentColor;      /*  <- respeta el color del botón */
}

#input-container .btn-microfono:hover,
#input-container .btn-carga:hover,
#input-container .btn-camara:hover,
#input-container .btn-tts-toggle:hover,
#input-container .btn-tts-last:hover {
  color: #007bff;           /* mismo hover que usas en otros íconos */
  background: #e4e4e4;
  border-radius: 6px;
}

/* Color y estilo de X sobre imagen */
.icon-image--delete .icon-x {
  stroke: #e53935;     /* rojo vivo */
  stroke-width: 2.6;   /* más gruesa que el contorno base */
}

.btn-icon:hover .icon-image--delete .icon-x {
  filter: brightness(1.05);
}

/* ── Menú lateral agrupado — Portal usuarios internos ───────────────────── */

a.load-view-usuario.activo,
a.load-view-usuario.activo:hover {
  background-color: var(--brand-sidebar-active-bg, #1e3a8a);
  color: var(--brand-sidebar-active-text, #fff);
}

.menu-vacio {
  padding: 12px;
  color: #9ca3af;
  font-size: 0.85em;
}

.icono-menu {
  vertical-align: middle;
  flex-shrink: 0;
}

.menu-grupo {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.menu-grupo-titulo {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  color: var(--brand-sidebar-group-text, #d1d5db);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-sidebar-group-bg, rgba(255,255,255,0.05));
  user-select: none;
  text-decoration: none;
}

.menu-grupo-titulo::-webkit-details-marker { display: none; }
.menu-grupo-titulo::marker               { display: none; }

.menu-grupo-titulo:hover {
  background: var(--brand-sidebar-group-hover-bg, rgba(255,255,255,0.10));
}

.menu-grupo-icono {
  color: var(--brand-sidebar-accent, #93c5fd);
  flex-shrink: 0;
}

.menu-grupo-nombre {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-grupo-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.menu-grupo[open] > .menu-grupo-titulo .menu-grupo-chevron {
  transform: rotate(90deg);
}

.menu-grupo-items {
  border-left: 2px solid rgba(99,102,241,0.35);
  margin-left: 18px;
  padding: 2px 0;
  background: rgba(0,0,0,0.15);
}

.menu-grupo-items a.menu-hijo {
  padding: 9px 10px 9px 12px;
  font-size: 13px;
  color: var(--brand-sidebar-text, #d1d5db);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.menu-grupo-items a.menu-hijo:hover {
  background: var(--brand-sidebar-hover-bg, #252525);
  color: var(--brand-sidebar-active-text, #fff);
}

.menu-grupo-items a.menu-hijo.activo {
  background-color: var(--brand-sidebar-active-bg, #1e3a8a);
  color: var(--brand-sidebar-active-text, #fff);
}

.sidebar a.load-view-usuario:not(.menu-hijo) {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Icon picker — Mantenedor de Recursos ────────────────────────────────── */

.r-icono-picker-bloque {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 4px 0;
}

.r-icono-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.r-icono-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.r-icono-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}

.r-icono-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
}

.r-icono-btn.r-icono-sel {
  border-color: #1e3a8a;
  background: #dbeafe;
  color: #1e3a8a;
}

.r-icono-btn-none {
  color: #9ca3af;
  font-size: 16px;
}

.r-icono-preview-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.r-icono-prev {
  width: 32px;
  height: 32px;
  color: #1e3a8a;
  flex-shrink: 0;
}

.r-icono-prev-label {
  font-size: 11px;
  color: #6b7280;
}


/* ── Skeleton de carga de módulos parciales ────────────────────────────── */
.partial-cargando {
  width: 100%;
  min-height: 180px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  margin-top: 16px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Pantalla de sesión expirada — overlay de pantalla completa ─────────── */
#sesion-expirada-aviso {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sesion-fadein 0.3s ease;
}
@keyframes sesion-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#sg-exp-card {
  background: #111827;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-top: 3px solid #ef4444;
  border-radius: 12px;
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
  text-align: center;
}
#sg-exp-titulo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.01em;
}
#sg-exp-subtexto {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* ── Aviso de inactividad próxima — modal de pantalla completa ─────────── */
#sg-inactividad-aviso {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sg-inac-fadein 0.3s ease;
}
@keyframes sg-inac-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#sg-inac-card {
  background: #111827;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-top: 3px solid #f59e0b;
  border-radius: 12px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
  text-align: center;
}
#sg-aviso-icono { font-size: 28px; }
#sg-aviso-texto {
  font-size: 0.9rem;
  color: #d1d5db;
  font-weight: 500;
  line-height: 1.5;
}
#sg-aviso-continuar {
  background: #f59e0b;
  color: #1e293b;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
#sg-aviso-continuar:hover { background: #fbbf24; }

/* ── Anti-flash de módulos parciales ───────────────────────────────────────
   Estas reglas garantizan que los tab-panels y modales de cualquier módulo
   cargado via innerHTML estén ocultos ANTES de que el CSS del módulo llegue.
   Sin esto, los paneles son visibles por ~100-300 ms causando una "ventana
   fantasma" a la derecha por desbordamiento horizontal.                    */

/* Tabs de todos los módulos */
.tab-content                { display: none; }
.tab-content.active         { display: block; }

/* Error de carga de módulo parcial */
.error-carga-modulo {
  padding: 2rem;
  color: #c0392b;
  font-size: 14px;
}
.error-carga-menu {
  padding: 12px;
  color: #c0392b;
  font-size: 0.85em;
}

/* Clases de visibilidad comunes a todos los módulos.
   Al estar en el shell CSS siempre presente, ocultan paneles y modales
   desde el primer frame tras insertar el partial, antes de que el CSS
   específico del módulo termine de cargar. */
.inv-oculto                 { display: none !important; }
.oculto                     { display: none !important; }

/* Vista de bienvenida en portales de administración (/suborg) */
.bienvenida-portal          { padding: 32px; }
.bienvenida-titulo          { color: var(--color-text-secondary, #d1d5db); margin-bottom: 8px; }
.bienvenida-subtitulo       { color: var(--color-text-muted, #9ca3af); }

/* ════════════════════════════════════════════════════════════════════════
   Paginador de tablas reutilizable (window.lofPaginar)
   ════════════════════════════════════════════════════════════════════════ */
.lofpg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px 2px;
}
.lofpg:empty { display: none; }
.lofpg-left, .lofpg-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lofpg-lbl, .lofpg-info {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-form-title, #1e293b);
}
.lofpg-select {
  background: var(--brand-form-input-bg, #ffffff);
  border: 1px solid var(--brand-form-input-border, #d1d5db);
  color: var(--brand-form-title, #1e293b);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.lofpg-btn {
  background: var(--brand-form-input-bg, #ffffff);
  border: 1px solid var(--brand-form-input-border, #d1d5db);
  color: var(--brand-form-title, #1e293b);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lofpg-btn:hover:not(:disabled) { border-color: #2563eb; background: #1e3a8a; color: #ffffff; }
.lofpg-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Ocultar columna RUT (3ª) de suscriptores cuando el usuario no es admin */
#psTable.eorg-norut th:nth-child(3),
#psTable.eorg-norut td:nth-child(3) { display: none; }

/* Etiqueta del check "Es proveedor" (ficha de empresa cliente y mantenedor).
   Un escalón menos de tamaño que el texto inline del formulario, en negrita y
   gris oscuro (nunca negro) para que resalte sin competir con los títulos. */
.chk-proveedor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}
.chk-proveedor input { accent-color: #1e3a8a; }