html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* --- Grillas DataTables (.table-grilla). Mismo criterio compacto que syscrm. --- */
.table-grilla td,
.table-grilla th {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  vertical-align: middle;
}

/* DataTables reserva lugar para la flecha de orden en el th; sin esto los encabezados
   cortos quedan con el texto pegado al ícono. */
.table-grilla thead th {
  white-space: nowrap;
}

/* El buscador de DataTables ocupa todo el ancho de su columna del layout. */
.dataTables_filter input {
  width: 100%;
}
/* --- Fila de filtros por columna (la agrega site.js) --- */
.table-grilla thead .filter-row th {
  padding: 2px 3px !important;
}
.table-grilla .col-filter {
  padding: 1px 4px;
  font-size: 11px;
  height: auto;
}

/* ---- Left menu ---- */
.menu-lateral { width: 250px; min-width: 250px; min-height: calc(100vh - 57px); }
.contenido { min-width: 0; }
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 1rem; color: #212529; text-decoration: none; font-weight: 500;
}
.menu-item:hover { background: #f1f4f8; color: #212529; }
.menu-item .chevron { font-size: .75rem; transition: transform .15s; }
.menu-item:not(.collapsed) .chevron { transform: rotate(180deg); }
.submenu-item {
  display: block; padding: .4rem 1rem .4rem 2.4rem; color: #495057;
  text-decoration: none; font-size: .9rem;
}
.submenu-item:hover { background: #f1f4f8; color: #212529; }
.submenu-item.activo { background: #e7f0fb; color: #1b6ec2; font-weight: 600; border-left: 3px solid #1b6ec2; padding-left: calc(2.4rem - 3px); }
@media (max-width: 767.98px) { .menu-lateral { width: 100%; min-height: 0; } }

/* ---- Grillas: fondo azul claro ---- */
.table-grilla {
  --bs-table-bg: #f3f8fe;
  --bs-table-hover-bg: #e1edfb;
  --bs-table-border-color: #c9dcf0;
}
.table-grilla > thead > tr:first-child > th {
  --bs-table-bg: #cfe2f7;
  background-color: #cfe2f7;
  color: #1b3a5c;
}
.table-grilla > thead > tr.filter-row > th { background-color: #e4effb; padding: .3rem .4rem; }
.table-grilla > tbody > tr:nth-child(even) > td { background-color: #e9f2fc; }
.table-grilla > tbody > tr:hover > td { background-color: #d4e5f9; }

/* ---- Chips de grupo (legibles sobre el fondo azul) ---- */
.chip-grupo {
  display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px;
  font-size: .8rem; line-height: 1.5; border-radius: 10px;
  background: #fff; color: #1f2d3d; border: 1px solid #8fb4de; white-space: nowrap;
}
.chip-grupo.directo { font-weight: 600; border-color: #1b6ec2; }
.chip-grupo.heredado { color: #5b6773; border-style: dashed; }

/* ---- Etiquetas de estado (colores propios: Bootstrap 5.1 no trae -subtle ni text-bg-*) ---- */
.estado-chip {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  padding: 1px 8px; font-size: .8rem; font-weight: 600; line-height: 1.5;
  border-radius: 10px; border: 1px solid; white-space: nowrap;
}
.estado-chip.atencion { background: #fff3cd; color: #664d03; border-color: #d39e00; }
.estado-chip.roto     { background: #f8d7da; color: #842029; border-color: #dc3545; }
.estado-chip.info     { background: #e1edfb; color: #1b3a5c; border-color: #8fb4de; }
.estado-chip.gris     { background: #e9ecef; color: #343a40; border-color: #868e96; }
.estado-chip.ok       { background: #d1e7dd; color: #0a3622; border-color: #198754; }

/* ---- Ficha de usuario (popup) ---- */
.ficha-header { background: #e9f2fc; align-items: center; gap: 1rem; border-bottom: 1px solid #c9dcf0; }
.avatar-usr {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem; color: #fff; background: #1b6ec2;
}
.avatar-usr.inactivo { background: #868e96; }
.ficha-card { border: 1px solid #c9dcf0; border-radius: .5rem; background: #fff; overflow: hidden; }
.ficha-card-titulo {
  background: #f3f8fe; padding: .5rem .9rem; font-weight: 600; color: #1b3a5c;
  border-bottom: 1px solid #c9dcf0;
}
.ficha-card-titulo .bi { color: #1b6ec2; margin-right: .25rem; }
.ficha-card-cuerpo { padding: .8rem .9rem; }
.ficha-dato { margin-bottom: .6rem; }
.ficha-dato-k { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.ficha-dato-v { font-weight: 500; word-break: break-word; }