/* ==========================================================================
   Celteno — capa de diseño
   --------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de template.css (SB Admin 2) y lo sobrescribe.
   template.css es código de terceros: no se edita.

   Sistema (ver design/PLAN-REDISENO.md):
     · Una sola superficie: blanco. El único relleno que la rompe es --vg-wash.
     · Dos líneas: --vg-linea separa contenido; --vg-borde delimita superficies.
     · El color va en texto, iconos y datos — nunca en rellenos de fondo.
     · Sin sombras, salvo en elementos flotantes.

   Todo lo nuevo lleva prefijo vg- para no chocar con SB Admin 2 ni con Bootstrap.
   ========================================================================== */

:root {
  /* --- Superficie --- */
  --vg-bg: #ffffff;
  --vg-wash: rgba(22, 25, 28, 0.05);

  /* --- Líneas --- */
  --vg-linea: rgba(22, 25, 28, 0.035); /* divisorias de sección */
  --vg-borde: rgba(22, 25, 28, 0.09); /* cantos de superficie y controles */
  --vg-borde-fuerte: rgba(22, 25, 28, 0.16); /* foco / hover de control */

  /* --- Tinta --- */
  --vg-tinta: #16191c;
  --vg-tinta-2: #5c6169;
  --vg-tinta-3: #8a9099;

  /* --- Color funcional heredado de SB Admin 2 --- */
  --vg-primary: #4e73df;
  --vg-success: #1cc88a;
  --vg-info: #36b9cc;
  --vg-warning: #f6c23e;
  --vg-danger: #e74a3b;

  /* --- Marca Celteno, muestreada del logo --- */
  --vg-lima: #d1d015;
  --vg-verde: #78b33a;
  --vg-verde-osc: #009b53;
  --vg-teal: #5bbaa5;
  --vg-azul: #0080c5;

  /* --- Forma --- */
  --vg-r: 10px;
  --vg-r-sm: 8px;

  --vg-fuente: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vg-fuente-titulo: "Bricolage Grotesque", var(--vg-fuente);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
  font-family: var(--vg-fuente);
  background-color: var(--vg-bg);
  color: var(--vg-tinta);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vg-fuente-titulo);
  letter-spacing: -0.025em;
  color: var(--vg-tinta);
}

/* El lienzo deja de ser gris */
#wrapper #content-wrapper {
  background-color: var(--vg-bg);
}

.text-gray-800 { color: var(--vg-tinta) !important; }
.text-gray-600, .text-gray-700 { color: var(--vg-tinta-2) !important; }
.text-gray-400, .text-gray-500 { color: var(--vg-tinta-3) !important; }

hr { border-top-color: var(--vg-linea); }

/* ==========================================================================
   2. Sidebar
   --------------------------------------------------------------------------
   base.html llevaba .bg-gradient-primary (redefinido en template.css a un
   degradado blanco→#aaa) junto a .sidebar-dark, cuyas reglas pintan texto
   oscuro pensado para un fondo azul. De ahí el gris sucio. Se sustituyen
   ambas por .sidebar-celteno.
   ========================================================================== */

.sidebar.sidebar-celteno {
  background-color: var(--vg-bg);
  background-image: none;
}

/* SB Admin 2 fija 14rem (224 px) y los rótulos largos partían en dos líneas.
   Ojo: #wrapper es flex y #content-wrapper lleva width:100%, así que el sidebar
   (flex-shrink:1 por defecto) se comprimía de 268 a 226 px y el ancho declarado
   no llegaba a verse nunca. Hace falta fijar flex además de width. */
.sidebar.sidebar-celteno { flex: 0 0 auto; }

@media (min-width: 768px) {
  .navbar-nav.sidebar.sidebar-celteno {
    width: 16.75rem !important;
    flex: 0 0 16.75rem;
  }
  .navbar-nav.sidebar.sidebar-celteno.toggled {
    width: 6.5rem !important;
    flex: 0 0 6.5rem;
  }
}

/* El contenido ocupa el resto y nunca desborda al sidebar */
#wrapper #content-wrapper { min-width: 0; flex: 1 1 auto; }

.sidebar-celteno .sidebar-brand {
  height: auto;
  padding: 20px 16px 16px;
}

.sidebar-celteno .sidebar-brand img {
  width: 100%;
  max-width: 168px;
  height: auto;
}

.sidebar-celteno hr.sidebar-divider {
  border-top: 1px solid var(--vg-linea);
  margin: 6px 12px 8px;
}

.sidebar-celteno .sidebar-heading {
  font-family: var(--vg-fuente-titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
  padding: 0 22px 6px;
  text-align: left;
}

.sidebar-celteno .nav-item .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 8px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--vg-tinta-2);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 400;
  width: auto;
  transition: background-color 0.13s ease, color 0.13s ease;
}

