/* =========================================================
   App de pedidos — estilos (mobile first, sobre Bootstrap 5)
   Paleta revisada: neutros fríos, marca más viva, jerarquía por
   color de estado y modo oscuro automático. (oct-2026)
   ========================================================= */
:root {
  --fondo: #EEF2F0;          /* gris con un toque de verde (antes beige #F3F1EC) */
  --superficie: #FFFFFF;
  --superficie-2: #F4F7F5;   /* cajas secundarias (aviso de deuda) */
  --tinta: #14201C;
  --tenue: #55625D;
  --linea: #DCE3E0;
  --linea-fuerte: #C5D0CB;
  --marca: #0B7A5C;          /* verde más vivo; blanco encima = 5,31:1 (AA) */
  --marca-oscura: #075A44;
  --marca-suave: #DDF3EA;
  --acento: #F59E0B;         /* ámbar; siempre con texto oscuro */

  /* Pares fondo/texto por estado — todos > 6:1 */
  --ok-bg: #D1FAE5;      --ok-tx: #065F46;
  --aviso-bg: #FEF3C7;   --aviso-tx: #92400E;
  --peligro-bg: #FFE4E6; --peligro-tx: #9F1239;
  --info-bg: #DBEAFE;    --info-tx: #1E40AF;
  --neutro-bg: #E8EDEB;  --neutro-tx: #3F4A46;
  --deuda: #B45309;      /* saldo a cobrar: ámbar, rojo solo si está vencido */

  /* Sombras suaves para dar profundidad a las tarjetas */
  --sombra: 0 1px 2px rgba(20,32,28,.06), 0 2px 8px rgba(20,32,28,.05);
  --sombra-hover: 0 6px 20px rgba(11,122,92,.14);

  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--tinta);
  --bs-body-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --bs-primary: var(--marca);
  --bs-primary-rgb: 11, 122, 92;
  --bs-border-color: var(--linea);
  --bs-link-color: var(--marca);
  --bs-link-hover-color: var(--marca-oscura);
  --sidebar-w: 264px;
  color-scheme: light;       /* claro por defecto, aunque el sistema esté en oscuro */
}

body { min-height: 100dvh; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.titulo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 1.75rem; }
.etiqueta { font-size: .75rem; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.border-dashed { border-top-style: dashed !important; border-color: var(--linea-fuerte) !important; }

/* ---- Botones con color de marca ---- */
.btn-primary {
  --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca-oscura); --bs-btn-hover-border-color: var(--marca-oscura);
  --bs-btn-active-bg: var(--marca-oscura); --bs-btn-active-border-color: var(--marca-oscura);
  --bs-btn-disabled-bg: var(--marca); --bs-btn-disabled-border-color: var(--marca);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--marca); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca); --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-bg: var(--marca-oscura); --bs-btn-disabled-color: var(--marca); --bs-btn-disabled-border-color: var(--marca);
  font-weight: 600;
}
.btn-lg, .btn-alto { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 0; color: var(--tinta); }
.btn-icon:hover { background: rgba(0,0,0,.05); }
.form-control, .form-select { border-color: var(--linea-fuerte); }
.form-control:focus, .form-select:focus { border-color: var(--marca); box-shadow: 0 0 0 .2rem rgba(11,122,92,.2); }
.form-control-lg, .form-select-lg { font-size: 1rem; min-height: 48px; } /* 16px evita el zoom en iOS */

/* ---- Barra superior móvil ---- */
.topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem .5rem .25rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.topbar-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.1; }

/* ---- Layout ---- */
.contenido { padding: 1rem 1rem 7.5rem; }

/* ---- Menú lateral (offcanvas en móvil) ---- */
.sidebar { --bs-offcanvas-width: 300px; background: var(--superficie); }
.sidebar-head { background: var(--marca); color: #fff; padding: 1.25rem 1rem 1.25rem 1.25rem; }
.brand { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--acento); color: #1B1D1F; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.sidebar-nav { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; }
.sidebar-nav a {
  display: flex; align-items: center; gap: .85rem; min-height: 50px; padding: 0 .9rem;
  border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 500;
}
.sidebar-nav a i { font-size: 1.2rem; }
.sidebar-nav a:hover { background: var(--fondo); }
.sidebar-nav a.activo { background: var(--marca-suave); color: var(--marca-oscura); font-weight: 600; }

/* ---- Buscador y chips ---- */
.buscador .input-group-text { background: var(--superficie); border-color: var(--linea-fuerte); color: var(--tenue); }
.buscador .form-control { border-left: 0; font-size: 1rem; }
.chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-right: -1rem; padding-right: 1rem; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; min-height: 38px; padding: 0 .9rem; border-radius: 19px;
  border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); font-size: .9rem;
}
.chip:hover { border-color: var(--marca); }
.chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 500; }

