/* BI FARMAVIDA */
:root {
  /* Colores del logo de Farmavida: verde, rojo y morado */
  --marca: #0a7a34;
  --marca-oscuro: #075c27;
  --marca-2: #6b1d8f;
  --acento: #d81e1e;
  --acento-oscuro: #b3161a;
  --marca-suave: #e8f4ec;
  --fondo: #f4f7f5;
  --superficie: #ffffff;
  --borde: #dfe7e2;
  --texto: #1a1f26;
  --texto-2: #56606c;
  --sube: #2a7f23;
  --baja: #b42318;
  --menu-ancho: 232px;
}
body { background: var(--fondo); color: var(--texto); font-size: .92rem; }
.barra-sup { position: sticky; top: 0; z-index: 1030; height: 56px; color: #fff;
              background: linear-gradient(90deg, var(--marca-oscuro) 0%, var(--marca) 55%, var(--marca-2) 100%); border-bottom: 3px solid var(--acento); }
.marca { font-weight: 700; letter-spacing: .02em; }
.estado-datos { font-size: .8rem; opacity: .9; }
.contenedor { display: flex; min-height: calc(100vh - 56px); }
.menu { width: var(--menu-ancho); flex: 0 0 var(--menu-ancho); background: var(--superficie); border-right: 1px solid var(--borde);
        padding: .75rem .5rem; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; transition: margin-left .2s; }