.sidebar-celteno .nav-item .nav-link i {
  width: 16px;
  flex: none;
  margin-right: 0;
  font-size: 13px;
  text-align: center;
  color: var(--vg-tinta-3);
  transition: color 0.13s ease;
}

.sidebar-celteno .nav-item .nav-link span { font-size: 13.5px; }

.sidebar-celteno .nav-item .nav-link:hover,
.sidebar-celteno .nav-item .nav-link:focus {
  background-color: var(--vg-wash);
  color: var(--vg-tinta);
}

.sidebar-celteno .nav-item .nav-link:hover i { color: var(--vg-tinta-2); }

.sidebar-celteno .nav-item.active .nav-link {
  background-color: var(--vg-wash);
  color: var(--vg-tinta);
  font-weight: 600;
  position: relative;
}

.sidebar-celteno .nav-item.active .nav-link::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  bottom: 7px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--vg-verde);
}

/* En reposo el icono es neutro: una lista de doce iconos de colores distintos
   compite con el contenido. El color aparece sólo en la sección seleccionada,
   y ahí cada una conserva su color propio (.icon-* de base.html). */
.sidebar-celteno .nav-item .nav-link i[class*="icon-"] { color: var(--vg-tinta-3); }
.sidebar-celteno .nav-item .nav-link:hover i[class*="icon-"] { color: var(--vg-tinta-2); }

.sidebar-celteno .nav-item.active .nav-link i.icon-primary { color: var(--vg-azul); }
.sidebar-celteno .nav-item.active .nav-link i.icon-success,
.sidebar-celteno .nav-item.active .nav-link i.icon-green,
.sidebar-celteno .nav-item.active .nav-link i.icon-admin { color: var(--vg-verde-osc); }
.sidebar-celteno .nav-item.active .nav-link i.icon-info,
.sidebar-celteno .nav-item.active .nav-link i.icon-teal { color: var(--vg-teal); }
.sidebar-celteno .nav-item.active .nav-link i.icon-warning { color: #b39400; }
.sidebar-celteno .nav-item.active .nav-link i.icon-danger { color: var(--vg-danger); }
.sidebar-celteno .nav-item.active .nav-link i.icon-purple { color: #6f42c1; }

.sidebar-celteno #sidebarToggle {
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 1px solid var(--vg-borde) !important;
  color: var(--vg-tinta-3);
}

.sidebar-celteno #sidebarToggle:hover { background-color: var(--vg-wash); }
.sidebar-celteno #sidebarToggle::after { color: var(--vg-tinta-3); }

/* Sección de administración de plataforma */
.sidebar-admin-section {
  background-color: transparent;
  border-top: 1px solid var(--vg-linea);
  border-radius: 0;
  margin: 8px 0 0;
  padding: 12px 0 0;
}

.sidebar-admin-section .sidebar-heading {
  color: var(--vg-verde-osc);
  font-weight: 700;
}

.sidebar-admin-section .nav-link { padding-left: 10px; }

/* ==========================================================================
   3. Topbar
   ========================================================================== */

.topbar {
  height: 56px;
  min-height: 56px;
  background-color: var(--vg-bg) !important;
  border-bottom: 1px solid var(--vg-borde);
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.topbar .nav-link { color: var(--vg-tinta-2); }
.topbar .nav-link:hover { color: var(--vg-tinta); }

.topbar .navbar-search.mw-100,
.topbar .navbar-search { max-width: 340px !important; width: 100%; }

.topbar .navbar-search .vg-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.topbar .navbar-search .vg-search > i {
  position: absolute;
  left: 11px;
  font-size: 12px;
  color: var(--vg-tinta-3);
  pointer-events: none;
}

.topbar .navbar-search .form-control {
  background-color: var(--vg-wash) !important;
  border: 1px solid transparent !important;
  border-radius: var(--vg-r-sm);
  font-size: 13px;
  height: 34px;
  min-height: 34px;
  padding: 6px 11px 6px 32px;
  color: var(--vg-tinta);
  width: 100%;
}

.topbar .navbar-search .form-control:focus {
  background-color: var(--vg-bg) !important;
  border-color: var(--vg-borde) !important;
  box-shadow: none;
}

.topbar-divider {
  border-right: 1px solid var(--vg-linea);
  height: 22px;
  margin: auto 6px;
}

.topbar .nav-item .nav-link { position: relative; }

/* Misma especificidad que template.css:10157 (0,0,4,0); project.css carga
   después, así que gana el empate. Sin esto el contador se sale por arriba
   porque SB Admin 2 usa transform + margin-top negativo y no define top. */
.topbar .nav-item .nav-link .badge-counter {
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  min-width: 15px;
  line-height: 15px;
  height: 15px;
  border-radius: 999px;
  transform: none;
  position: absolute;
  top: 6px;
  right: 2px;
  margin-top: 0;
  box-shadow: 0 0 0 2px var(--vg-bg);
}

.topbar .img-profile {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

/* ==========================================================================
   4. Cabecera de página — compacta
   ========================================================================== */

.vg-phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-bottom: 12px;
}

.vg-ptitle {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  min-width: 0;
}

.vg-ptitle h1 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}

.vg-pmeta {
  font-size: 12.5px;
  color: var(--vg-tinta-3);
}

/* ==========================================================================
   5. Tarjetas
   ========================================================================== */

.card {
  background-color: var(--vg-bg);
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r);
}

