: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; }

/* Proyección de retiro: controles deslizantes y resumen siempre visible en móvil */
.control-slider { margin-bottom: .85rem; }
.control-slider .form-range { margin-top: .2rem; }
.valor-slider { width: 9rem; flex-shrink: 0; }
.grupo-controles + .grupo-controles { margin-top: .75rem; }
@media (max-width: 991.98px) {
  .kpis-proy { position: sticky; top: 0; z-index: 5; background: var(--bs-tertiary-bg); margin-left: -.75rem; margin-right: -.75rem;
               padding: .5rem .5rem; }
  .kpis-proy .kpi { padding: .5rem .65rem; }
  .kpis-proy .kpi .valor { font-size: 1.05rem; }
  .kpis-proy .kpi .detalle { display: none; }
}

/* Cotizaciones en vivo: indicador en la cabecera y resaltado de las celdas que cambian */
.estado-vivo { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; }
.estado-vivo .punto { width: .5rem; height: .5rem; border-radius: 50%; background: #1baf7a; }
.estado-vivo.error .punto { background: var(--bs-danger); }
.estado-vivo .texto:empty { display: none; }
/* Sombra interior en vez de fondo: en móvil las celdas fuerzan el fondo transparente con !important. */
@keyframes vivo-sube { from { box-shadow: inset 0 0 0 100vmax rgba(27, 175, 122, .38); } to { box-shadow: inset 0 0 0 100vmax rgba(27, 175, 122, 0); } }
@keyframes vivo-baja { from { box-shadow: inset 0 0 0 100vmax rgba(220, 53, 69, .32); } to { box-shadow: inset 0 0 0 100vmax rgba(220, 53, 69, 0); } }
.vivo-sube { animation: vivo-sube 3s ease-out; }
.vivo-baja { animation: vivo-baja 3s ease-out; }
@media (prefers-reduced-motion: reduce) { .vivo-sube, .vivo-baja { animation-duration: 6s; animation-timing-function: steps(1, end); } }

/* Menú lateral plegable en pantallas anchas: queda una franja con los iconos */
.marca-fila { align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.marca-fila .marca { padding-bottom: .25rem; }
.plegar-menu { opacity: .55; padding: .15rem .35rem; }
.plegar-menu:hover, .plegar-menu:focus-visible { opacity: 1; }
@media (min-width: 992px) {
  .sidebar { transition: width .2s ease; }
  html.menu-plegado { --sidebar-ancho: 3.75rem; }
  .menu-plegado .sidebar .etq { display: none; }
  .menu-plegado .sidebar-body { padding-left: .4rem; padding-right: .4rem; }
  .menu-plegado .marca-fila { flex-direction: column; gap: .25rem; }
  .menu-plegado .marca { padding: .25rem 0; }
  .menu-plegado .plegar-menu i { display: inline-block; transform: rotate(180deg); }
  .menu-plegado .sidebar .nav-link { justify-content: center; padding: .45rem 0; position: relative; }
  .menu-plegado .sidebar .nav-link i { opacity: .85; font-size: 1.05rem; }
  .menu-plegado .sidebar .nav-link .badge { position: absolute; top: .05rem; right: .05rem; font-size: .6rem; padding: .15em .4em; }
  .menu-plegado .nav-grupo { font-size: 0; padding: 0; margin: .6rem .4rem; border-top: 1px solid var(--bs-border-color); }
  .menu-plegado .sidebar-pie { flex-direction: column; padding: .75rem 0 .25rem; gap: .7rem; }
  .menu-plegado .sidebar-pie form { margin: 0 !important; }
}