.menu .nav-link { color: var(--texto); border-radius: .5rem; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; }
.menu .nav-link:hover { background: #eef6f0; }
.menu .nav-link.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.menu .nav-link.activo i { color: var(--acento); }
.menu-logo { display: block; text-align: center; padding: .25rem .5rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--borde); }
.menu-logo img { max-width: 150px; width: 100%; height: auto; }
.menu .nav-link.deshabilitado { color: #9aa4ae; cursor: default; }
.menu .nav-link small { white-space: nowrap; margin-left: auto; font-size: .68rem; background: #eef2f6; border-radius: 1rem; padding: 0 .45rem; }
.menu-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); padding: 1rem .75rem .25rem; }
body.menu-oculto .menu { margin-left: calc(-1 * var(--menu-ancho)); }
.contenido { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 2rem; }
.titulo { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.pie { color: var(--texto-2); font-size: .78rem; margin-top: 2rem; }
@media (max-width: 991px) {
  .menu { position: fixed; left: 0; z-index: 1020; box-shadow: 0 0 24px rgba(0,0,0,.15); margin-left: calc(-1 * var(--menu-ancho)); }
  body.menu-visible .menu { margin-left: 0; }
  .contenido { padding: 1rem; }
}

/* Tarjetas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: .75rem; padding: 1rem 1.1rem; }
.row > * > .tarjeta { height: 100%; }
.tarjeta h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .75rem; }
.tarjeta h2 small { font-weight: 400; color: var(--texto-2); }
.kpi-etiqueta { font-size: .78rem; color: var(--texto-2); }
.kpi-valor { font-size: 1.55rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: .78rem; color: var(--texto-2); }
.var-sube { color: var(--sube); font-weight: 600; white-space: nowrap; }
.var-baja { color: var(--baja); font-weight: 600; white-space: nowrap; }

/* Filtros */
.filtros { background: var(--superficie); border: 1px solid var(--borde); border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.filtros .form-label { font-size: .75rem; color: var(--texto-2); margin-bottom: .15rem; }

/* Tablas */
.tabla-bi { font-size: .85rem; margin: 0; }
.tabla-bi th { font-size: .75rem; color: var(--texto-2); font-weight: 600; white-space: nowrap; background: #f5f8fb; }
.tabla-bi td.num, .tabla-bi th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-bi tr.subtotal td { background: #eef4fa; font-weight: 600; }
.tabla-bi tr.total td { background: var(--marca-suave); color: var(--marca-oscuro); font-weight: 700; }
.tabla-scroll { overflow-x: auto; }

/* Gráficos */
.grafico { position: relative; height: 280px; }
.grafico.alto { height: 360px; }

/* Etiquetas de estado (siempre con texto) */
.etq { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; border-radius: 1rem; padding: .1rem .5rem; border: 1px solid; }
.etq-a { color: #0b5f37; border-color: #9fd3b6; background: #eaf7ef; }
.etq-b { color: #7a4d00; border-color: #f0cf8d; background: #fdf5e4; }
.etq-c { color: #56606c; border-color: #d5dce4; background: #f3f6fa; }

/* Búsqueda de productos */
.buscador { position: relative; max-width: 640px; }
.sugerencias { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--borde);
               border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 360px; overflow-y: auto; }
.sugerencias a { display: block; padding: .5rem .75rem; color: var(--texto); text-decoration: none; border-bottom: 1px solid #eef2f6; }
.sugerencias a:hover, .sugerencias a.sel { background: var(--marca-suave); }
.sugerencias .vacio { padding: .6rem .75rem; color: var(--texto-2); font-size: .85rem; }
.sugerencias .cod { font-variant-numeric: tabular-nums; color: var(--marca); font-weight: 600; margin-right: .35rem; }
.sugerencias small { color: var(--texto-2); }

/* Login */
.contenido-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem;
                   background: linear-gradient(160deg, var(--marca-oscuro) 0%, var(--marca) 55%, var(--marca-2) 100%); }
.caja-login { width: 100%; max-width: 380px; background: #fff; border-radius: 1rem; padding: 2rem; border-top: 5px solid var(--acento); box-shadow: 0 20px 48px rgba(0,0,0,.2); }

.logo-cliente { max-width: 240px; width: 100%; height: auto; }
.marca-sub { font-weight: 400; font-size: .8rem; opacity: .85; margin-left: .5rem; letter-spacing: 0; }
.pie .creditos { margin-top: .35rem; }
.creditos a { color: var(--marca); font-weight: 600; text-decoration: none; }
.creditos a:hover { text-decoration: underline; }
.pie-login { color: rgba(255,255,255,.85); font-size: .8rem; text-align: center; }
.pie-login .creditos a { color: #fff; }
/* Tabla con encabezados en varias líneas (sin scroll horizontal) */
.tabla-compacta th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.tabla-compacta td.nombre { min-width: 150px; }

/* Botones, enlaces y foco con los colores del cliente */
:root {
  --bs-link-color: var(--marca); --bs-link-color-rgb: 10, 95, 164;
  --bs-link-hover-color: var(--marca-oscuro); --bs-link-hover-color-rgb: 8, 75, 130;
  --bs-primary: #6b1d8f; --bs-primary-rgb: 107, 29, 143;
  --bs-success: #0a7a34; --bs-success-rgb: 10, 122, 52;
}
.btn-success { --bs-btn-bg: var(--acento); --bs-btn-border-color: var(--acento);
  --bs-btn-hover-bg: var(--acento-oscuro); --bs-btn-hover-border-color: var(--acento-oscuro);
  --bs-btn-active-bg: #1f641a; --bs-btn-active-border-color: #1f641a;
  --bs-btn-disabled-bg: var(--acento); --bs-btn-disabled-border-color: var(--acento); }
.btn-primary { --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca-oscuro); --bs-btn-hover-border-color: var(--marca-oscuro);
  --bs-btn-active-bg: #073f6d; --bs-btn-active-border-color: #073f6d; }
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary { background: var(--marca); border-color: var(--marca); color: #fff; }
.form-control:focus, .form-select:focus { border-color: #7fb4e0; box-shadow: 0 0 0 .2rem rgba(10, 95, 164, .18); }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.text-success { color: var(--acento) !important; }
.titulo { color: var(--marca-oscuro); }
.tarjeta h2 { color: var(--marca-oscuro); }
.kpi-valor { color: var(--marca-oscuro); }

/* Logo de Farmasoft en el pie (insignia blanca: sirve también sobre el fondo azul del login) */
.creditos-powered { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pie-login .creditos-powered { justify-content: center; }
.logo-farmasoft { display: inline-flex; background: #fff; border: 1px solid var(--borde); border-radius: .5rem; padding: .15rem .4rem; }
.logo-farmasoft img { height: 58px; width: auto; display: block; }
.pie-login .logo-farmasoft { border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.version { color: #9aa4ae; font-size: .7rem; margin-top: .35rem; }

/* Aviso de instalación de la app (celular / tablet) */
.pwa-aviso { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1080; max-width: 440px; margin: 0 auto;
             background: #fff; border-radius: .9rem; border-top: 4px solid var(--acento); padding: .9rem 1rem; display: flex; gap: .8rem; align-items: flex-start; }
.pwa-aviso[hidden] { display: none; }
.pwa-icono { width: 52px; height: 52px; border-radius: .7rem; border: 1px solid var(--borde); flex: 0 0 52px; }

/* Fecha y hora de los datos (todas las pantallas) */
.barra-datos { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--marca-suave); border: 1px solid #c9dcef;
               border-left: 4px solid var(--marca); border-radius: .75rem; padding: .6rem .9rem; margin: -.25rem 0 1rem; color: var(--marca-oscuro); }
.barra-datos > .bi { color: var(--marca); }
.barra-datos.aviso { background: #fff7e6; border-color: #f0cf8d; border-left-color: #e0a100; }
.barra-datos.aviso > .bi { color: #b07800; }
.barra-datos #actualizarNota { font-size: .72rem; }
@media (max-width: 575px) { .barra-datos > .bi { display: none; } .barra-datos > .text-end { width: 100%; text-align: left !important; } .barra-datos #btnActualizar { width: 100%; } }
.aviso-nuevos { background: var(--marca); color: #fff; border-radius: .6rem; padding: .45rem .8rem; margin: -.5rem 0 1rem; font-size: .88rem; }