/* SB Admin 2 pone shadow en casi todas las tarjetas. Se anula en bloque. */
.card.shadow,
.card.shadow-sm,
.card .shadow {
  box-shadow: none !important;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--vg-linea);
  padding: 14px 18px;
  border-radius: var(--vg-r) var(--vg-r) 0 0;
}

.card-header h6,
.card-header .h6 {
  font-family: var(--vg-fuente-titulo);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--vg-tinta) !important;
  margin: 0;
}

.card-body { padding: 18px; }
.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--vg-linea);
}

/* Los bordes de color de 4 px de las tarjetas KPI se retiran: la señal
   cromática pasa al rótulo y al icono. */
.card.border-left-primary,
.card.border-left-success,
.card.border-left-info,
.card.border-left-warning,
.card.border-left-danger,
.card.border-left-secondary {
  border-left: 1px solid var(--vg-borde);
}

/* Tarjeta KPI */
.card .text-xs.font-weight-bold {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vg-tinta-3) !important;
}

.card .h5.font-weight-bold {
  font-family: var(--vg-fuente-titulo);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--vg-tinta) !important;
}

.card .h5.font-weight-bold small {
  font-family: var(--vg-fuente);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vg-tinta-3);
}

/* ==========================================================================
   6. Tablas
   ========================================================================== */

.table {
  color: var(--vg-tinta-2);
  margin-bottom: 0;
}

/* Fuera las bandas grises */
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }

.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--vg-linea);
  padding: 10px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
  white-space: nowrap;
  vertical-align: middle;
}

.table thead th a {
  color: inherit;
  text-decoration: none;
}

.table thead th a:hover { color: var(--vg-tinta-2); }

.table tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--vg-linea);
  padding: 11px 18px;
  font-size: 13.5px;
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--vg-wash);
  color: var(--vg-tinta-2);
}

/* --------------------------------------------------------------------------
   Botones de acción por fila
   --------------------------------------------------------------------------
   Todas las acciones de fila son sólo icono y deben verse idénticas. Antes
   convivían seis variantes de Bootstrap (primary, danger, info,
   outline-success, link + p-1, outline-primary) que pintaban la fila de
   colores sólidos. Ahora comparten .vg-row-btn: fantasma en reposo, y la
   intención aparece al pasar el ratón.

   Los botones de fila QUE LLEVAN TEXTO no usan esta clase: conservan .btn-sm
   y su tamaño normal.
   -------------------------------------------------------------------------- */

.vg-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vg-tinta-3);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}

.vg-row-btn + .vg-row-btn { margin-left: 2px; }
.vg-row-btn > i { font-size: 12px; margin: 0; }

.vg-row-btn:hover,
.vg-row-btn:focus {
  background: var(--vg-wash);
  border-color: var(--vg-borde);
  color: var(--vg-tinta);
  text-decoration: none;
  outline: 0;
}

.vg-row-btn--danger:hover,
.vg-row-btn--danger:focus { color: var(--vg-danger); }

.vg-row-btn--ok:hover,
.vg-row-btn--ok:focus { color: var(--vg-verde-osc); }

/* La anotación existente se señala con un punto, no con un icono amarillo */
.vg-row-btn.annotation-btn { position: relative; }

.vg-row-btn.annotation-btn .vg-tiene-nota {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vg-lima);
}

/* Celda de acciones: pegada al borde derecho del panel.
   width:1% + white-space:nowrap hace que la columna ocupe sólo lo que miden los
   botones, así el resto del ancho lo reparten las columnas de datos y las
   acciones quedan alineadas a la derecha en todas las tablas. */
.table td.vg-acciones,
.table th.vg-acciones {
  text-align: right !important;
  white-space: nowrap;
  width: 1%;
}

/* Anotación y acciones son columnas contiguas al final: se juntan sin hueco */
.table td.vg-acciones + td.vg-acciones,
.table th.vg-acciones + th.vg-acciones { padding-left: 0; }
.table td.vg-acciones:not(:last-child) { padding-right: 0; }

