/* ==========================================================================
   Gaviglio — Tema de marca (Manual de Normas Gráficas, dic. 2013)
   Se carga después de bootstrap.min.css y site.css: reestila las clases de
   Bootstrap 4 que ya usan las ~76 pantallas de la plataforma, sin tocar su
   markup. Pensado para uso prolongado: colores suaves de base, verde vivo
   reservado para acentos/hover/foco.
   ========================================================================== */

:root {
  /* Paleta institucional (manual de marca) */
  --gv-negro: #3e3935;
  --gv-gris: #5f5752;
  --gv-tiza: #f5f6f1;
  --gv-blanco: #ffffff;

  --gv-verde-oscuro: #5e8a39;
  --gv-verde: #74bc1a;
  --gv-verde-claro: #a2c82b;
  --gv-verde-lima: #c7db25;

  --gv-verde-rgb: 116, 188, 26;

  /* Tintes suaves derivados, para fondos/hover sin saturar la vista */
  --gv-verde-50: #f4f9ec;
  --gv-verde-100: #e7f2d6;
  --gv-verde-200: #d3e8b4;

  --gv-gris-50: #faf9f7;
  --gv-gris-100: #efece8;
  --gv-gris-200: #e1ddd7;
  --gv-gris-300: #c7c1b9;

  --gv-borde: var(--gv-gris-200);
  --gv-texto: var(--gv-negro);
  --gv-texto-suave: var(--gv-gris);

  --gv-radio-sm: .4rem;
  --gv-radio-md: .6rem;
  --gv-radio-lg: 1rem;

  --gv-sombra-sm: 0 1px 2px rgba(62, 57, 53, .06), 0 1px 3px rgba(62, 57, 53, .08);
  --gv-sombra-md: 0 4px 12px rgba(62, 57, 53, .08), 0 2px 4px rgba(62, 57, 53, .06);
  --gv-sombra-lg: 0 12px 32px rgba(62, 57, 53, .12);

  --gv-transicion: .15s ease-in-out;

  --gv-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--gv-tiza);
}

body {
  font-family: var(--gv-font);
  color: var(--gv-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gv-font);
  color: var(--gv-negro);
  font-weight: 600;
}

a { color: var(--gv-verde-oscuro); }
a:hover { color: var(--gv-verde); }

::selection { background-color: var(--gv-verde-200); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gv-gris-50); }
::-webkit-scrollbar-thumb { background: var(--gv-gris-300); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gv-gris); }

/* ---------- Navbar / menú principal ---------- */
.navbar {
  background-color: var(--gv-blanco) !important;
  border-bottom: 1px solid var(--gv-borde) !important;
  box-shadow: var(--gv-sombra-sm) !important;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--gv-negro);
  font-weight: 700;
}

.gv-navbar-logo {
  max-height: 42px;
  width: auto;
  margin-right: .5rem;
}

/* Marca "Workspace Gaviglio": tratamiento tipo "eyebrow + wordmark" en dos
   renglones chicos y compactos — "Workspace" como etiqueta pequeña arriba,
   "Gaviglio" como wordmark en degradé verde de marca abajo. El stack entero
   se mantiene más bajo que el logo (42px) así el header nunca crece de alto,
   sin necesidad de breakpoints: el tamaño es fijo y chico en cualquier ancho. */
.navbar-brand.gv-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.gv-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1;
}

.gv-brand-eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gv-texto-suave);
  white-space: nowrap;
}

.gv-brand-accent {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  margin-top: .05rem;
  background-image: linear-gradient(90deg, var(--gv-verde-oscuro), var(--gv-verde));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gv-verde-oscuro); /* fallback si el navegador no soporta background-clip: text */
}

@media (max-width: 380px) {
  .gv-navbar-logo {
    max-height: 30px;
  }
}

/*
    .navbar-light .navbar-nav .nav-link (Bootstrap) es la clase que el propio markup pone en el
    <nav> ("navbar navbar-expand-lg navbar-light bg-white ..."), y trae su color en rgba(0,0,0,.5) a
    .9 con TRES clases de especificidad. La regla de acá tenía sólo DOS (.navbar .nav-link) y perdía
    contra Bootstrap sin que se notara en el tema claro —un negro al 50% de opacidad se lee gris
    sobre blanco, así que el color de Bootstrap "de casualidad" quedaba parecido al del token—. En
    oscuro esa casualidad se termina: negro al 50% sobre un fondo casi negro es directamente
    invisible, que es el bug reportado ("no se puede leer las opciones de menú"). Iguala la
    especificidad agregando las mismas tres clases, así el token manda en los dos temas.
*/
.navbar.navbar-light .navbar-nav .nav-link {
  color: var(--gv-texto-suave);
  font-weight: 500;
  border-radius: var(--gv-radio-sm);
  transition: color var(--gv-transicion), background-color var(--gv-transicion);
}

.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus {
  color: var(--gv-verde-oscuro);
  background-color: var(--gv-verde-50);
}

.navbar.navbar-light .navbar-nav .active > .nav-link,
.navbar.navbar-light .navbar-nav .nav-link.active,
.navbar.navbar-light .navbar-nav .nav-link.show,
.navbar.navbar-light .navbar-nav .show > .nav-link {
  color: var(--gv-verde-oscuro);
}

.navbar .nav-link svg path {
  transition: fill var(--gv-transicion);
}

.navbar .nav-link:hover svg path {
  fill: var(--gv-verde) !important;
}

.navbar-toggler {
  border-color: var(--gv-borde);
}

.footer {
  background-color: var(--gv-blanco);
  color: var(--gv-texto-suave);
  border-top-color: var(--gv-borde) !important;
  font-size: .85rem;
}

