/* ============================================================
   TEMA "CREMA Y ROSA" — aspecto de la app (capa sobre app.css)
   Idea: fondo crema cálido, barra lateral beige, texto café y el rosa de la
   marca solo para lo importante (acción principal y sección activa).
   Verde y rojo quedan reservados para ganancia y pérdida.
   Para volver al aspecto anterior basta con quitar este archivo de index.html.
   ============================================================ */
:root {
  --lienzo: #fbf6ef;         /* fondo general (crema) */
  --barra: #f3e9dc;          /* barra lateral (beige) */
  --barra-2: #eadccb;        /* grupo abierto de la barra */
  --linea: #eadfd0;          /* bordes */
  --texto: #3b2a26;          /* café oscuro */
  --texto-2: #7a655c;
  --cafe: #3b2a26;           /* botones oscuros */
  --rosa: #e11d5b;
  --rosa-osc: #be1249;
  --rosa-suave: #ffe4ed;
  --radio: 18px;
}

/* ---------- Lienzo y tipografía ---------- */
body {
  background: var(--lienzo) !important;
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'tnum' 1, 'cv11' 1;      /* números alineados */
}
h1, h2, h3 { letter-spacing: -0.015em; }

/* ---------- Cabecera: blanca, plana, con línea ---------- */
.fluid-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.fluid-header.is-scrolled { box-shadow: 0 6px 20px -14px rgba(59, 42, 38, 0.45) !important; }

/* ---------- Barra lateral beige ---------- */
@media (min-width: 640px) {
  .app-sidebar {
    background: var(--barra) !important;
    border-right: 1px solid var(--linea) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important;
  }
}
/* Logo más grande (60 px con la barra abierta, 48 px con la barra cerrada) */
.sb-brand { padding-bottom: 14px; min-height: 68px; }
.sb-brand img { width: 60px; height: 60px; box-shadow: 0 0 0 3px #fff, 0 6px 16px -8px rgba(59, 42, 38, 0.55); }
body:not(.sb-expanded) .app-sidebar .sb-brand img { width: 48px; height: 48px; }
.sb-brand b { color: var(--texto); font-size: 14px; white-space: normal; line-height: 1.15; }
.sb-brand small, .sb-sec, .sb-group-head, .sb-chev { color: var(--texto-2); }
.sb-item { color: var(--texto); }
.sb-item:hover { background: rgba(255, 255, 255, 0.6); }
.sb-nav .sb-item.active { color: #fff; }
.sb-indicator { background: var(--rosa) !important; box-shadow: 0 8px 18px -8px rgba(225, 29, 91, 0.8) !important; border-radius: 12px; }
.sb-badge, body:not(.sb-expanded) .app-sidebar .sb-badge { background: var(--rosa); color: #fff; }
.sb-group-head.has-active { color: var(--rosa-osc); background: var(--rosa-suave); }
.sb-group-head[aria-expanded="true"] { background: var(--barra-2); border-color: var(--linea); border-bottom-color: transparent; color: var(--texto); }
.sb-group.open { background: var(--barra-2); border-color: var(--linea); box-shadow: none; }
.sb-group.open .sb-item:not(.active):hover { background: rgba(255, 255, 255, 0.55); }
.sb-toggle { background: rgba(255, 255, 255, 0.7); border-color: var(--linea); color: var(--texto-2); }

/* ---------- Barra inferior (celular): blanca con pastilla en la sección activa ---------- */
.app-bottombar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--linea) !important;
  box-shadow: 0 -8px 24px -18px rgba(59, 42, 38, 0.5) !important;
}
.bb-item { color: #7b8087; }
.bb-item.active { color: var(--rosa-osc); }
.bb-badge { background: var(--rosa) !important; color: #fff !important; }
.bb-item.active .bb-ic { background: var(--rosa-suave); border-radius: 12px; padding: 4px 14px; transform: none; }
.bb-ic { opacity: 1; filter: grayscale(0.55); }
.bb-item.active .bb-ic { filter: none; }

/* ---------- Tarjetas: un solo estilo (borde fino, sombra muy suave) ---------- */
main .rounded-3xl, main .rounded-2xl { border-radius: var(--radio); }
main .bg-white.rounded-3xl, main .bg-white.rounded-2xl, main .bg-white\/60.rounded-3xl {
  border-color: var(--linea) !important;
  box-shadow: 0 1px 2px rgba(59, 42, 38, 0.04), 0 8px 24px -18px rgba(59, 42, 38, 0.25) !important;
}
/* Los degradados de color quedan casi blancos: el color va en el borde, no en el fondo */
main [class*="bg-gradient-to-br"][class*="rounded-3xl"],
main [class*="bg-gradient-to-r"][class*="rounded-2xl"],
main [class*="bg-gradient-to-br"][class*="rounded-2xl"] {
  background-image: none !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(59, 42, 38, 0.04), 0 8px 24px -18px rgba(59, 42, 38, 0.25) !important;
}

/* ---------- Botones principales ---------- */
.bg-slate-900, .bg-slate-800 { background-color: var(--cafe) !important; }
.hover\:bg-slate-800:hover { background-color: #2c1f1c !important; }
.text-slate-900, .text-slate-800 { color: var(--texto) !important; }
#btnHeaderNewItem { background-color: var(--cafe) !important; }   /* secundario: café, el rosa queda para "+ Pedido" */
.bg-sophia-600 { background-color: var(--rosa) !important; }
.hover\:bg-sophia-700:hover { background-color: var(--rosa-osc) !important; }

/* ---------- Ventanas (modales): encabezado blanco en vez de degradado ---------- */
[id^="modal"] > div > [class*="bg-gradient-to-r"] {
  background-image: none !important;
  background-color: #fff !important;
  color: var(--texto) !important;
  border-bottom: 1px solid var(--linea);
}
[id^="modal"] > div > [class*="bg-gradient-to-r"] h3 { color: var(--texto) !important; }
[id^="modal"] > div > [class*="bg-gradient-to-r"] p { color: var(--texto-2) !important; }
[id^="modal"] > div > [class*="bg-gradient-to-r"] button { color: var(--texto-2) !important; }
[id^="modal"] > div { border-radius: 22px; }

/* ---------- Campos: foco uniforme ---------- */
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(225, 29, 91, 0.18) !important; border-color: var(--rosa) !important; }

/* ---------- Inventario: barra "Ir al carrito" ---------- */
.inv-cartbar { background: var(--cafe); box-shadow: 0 14px 30px -12px rgba(59, 42, 38, 0.6); }