/* Paginación */
.pagination { margin: 0; }

.pagination .page-link {
  border: 1px solid transparent;
  border-radius: 7px;
  margin: 0 2px;
  color: var(--vg-tinta-2);
  font-size: 12.5px;
  padding: 4px 9px;
  background: transparent;
}

.pagination .page-link:hover {
  background: var(--vg-wash);
  border-color: transparent;
  color: var(--vg-tinta);
}

.pagination .active .page-link,
.pagination .page-item.active .page-link {
  background: var(--vg-tinta);
  border-color: var(--vg-tinta);
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   7. Formularios — un solo lenguaje de campo
   --------------------------------------------------------------------------
   crispy-forms usa el pack bootstrap5 dentro de Bootstrap 4.6, de ahí las
   alturas y márgenes desparejos. Se unifican por CSS sin cambiar el pack.
   ========================================================================== */

.form-control,
.custom-select,
textarea.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  height: auto;
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r-sm);
  font-size: 13.5px;
  color: var(--vg-tinta);
  background-color: var(--vg-bg);
  padding: 8px 11px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--vg-primary);
  box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.12);
  outline: 0;
}

.form-control::placeholder { color: var(--vg-tinta-3); }

label,
.col-form-label,
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vg-tinta-2);
  margin-bottom: 5px;
}

.form-group, .mb-3 { margin-bottom: 14px; }

.form-text, .help-text, small.text-muted {
  font-size: 11.5px;
  color: var(--vg-tinta-3) !important;
}

.asteriskField { color: var(--vg-danger); font-weight: 600; }

.invalid-feedback, .error-message, .errorlist {
  color: var(--vg-danger);
  font-size: 12px;
}

.errorlist { list-style: none; padding: 0; margin: 4px 0 0; }

/* Rótulo de sección dentro de un formulario */
.vg-fsec {
  font-family: var(--vg-fuente-titulo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vg-linea);
  margin: 22px 0 16px;
}

.vg-fsec:first-child { margin-top: 0; }

/* select2 alineado con el resto de controles */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
  padding-left: 0;
  color: var(--vg-tinta);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 6px;
}

.select2-dropdown {
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--vg-wash);
  color: var(--vg-tinta);
}

/* ==========================================================================
   8. Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--vg-r-sm);
  box-shadow: none !important;
  white-space: nowrap;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn i { font-size: 12px; }

/* Si una utilidad de Bootstrap fuerza display:inline-block, el gap no aplica:
   se separa el icono con margen y se centra el texto con line-height. */
.btn.d-inline-block, .btn.d-sm-inline-block, .btn.d-md-inline-block {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

.btn.d-inline-block > i, .btn.d-sm-inline-block > i, .btn.d-md-inline-block > i {
  margin-right: 7px;
}

.btn-sm.d-inline-block, .btn-sm.d-sm-inline-block, .btn-sm.d-md-inline-block {
  line-height: 32px;
}

.btn-sm {
  height: 32px;
  padding: 0 11px;
  font-size: 12.5px;
  gap: 6px;
}

.btn-sm i { font-size: 11px; }

.btn-lg { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* Botón que sólo lleva icono: cuadrado, no rectangular */
.vg-btn-icono { width: 38px; padding: 0; }
.vg-btn-icono.btn-sm { width: 32px; }

.btn-primary {
  background-color: var(--vg-primary);
  border-color: var(--vg-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #4364c9;
  border-color: #4364c9;
}

.btn-success {
  background-color: var(--vg-verde-osc);
  border-color: var(--vg-verde-osc);
}

.btn-success:hover, .btn-success:focus {
  background-color: #008546;
  border-color: #008546;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
  background-color: var(--vg-bg);
  border-color: var(--vg-borde);
  color: var(--vg-tinta);
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background-color: var(--vg-wash);
  border-color: var(--vg-borde-fuerte);
  color: var(--vg-tinta);
}

.btn-danger {
  background-color: var(--vg-danger);
  border-color: var(--vg-danger);
}

/* ==========================================================================
   9. Desplegables
   ========================================================================== */

.dropdown-menu {
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r);
  padding: 5px;
  min-width: 214px;
  box-shadow: 0 10px 30px -14px rgba(22, 25, 28, 0.22) !important;
}

.dropdown-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
  padding: 7px 10px 5px;
}

.dropdown-item {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--vg-tinta-2);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: normal;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--vg-wash);
  color: var(--vg-tinta);
}

.dropdown-item i { color: var(--vg-tinta-3); width: 15px; text-align: center; }
.dropdown-item:hover i { color: var(--vg-tinta-2); }
.dropdown-divider { border-top: 1px solid var(--vg-linea); margin: 5px 8px; }

