/* El panel no tiene tema oscuro diseñado todavía — sin esto, un navegador
   u OS en modo oscuro pinta inputs/selects con los controles nativos
   oscuros del sistema (fondo casi negro, texto claro), que no combinan
   con el resto de la marca (fondos blancos, texto oscuro). Se fuerza
   apariencia clara en todos los controles hasta que se diseñe un tema
   oscuro de verdad. */
:root {
  color-scheme: light;
}

body {
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

input,
select,
textarea {
  background-color: #ffffff;
  color: #0f1b24;
}
input::placeholder,
textarea::placeholder {
  color: #9aa7b4;
}
input:disabled,
select:disabled,
textarea:disabled {
  background-color: #f3f4f6;
  color: #6b7280;
}

.font-display {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700;
}

.hub-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.hub-card:hover {
  border-color: #043f8c;
  box-shadow: 0 10px 28px rgba(4, 63, 140, 0.14);
  transform: translateY(-3px);
}

/* Aviso de "esto tiene algo pendiente" en una tarjeta del Hub (ej. Tickets
   con una solicitud sin atender) — más difícil de perder que solo el badge
   de la campana. Contorno + resplandor que respira mientras el grupo tenga
   algo sin leer (JS solo pone/quita la clase; la animación en sí no la
   toca, así que dura lo que dure lo pendiente, no un destello fijo). */
@keyframes hub-pendiente {
  0%,
  100% {
    border-color: #e5e7eb;
    box-shadow: 0 0 0 0 rgba(242, 5, 5, 0.28);
  }
  50% {
    border-color: #f20505;
    box-shadow: 0 0 0 7px rgba(242, 5, 5, 0.12);
  }
}
.hub-card-pendiente {
  animation: hub-pendiente 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hub-card-pendiente {
    animation: none;
    border-color: #f20505;
    box-shadow: 0 0 0 3px rgba(242, 5, 5, 0.15);
  }
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #e1e6ed;
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item:hover {
  background: #f7f9fc;
}
.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #043f8c;
  margin-top: 5px;
  flex-shrink: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #e1e6ed;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.875rem;
  vertical-align: top;
}

th {
  background: #fafbfc;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #5b6b78;
}

tbody tr {
  transition: background-color 0.1s ease;
}
tbody tr:hover {
  background: #f7f9fc;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eaf1fc;
  color: #043f8c;
}

/* Menú lateral del panel: secciones (sidebar-group) + pestañas anidadas
   de la sección activa (sidebar-subitem). */
.sidebar-group {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #3d4a56;
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar-group:hover {
  background: #f3f5f8;
}
.sidebar-group.activo {
  background: #eaf1fc;
  color: #043f8c;
}

.sidebar-subitem {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #5b6b78;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar-subitem:hover {
  background: #f3f5f8;
  color: #043f8c;
}
.sidebar-subitem.activa {
  background: #043f8c;
  color: white;
  font-weight: 600;
}

/* Colapso del sidebar: el <aside> encoge y todo lo marcado como
   sidebar-label (texto junto a los íconos) desaparece; las filas se
   centran para que el ícono quede en medio de la franja angosta. */
#panel > aside {
  transition: width 0.15s ease;
}
#panel > aside.sidebar-colapsado {
  width: 76px;
}
#panel > aside.sidebar-colapsado .sidebar-label {
  display: none;
}
#panel > aside.sidebar-colapsado .sidebar-row {
  justify-content: center;
}
#panel > aside.sidebar-colapsado .sidebar-group,
#panel > aside.sidebar-colapsado #btn-volver-hub,
#panel > aside.sidebar-colapsado #btn-logout {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Checkbox de módulo (Roles/Usuarios): chip con borde que se resalta en
   azul de marca cuando está marcado — en vez de un checkbox suelto
   flotando junto a una etiqueta sin relieve. */
.modulo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid #e1e6ed;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #5b6b78;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.modulo-chip:hover {
  border-color: #043f8c;
}
.modulo-chip:has(input:checked) {
  background: #eaf1fc;
  border-color: #043f8c;
  color: #043f8c;
  font-weight: 600;
}
.modulo-chip input {
  accent-color: #043f8c;
}

.mensaje-error {
  color: #f20505;
  font-size: 0.875rem;
}

.mensaje-ok {
  color: #178a4c;
  font-size: 0.875rem;
}

/* Inputs/selects/textareas del panel y de los modales: foco con el azul de marca */
#panel input:focus,
#panel select:focus,
#panel textarea:focus,
#modal-overlay input:focus,
#modal-overlay select:focus,
#modal-overlay textarea:focus {
  outline: none;
  border-color: #043f8c;
  box-shadow: 0 0 0 1px #043f8c;
}

/* Encabezados de tarjeta (tarjeta() en app.js) y de modales, con la tipografía de marca */
#panel h2.font-semibold,
#modal-overlay h2.font-semibold {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* Spinner de "Cargando..." */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #e1e6ed;
  border-top-color: #043f8c;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Entrada de modales: fondo con fade, panel con fade + escala */
.modal-backdrop-anim {
  animation: fondo-aparece 0.15s ease-out;
}
.modal-panel-anim {
  animation: panel-aparece 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fondo-aparece {
  from {
    opacity: 0;
  }
}
@keyframes panel-aparece {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

/* Entrada/salida de toasts */
.toast-anim {
  animation: toast-entra 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-anim-out {
  animation: toast-sale 0.2s ease-in forwards;
}
@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes toast-sale {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}