:root {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --grafico-texto: #52514e;
  --grafico-eje: #898781;
  --grafico-rejilla: #e1e0d9;
  --grafico-superficie: #fcfcfb;
  --sidebar-ancho: 15.5rem;
}
[data-bs-theme="dark"] {
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --grafico-texto: #c3c2b7;
  --grafico-eje: #898781;
  --grafico-rejilla: #2c2c2a;
  --grafico-superficie: #1a1a19;
}

body { background: var(--bs-tertiary-bg); font-size: .925rem; }
.app { display: flex; min-height: 100vh; }

.sidebar { width: var(--sidebar-ancho); flex-shrink: 0; background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar-body { display: flex; flex-direction: column; min-height: 100%; padding: .75rem .5rem; }
/* Móvil: el menú es un panel de altura fija; su contenido debe desplazarse por dentro. */
@media (max-width: 991.98px) {
  .sidebar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
                  padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}
.marca { align-items: center; gap: .5rem; font-weight: 600; font-size: 1.1rem; padding: .25rem .75rem 1rem; color: var(--bs-body-color); text-decoration: none; }
.marca i { color: var(--serie-1); }
.sidebar .nav-link { display: flex; align-items: center; gap: .6rem; padding: .35rem .75rem; border-radius: .4rem; color: var(--bs-body-color); }
.sidebar .nav-link i { opacity: .7; }
.sidebar .nav-link:hover { background: var(--bs-secondary-bg); }
.sidebar .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 500; }
.nav-grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: 1rem .75rem .3rem; }
.sidebar-pie { margin-top: auto; display: flex; align-items: center; gap: .75rem; padding: 1rem .75rem .25rem; border-top: 1px solid var(--bs-border-color); }

.contenido { flex: 1; min-width: 0; padding: 1rem 1rem 3rem; }
@media (min-width: 992px) { .contenido { padding: 1.5rem 2rem 3rem; } }
.cabecera { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cabecera .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.mensajes .alert { margin-bottom: .5rem; }

.tarjeta { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .6rem; }
.tarjeta > .tarjeta-cab { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.tarjeta > .tarjeta-cab h2 { font-size: 1rem; margin: 0; font-weight: 600; }
.tarjeta > .tarjeta-cuerpo { padding: 1rem; }

.kpi { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .6rem; padding: .85rem 1rem; height: 100%; }
.kpi .etiqueta { font-size: .78rem; color: var(--bs-secondary-color); }
.kpi .valor { font-size: 1.45rem; font-weight: 600; line-height: 1.25; }
.kpi .detalle { font-size: .8rem; color: var(--bs-secondary-color); }

.tabla { margin: 0; font-size: .87rem; }
.tabla th { font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-secondary-color); white-space: nowrap; background: var(--bs-body-bg); }
.tabla td, .tabla th { padding: .45rem .6rem; vertical-align: middle; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 600; border-top: 2px solid var(--bs-border-color); }
.tabla tr.subtotal td { background: var(--bs-secondary-bg); font-weight: 600; }
.tabla tr.atenuado td { color: var(--bs-secondary-color); }
.tabla .acciones-fila { white-space: nowrap; text-align: right; }
.tabla .acciones-fila .btn { padding: .1rem .35rem; }
.tabla-scroll { overflow-x: auto; }
.tabla-scroll .tabla thead th { position: sticky; top: 0; z-index: 1; }
.alto-max { max-height: 34rem; overflow-y: auto; }

.text-success { color: #006300 !important; }
[data-bs-theme="dark"] .text-success { color: #3fbf3f !important; }

.grafico { position: relative; height: 18rem; }
.grafico.bajo { height: 13rem; }
.grafico.alto { height: 24rem; }

.form-estrecho { max-width: 46rem; }
.form-ancho { max-width: 64rem; }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .2rem; }
.form-text { font-size: .78rem; }
.errorlist { list-style: none; padding: 0; margin: .2rem 0 0; color: var(--bs-danger); font-size: .82rem; }

.comentario { white-space: pre-line; font-size: .82rem; color: var(--bs-secondary-color); min-width: 22rem; max-width: 36rem; }
.login-caja { max-width: 22rem; margin: 12vh auto; }
.chip { display: inline-block; padding: .1rem .45rem; border-radius: 1rem; font-size: .75rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.tabla td.nombre { min-width: 14rem; }
.tabla td.nombre-corto { min-width: 10rem; }

/* --- Móvil: las tablas marcadas con .tabla-movil se muestran como tarjetas ------------------- */
@media (max-width: 767.98px) {
  .contenido { padding: .75rem .75rem 3rem; }
  .cabecera h1 { font-size: 1.15rem; }
  .kpi .valor { font-size: 1.2rem; }
  .tabla-movil thead { display: none; }
  .tabla-movil, .tabla-movil tbody, .tabla-movil tfoot { display: block; width: 100%; }
  .tabla-movil tr { display: flex; flex-direction: column; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
  .tabla-movil tr:last-child { border-bottom: 0; }
  .tabla-movil td { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                    border: 0 !important; padding: .15rem .75rem !important; text-align: right !important;
                    min-width: 0 !important; background: transparent !important; }
  .tabla-movil td::before { content: attr(data-etiqueta); color: var(--bs-secondary-color); font-size: .74rem;
                            text-transform: uppercase; letter-spacing: .02em; text-align: left; flex-shrink: 0; }
  .tabla-movil td.cab-movil { order: -1; font-weight: 600; font-size: .95rem; text-align: left !important;
                              justify-content: flex-start; flex-wrap: wrap; gap: .1rem .5rem; }
  .tabla-movil td.cab-movil::before { display: none; }
  .tabla-movil td:empty, .tabla-movil td.vacia { display: none; }
  .tabla-movil td.acciones-fila { justify-content: flex-end; padding-top: .4rem !important; }
  .tabla-movil td.acciones-fila::before { display: none; }
  .tabla-movil tr.subtotal { background: var(--bs-secondary-bg); }
  .tabla-movil tfoot tr { font-weight: 600; }
  .tabla-movil td[colspan] { justify-content: flex-start; }
  .tabla-movil td[colspan]::before { display: none; }
  .tabla-movil .comentario { min-width: 0; }
  .tabla-movil input.form-control-sm { max-width: 9rem; }
  .tabla-movil .form-check-input { width: 1.5rem; height: 1.5rem; }
}

/* --- App instalada (pantalla de inicio): respeta el notch y la barra de gestos -------------- */
@supports (padding: env(safe-area-inset-top)) {
  .contenido { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  .sidebar-body { padding-top: calc(.75rem + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) {
  .cabecera { padding-top: env(safe-area-inset-top); }
}

/* Aviso de versión nueva (service worker actualizado) */
.aviso-version { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom));
                 z-index: 1080; display: flex; align-items: center; gap: .75rem; padding: .6rem .6rem .6rem 1rem;
                 border-radius: .6rem; background: var(--bs-primary); color: #fff; font-size: .9rem; max-width: calc(100% - 2rem); }

.version-app { font-size: .72rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; margin-left: auto; }
.version-app + form { margin-left: .5rem !important; }