/* Estado vacío dentro de un desplegable */
.vg-dd-vacio {
  padding: 22px 12px;
  text-align: center;
  color: var(--vg-tinta-3);
  font-size: 12.5px;
}

.vg-dd-vacio i {
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--vg-borde-fuerte);
}

/* Los círculos de icono dejan de llevar fondo de color */
.icon-circle {
  background-color: var(--vg-wash) !important;
  width: 30px;
  height: 30px;
}

.icon-circle i { color: var(--vg-tinta-2) !important; }
.icon-circle.bg-primary i { color: var(--vg-azul) !important; }
.icon-circle.bg-success i { color: var(--vg-verde-osc) !important; }
.icon-circle.bg-warning i { color: #b39400 !important; }
.icon-circle.bg-danger i { color: var(--vg-danger) !important; }

/* ==========================================================================
   10. Modales y panel deslizante
   ========================================================================== */

.modal-content {
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r);
}

.modal-header {
  border-bottom: 1px solid var(--vg-linea);
  padding: 14px 18px;
}

.modal-header .modal-title {
  font-family: var(--vg-fuente-titulo);
  font-size: 15px;
  font-weight: 600;
}

.modal-body { padding: 18px; }

.modal-footer {
  border-top: 1px solid var(--vg-linea);
  padding: 14px 18px;
  gap: 9px;
}

.modal-footer > * { margin: 0; }

/* Panel deslizante — BS4 .modal.fade aplica opacity 0→1 en el envoltorio y
   transform translate(0,-50px)→none en el diálogo. Hay que sobrescribir ambos
   con suficiente especificidad. */

.modal.fade:has(.modal-dialog-slideout) {
  opacity: 1 !important;
  transition: opacity 0.01s linear !important;
}

.modal:has(.modal-dialog-slideout) { padding-right: 0 !important; }

.modal.fade .modal-dialog-slideout {
  margin: 0 0 0 auto;
  height: 100%;
  min-height: 100vh;
  max-width: 600px;
  max-height: none;
  display: flex;
  flex-direction: column;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease-in-out !important;
}

.modal.show .modal-dialog-slideout { transform: translateX(0) !important; }

.modal-dialog-slideout .modal-content {
  height: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
}

.modal-dialog-slideout .modal-header { border-radius: 0; }
.modal-dialog-slideout.modal-lg { max-width: 700px; }

/* ==========================================================================
   11. Avisos, etiquetas y estados
   ========================================================================== */

.alert {
  border: 1px solid var(--vg-linea);
  border-left: 2px solid var(--vg-tinta-3);
  border-radius: 0 var(--vg-r-sm) var(--vg-r-sm) 0;
  background-color: var(--vg-wash);
  color: var(--vg-tinta-2);
  font-size: 13px;
  padding: 10px 12px;
}

.alert-info { border-left-color: var(--vg-azul); }
.alert-success { border-left-color: var(--vg-verde-osc); }
.alert-warning { border-left-color: var(--vg-warning); }
.alert-danger, .alert-error { border-left-color: var(--vg-danger); }
.alert-debug { border-left-color: var(--vg-tinta-3); }

.alert .fa-info-circle,
.alert .fa-circle-info { color: var(--vg-azul); }

/* Insignias: un solo relleno, el color en el texto y en un punto */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background-color: var(--vg-wash);
  color: var(--vg-tinta-2);
}