/* ---- Tarjetas ---- */
.card-app { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); }
.tarjeta-pedido {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: .9rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px;
  color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--sombra);
}
.tarjeta-pedido:hover { border-color: var(--marca); box-shadow: var(--sombra-hover); color: var(--tinta); }
.tarjeta-pedido .cliente { font-weight: 600; font-size: 1.05rem; }
.meta { font-size: .82rem; color: var(--tenue); }

/* Saldo a cobrar: ámbar por defecto, rojo solo cuando está vencido */
.deuda { color: var(--deuda); font-weight: 600; }
.deuda.vencida { color: var(--peligro-tx); }

/* ---- Estados: punto de color + texto (no depender solo del color) ---- */
.badge-estado {
  font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 10px;
  background: var(--neutro-bg); color: var(--neutro-tx);
  display: inline-flex; align-items: center; gap: .4rem;
}
.badge-estado::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-estado:empty { display: none; }
.estado-pendiente { background: var(--aviso-bg);   color: var(--aviso-tx); }
.estado-enviado   { background: var(--ok-bg);      color: var(--ok-tx); }
.estado-anulado   { background: var(--peligro-bg); color: var(--peligro-tx); }
.estado-borrador  { background: var(--neutro-bg);  color: var(--neutro-tx); }

/* ---- Productos con selector de cantidad ---- */
.producto {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .75rem .75rem .9rem; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 14px;
}
.producto.en-pedido { border: 2px solid var(--marca); padding: calc(.75rem - 1px) calc(.75rem - 1px) calc(.75rem - 1px) calc(.9rem - 1px); }
.producto .nombre { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0; }
.stepper .menos { border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); }
.stepper .mas   { border: 0; background: var(--marca); color: #fff; }
.stepper input  { width: 48px; height: 44px; text-align: center; border: 1px solid transparent; border-radius: 8px; background: transparent; font-family: 'IBM Plex Mono', monospace; font-size: 1rem; }
.stepper input:focus { outline: none; border-color: var(--marca); background: #fff; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; }

/* ---- Resumen ---- */
.item-resumen { display: flex; gap: .75rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--linea); }
.item-resumen .quitar { width: 40px; height: 40px; border: 0; background: none; color: var(--tenue); border-radius: 10px; }
.item-resumen .quitar:hover { background: var(--peligro-bg); color: var(--peligro-tx); }
.vacio { padding: 1.5rem 1rem; text-align: center; color: var(--tenue); }

/* ---- Botón flotante + barras fijas móviles ---- */
.fab {
  position: fixed; right: 1rem; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 1030;
  height: 56px; padding: 0 1.4rem 0 1.1rem; border-radius: 28px; background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 24px rgba(11,122,92,.35);
}
.fab:hover { background: var(--marca-oscura); color: #fff; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie); border-top: 1px solid var(--linea);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tenue); text-decoration: none; font-size: .75rem; }
.bottom-nav a i { font-size: 1.35rem; }
.bottom-nav a.activo { color: var(--marca); font-weight: 600; }
.barra-total {
  position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 1025;
  display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem;
  background: var(--superficie); border-top: 1px solid var(--linea); box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
#vista-editor .resumen { scroll-margin-top: 72px; }
#vista-editor { padding-bottom: 5rem; }

/* ---- Avisos ---- */
#aviso.ok    { background: var(--marca); color: #fff; }
#aviso.error { background: var(--peligro-tx); color: #fff; }

/* ---- Foco visible para teclado ---- */
:where(a, button, .chip, .form-control, .form-select):focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* =========================================================
   TABLET (≥ 768px)
   ========================================================= */
@media (min-width: 768px) {
  .contenido { padding: 1.5rem 1.5rem 8rem; }
}

/* =========================================================
   ESCRITORIO (≥ 992px): el menú pasa a barra lateral fija
   ========================================================= */
@media (min-width: 992px) {
  .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }
  /* !important: Bootstrap deja el menú transparente en escritorio (.offcanvas-lg) */
  .sidebar { position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--linea); background: var(--menu-bg) !important; display: flex; flex-direction: column; }
  .contenido { padding: 2rem 2.5rem; }
  .titulo { font-size: 2.1rem; }
  .chips { margin-right: 0; padding-right: 0; flex-wrap: wrap; }
  #vista-editor { padding-bottom: 0; }
  #vista-editor .resumen { position: sticky; top: 1.5rem; }
}

/* Accesibilidad: respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
.min-w-0 { min-width: 0; }

/* =========================================================
   Menú lateral grafito con texto blanco · Instalar app · Offline
   ========================================================= */
:root {
  --menu-bg: #18181B;          /* fondo del menú (grafito casi negro) */
  --menu-head: #0F0F11;        /* encabezado del menú y fondo del login */
  --menu-tinta: #D4D4D8;       /* texto del menú (11,9:1 sobre el grafito) */
  --menu-borde: rgba(255,255,255,.08);
  --menu-hover-bg: rgba(255,255,255,.08);
  --menu-hover-tinta: #FFFFFF;
}

.sidebar { background: var(--menu-bg); --bs-offcanvas-bg: var(--menu-bg); }
.sidebar-head { background: var(--menu-head); color: #fff; border-bottom: 1px solid var(--menu-borde); }
.brand { color: #fff; }

.sidebar-nav a { color: var(--menu-tinta); font-weight: 500; }
.sidebar-nav a i { color: var(--menu-tinta); }
.sidebar-nav a:hover { background: var(--menu-hover-bg); color: var(--menu-hover-tinta); }
.sidebar-nav a:hover i { color: #fff; }

/* Página activa: ámbar translúcido con barra lateral */
.sidebar-nav a.activo {
  background: rgba(245,158,11,.14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--acento);
}
.sidebar-nav a.activo i { color: var(--acento); }

/* Enlace Salir, separado del resto y en tono de alerta suave */
.nav-salir { margin-top: auto; color: #FCA5A5; font-weight: 500; }
.nav-salir i { color: #FCA5A5; }
.nav-salir:hover { background: rgba(248,113,113,.14); color: #fff; box-shadow: inset 3px 0 0 #F87171; }
.nav-salir:hover i { color: #fff; }

/* Botón "Instalar app" (PWA): mismo formato que los ítems del menú */
.nav-instalar {
  display: flex; align-items: center; gap: .85rem; min-height: 50px; padding: 0 .9rem;
  border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
  border-radius: 12px; color: var(--menu-tinta); font-weight: 500; font-size: 1rem; margin-top: auto;
}
.nav-instalar i { font-size: 1.2rem; color: var(--menu-tinta); }
.nav-instalar:hover { background: var(--menu-hover-bg); color: #fff; }
.nav-instalar:hover i { color: #fff; }
.nav-instalar + .nav-salir { margin-top: 0; }
/* Botón Modo claro / oscuro: abre el grupo de abajo del menú */
.nav-tema { margin-top: auto; }
.nav-tema + .nav-instalar,
.nav-tema ~ .nav-salir { margin-top: 0; }
/* El menú ocupa el alto que deja el encabezado; si la pantalla es baja,
   se desplaza en vez de cortar "Salir". */
.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Ítems más compactos (44px sigue siendo un toque cómodo) para que el menú
   completo entre en la pantalla de una notebook. */
.sidebar-nav { gap: .15rem; padding: .6rem .75rem; }
.sidebar-nav a, .nav-instalar { min-height: 44px; }
.sidebar-head { padding-top: 1rem; padding-bottom: 1rem; }
.sidebar-head .mt-3 { margin-top: .6rem !important; }

/* Botón de cerrar del menú en móvil: blanco sobre el grafito */
.sidebar .btn-icon { color: #fff; }
.sidebar .btn-icon:hover { background: rgba(255,255,255,.1); }

/* Cartel "sin conexión" (lectura offline) */
.barra-offline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: #92400E; color: #fff; text-align: center;
  padding: .55rem .9rem; font-size: .9rem; font-weight: 500;
  box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.barra-offline i { margin-right: .35rem; }

/* =========================================================
   Tarjetas de indicadores (KPIs) del dashboard
   ========================================================= */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 992px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: .95rem 1.1rem;
  box-shadow: var(--sombra);
}
.kpi-ico {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.kpi-etq { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.kpi-val { font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-sub { font-size: .78rem; color: var(--tenue); }

/* En celular la tarjeta mide ~165px: el ícono va arriba para dejarle todo el ancho al importe */
@media (max-width: 575.98px) {
  .kpi { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .85rem; }
  .kpi > .min-w-0 { width: 100%; }
  .kpi-ico { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
  .kpi-val { font-size: 1.1rem; white-space: normal; overflow-wrap: anywhere; }
}

/* Cada KPI lleva su ícono con fondo de color (no un filete de 3px) */
.kpi-verde  .kpi-ico { background: var(--ok-bg);     color: var(--ok-tx); }
.kpi-azul   .kpi-ico { background: var(--info-bg);   color: var(--info-tx); }
.kpi-ambar  .kpi-ico { background: var(--aviso-bg);  color: var(--aviso-tx); }
.kpi-gris   .kpi-ico { background: var(--neutro-bg); color: var(--neutro-tx); }

/* UN solo indicador protagonista: el "Facturado del mes" (2º) va relleno
   con el color de marca, para que la mirada encuentre primero el dato clave.
   Si cambiás el orden de los KPIs en app.js, movelo con el :nth-child. */
.kpis .kpi:nth-child(2) {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  box-shadow: 0 4px 16px rgba(11,122,92,.28);
}
.kpis .kpi:nth-child(2) .kpi-etq,
.kpis .kpi:nth-child(2) .kpi-sub { color: rgba(255,255,255,.82); }
.kpis .kpi:nth-child(2) .kpi-ico { background: rgba(255,255,255,.16); color: #fff; }

/* =========================================================
   Pantalla de login
   ========================================================= */
.pantalla-login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 16px;
  background: linear-gradient(160deg, var(--menu-head), #0E4A3A 90%);
}
.login-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 1rem; }
.login-marca {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  color: #fff; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 1.35rem;
}
.login-marca i { color: var(--acento); font-size: 1.6rem; }
.login-card { padding: 1.5rem; }
.login-titulo { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 1.4rem; margin-bottom: .25rem; }
.login-error {
  background: var(--peligro-bg); color: var(--peligro-tx); border: 1px solid #F3C9CE;
  border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem;
}
.login-pie { text-align: center; font-size: .8rem; }

/* =========================================================
   MODO OSCURO opcional: la app es CLARA por defecto.
   Solo se activa si se agrega data-theme="dark" a la etiqueta <html>.
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0E1513;
  --superficie: #17211E;
  --superficie-2: #1D2925;
  --tinta: #E6ECE9;
  --tenue: #9BA8A3;
  --linea: #26332F;
  --linea-fuerte: #34443F;
  --marca: #10B981;          /* en oscuro el verde se aclara */
  --marca-oscura: #34D399;
  --marca-suave: #123A2E;
  --acento: #FBBF24;
  --ok-bg: #0F3B2E;     --ok-tx: #6EE7B7;
  --aviso-bg: #3D2A07;  --aviso-tx: #FCD34D;
  --peligro-bg: #3F1220;--peligro-tx: #FDA4AF;
  --info-bg: #172554;   --info-tx: #93C5FD;
  --neutro-bg: #22302B; --neutro-tx: #C4CFCB;
  --deuda: #FBBF24;
  --sombra: none;
  --sombra-hover: 0 0 0 1px var(--marca);
  --bs-primary-rgb: 16, 185, 129;
  --menu-bg: #111113;
  --menu-head: #09090B;
  --menu-tinta: #C4C4CC;
}
/* Sobre el verde claro, el texto pasa a ser oscuro (7,4:1) */
[data-theme="dark"] .btn-primary, [data-theme="dark"] .fab, [data-theme="dark"] .stepper .mas,
[data-theme="dark"] .chip.activo, [data-theme="dark"] .kpis .kpi:nth-child(2) { color: #062A1F; }
[data-theme="dark"] .kpis .kpi:nth-child(2) .kpi-etq,
[data-theme="dark"] .kpis .kpi:nth-child(2) .kpi-sub { color: rgba(6,42,31,.72); }
[data-theme="dark"] .kpis .kpi:nth-child(2) .kpi-ico { background: rgba(6,42,31,.16); color: #062A1F; }