/* Clases de componente (sistema Mapplics · general, adaptado a la marca Bebitos) */
.card        { background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgba(74,32,15,.06),0 1px 2px rgba(74,32,15,.04); border:1px solid #ebe1d3; }
.btn         { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.6rem; font-weight:500; padding:.5rem 1rem; font-size:.875rem; transition:all .15s; white-space:nowrap; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary { background:#ec662d; color:#fff; box-shadow:0 1px 3px rgba(74,32,15,.1); }
.btn-primary:hover:not(:disabled){ background:#d4531c; }
.btn-outline { border:1px solid #ebe1d3; color:#475569; background:#fff; padding:.45rem .8rem; }
.btn-outline:hover{ background:#f5efe6; }
.btn-ghost   { color:#475569; padding:.45rem .7rem; }
.btn-ghost:hover{ background:#f5efe6; }
.btn-sage    { background:#6e9173; color:#fff; }
.btn-sage:hover{ background:#4f6b53; }
.btn-blush   { background:#fbeeef; color:#a8434b; border:1px solid #f0c3c6; }
.btn-blush:hover{ background:#f0c3c6; }
.btn-wa      { background:#25d366; color:#fff; }
.btn-wa:hover{ background:#128c4b; }
.btn-sm      { padding:.3rem .65rem; font-size:.78rem; }
.input       { width:100%; border-radius:.6rem; border:1px solid #ebe1d3; background:#fff; padding:.5rem .75rem; color:#1e293b; font-size:.875rem; }
.input:focus { outline:none; box-shadow:0 0 0 3px #f6bfa5; border-color:#f19a72; }
.label       { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#64748b; display:block; margin-bottom:.3rem; }
.badge       { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; font-size:.72rem; font-weight:600; padding:.12rem .55rem; white-space:nowrap; }
.b-brand { background:#fbe0d3; color:#8e3d1b; }
.b-sage  { background:#d9e7da; color:#4f6b53; }
.b-gold  { background:#f5e3c1; color:#8a5f16; }
.b-blush { background:#fbeeef; color:#a8434b; }
.b-slate { background:#f1f5f9; color:#475569; }
.b-wa    { background:#e7f8ee; color:#128c4b; }

.tbl { width:100%; font-size:.85rem; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#64748b; padding:.6rem .75rem; border-bottom:1px solid #ebe1d3; background:#fbf8f4; white-space:nowrap; }
.tbl td { padding:.65rem .75rem; border-bottom:1px solid #f5efe6; vertical-align:middle; }
.tbl tr:hover td { background:#fdf8f5; }
.tbl-wrap { overflow-x:auto; }

.nav-item { display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border-radius:.6rem; color:#64748b; font-size:.875rem; font-weight:500; transition:all .15s; }
.nav-item:hover { background:#f5efe6; color:#334155; }
.nav-item.active { background:#fbe0d3; color:#8e3d1b; }
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
.nav-sec { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; padding:1rem .8rem .35rem; }

.kpi-val { font-family:Raleway,system-ui,sans-serif; font-weight:800; font-size:1.85rem; color:#1e293b; line-height:1.1; }
.blob { position:absolute; border-radius:999px; filter:blur(64px); }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }
@keyframes scaleIn { from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
@keyframes pulseDot { 0%,80%,100%{transform:scale(.6); opacity:.4} 40%{transform:scale(1); opacity:1} }
@keyframes slideUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.anim-fade-out { animation:fadeOut .45s ease forwards; }
.anim-scale-in { animation:scaleIn .4s ease; }
.anim-in { animation:slideUp .3s ease; }
.dot { width:10px; height:10px; border-radius:999px; animation:pulseDot 1.2s infinite ease-in-out; }

.wa-bg { background-color:#efeae2; background-image:radial-gradient(#e2dccf 1px, transparent 1px); background-size:14px 14px; }
.wa-bubble { background:#fff; border-radius:.5rem; border-top-left-radius:0; padding:.5rem .65rem; font-size:.8rem; box-shadow:0 1px .5px rgba(0,0,0,.13); white-space:pre-wrap; word-break:break-word; color:#111b21; }
.wa-bubble.me { background:#d9fdd3; border-top-left-radius:.5rem; border-top-right-radius:0; }

.progress { height:8px; border-radius:999px; background:#f5efe6; overflow:hidden; }
.progress > div { height:100%; background:#ec662d; border-radius:999px; transition:width .3s; }

.scroll-thin::-webkit-scrollbar { width:6px; height:6px; }
.scroll-thin::-webkit-scrollbar-thumb { background:#dccbb5; border-radius:6px; }