.badge-primary { color: #0069a3; background-color: var(--vg-wash); }
.badge-success { color: #00733e; background-color: var(--vg-wash); }
.badge-info { color: #0069a3; background-color: var(--vg-wash); }
.badge-warning { color: #8a6d00; background-color: var(--vg-wash); }
.badge-secondary { color: var(--vg-tinta-2); background-color: var(--vg-wash); }

/* El contador de la topbar sí es un sólido: tiene que llamar la atención */
.badge.badge-counter.badge-danger {
  background-color: var(--vg-danger);
  color: #fff;
  gap: 0;
}

.badge-danger { color: #fff; background-color: var(--vg-danger); }

/* Clases de color de icono (usadas en el sidebar y en las tablas) */
.icon-primary { color: var(--vg-azul); }
.icon-success { color: var(--vg-verde-osc); }
.icon-info { color: var(--vg-teal); }
.icon-warning { color: #b39400; }
.icon-danger { color: var(--vg-danger); }
.icon-purple { color: #6f42c1; }
.icon-green { color: var(--vg-verde-osc); }
.icon-teal { color: var(--vg-teal); }
.icon-admin { color: var(--vg-verde-osc); }

.error-message { color: var(--vg-danger); }

/* ==========================================================================
   12. Rejilla CRUD (editable_grid.html)
   ========================================================================== */

.vg-grid-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vg-linea);
}

.vg-grid-head h2 {
  font-family: var(--vg-fuente-titulo);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.vg-grid-sub {
  font-size: 12.5px;
  color: var(--vg-tinta-3);
  margin: 3px 0 0;
  max-width: 76ch;
  line-height: 1.5;
}

.vg-grid-sub p { margin: 0 0 4px; }
.vg-grid-sub ul, .vg-grid-sub ol { margin: 4px 0 0; padding-left: 18px; }
.vg-grid-sub li { font-size: 12.5px; }
.vg-grid-sub br + br { display: none; }
.vg-grid-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.vg-grid-filtros {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--vg-linea);
}

.vg-grid-filtros:empty { display: none; }
.vg-grid-filtros .form-control,
.vg-grid-filtros .custom-select { width: auto; min-height: 34px; padding: 5px 10px; }

.vg-grid-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--vg-linea);
  font-size: 12.5px;
  color: var(--vg-tinta-3);
}

/* Anotaciones (papertrail) */
.annotation-history-card {
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--vg-wash);
  border-radius: var(--vg-r-sm);
}

.annotation-entry {
  border-bottom: 1px solid var(--vg-linea);
  padding: 10px 0;
  margin-bottom: 10px;
}

.annotation-entry:last-child { border-bottom: none; margin-bottom: 0; }

.annotation-entry-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
  margin-bottom: 5px;
}

.annotation-entry-text {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--vg-tinta-2);
  margin-bottom: 5px;
}

.annotation-entry-attachment { margin-top: 5px; }
.annotation-entry-attachment a { color: var(--vg-primary); text-decoration: none; }
.annotation-entry-attachment a:hover { text-decoration: underline; }

#delete_annotation.hidden,
#annotation_history_container.hidden,
#annotation_label_new.hidden,
#annotation_label_first.hidden { display: none; }

.toast-container { z-index: 1055; }

.toast {
  min-width: 300px;
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-r-sm);
  box-shadow: 0 10px 30px -14px rgba(22, 25, 28, 0.25);
}

.toast-body { font-size: 13px; }


/* --- Tablas anchas: barra propia dentro de la tarjeta, no desborde --- */
.django-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.django-table-container::-webkit-scrollbar { height: 8px; }
.django-table-container::-webkit-scrollbar-thumb {
  background: var(--vg-borde);
  border-radius: 4px;
}

/* --- Estados de fila: marca lateral y tinte mínimo, nunca la fila entera -----
   Bootstrap pinta .table-success con un verde saturado que tapa el contenido y
   anula el hover. Los estados ya se leen en su propia columna; el color es un
   refuerzo, no la señal principal. -------------------------------------------- */
/* El fondo lo pinta el propio <tr> (template.css:1586), no sólo las celdas:
   hay que anularlo en ambos o el verde se ve a través de las <td>. */
.table tbody tr.table-success,
.table tbody tr.table-info,
.table tbody tr.table-warning,
.table tbody tr.table-danger,
.table tbody tr.table-active { background-color: transparent; }

.table tbody tr.table-success > td,
.table tbody tr.table-info > td,
.table tbody tr.table-warning > td,
.table tbody tr.table-danger > td,
.table tbody tr.table-active > td { background-color: transparent; }

.table tbody tr.table-success > td:first-child { box-shadow: inset 3px 0 0 var(--vg-verde-osc); }
.table tbody tr.table-info > td:first-child { box-shadow: inset 3px 0 0 var(--vg-azul); }
.table tbody tr.table-warning > td:first-child { box-shadow: inset 3px 0 0 var(--vg-warning); }
.table tbody tr.table-danger > td:first-child { box-shadow: inset 3px 0 0 var(--vg-danger); }

.table tbody tr.table-success:hover > td,
.table tbody tr.table-info:hover > td,
.table tbody tr.table-warning:hover > td,
.table tbody tr.table-danger:hover > td { background-color: var(--vg-wash); }

/* --- Fila con problemas: marca lateral, no fondo rojo entero --- */
.table tbody tr.vg-row-problema > td:first-child {
  box-shadow: inset 3px 0 0 var(--vg-danger);
}

.table tbody tr.vg-row-problema > td { background-color: rgba(231, 74, 59, 0.035); }

/* --- Formsets en tabla dentro de un formulario --- */
.vg-formset-table thead th {
  padding: 8px 10px;
  font-size: 10px;
}

.vg-formset-table tbody td { padding: 6px 10px; }
.vg-formset-table .form-control,
.vg-formset-table .custom-select { min-height: 34px; padding: 6px 9px; font-size: 13px; }

/* --- El pie de acciones de form.html vive DENTRO de .modal-body --- */
.modal-body > form > .modal-footer,
.modal-body > .modal-footer {
  margin: 18px -18px -18px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: transparent;
}

