/* ============================================================
   Alma Meulen — Sistema visual ULTRA PREMIUM
   Lenguaje Alma adaptado a marca Supermercado Meulen.
   DOS temas conmutables: Sobrio (default) + Mixto.
   Verde molino + crema + trigo · Montserrat + Inter + Playfair.
   Rebrand = remapear variables, NO reescribir clases.
   ============================================================ */

/* Google Fonts — carga en cada módulo que use alma.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Playfair+Display:wght@700&display=swap');

/* ─────────────────────────────────────────────────
   TEMA 1: SOBRIO PREMIUM (default)
   Verde bosque señorial + crema + trigo.
   Color vivo SOLO en datos y gráficos.
   ───────────────────────────────────────────────── */
:root {
  /* Base verde molino */
  --azul:#2F3E34;       --azul-700:#25322A;  --azul-900:#1A231D;
  --azul-500:#8B6B4E;   --azul-300:#B79B86;  --azul-50:#F0E9DF;
  /* Verde profundo */
  --verde:#5E7C52;      --verde-700:#3E5236;
  --verde-500:#D9C7A1;  --verde-300:#E6DAC1; --verde-50:#F3EEE2;
  /* Semántico / dato */
  --aqua:#8B6B4E;       --aqua-50:#F0E9DF;
  --naranja:#C9762E;    --naranja-50:#F7ECDF;
  --rojo:#B4453B;       --rojo-50:#F6E7E5;
  /* Fondos */
  --bg:#F2EFE6;         --bg-2:#F8F5EC;      --tinta:#1F2A24;
  --blanco:#fff;        --crema:#F8F5EC;
  /* Grises neutros tintados de verde molino */
  --gris-100:#E4DDD1;   --gris-200:#D0C8B8;  --gris-300:#B9B0A0;
  --gris-400:#9B9384;   --gris-600:#6A6358;
  /* Gradientes */
  --grad-navy:linear-gradient(135deg,#2F3E34 0%,#384A3C 52%,#8B6B4E 145%);
  --grad-green:linear-gradient(135deg,#3E5236,#5E7C52);
  --grad-blue:linear-gradient(135deg,#5E7C52,#8B6B4E);
  /* Sombras tintadas (verde molino) */
  --shadow-xs:0 1px 2px rgba(47,62,52,.07);
  --shadow-sm:0 2px 8px rgba(47,62,52,.08),0 1px 3px rgba(47,62,52,.05);
  --shadow-md:0 12px 28px rgba(47,62,52,.12),0 4px 8px rgba(47,62,52,.07);
  --shadow-lg:0 28px 60px rgba(47,62,52,.18),0 8px 16px rgba(47,62,52,.08);
  /* Glow radial del header (Tierra en Sobrio) */
  --mod-glow:radial-gradient(circle at center,rgba(139,107,78,.28),transparent 62%);
  /* Focus ring */
  --focus-ring:0 0 0 3px rgba(139,107,78,.28);
  /* Fila hover en tabla */
  --row-hover:var(--azul-50);
  /* Tipografía */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-serif:'Playfair Display',Georgia,serif;
  /* Geometría */
  --radius:14px;    --radius-lg:20px;  --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* ── Acento de chrome UI (sidebar, section bars, badges de rango)
     DISTINTO de --verde-500 (trigo/crema, solo para datos en luz).
     Sobrio = verde bosque vivo; Mixto = sobreescribe a teal. ── */
  --accent:#5E7C52;       /* = --verde en Sobrio */
  --accent-dim:rgba(94,124,82,.22);
  --accent-on-dark:rgba(217,199,161,.82); /* trigo claro, legible en oscuro */
}

/* ─────────────────────────────────────────────────
   TEMA 2: MIXTO EQUILIBRADO
   Misma base verde bosque. Turquesa/hoja/sol vivos
   en headers, KPIs y categorías.
   ───────────────────────────────────────────────── */
:root[data-theme="mixto"] {
  --azul:#2F3E34;       --azul-700:#25322A;  --azul-900:#1A231D;
  --azul-500:#1F9E8C;   --azul-300:#7FC8BE;  --azul-50:#E2F4F1;
  --verde:#6FA03C;      --verde-700:#4E7A2A;
  --verde-500:#E0A92E;  --verde-300:#F0CE78; --verde-50:#FBF2DA;
  --aqua:#26C6DA;       --aqua-50:#E2F6F9;
  --naranja:#E08A1E;    --naranja-50:#FBEFD9;
  --rojo:#C0493D;       --rojo-50:#F7E6E4;
  --bg:#F4F1E6;         --bg-2:#FAF7EE;      --tinta:#1F2A24;
  --grad-navy:linear-gradient(135deg,#2F3E34 0%,#2E7D46 70%,#26C6DA 150%);
  --grad-green:linear-gradient(135deg,#2E7D46,#8BC34A);
  --grad-blue:linear-gradient(135deg,#1F9E8C,#26C6DA);
  --mod-glow:radial-gradient(circle at center,rgba(38,198,218,.26),transparent 62%);
  --focus-ring:0 0 0 3px rgba(38,198,218,.28);
  --row-hover:var(--azul-50);
  /* Acento chrome Mixto = teal vivo */
  --accent:#1F9E8C;
  --accent-dim:rgba(38,198,218,.22);
  --accent-on-dark:rgba(127,200,190,.88);
}

/* ─────────────────────────────────────────────────
   BASE RESET + CUERPO
   ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--bg);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0}
img{max-width:100%;display:block}
::selection{background:var(--verde-300);color:var(--azul-900)}

/* ─────────────────────────────────────────────────
   MÓDULO — HEADER ULTRA PREMIUM
   Gradiente navy + glow radial + borde acento +
   ola decorativa inferior. Molino inline 20px.
   ───────────────────────────────────────────────── */
.mod-head{
  position:relative;
  overflow:hidden;
  padding:28px 32px 26px;
  background:var(--grad-navy);
  color:#fff;
  border-bottom:3px solid var(--accent);
}
/* Glow radial superior-derecha */
.mod-head::after{
  content:"";
  position:absolute;
  right:-60px;top:-70px;
  width:380px;height:380px;
  background:var(--mod-glow);
  pointer-events:none;
}
/* Ola decorativa inferior */
.mod-head::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:68px;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0 50 Q150 10 300 40 T600 36 T900 30 T1200 44 V80 H0 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:bottom;
}
/* Badge-ícono molino (izquierda del título) */
.mod-head .badge-ico{
  width:46px;height:46px;
  border-radius:13px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
}
.mod-head .hd-inner{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;gap:16px;
}
.mod-head h1{
  font-size:clamp(20px,2.4vw,26px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
}
.mod-head p{
  margin:7px 0 0;
  color:rgba(255,255,255,.80);
  font-size:13.5px;
  font-weight:500;
  max-width:780px;
  line-height:1.5;
}
.mod-head input[type=date],
.mod-head input[type=search]{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:10px;
  padding:7px 12px;
  font:inherit;
  backdrop-filter:blur(4px);
}
.mod-head input::-webkit-calendar-picker-indicator{filter:invert(1)}
/* Wrapper del contenido de módulo */
.mod-wrap{
  padding:26px 32px 80px;
  max-width:1320px;
}

/* ─────────────────────────────────────────────────
   KPIs — TILES PREMIUM
   Franja de acento, ícono tile, número Montserrat.
   ───────────────────────────────────────────────── */
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.kpi{
  position:relative;
  background:var(--blanco);
  border:1px solid var(--gris-100);
  border-radius:var(--radius);
  padding:20px 20px 16px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.kpi:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
/* Franja vertical de acento */
.kpi::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:4px;
  background:var(--azul-500);
  border-radius:4px 0 0 4px;
}
.kpi.good::before{background:var(--verde)}
.kpi.alert::before{background:var(--rojo)}
.kpi.info::before{background:var(--aqua)}
/* Ícono tile */
.kpi .ki{
  width:36px;height:36px;
  border-radius:10px;
  display:grid;place-items:center;
  margin-bottom:13px;
  background:var(--azul-50);
}
.kpi.good .ki{background:var(--verde-50)}
.kpi.alert .ki{background:var(--rojo-50)}
.kpi.info .ki{background:var(--aqua-50)}
.kpi .ki svg{
  width:18px;height:18px;
  stroke:var(--azul-500);
  stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.kpi.good .ki svg{stroke:var(--verde)}
.kpi.alert .ki svg{stroke:var(--rojo)}
.kpi.info .ki svg{stroke:var(--aqua)}
/* Número */
.kpi .v{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:800;
  color:var(--azul);
  line-height:1.0;
  letter-spacing:-.03em;
}
.kpi.alert .v{color:var(--rojo)}
.kpi.good .v{color:var(--verde-700)}
/* Label */
.kpi .l{
  font-size:11px;
  color:var(--gris-600);
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
}
/* Hint sub */
.kpi .h{
  font-size:12px;
  color:var(--gris-400);
  margin-top:4px;
  font-weight:500;
}

/* ─────────────────────────────────────────────────
   TOOLBAR
   ───────────────────────────────────────────────── */
.toolbar{
  display:flex;gap:10px;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.toolbar input[type=search],
.toolbar input[type=date]{
  padding:10px 14px;
  border:1px solid var(--gris-200);
  border-radius:var(--radius);
  font:inherit;
  background:var(--blanco);
  box-shadow:var(--shadow-xs);
  transition:.15s;
  color:var(--tinta);
}
.toolbar input[type=search]{flex:0 1 320px}
.toolbar input:focus{
  outline:none;
  border-color:var(--azul-500);
  box-shadow:var(--focus-ring);
}
.toolbar label.muted{font-size:12.5px;color:var(--gris-600)}
.spacer{flex:1}

/* ─────────────────────────────────────────────────
   BOTONES — SISTEMA COMPLETO
   ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  border:1px solid transparent;
  transition:.16s var(--ease);
  white-space:nowrap;
  text-decoration:none;
  line-height:1;
}
.btn svg{
  width:16px;height:16px;
  stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}
/* Primario — verde gradiente */
.btn-primary{
  background:var(--grad-green);
  color:#fff;
  box-shadow:0 8px 20px rgba(47,82,54,.28);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(47,82,54,.34);
}
.btn-primary:active{transform:none}
/* Ghost */
.btn-ghost{
  background:var(--blanco);
  border-color:var(--gris-200);
  color:var(--azul);
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{
  border-color:var(--azul-500);
  color:var(--azul-500);
  background:var(--azul-50);
}
/* Danger */
.btn-danger{color:var(--rojo);background:var(--rojo-50);border-color:transparent}
.btn-danger:hover{background:#f0d8d7}
/* Sm */
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:10px;gap:6px}
/* Icon-only */
.btn-ico{padding:8px;border-radius:10px}
/* Accent (naranja / acento) */
.btn-accent{
  background:linear-gradient(135deg,var(--naranja),var(--azul-500));
  color:#fff;
  box-shadow:0 6px 16px rgba(201,118,46,.30);
}
.btn-accent:hover{transform:translateY(-1px)}
/* Focus rings */
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ─────────────────────────────────────────────────
   CARD — BASE
   ───────────────────────────────────────────────── */
.card{
  background:var(--blanco);
  border:1px solid var(--gris-100);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card:hover{box-shadow:var(--shadow-md)}

/* ─────────────────────────────────────────────────
   TABLA — PREMIUM
   ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;
  padding:13px 18px;
  background:var(--bg-2);
  color:var(--gris-600);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  border-bottom:1px solid var(--gris-100);
  white-space:nowrap;
  position:sticky;top:0;
}
tbody td{
  padding:13px 18px;
  border-bottom:1px solid var(--gris-100);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--row-hover)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.empty{
  padding:72px 20px;
  text-align:center;
  color:var(--gris-400);
  font-size:14px;
  font-weight:500;
  line-height:1.6;
}

/* ─────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.01em;
}
.badge.ok{background:var(--verde-50);color:var(--verde-700)}
.badge.warn{background:var(--naranja-50);color:var(--naranja)}
.badge.bad{background:var(--rojo-50);color:var(--rojo)}
.badge.info{background:var(--azul-50);color:var(--azul-500)}
.badge.mut{background:var(--gris-100);color:var(--gris-600)}

/* ─────────────────────────────────────────────────
   TIPOGRAFÍA UTILITARIA
   ───────────────────────────────────────────────── */
.money{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em}
.serif{font-family:var(--font-serif)}
.muted{color:var(--gris-600)}
.label-u{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--gris-600);
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;font-size:15px;
  color:var(--azul);
  margin:30px 0 14px;
  display:flex;align-items:center;gap:10px;
}
.section-title::before{
  content:"";width:18px;height:3px;
  border-radius:3px;
  background:var(--accent);
  flex:0 0 auto;
}

/* ─────────────────────────────────────────────────
   LAYOUT HELPERS
   ───────────────────────────────────────────────── */
.flex{display:flex;gap:10px;align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ─────────────────────────────────────────────────
   BARRAS DE PROGRESO
   ───────────────────────────────────────────────── */
.bar{
  height:10px;border-radius:99px;
  background:var(--gris-100);overflow:hidden;
}
.bar>i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--verde),var(--azul-500));
  transition:width .6s var(--ease);
}
.bar.warn>i{background:linear-gradient(90deg,var(--naranja),#E8A64A)}
.bar.bad>i{background:linear-gradient(90deg,var(--rojo),#D97070)}

/* ─────────────────────────────────────────────────
   MODAL + FORMULARIO
   ───────────────────────────────────────────────── */
.modal-bg{
  position:fixed;inset:0;
  background:rgba(15,25,18,.52);
  backdrop-filter:blur(4px);
  display:none;align-items:flex-start;
  justify-content:center;
  padding:5vh 16px;
  z-index:50;overflow:auto;
}
.modal-bg.open{display:flex}
.modal{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  width:100%;max-width:600px;
  box-shadow:var(--shadow-lg);
  animation:pop .22s var(--ease);
}
@keyframes pop{
  from{transform:translateY(16px) scale(.97);opacity:0}
  to{transform:none;opacity:1}
}
.modal h2{
  font-size:18px;color:var(--azul);font-weight:800;
  padding:24px 28px;
  border-bottom:1px solid var(--gris-100);
}
.form-grid{
  padding:24px 28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{
  font-size:11.5px;font-weight:700;
  color:var(--gris-600);
  text-transform:uppercase;letter-spacing:.05em;
}
.field input,
.field select,
.field textarea{
  padding:10px 14px;
  border:1px solid var(--gris-200);
  border-radius:11px;
  font:inherit;
  background:var(--blanco);
  color:var(--tinta);
  transition:.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--azul-500);
  box-shadow:var(--focus-ring);
}
.field textarea{resize:vertical;min-height:68px}
.modal-actions{
  display:flex;justify-content:flex-end;gap:10px;
  padding:18px 28px;
  border-top:1px solid var(--gris-100);
  background:var(--bg-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* ─────────────────────────────────────────────────
   CHIPS DE FILTRO
   ───────────────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  padding:5px 13px;border-radius:var(--radius-pill);
  border:1px solid var(--gris-200);
  background:var(--blanco);
  font-size:12.5px;font-weight:600;color:var(--gris-600);
  cursor:pointer;transition:.14s;
}
.chip:hover{border-color:var(--azul-500);color:var(--azul-500)}
.chip.active{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ─────────────────────────────────────────────────
   CUENTA REGRESIVA (Rescate Frescos)
   ───────────────────────────────────────────────── */
.countdown{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:700;
}
.countdown.ok{background:var(--verde-50);color:var(--verde-700)}
.countdown.warn{background:var(--naranja-50);color:var(--naranja)}
.countdown.bad{background:var(--rojo-50);color:var(--rojo)}

/* ─────────────────────────────────────────────────
   PANEL DE SECCIÓN (panel-h / panel-b pattern)
   ───────────────────────────────────────────────── */
.panel{
  background:var(--blanco);
  border:1px solid var(--gris-100);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.panel-h{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;
  border-bottom:1px solid var(--gris-100);
}
.panel-h .ph-ico{
  width:32px;height:32px;
  border-radius:9px;
  background:var(--azul-50);
  display:grid;place-items:center;
}
.panel-h .ph-ico svg{
  width:16px;height:16px;
  stroke:var(--azul-500);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.panel-h h2{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.panel-h .count{
  margin-left:auto;
  font-size:11.5px;font-weight:700;
  color:var(--gris-600);
  background:var(--bg);
  padding:4px 10px;border-radius:var(--radius-pill);
}
.panel-b{padding:16px 20px}

/* ─────────────────────────────────────────────────
   TACHADO (precio original en descuento)
   ───────────────────────────────────────────────── */
.old-price{
  text-decoration:line-through;
  color:var(--gris-400);
  font-weight:500;
}
.new-price{color:var(--verde);font-weight:800}

/* ─────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────── */
@media(max-width:640px){
  .mod-wrap,.mod-head{padding-left:18px;padding-right:18px}
  .form-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
}