/*
    El pie de la plataforma logueada: copyright + entorno, como un solo grupo
    centrado. flex-wrap para que en una pantalla angosta el pin baje a su propia
    línea en vez de recortarse contra el borde.
*/
.gv-pie-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
}

/*
    El pin de entorno (punto de color + palabra). Nace en el login (ver
    _LayoutCuenta.cshtml) y se reusa acá tal cual: es el mismo dato —en qué
    ambiente está esta sesión— y tiene que leerse igual antes y después de entrar.
*/
/* Sin borde: un punto de color y una palabra alcanzan para decir el ambiente sin
   necesidad de un contorno que lo enmarque — el pie ya lo diferencia del resto
   del texto por el espacio y el color del punto. */
/*
    Sin fondo propio: un fondo translúcido con border-radius:999px sobre una superficie lisa se ve
    igual que un borde —una cápsula que se recorta contra lo que tiene atrás—, que es justo lo que
    se había sacado como .border y volvía a aparecer por otro lado en oscuro (ahí el contraste
    contra el negro del pie lo hacía más visible, no menos). El punto de color y la palabra ya
    distinguen el pin del resto del texto; no hace falta una forma alrededor.
*/
.gv-entorno {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.gv-entorno-punto {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--gv-verde);
}

.gv-entorno-dev .gv-entorno-punto { background: #d9534f; }
.gv-entorno-uat .gv-entorno-punto { background: #e8a33d; }

.footer a {
  color: var(--gv-verde-oscuro);
}

.dropdown-menu {
  border: 1px solid var(--gv-borde);
  border-radius: var(--gv-radio-md);
  box-shadow: var(--gv-sombra-md);
  padding: .4rem;
}

.dropdown-item {
  border-radius: var(--gv-radio-sm);
  padding: .45rem .75rem;
  color: var(--gv-texto);
  transition: background-color var(--gv-transicion), color var(--gv-transicion);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: var(--gv-verde-50) !important;
  color: var(--gv-verde-oscuro);
}

.dropdown .dropdown-menu .dropdown-item.active,
.dropdown-item.active {
  background-color: var(--gv-verde-100) !important;
  color: var(--gv-verde-oscuro);
  font-weight: 600;
}

.dropdown-menu > li:hover {
  background-color: transparent !important;
}

.dropdown-divider {
  border-top-color: var(--gv-borde);
}

/*
    Cabecera del menú de usuario: foto + nombre + tipo, en una fila, todo alineado
    a la izquierda. Antes la foto vivía sólo en el botón que abre el panel y el
    panel arrancaba directo en el nombre, sin nada al lado — acá van juntos, como
    en el selector de cuenta de Microsoft o de GitHub.
*/
.gv-menu-usuario { min-width: 260px; }

.gv-menu-usuario-cabecera {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem .75rem;
  text-align: left;
}

.gv-menu-usuario-foto {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: cover;
}

.gv-menu-usuario-datos {
  min-width: 0;
  text-align: left;
}

.gv-menu-usuario-nombre {
  font-weight: 600;
  color: var(--gv-negro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
    Encabezado de una grilla con controles a la derecha (hoy: Usuarios). Antes usaba las
    utilidades gap-2/gap-3 de Bootstrap 5, que en este proyecto —Bootstrap 4.3.1— no existen: los
    controles quedaban pegados pese a la clase, porque el navegador simplemente la ignora.
*/
.gv-header-grilla > div:first-child { margin-right: 1rem; }
.gv-header-grilla-controles > * + * { margin-left: 1.25rem; }

/* ---------- Badges ---------- */
.badge.bg-danger, .badge-danger { background-color: #c0392b !important; }
.badge.bg-warning, .badge-warning { background-color: #d4a017 !important; color: #fff !important; }
.badge.bg-success, .badge-success { background-color: var(--gv-verde-oscuro) !important; }

.navbar .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .3em .6em;
}

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--gv-radio-sm);
  font-weight: 500;
  transition: background-color var(--gv-transicion), border-color var(--gv-transicion), box-shadow var(--gv-transicion);
}

.btn:focus, .btn.focus {
  box-shadow: 0 0 0 .2rem rgba(var(--gv-verde-rgb), .35);
}

.btn-primary,
.btn-success {
  color: #fff;
  background-color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background-color: var(--gv-verde);
  border-color: var(--gv-verde);
  color: #fff;
}

.btn-outline-primary, .btn-outline-success {
  color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
}

.btn-outline-primary:hover, .btn-outline-success:hover {
  background-color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
  color: #fff;
}

.btn-secondary {
  background-color: var(--gv-gris-100);
  border-color: var(--gv-gris-200);
  color: var(--gv-texto);
}

.btn-secondary:hover {
  background-color: var(--gv-gris-200);
  border-color: var(--gv-gris-300);
  color: var(--gv-texto);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
}

/* ---------- Formularios ---------- */
.form-control, .custom-select, .form-select,
select.form-control {
  border: 1px solid var(--gv-gris-200);
  border-radius: var(--gv-radio-sm);
  color: var(--gv-texto);
  transition: border-color var(--gv-transicion), box-shadow var(--gv-transicion);
}

.form-control:focus, .custom-select:focus, .form-select:focus {
  border-color: var(--gv-verde);
  box-shadow: 0 0 0 .2rem rgba(var(--gv-verde-rgb), .2);
}

.control-label, label {
  color: var(--gv-texto);
  font-weight: 500;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--gv-gris-200) !important;
  border-radius: var(--gv-radio-sm) !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--gv-verde) !important;
}

.select2-results__option--highlighted {
  color: #fff !important;
  background-color: var(--gv-verde) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--gv-verde-100) !important;
}