/* --- Botón de cerrar del modal --- */
.modal-header .close {
  padding: 0;
  margin: -4px -4px -4px auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--vg-tinta-3);
  opacity: 1;
  font-weight: 400;
  text-shadow: none;
  transition: background-color 0.13s ease, color 0.13s ease;
}

.modal-header .close:hover {
  background-color: var(--vg-wash);
  color: var(--vg-tinta);
  opacity: 1;
}

/* --- Spinner --- */
.spinner-border { color: var(--vg-tinta-3); width: 1.5rem; height: 1.5rem; border-width: 2px; }

/* ==========================================================================
   13. Pie de página y volver arriba
   ========================================================================== */

footer.sticky-footer {
  background-color: var(--vg-bg) !important;
  border-top: 1px solid var(--vg-linea);
  padding: 18px 0;
  font-size: 12.5px;
  color: var(--vg-tinta-3);
}

footer.sticky-footer .copyright { color: var(--vg-tinta-3); }

.scroll-to-top {
  width: 36px;
  height: 36px;
  line-height: 34px;
  border-radius: var(--vg-r-sm) !important;
  background: var(--vg-bg);
  border: 1px solid var(--vg-borde);
  color: var(--vg-tinta-2);
  box-shadow: 0 6px 18px -10px rgba(22, 25, 28, 0.3);
}

.scroll-to-top:hover {
  background: var(--vg-wash);
  color: var(--vg-tinta);
}

/* ==========================================================================
   14. Bibliotecas de terceros — armonización mínima
   ========================================================================== */

/* HandsOnTable / JacksonTable (edición masiva) */
.handsontable th,
.handsontable td { border-color: var(--vg-borde) !important; }

.handsontable thead th {
  background-color: var(--vg-wash) !important;
  color: var(--vg-tinta-3) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.handsontable td { color: var(--vg-tinta-2); font-size: 13px; }

/* jsTree (árbol de materiales y de organización) */
.jstree-default .jstree-anchor { color: var(--vg-tinta-2); font-size: 13.5px; }

.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
  background: var(--vg-wash) !important;
  border-radius: 6px;
  box-shadow: none !important;
  color: var(--vg-tinta) !important;
}

.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-hovered {
  background: var(--vg-wash) !important;
  border-radius: 6px;
}

/* SweetAlert2 (descarga de informes) */
.swal2-popup { border-radius: var(--vg-r); font-family: var(--vg-fuente); }
.swal2-title { font-family: var(--vg-fuente-titulo); font-size: 19px; }
.swal2-html-container { font-size: 13.5px; color: var(--vg-tinta-2); }


/* ==========================================================================
   16. Páginas de acceso (login y recuperación de contraseña)
   --------------------------------------------------------------------------
   No extienden base.html: tienen su propio <head>. SB Admin 2 las deja con
   controles en forma de píldora, que no calzan con el radio del resto.
   ========================================================================== */

.form-control-user,
.btn-user {
  border-radius: var(--vg-r-sm) !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
}

.btn-user { font-weight: 600; }

.bg-login-image,
.bg-password-image {
  border-radius: var(--vg-r) 0 0 var(--vg-r);
  background-size: cover;
  background-position: center;
}

body > .container .card.o-hidden { border-radius: var(--vg-r); }


/* ==========================================================================
   17. Escala tipográfica
   --------------------------------------------------------------------------
   Bootstrap deja h1..h6 en 2.5 / 2 / 1.75 / 1.5 / 1.25 / 1 rem, pensados para
   una página de marketing. En una herramienta de datos un h5 dentro de una
   nota explicativa sale a 20 px y aplasta al texto que acompaña.
   Se acota el rango: 24 px arriba, 13 px abajo.
   ========================================================================== */

h1, .h1 { font-size: 24px; line-height: 1.25; }
h2, .h2 { font-size: 20px; line-height: 1.3; }
h3, .h3 { font-size: 17px; line-height: 1.35; }
h4, .h4 { font-size: 15.5px; line-height: 1.4; }
h5, .h5 { font-size: 14.5px; line-height: 1.4; }
h6, .h6 { font-size: 13px; line-height: 1.45; }

/* Dentro de una tarjeta ningún encabezado pasa de 16 px: la tarjeta ya es
   el nivel jerárquico, no necesita competir con el título de página. */
.card-body h1, .card-body h2, .card-body h3,
.card-body .h1, .card-body .h2, .card-body .h3 { font-size: 16px; }
.card-body h4, .card-body h5, .card-body h6 { font-size: 14px; }