/* ---------- Tarjetas / modales / alerts ---------- */
.card {
  border: 1px solid var(--gv-borde);
  border-radius: var(--gv-radio-lg);
  box-shadow: var(--gv-sombra-sm);
}

.card-header {
  background-color: var(--gv-verde-50);
  border-bottom: 1px solid var(--gv-borde);
  border-radius: var(--gv-radio-lg) var(--gv-radio-lg) 0 0 !important;
  font-weight: 600;
  color: var(--gv-negro);
}

.modal-content {
  border: none;
  border-radius: var(--gv-radio-lg);
  box-shadow: var(--gv-sombra-lg);
}

.modal-header {
  border-bottom: 1px solid var(--gv-borde);
  background-color: var(--gv-verde-50);
  border-radius: var(--gv-radio-lg) var(--gv-radio-lg) 0 0;
}

.alert {
  border: none;
  border-left: 4px solid transparent;
  border-radius: var(--gv-radio-sm);
}

.alert-success { background-color: #eef7e6; color: #3f6b1f; border-left-color: var(--gv-verde-oscuro); }
.alert-danger { background-color: #fbeceb; color: #96271b; border-left-color: #c0392b; }
.alert-warning { background-color: #fdf6e5; color: #8a6116; border-left-color: #d4a017; }
.alert-info { background-color: #eaf3f6; color: #2b647a; border-left-color: #3f9cbf; }

/* ---------- Tablas ---------- */
.table {
  color: var(--gv-texto);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: var(--gv-verde-50);
  color: var(--gv-negro);
  font-weight: 600;
  border-bottom: 2px solid var(--gv-verde-100);
  white-space: nowrap;
}

.table td, .table th {
  border-top-color: var(--gv-gris-100);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: var(--gv-verde-50);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--gv-gris-50);
}

.table-responsive {
  border-radius: var(--gv-radio-md);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Tablas sueltas sin wrapper .table-responsive (comunes en las vistas viejas):
   en mobile, en vez de recortar columnas, las hacemos scrollear horizontalmente
   dentro de su propio recuadro para no romper el resto de la pantalla. */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
  }

  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .navbar-collapse {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .d-flex.justify-content-between {
    flex-wrap: wrap;
    row-gap: .5rem;
  }
}

/* ---------- Paginación (re-implementada a mano en site.css para X.PagedList,
   y .page-link/.page-item nativos de Bootstrap 4) ---------- */
.pagination > li > a, .pagination > li > span {
  color: var(--gv-verde-oscuro);
  border-color: var(--gv-gris-200);
}

.pagination > li > a:hover, .pagination > li > a:focus {
  background-color: var(--gv-verde-50);
  border-color: var(--gv-verde-200);
  color: var(--gv-verde-oscuro);
}

.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
  background-color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
  color: #fff;
}

.pagination > .disabled > a, .pagination > .disabled > span {
  color: var(--gv-gris-300);
}

.page-link { color: var(--gv-verde-oscuro); }
.page-item.active .page-link { background-color: var(--gv-verde-oscuro); border-color: var(--gv-verde-oscuro); }
.page-link:hover { color: var(--gv-verde-oscuro); background-color: var(--gv-verde-50); }

/* ---------- DataTables (consistente sin importar qué versión/CDN cargue
   cada vista: jquery.dataTables plano, bs4 o bs5) ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--gv-gris-200);
  border-radius: var(--gv-radio-sm);
  padding: .3rem .5rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--gv-verde);
  outline: none;
}

table.dataTable thead th, table.dataTable thead td {
  background-color: var(--gv-verde-50);
  border-bottom: 2px solid var(--gv-verde-100) !important;
}

table.dataTable tbody tr:hover {
  background-color: var(--gv-verde-50) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--gv-radio-sm) !important;
  margin-left: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--gv-verde-oscuro) !important;
  border-color: var(--gv-verde-oscuro) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--gv-verde-50) !important;
  border-color: var(--gv-verde-200) !important;
  color: var(--gv-verde-oscuro) !important;
}

.dt-buttons .btn, .dataTables_wrapper .dt-buttons .btn {
  border-radius: var(--gv-radio-sm);
}

/* ==========================================================================
   Modo oscuro
   Se activa con data-tema="oscuro" en <html>, que estampa _Layout.cshtml desde
   seg.Perfil.Tema. Con "auto" el script del head lo resuelve contra el sistema
   operativo ANTES del primer pintado, y lo que llega hasta acá es siempre
   "claro" u "oscuro": por eso no hay un bloque duplicado bajo
   prefers-color-scheme.

   Alcanza con redefinir los tokens porque el resto de esta hoja ya está escrita
   contra las variables --gv-*. Lo único que hay que atacar aparte son las
   superficies que Bootstrap pinta con literales propios —tarjetas, tablas,
   modales, alerts, DataTables—, que no pasan por los tokens.

   --gv-blanco deja de ser blanco. El nombre quedó del tema claro, pero lo que la
   variable significa en toda la hoja es "la superficie donde se apoya el
   contenido". Renombrarla a --gv-superficie es limpieza pendiente: toca unas 40
   reglas y no cambia nada de lo que se ve.

   El verde de marca no se toca: es la identidad, y sobre estas superficies sigue
   teniendo contraste de sobra.
   ========================================================================== */

:root[data-tema="oscuro"] {
  --gv-negro: #ece9e5;
  --gv-gris: #a9a29b;
  --gv-tiza: #171614;
  --gv-blanco: #201e1c;

  --gv-verde-50: #1e2717;
  --gv-verde-100: #26321b;
  --gv-verde-200: #354320;

  --gv-gris-50: #1b1a18;
  --gv-gris-100: #26241f;
  --gv-gris-200: #33302a;
  --gv-gris-300: #4a453d;

  --gv-borde: #33302a;
  --gv-texto: #ece9e5;
  --gv-texto-suave: #a9a29b;

  /* Una sombra pensada para papel blanco es invisible sobre fondo oscuro: acá lo
     que separa planos es una sombra más profunda. */
  --gv-sombra-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --gv-sombra-md: 0 4px 12px rgba(0, 0, 0, .5);
  --gv-sombra-lg: 0 12px 32px rgba(0, 0, 0, .6);

  /* Que los controles nativos —scrollbars, calendarios de los input date— vengan
     oscuros también. Sin esto el calendario sale blanco sobre la pantalla oscura. */
  color-scheme: dark;
}

:root[data-tema="oscuro"] body {
  background-color: var(--gv-tiza);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .card,
:root[data-tema="oscuro"] .modal-content,
:root[data-tema="oscuro"] .list-group-item,
:root[data-tema="oscuro"] .popover,
:root[data-tema="oscuro"] .toast,
:root[data-tema="oscuro"] .dropdown-menu {
  background-color: var(--gv-blanco);
  border-color: var(--gv-borde);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .card-footer,
:root[data-tema="oscuro"] .modal-footer {
  background-color: var(--gv-gris-100);
  border-color: var(--gv-borde);
}

:root[data-tema="oscuro"] .table th,
:root[data-tema="oscuro"] .table td {
  border-top-color: var(--gv-gris-200);
}

:root[data-tema="oscuro"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .02);
}

/* Utilidades de Bootstrap que fuerzan claro: sin esto quedan parches blancos. */
:root[data-tema="oscuro"] .bg-white,
:root[data-tema="oscuro"] .bg-light {
  background-color: var(--gv-gris-100) !important;
}

:root[data-tema="oscuro"] .text-dark { color: var(--gv-texto) !important; }
:root[data-tema="oscuro"] .text-muted { color: var(--gv-texto-suave) !important; }

:root[data-tema="oscuro"] .border,
:root[data-tema="oscuro"] .border-top,
:root[data-tema="oscuro"] .border-bottom,
:root[data-tema="oscuro"] .border-left,
:root[data-tema="oscuro"] .border-right {
  border-color: var(--gv-borde) !important;
}

:root[data-tema="oscuro"] .badge-light,
:root[data-tema="oscuro"] .badge.bg-light {
  background-color: var(--gv-gris-200) !important;
  color: var(--gv-texto) !important;
}

/* Los alert traen fondos pastel pensados para papel: en oscuro se reemplazan por
   un tinte del mismo color sobre la superficie oscura, manteniendo el borde
   izquierdo que ya identifica cada tipo. */
:root[data-tema="oscuro"] .alert-success { background-color: #1f2b17; color: #cfe3bb; }
:root[data-tema="oscuro"] .alert-danger { background-color: #2e1a18; color: #efbfb9; }
:root[data-tema="oscuro"] .alert-warning { background-color: #2e2515; color: #e8d3a0; }
:root[data-tema="oscuro"] .alert-info { background-color: #16242b; color: #b9dbe6; }

:root[data-tema="oscuro"] .input-group-text {
  background-color: var(--gv-gris-100);
  border-color: var(--gv-borde);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .close,
:root[data-tema="oscuro"] .btn-close {
  color: var(--gv-texto);
  text-shadow: none;
  opacity: .7;
}

:root[data-tema="oscuro"] hr { border-top-color: var(--gv-borde); }
:root[data-tema="oscuro"] code { color: var(--gv-verde-claro); }
:root[data-tema="oscuro"] .footer { background-color: var(--gv-tiza); }

:root[data-tema="oscuro"] .page-link {
  background-color: var(--gv-blanco);
  border-color: var(--gv-borde);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .page-item.disabled .page-link {
  background-color: var(--gv-gris-50);
  color: var(--gv-texto-suave);
}

:root[data-tema="oscuro"] table.dataTable tbody tr { background-color: transparent; }

:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_length,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_filter,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_info,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_paginate {
  color: var(--gv-texto-suave);
}

/* select2 dibuja su propio desplegable fuera del árbol de la tarjeta. */
:root[data-tema="oscuro"] .select2-container--default .select2-selection--single,
:root[data-tema="oscuro"] .select2-container--default .select2-selection--multiple,
:root[data-tema="oscuro"] .select2-dropdown,
:root[data-tema="oscuro"] .select2-search__field {
  background-color: var(--gv-blanco) !important;
  border-color: var(--gv-borde) !important;
  color: var(--gv-texto) !important;
}

:root[data-tema="oscuro"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--gv-gris-100);
}

/* Logo.png es truecolor sin canal alfa: su fondo blanco está horneado en el
   archivo, así que sobre la barra oscura aparece un rectángulo blanco. En vez de
   disimularlo con un filtro —que además apagaría el verde— se lo convierte en una
   chapa blanca redondeada, que se lee como decisión y no como error. La solución
   de fondo es un PNG con transparencia del área de marca. */
:root[data-tema="oscuro"] .gv-navbar-logo {
  background-color: #fff;
  border-radius: var(--gv-radio-sm);
  padding: 2px;
}

/* ==========================================================================
   Menú lateral
   Con data-menu="lateral" en <html>, los módulos salen de la barra de arriba y
   pasan a una columna fija a la izquierda. Lo elige cada persona en su perfil.

   LA BARRA DE ARRIBA Y EL PIE SON INDEPENDIENTES DE LA COLUMNA
   -------------------------------------------------------------
   Antes header/.container/footer corrían los tres 250px a la derecha, así que la
   barra de arriba quedaba angosta y con el logo repetido (uno en la barra, otro en
   la columna). Ahora SÓLO el contenido (.container) se corre: la barra y el pie
   miden el ancho completo de la pantalla, y la columna queda dibujada entre los
   dos (top: alto de la barra, bottom: alto del pie — ambos medidos en px por
   gvApariencia.js, porque cambian con el ancho de pantalla).

   --gv-lateral-ancho es UNA variable para las dos cosas que tienen que moverse
   juntas: el ancho de la columna y el corrimiento del contenido. Cambiar sólo esa
   variable (con el toggle de colapsar) alcanza para que las dos partes reaccionen
   sin duplicar el número en ningún otro lado.
   ========================================================================== */

:root[data-menu="lateral"] {
  --gv-lateral-ancho: 250px;
}

/* Colapsada: sólo íconos. La sigue abriendo/cerrando la persona con el botón del
   pie de la columna, y gvApariencia.js recuerda la elección en localStorage —es
   una comodidad de "cómo quiero ver mi pantalla ahora", no un dato de la cuenta
   que tenga que viajar entre dispositivos. */
:root[data-menu="lateral"][data-lateral-colapsada="1"] {
  --gv-lateral-ancho: 4.25rem;
}

.gv-lateral { display: none; }

:root[data-menu="lateral"] .gv-lateral {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--gv-alto-navbar, 64px);
  left: 0;
  bottom: var(--gv-alto-footer, 0px);
  width: var(--gv-lateral-ancho);
  z-index: 1035;
  background-color: var(--gv-blanco);
  border-right: 1px solid var(--gv-borde);
  box-shadow: var(--gv-sombra-sm);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transition: width .15s ease;
}

/* Sin cabecera de marca propia (el logo vive en la barra de arriba): el árbol
   arranca con el mismo aire que tenía antes por debajo de esa cabecera. */
:root[data-menu="lateral"] .gv-lateral-nav {
  list-style: none;
  margin: 0;
  padding: .6rem 0;
  flex: 1;
}

/* Sólo el contenido se corre. La barra y el pie quedan de ancho completo. */
:root[data-menu="lateral"] body > .container {
  margin-left: var(--gv-lateral-ancho);
  transition: margin-left .15s ease;
}

/* En la barra de arriba ya no hay módulos: están en la columna. */
:root[data-menu="lateral"] .gv-nav-modulos { display: none; }

/*
    .navbar-collapse tiene justify-content: between para repartir gv-nav-modulos (izquierda) y el
    menú de usuario (derecha) en el header de siempre. En lateral, gv-nav-modulos queda oculto por
    la regla de arriba y desaparece del flujo flex — con un solo hijo visible, "space-between" no
    tiene entre qué repartir y lo deja pegado al INICIO, no al final. Ese es el motivo por el que la
    foto de perfil aparecía angosta contra el logo en vez de en la esquina derecha, superpuesta con
    la columna. Acá no hay ambigüedad posible —en lateral gv-nav-modulos siempre está oculto—, así
    que empujar todo a la derecha es siempre lo correcto.
*/
:root[data-menu="lateral"] .navbar-collapse { justify-content: flex-end !important; }

/* ---------- Colapsar a sólo íconos (desktop) ---------- */
/* Sólo tiene sentido con la columna fija (>=992px): en el cajón de pantalla chica
   ya se cierra solo al navegar, así que "colapsar" no agrega nada — por eso el
   botón que lo activa se esconde ahí (ver .gv-lateral-colapsar más abajo) y esta
   regla queda adentro del mismo @media que fija la columna. */
@media (min-width: 992px) {
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-item span,
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-chevron {
    display: none;
  }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-item {
    justify-content: center;
    padding-left: .25rem;
    padding-right: .25rem;
  }

  /* Las sangrías por nivel no tienen sentido si no hay texto que sangrar. */
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-hijos .gv-lateral-item,
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-hijos .gv-lateral-hijos .gv-lateral-item,
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-hijos .gv-lateral-hijos .gv-lateral-hijos .gv-lateral-item {
    padding-left: .25rem;
  }

  /*
      Un grupo abierto en modo colapsado no se despliega hacia abajo —no hay
      dónde leerlo, es una columna de 4rem— sino como un panel flotando a la
      derecha del ícono, igual que hacen los rieles de VS Code o de GitHub. Sólo
      el PRIMER nivel flota así: adentro del panel, los niveles siguientes se
      leen como una columna normal, porque ahí sí hay ancho para sangrar.

      POSITION: FIXED Y NO ABSOLUTE
      -----------------------------
      .gv-lateral tiene overflow-y: auto para poder scrollear un árbol largo, y
      esa misma propiedad —insalvable en CSS puro— recorta también el eje X: un
      hijo con position:absolute que sale del cuadro del padre queda invisible,
      cortado en el borde derecho de los 4.25rem de la columna colapsada (se
      verificó armando el panel y viendo que existía en el DOM con el rect
      correcto, pero no se pintaba). position:fixed no tiene ese problema porque
      se ubica contra la ventana, no contra el padre con scroll; gvApariencia.js
      calcula el "top" contra el ícono que se tocó, porque fixed no hereda
      ninguna posición relativa del padre.
  */
  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-nav > .gv-lateral-grupo.abierto > .gv-lateral-hijos {
    position: fixed;
    left: var(--gv-lateral-ancho);
    width: 230px;
    margin-left: 1px;
    padding: .4rem 0;
    background-color: var(--gv-blanco);
    border: 1px solid var(--gv-borde);
    border-radius: var(--gv-radio-md);
    box-shadow: var(--gv-sombra-md);
    z-index: 1036;
  }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-nav > .gv-lateral-grupo.abierto > .gv-lateral-hijos .gv-lateral-item {
    justify-content: flex-start;
    padding-left: 1rem;
  }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-nav > .gv-lateral-grupo.abierto > .gv-lateral-hijos span {
    display: inline;
  }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-nav > .gv-lateral-grupo.abierto > .gv-lateral-hijos .gv-lateral-hijos .gv-lateral-item {
    padding-left: 2.1rem;
  }
}

/* Debajo de lg la columna se esconde y se abre como cajón: a 992px, 250px fijos
   son un cuarto de la pantalla. El cajón siempre se abre expandido —colapsarlo
   no tiene sentido en un panel que ya se cierra solo al elegir algo. */
@media (max-width: 991.98px) {
  :root[data-menu="lateral"] {
    --gv-lateral-ancho: 250px !important;
  }

  :root[data-menu="lateral"] .gv-lateral {
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  :root[data-menu="lateral"] .gv-lateral.abierto { transform: none; }

  :root[data-menu="lateral"] body > .container {
    margin-left: 0;
  }
}

.gv-lateral-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem;
  color: var(--gv-texto);
  font-size: .9rem;
  text-decoration: none;
  transition: background-color var(--gv-transicion), color var(--gv-transicion);
}

.gv-lateral-item:hover,
.gv-lateral-item:focus {
  background-color: var(--gv-verde-50);
  color: var(--gv-verde-oscuro);
  text-decoration: none;
}

.gv-lateral-item.active {
  background-color: var(--gv-verde-50);
  color: var(--gv-verde-oscuro);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gv-verde);
}

.gv-lateral-item .bi,
.gv-lateral-item > svg {
  color: var(--gv-verde);
  width: 1.1rem;
  flex: none;
  text-align: center;
}

.gv-lateral-item.gv-lateral-negado,
.gv-lateral-item.gv-lateral-negado:hover {
  color: var(--gv-texto-suave);
  background-color: transparent;
  cursor: default;
}

/* Las carpetas se pliegan. La sangría por nivel es lo que hace legible un árbol de
   cuatro niveles en una columna angosta. */
.gv-lateral-grupo > .gv-lateral-item {
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
}

.gv-lateral-grupo > .gv-lateral-item .gv-chevron {
  margin-left: auto;
  font-size: .7rem;
  color: var(--gv-texto-suave);
  transition: transform .15s ease;
}

.gv-lateral-grupo.abierto > .gv-lateral-item .gv-chevron { transform: rotate(90deg); }

.gv-lateral-hijos { display: none; list-style: none; margin: 0; padding: 0; }
.gv-lateral-grupo.abierto > .gv-lateral-hijos { display: block; }

.gv-lateral-hijos .gv-lateral-item { padding-left: 2.1rem; }
.gv-lateral-hijos .gv-lateral-hijos .gv-lateral-item { padding-left: 3rem; }
.gv-lateral-hijos .gv-lateral-hijos .gv-lateral-hijos .gv-lateral-item { padding-left: 3.9rem; }

/* El botón que abre la columna en pantalla chica. Sólo existe ahí. */
.gv-lateral-toggle { display: none; }

@media (max-width: 991.98px) {
  :root[data-menu="lateral"] .gv-lateral-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gv-borde);
    background-color: transparent;
    color: var(--gv-texto);
    border-radius: var(--gv-radio-sm);
    width: 2.2rem;
    height: 2.2rem;
    margin-right: .5rem;
  }
}

/* ---------- Botón de colapsar (sólo íconos) ---------- */
/* Vive en el pie de la columna, no en la cabecera: la marca ya tiene el logo y un
   segundo botón ahí compite por el mismo espacio angosto. Abajo queda quieto,
   siempre en el mismo lugar tanto expandida como colapsada. Sólo existe en
   desktop —en el cajón de pantalla chica no tiene sentido, ver el @media de
   arriba—. */
.gv-lateral-pie { display: none; }

@media (min-width: 992px) {
  :root[data-menu="lateral"] .gv-lateral-pie {
    display: block;
    border-top: 1px solid var(--gv-borde);
    padding: .4rem;
  }

  .gv-lateral-colapsar {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .75rem;
    background: none;
    border: 0;
    border-radius: var(--gv-radio-sm);
    color: var(--gv-texto-suave);
    font-size: .82rem;
    text-align: left;
    transition: background-color var(--gv-transicion), color var(--gv-transicion);
  }

  .gv-lateral-colapsar:hover {
    background-color: var(--gv-verde-50);
    color: var(--gv-verde-oscuro);
  }

  .gv-lateral-colapsar .bi { flex: none; width: 1.1rem; text-align: center; }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-colapsar {
    justify-content: center;
  }

  :root[data-menu="lateral"][data-lateral-colapsada="1"] .gv-lateral-colapsar span {
    display: none;
  }
}

/* El velo detrás del cajón abierto: cerrarlo tocando al lado es lo primero que la
   gente intenta. */
.gv-lateral-velo {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  background-color: rgba(0, 0, 0, .35);
}

.gv-lateral-velo.visible { display: block; }

/* ---------- Selector de apariencia (Mi perfil) ---------- */
.gv-opcion-apariencia {
  display: block;
  cursor: pointer;
  border: 1px solid var(--gv-borde);
  border-radius: var(--gv-radio-md);
  padding: .6rem .75rem;
  margin-bottom: 0;
  background-color: var(--gv-blanco);
  transition: border-color var(--gv-transicion), background-color var(--gv-transicion);
}

.gv-opcion-apariencia:hover { border-color: var(--gv-verde-200); }

/* El radio real se esconde pero sigue estando: el foco del teclado y las flechas
   para moverse entre opciones son del input, no de la tarjeta. */
.gv-opcion-apariencia input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gv-opcion-apariencia.elegida {
  border-color: var(--gv-verde);
  background-color: var(--gv-verde-50);
  box-shadow: inset 0 0 0 1px var(--gv-verde);
}

.gv-opcion-apariencia input:focus-visible ~ .gv-opcion-cuerpo {
  outline: 2px solid var(--gv-verde);
  outline-offset: 3px;
  border-radius: var(--gv-radio-sm);
}

.gv-opcion-apariencia .gv-opcion-icono {
  font-size: 1.35rem;
  color: var(--gv-verde);
  line-height: 1;
}

/*
    La barra de arriba es independiente de la columna: muestra logo + "Workspace
    Gaviglio" siempre, sea cual sea el menú elegido. Antes se ocultaba el logo acá
    porque la columna repetía uno propio, pero eso dejaba la barra con el texto
    solo, sin nada al lado — la identidad de la barra no tiene por qué depender de
    qué esté haciendo el menú.
*/

/* ---------- Modo oscuro: lo que site.css pinta con literales ---------- */
/* site.css se carga antes que esta hoja y trae la paginacion de X.PagedList y
   algunos fondos escritos a mano. Son pocas reglas y estan todas aca. */
:root[data-tema="oscuro"] .pagination > li > a,
:root[data-tema="oscuro"] .pagination > li > span,
:root[data-tema="oscuro"] .pager li > a,
:root[data-tema="oscuro"] .pager li > span {
  background-color: var(--gv-blanco);
  border-color: var(--gv-borde);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .pagination > li > a:hover,
:root[data-tema="oscuro"] .pagination > li > a:focus,
:root[data-tema="oscuro"] .pager li > a:hover {
  background-color: var(--gv-gris-100);
}

:root[data-tema="oscuro"] .pagination > .disabled > span,
:root[data-tema="oscuro"] .pagination > .disabled > a,
:root[data-tema="oscuro"] .pager .disabled > a,
:root[data-tema="oscuro"] .pager .disabled > span {
  background-color: var(--gv-gris-50);
  border-color: var(--gv-borde);
  color: var(--gv-texto-suave);
}

:root[data-tema="oscuro"] .gv-multi-results .select2-results__option::before {
  background-color: var(--gv-blanco);
  border-color: var(--gv-gris-300);
}

/* Los chips de insignia son fondos pastel con texto oscuro: sobre la pantalla
   oscura quedan como tres parches de luz. Se dan vuelta manteniendo la familia de
   color, que es lo que distingue una insignia de otra. */
:root[data-tema="oscuro"] .gv-chip.gv-insignia-participacion { background-color: #24301b; border-color: #38491f; color: #cfe3bb; }
:root[data-tema="oscuro"] .gv-chip.gv-insignia-contribucion { background-color: #18253c; border-color: #24375a; color: #bcd4f5; }
:root[data-tema="oscuro"] .gv-chip.gv-insignia-competencia { background-color: #322614; border-color: #4c3a1d; color: #ead6a4; }

/* ---------- Modo oscuro: el verde como texto ---------- */
/* El verde oscuro de marca (#5e8a39) funciona como fondo de botón con texto blanco
   en los dos temas, pero como TEXTO sobre una superficie oscura queda apagado. En
   oscuro, el verde que se lee es el claro. Por eso no se redefine el token —se
   rompería el botón— sino los lugares donde el verde es tinta y no fondo. */
:root[data-tema="oscuro"] a,
:root[data-tema="oscuro"] .footer a,
:root[data-tema="oscuro"] .page-link,
:root[data-tema="oscuro"] .btn-outline-primary,
:root[data-tema="oscuro"] .btn-outline-success,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .nav-link:hover,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .nav-link:focus,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .active > .nav-link,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .nav-link.active,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .nav-link.show,
:root[data-tema="oscuro"] .navbar.navbar-light .navbar-nav .show > .nav-link,
:root[data-tema="oscuro"] .dropdown-item:hover,
:root[data-tema="oscuro"] .dropdown-item:focus,
:root[data-tema="oscuro"] .dropdown .dropdown-menu .dropdown-item:hover,
:root[data-tema="oscuro"] .dropdown-item.active,
:root[data-tema="oscuro"] .dropdown .dropdown-menu .dropdown-item.active,
:root[data-tema="oscuro"] .gv-lateral-item:hover,
:root[data-tema="oscuro"] .gv-lateral-item:focus,
:root[data-tema="oscuro"] .gv-lateral-item.active {
  color: var(--gv-verde-claro);
}

:root[data-tema="oscuro"] a:hover { color: var(--gv-verde-lima); }

:root[data-tema="oscuro"] .btn-outline-primary:hover,
:root[data-tema="oscuro"] .btn-outline-success:hover {
  color: #fff;
}

/* Bootstrap deja .dropdown-item en casi negro y esta hoja nunca le puso color
   propio: sobre el menú oscuro no se leería nada. */
:root[data-tema="oscuro"] .dropdown-item,
:root[data-tema="oscuro"] .dropdown-item-text {
  color: var(--gv-texto);
}

/* La barra de arriba comparte la superficie de las tarjetas, no el gris de las
   utilidades: .bg-white está en el markup del nav desde siempre. */
:root[data-tema="oscuro"] .navbar.bg-white {
  background-color: var(--gv-blanco) !important;
}

/* ---------- Modo oscuro: campos ---------- */
/* Los inputs son lo más notorio si queda a medias: Bootstrap los pinta blancos y
   esta hoja sólo les había tocado borde y color de texto. */
:root[data-tema="oscuro"] .form-control,
:root[data-tema="oscuro"] .custom-select,
:root[data-tema="oscuro"] .form-select,
:root[data-tema="oscuro"] select.form-control,
:root[data-tema="oscuro"] .custom-file-label {
  background-color: var(--gv-gris-50);
  border-color: var(--gv-gris-300);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .form-control:focus,
:root[data-tema="oscuro"] .custom-select:focus {
  background-color: var(--gv-gris-50);
  color: var(--gv-texto);
}

:root[data-tema="oscuro"] .form-control:disabled,
:root[data-tema="oscuro"] .form-control[readonly],
:root[data-tema="oscuro"] .custom-select:disabled {
  background-color: var(--gv-gris-100);
  color: var(--gv-texto-suave);
}

:root[data-tema="oscuro"] .form-control::placeholder { color: var(--gv-gris-300); }

/* El botón "Examinar" del input de archivo es un ::after, no un elemento. */
:root[data-tema="oscuro"] .custom-file-label::after {
  background-color: var(--gv-gris-100);
  border-left-color: var(--gv-gris-300);
  color: var(--gv-texto);
}

/* ---------- Radios, checkboxes y switches ---------- */
/* Bootstrap los pinta con su azul primario, que en esta plataforma no es un color
   de marca: al lado de un boton verde se lee como un control de otro sistema. */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gv-verde-oscuro);
  border-color: var(--gv-verde-oscuro);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(var(--gv-verde-rgb), .2);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--gv-verde);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--gv-verde-200);
  border-color: var(--gv-verde);
}

.custom-control-label .bi { color: var(--gv-verde); }

:root[data-tema="oscuro"] .custom-control-label::before {
  background-color: var(--gv-gris-50);
  border-color: var(--gv-gris-300);
}

/* ==========================================================================
   Cabeceras de grilla pegadas
   ==========================================================================
   .sticky-top de Bootstrap trae z-index 1020, el mismo que la barra de arriba.
   Un <thead class="sticky-top"> queda entonces empatado con la barra y, por
   estar después en el documento, gana: la fila de acciones de la matriz de
   permisos se dibujaba ENCIMA del menú abierto.

   La cabecera sólo necesita tapar las filas de su propia tabla, así que baja a
   un z-index de vecindario, y se pega debajo de la barra en vez de debajo del
   borde de la ventana —si no, con el z-index bajo, quedaría escondida atrás de
   la barra justo cuando hace falta—. La altura real de la barra la mide
   gvApariencia.js y la deja en --gv-alto-navbar; el 64px es por si el script no
   llegó a correr.
   ========================================================================== */
.table > thead.sticky-top,
thead.sticky-top {
  z-index: 3;
  top: var(--gv-alto-navbar, 64px);
}

/* En modo oscuro la clase bg-white del markup dejaba la cabecera blanca. */
:root[data-tema="oscuro"] thead.sticky-top.bg-white th {
  background-color: var(--gv-gris-100);
}

/* ==========================================================================
   Submenús que funcionan con el dedo
   ==========================================================================
   El menú tiene hasta cuatro niveles y los submenús se abrían SOLO por hover.
   En una tablet de 1024px eso significaba depender del hover simulado que el
   navegador inventa en el primer toque: a veces abre, a veces navega, y en
   Android muchas veces no pasa nada.

   Ahora el toque abre de verdad —gvApariencia.js pone .abierto— y el hover
   queda sólo donde hay un mouse de verdad, que es lo que pregunta
   (hover: hover) and (pointer: fine). La regla de hover vive en site.css; acá
   va la de la clase, que tiene que ganarle porque esta hoja se carga después.
   ========================================================================== */
.nav-item .submenu.abierto,
.dropdown-menu .submenu.abierto {
  display: block;
}

/* Debajo de lg el menú es un acordeón dentro de la barra desplegada: el submenú
   no flota al costado, se abre debajo y sangrado. */
@media (max-width: 991.98px) {
  .navbar .submenu {
    position: static;
    float: none;
    width: auto;
    border: 0;
    box-shadow: none;
    padding-left: .75rem;
    margin: 0;
  }

  .navbar .dropdown-menu {
    border: 0;
    box-shadow: none;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* El indicador de que una carpeta abre otro nivel. En el markup viene un
   "&raquo;" al final del texto; esto lo empuja al borde derecho para que se lea
   como una columna de flechas y no como parte del nombre. */
.dropdown-item .gv-raquo {
  margin-left: auto;
  padding-left: .75rem;
  color: var(--gv-texto-suave);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ==========================================================================
   Barra de arriba en modo lateral
   ==========================================================================
   Con la columna a la izquierda, lo único que queda en la barra es el menú de
   usuario. Plegarlo detrás de un segundo botón hamburguesa —al lado del que
   abre la columna— son dos hamburguesas que hacen cosas distintas. Se deja
   siempre visible y se saca el botón.
   ========================================================================== */
:root[data-menu="lateral"] .navbar-toggler { display: none; }

:root[data-menu="lateral"] .navbar-collapse {
  display: flex !important;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Espacio entre el ícono y el nombre en los ítems de primer nivel del menú de
   arriba, ahora que las carpetas raíz también dibujan ícono (antes sólo lo
   tenían los de adentro del desplegable). */
.navbar > .container-fluid .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}