/* Notas y avisos: el encabezado apenas se distingue del cuerpo. */
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.vg-nota h1, .vg-nota h2, .vg-nota h3, .vg-nota h4, .vg-nota h5, .vg-nota h6,
.chart-description h1, .chart-description h2, .chart-description h3,
.chart-description h4, .chart-description h5, .chart-description h6 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vg-tinta);
  margin: 0 0 5px;
  letter-spacing: -0.01em;
}

.alert p, .vg-nota p, .chart-description p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--vg-tinta-2);
  margin: 0;
  max-width: 88ch;
}

.alert p + p, .chart-description p + p { margin-top: 6px; }

/* Estados vacíos */
.no-data h1, .no-data h2, .no-data h3, .no-data h4, .no-data h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--vg-tinta-2);
  margin-bottom: 6px;
}

.no-data p { font-size: 13px; color: var(--vg-tinta-3); margin: 0; }

/* Bloque de estadísticas de la curva de abatimiento */
.stat-value { font-family: var(--vg-fuente-titulo); font-size: 22px; letter-spacing: -0.03em; }

.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vg-tinta-3);
}

/* Texto largo: una medida cómoda de lectura */
.vg-prosa { max-width: 76ch; font-size: 13.5px; line-height: 1.6; color: var(--vg-tinta-2); }

small, .small { font-size: 12px; }
.text-xs { font-size: 10.5px; }


/* ==========================================================================
   18. Fila de KPI del dashboard
   --------------------------------------------------------------------------
   Bootstrap 4 no tiene columna de 1/5, y la fila pasó de 4 a 5 tarjetas al
   separar el biogénico del fósil. Rejilla propia, que además evita el hueco
   del gutter y reparte exacto.
   ========================================================================== */

.vg-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 1.5rem;
}

@media (max-width: 1399px) {
  .vg-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .vg-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .vg-kpi-row { grid-template-columns: 1fr; }
}

/* El biogénico va fuera de los alcances: se marca con el verde de biomasa
   para que no se confunda con el total declarable de la tarjeta vecina. */
.vg-kpi-bio { border-left: 2px solid var(--vg-verde); }
.vg-kpi-bio .vg-kpi-icon { color: var(--vg-verde); }


/* --- Huella de producto: fósil y biogénica como dos cifras pares --- */
.vg-huella-dual { display: inline-flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }

.vg-huella-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--vg-tinta-2);
}

.vg-huella-item strong { font-size: 15px; color: var(--vg-tinta); }

.vg-huella-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vg-tinta-3);
}

.vg-huella-unidad { font-size: 11.5px; color: var(--vg-tinta-3); }
.vg-huella-bio .vg-huella-rotulo { color: var(--vg-verde-osc); }


/* --- Cabecera de tabla con unidad en segunda línea --- */
.vg-th-unidad {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--vg-tinta-3);
  margin-top: 1px;
}

.vg-nowrap { white-space: nowrap; }

/* --- Columna biogénica: separada por una línea verde, igual que en el PDF --- */
.table th.bio-col, .table td.bio-col { border-left: 1.5px solid rgba(120, 179, 58, 0.55); }
.table thead th.bio-col { color: var(--vg-verde-osc); }


/* --- Botón que abre y cierra una sección (Bootstrap 4 collapse) --- */
.vg-collapse-btn { gap: 8px; }

/* Colores de serie en leyendas de fósil / biogénico */
.vg-serie-fosil { color: var(--vg-azul); }
.vg-serie-bio { color: var(--vg-verde); }

.vg-nota-pie {
  border-top: 1px solid var(--vg-linea);
  font-size: 11px;
  line-height: 1.45;
}

.vg-collapse-caret {
  font-size: 10px !important;
  color: var(--vg-tinta-3);
  transition: transform 0.15s ease;
}

.vg-collapse-btn[aria-expanded="true"] .vg-collapse-caret { transform: rotate(90deg); }

/* ==========================================================================
   15. Utilidades del proyecto
   ========================================================================== */

.vg-wash { background-color: var(--vg-wash); }
.vg-hairline { border-color: var(--vg-linea) !important; }

.vg-kpi-icon { color: var(--vg-borde-fuerte); }

.vg-alcance-1 { color: var(--vg-azul); }
.vg-alcance-2 { color: var(--vg-verde); }
.vg-alcance-3 { color: var(--vg-teal); }

.vg-login-logo { width: 160px; height: auto; }

.vg-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Detalle de huella de producto: filtros y leyendas clicables ── */
.vg-filter-chip { font-size: 12px; font-weight: 500; padding: 5px 8px; }
.vg-filter-chip a { text-decoration: none; font-weight: 700; }
a.vg-scope-link { color: inherit; text-decoration: none; padding: 1px 0; }
a.vg-scope-link:hover { color: var(--vg-azul); }