/* =====================================================================
   FOOD v1.0 (same logic, own essence)
   ===================================================================== */

/* FOOD (Sprint B) - reduce inline styles, add professional structure */
.food-header{ margin-bottom:12px; }
.food-header .brand-section-row{ margin-bottom:12px; }
.food-header-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.food-title{ letter-spacing:0.06em; }
.food-subtitle{ max-width:70ch; }
.food-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }

.food-detail-actions{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }

.food-tabs{ display:flex; gap:5px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:5px; border:1px solid rgba(255,255,255,0.10); border-radius:16px; background:rgba(255,255,255,0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom:12px; scrollbar-width:none; }
.food-tabs::-webkit-scrollbar{ display:none; }
.food-tab{ flex:0 0 auto; white-space:nowrap; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.10); color:var(--txt); font-weight:800; letter-spacing:0.02em; cursor:pointer; font-size:0.78rem; }
.food-tab.active{ border-color: rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }
.food-tab-panel{ display:none; }
.food-tab-panel.active{ display:block; }

.chip-row{
  display:flex;
  gap:10px;
  flex-wrap: nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  /* Allow horizontal pan gestures on touch devices. Without this, the
     category bar on mobile could cause the entire page to shift when
     trying to scroll horizontally. */
  touch-action: pan-x;
  /* Snap children (chips) to the start when scrolling horizontally. This
     mirrors the scroll behavior of recipe categories and prevents
     partial chips from showing at the edges. */
  scroll-snap-type: x mandatory;

  /* Prevent horizontal overscroll (rubber-banding) so the chip bar doesn't
     scroll beyond its content. This mirrors the edge resistance seen in
     other sections. */
  overscroll-behavior-x: contain;
  padding-bottom:2px;
}

.chip-row::-webkit-scrollbar{ display:none; }

.chip{
  appearance:none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border:1px solid var(--border-dim);
  background:rgba(0,0,0,0);
  color:var(--txt-dim);
  padding:10px 14px;
  border-radius:20px;
  font-size:0.85rem;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  transition:all 0.2s;
  line-height: 1;
  /* Prevent chips from shrinking when container width is small. This ensures
     category chips maintain their width and remain fully visible when
     overflowing horizontally. Without this, flexbox may compress chips,
     causing them to overlap or truncate on narrow screens (as seen in the
     user-reported bug). */
  flex: 0 0 auto;
  flex-shrink: 0;

  /* Snap chips to the start when scrolling horizontally. This provides
     a consistent feel similar to the recipe categories in the drinks
     section. */
  scroll-snap-align: start;
}

.chip:hover{ border-color:rgba(255,255,255,0.16); color:var(--txt-main); }

.chip.active{
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:var(--txt-main);
}

/* Responsive adjustments for small screens (≤480px) */
@media (max-width: 480px){
  /* Keep the chip row in a single horizontal line even on small screens. Chips
     will scroll horizontally instead of wrapping to a new line. */
  .chip-row{
    flex-wrap: nowrap;
  }
  /* Reduce padding and font size so more chips fit comfortably */
  .chip{
    font-size:0.75rem;
    padding:8px 12px;
  }
  /* Align icons and text tightly on mobile */
  .chip i{
    font-size:0.85em;
  }
}

/* ------------------------------------------------------------------------
   Utility class to hide native scrollbars. Used on horizontally scrollable
   containers such as food category bars and premium chips.  */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.food-thumb,
.food-visual{
  border:1px solid var(--border-dim);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  position:relative;
  overflow:hidden;
}

.food-thumb{ width:64px; height:64px; flex:0 0 64px; }
.food-visual{ width:92px; height:92px; flex:0 0 92px; }

/* Icon-based marks (FOOD v2 base) */
.food-cat-mark{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  color:var(--accent);
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.food-cat-mark svg{ display:block; }

.food-thumb-icon{
  width:64px;
  height:64px;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid var(--border-dim);
  color:rgba(255,255,255,0.72);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
  position:relative;
  overflow:hidden;
}
.food-thumb-icon::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at 30% 25%, rgba(194,124,46,0.12), rgba(0,0,0,0) 60%);
  opacity:0.55;
  pointer-events:none;
}
.food-thumb-icon svg{ position:relative; z-index:1; }

.food-card:hover .food-thumb-icon{
  border-color: rgba(194,124,46,0.30);
  color: rgba(194,124,46,0.92);
  box-shadow: 0 0 0 1px rgba(194,124,46,0.12), 0 18px 44px rgba(0,0,0,0.42);
}

.food-detail-mark{
  width:92px;
  height:92px;
  flex:0 0 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(194,124,46,0.92);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  position:relative;
  overflow:hidden;
}
.food-detail-mark::after{
  content:"";
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle at 35% 25%, rgba(194,124,46,0.16), rgba(0,0,0,0) 62%);
  opacity:0.6;
  pointer-events:none;
}
.food-detail-mark svg{ position:relative; z-index:1; }

/* Visual variants (subtle, premium, non-literal) */
.food-thumb.plate::before,
.food-visual.plate::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:radial-gradient(circle at 40% 30%, rgba(255,255,255,0.10), rgba(0,0,0,0));
}

.food-thumb.tray::before,
.food-visual.tray::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0));
}

.food-thumb.jar::before,
.food-visual.jar::before{
  content:"";
  position:absolute;
  left:50%; top:12px;
  width:44%; height:70%;
  transform:translateX(-50%);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0));
}

.food-thumb.bowl::before,
.food-visual.bowl::before{
  content:"";
  position:absolute;
  left:50%; bottom:14px;
  width:70%; height:46%;
  transform:translateX(-50%);
  border-radius:0 0 24px 24px;
  border:1px solid rgba(255,255,255,0.14);
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0));
}

.food-card{ cursor:pointer; }

.warn{
  border:1px solid rgba(255, 186, 0, 0.35);
  background:rgba(255, 186, 0, 0.08);
  color:var(--txt-main);
  padding:12px 14px;
  border-radius:14px;
}
/* TARJETAS TECH */
.tech-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* Premium interaction (used heavily in DRINKS) */
.drinks-screen .tech-card{
    cursor: pointer;
}
.drinks-screen .tech-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.drinks-screen .tech-card:active{
    transform: translateY(0px) scale(0.99);
    background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(0,0,0,0.18));
}


/* BOTONES ARQUITECTÓNICOS */
.btn-arch {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--txt-main);
    font-family: var(--font-data);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s;
}
.btn-arch:active { transform: scale(0.98); background: var(--bg-highlight); }

.btn-arch.primary {
    background: var(--txt-main);
    color: black;
    border-color: var(--txt-main);
}

/* Danger variant (used for delete/irreversible actions) */
.btn-arch.danger{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.08);
  color: var(--danger);
}
.btn-arch.danger:hover{ border-color: rgba(255,80,80,0.55); background: rgba(255,80,80,0.12); }

/* Disabled state (used across Business/CRM/Operations) */
.btn-arch:disabled,
.btn-arch[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(20%);
}


/* Legacy primary CTA compatibility (prevents iOS default blue buttons) */
.btn-primary {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--txt-main);
    font-family: var(--font-data);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.btn-primary:hover {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.035);
}
.btn-primary:active {
    transform: scale(0.98);
    background: var(--bg-highlight);
}
.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(20%);
}

/* INPUTS DE DATOS */
.input-line {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-dim);
    color: var(--accent);
    font-family: var(--font-data);
    font-size: 1.5rem;
    text-align: center;
    width: 200px;
    padding: 10px;
    margin-top: 20px;
}
.input-line:focus { outline: none; border-color: var(--accent); }

/* ======================================================================
   BREW TIMER PRO (Ring + Steps Modal)
   ====================================================================== */

.brew-timer-ring {
    --p: 0;  /* 0..100 — action progress */
    --pt: 0; /* 0..100 — total recipe progress */
    width: 210px;
    height: 210px;
    margin: 0 auto;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background:
        conic-gradient(
            var(--accent) 0 calc(var(--p) * 1%),
            rgba(255,255,255,0.08) calc(var(--p) * 1%) 100%
        );
    box-shadow: 0 0 40px rgba(194,124,46,0.18);
    transition: background 0.15s linear;
}

/* Outer ring — total recipe progress */
.brew-timer-ring::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background:
        conic-gradient(
            rgba(194,124,46,0.35) 0 calc(var(--pt) * 1%),
            rgba(255,255,255,0.04) calc(var(--pt) * 1%) 100%
        );
    z-index: -1;
    transition: background 0.3s linear;
}

.brew-timer-ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 999px;
    background: rgba(10,10,10,0.85);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Step counter badge on ring */
.brew-timer-step-badge {
    position: absolute;
    top: -4px;
    right: 20px;
    z-index: 2;
    background: var(--accent);
    color: #000;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Visual cue card */
.brew-stepvisual {
    margin-top: 10px;
    font-size: 0.88rem;
    color: rgba(194,124,46,0.85);
    line-height: 1.4;
    padding: 8px 12px;
    border-left: 3px solid rgba(194,124,46,0.4);
    background: rgba(194,124,46,0.06);
    border-radius: 0 8px 8px 0;
}

/* Countdown big number for wait steps */
.brew-countdown-big {
    font-family: var(--font-data);
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--txt-main);
    text-align: center;
    margin: 8px 0;
    letter-spacing: 2px;
    opacity: 0.9;
}

.brew-timer-display {
    position: relative;
    z-index: 1;
    font-family: var(--font-data);
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--txt-main);
    letter-spacing: 1px;
    line-height: 1;
}

.brew-timer-sub {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--txt-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ======================================================================
   BREW TIMER – Step Box Formatting (operativo)
   ====================================================================== */

.brew-stephead {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    color: var(--txt-dim);
}
.brew-stephead .l { font-weight: 800; color: var(--txt-main); }
.brew-stephead .r { font-family: var(--font-data); opacity: 0.9; }

.brew-stepbody {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--txt-dim);
}
.brew-stepbody strong {
    color: var(--txt-main);
    font-weight: 800;
}

.brew-steptarget, .brew-stephint {
    margin-top: 12px;
    font-size: 0.95rem;
    color: var(--txt-dim);
}
.brew-steptarget strong, .brew-stephint strong {
    color: var(--txt-main);
}

.brew-steps-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
}

.brew-steps-modal.hidden { display: none; }

.brew-steps-sheet {
    width: 100%;
    max-width: 680px;
    border-radius: 16px;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
}

.brew-steps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--txt-main);
}

.brew-steps-list {
    max-height: 55vh;
    overflow: auto;
    padding: 10px;
}

.brew-step-item {
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--txt-main);
    cursor: pointer;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.brew-step-item .t {
    font-family: var(--font-data);
    color: var(--accent);
    font-weight: 800;
}

.brew-step-item .txt {
    color: var(--txt-dim);
    line-height: 1.25;
}

.brew-step-item.active {
    border-color: rgba(194,124,46,0.45);
    background: rgba(194,124,46,0.10);
}

/* PANTRY UI helpers */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:14px;z-index:9999;}
.modal-overlay.pantry-modal{align-items:center;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.modal-card{width:100%;max-width:560px;background:rgba(14,14,14,.92);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 14px 16px;box-shadow:0 20px 60px rgba(0,0,0,.55);max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;}
.modal-overlay.pantry-modal .modal-card{max-height:calc(100vh - 140px);}

/* =============================
   Recipes (Mis recetas) — Premium editor
   ============================= */
.mr-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px 0;position:sticky;top:0;z-index:2;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 100%);backdrop-filter:blur(10px);padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);} 
.mr-tab{flex:1;min-width:84px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--txt-dim);padding:10px 12px;border-radius:10px;font-weight:800;cursor:pointer;}
.mr-tab.is-active{background:rgba(194,124,46,.16);border-color:rgba(194,124,46,.35);color:var(--txt-main);} 
.mr-panels{display:block;}
.mr-panel{display:none;}
.mr-panel.is-active{display:block;animation:fadeIn .18s ease;}

.mr-badge{font-size:.78rem;font-weight:900;letter-spacing:.6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--txt-main);white-space:nowrap;}

.mr-prev-kpis{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.10);} 
.mr-prev-kpis > div{flex:1;}
.mr-prev-list{display:grid;gap:10px;}
.mr-prev-row{display:grid;grid-template-columns: 120px 120px 1fr;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);} 
.mr-prev-left{color:var(--txt-main);font-weight:900;}
.mr-prev-mid{color:var(--txt-dim);font-family:var(--font-data);font-size:.84rem;}
.mr-prev-right{color:var(--txt-dim);font-size:.88rem;line-height:1.35;}

@media (max-width:520px){
  .mr-prev-row{grid-template-columns:1fr;}
  .mr-prev-mid{margin-top:2px;}
}
.inp{width:100%;padding:10px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--txt-main);outline:none;}
.inp:focus{border-color:rgba(255,255,255,.22);}
.pantry-item.inactive{opacity:.55;filter:saturate(.7);}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.78rem;color:var(--txt-main);}

/* Business ops badges: indicate due dates vs neutral state.
   Extend the base .pill styling without duplicating the common
   layout.  Keeping these separate classes allows the accent colours
   to be tweaked globally without editing inline HTML. */
.pill.due {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.22);
}
.pill.neutral {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Production status pills */
.pill.done {
  background: rgba(0, 255, 0, 0.08);
  border-color: rgba(0, 255, 0, 0.18);
}
.pill.todo {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.btn-delete{border-color:rgba(255,80,80,.35);}
.btn-delete:hover{border-color:rgba(255,80,80,.65);}

/* iOS/Safari: native <select> option lists may appear on a light background.
   Our theme uses light text, so options can look blank. Force readable colors. */
select.inp{color:var(--txt-main);background:rgba(255,255,255,.04);}
select.inp option{color:#111;background:#fff;}


/* ======================================================================
   PANTRY LAYOUT POLISH (Spacing / Responsiveness)
   ====================================================================== */

.muted { color: var(--txt-dim); }

.section-header { margin-bottom: 14px; }
.section-header h2 { margin: 0 0 6px; letter-spacing: 0.12em; }
.section-header p { margin: 0; color: var(--txt-dim); line-height: 1.35; }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.view { display: flex; flex-direction: column; gap: 12px; }

.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 12px;
}

.pantry-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}

.pantry-actions .btn-arch { width: auto; padding: 12px 14px; }

.pantry-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.pantry-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: rgba(14,14,14,.92);
  border-top: 1px solid rgba(255,255,255,.06);
}

.pantry-modal-actions .btn-arch { width: auto; padding: 12px 14px; }

/* Make inputs + selects slightly tighter inside cards */
.pantry-item .inp { padding: 10px 10px; }

/* Responsive: avoid encimado on phones */
@media (max-width: 520px) {
  .pantry-grid { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .pantry-form-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .btn-arch { padding: 14px; }
  .pantry-actions { justify-content: space-around; align-items: stretch; gap: 12px; }
  .pantry-actions .btn-arch { width: 100%; }
  .pantry-modal-actions { justify-content: stretch; }
  .pantry-modal-actions .btn-arch { width: 100%; }
}



/* PANTRY CARD PREMIUM */

.pantry-item{position:relative; overflow:hidden;}
.pantry-item > div:first-child{gap:12px;}
.pantry-item .pill{margin-right:8px;}

/* Edit zone styling (consolidated above) */

/* Footer styling (consolidated above) */

.pantry-actions .muted{font-size:.86rem;}

/* Buttons align nicely */
.pantry-actions .btn-arch{height:44px; display:inline-flex; align-items:center; justify-content:center;}

/* PANTRY CARD PREMIUM (Paso 2: tarjetas — consolidated) */

/* PANTRY: FOOD/DRINKS tabs (non-breaking) */
.pantry-tabs{
  display:flex;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
}
.pantry-tab{
  flex:1;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--txt-main);
  font-family: var(--font-data);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pantry-tab.active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* Pantry tools (search/sort/group) */
.pantry-tools{display:flex; flex-direction:column; gap:10px;}
.pantry-tools-row{display:flex; gap:10px; align-items:center;}
.pantry-search{flex:1; min-width:0;}
.pantry-sort{width:170px;}

/* Pantry grouping (helps when there are many items) */
.pantry-group{margin-bottom:12px;}
.pantry-group-h{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.pantry-group-left{display:flex; gap:10px; align-items:baseline;}
.pantry-group-ic{font-size:1.05rem;}
.pantry-group-title{font-weight:800; letter-spacing:0.04em;}
.pantry-group-right{display:flex; gap:10px; align-items:center;}
.pantry-group-chevron{font-size:1.1rem; opacity:0.9;}
.pantry-group-body{margin-top:10px;}

@media (max-width: 520px){
  .pantry-tools-row{flex-direction:column; align-items:stretch;}
  .pantry-sort{width:100%;}
}


/* =============================
   PANTRY — Sprint B (Compact cards + premium toolbar)
   ============================= */
.pantry-tools-actions{justify-content:space-between;gap:10px;}
.pantry-tools-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pantry-tip{font-size:0.82rem;opacity:0.92;}

.pantry-compact-header{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pantry-title-wrap{flex:1;min-width:0;}
.pantry-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pantry-name{font-weight:800;font-size:0.95rem;word-break:break-word;}
.pantry-cat-icon{font-size:1rem;}
.pantry-subline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.pantry-buyline{font-family:var(--font-data);font-size:0.82rem;}
.pantry-cost-val{font-family:var(--font-data);font-weight:900;font-size:1rem;color:var(--accent);}
.pantry-lbl{font-size:0.78rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;}
.pantry-header-right{display:flex;gap:12px;align-items:center;}
.pantry-cost-compact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:132px;}
.pantry-cost-compact .muted{font-size:0.78rem;}
.pantry-btn-expand{white-space:nowrap;transition:background .15s;}

.pantry-details{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06);}
.pantry-details-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;}
.pantry-vis-note{margin-left:8px;font-size:0.78rem;}
.pantry-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.pantry-toggle input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px;}

.pantry-pill-warn{border-color:rgba(255,196,100,0.35);background:rgba(255,196,100,0.12);}
.pantry-pill-arch{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);}

.pantry-sugg{margin-top:6px;font-size:0.74rem;line-height:1.2;opacity:0.9;}

@media (max-width: 520px){
  .pantry-compact-header{flex-direction:column;align-items:stretch;}
  .pantry-header-right{flex-direction:row;align-items:center;justify-content:space-between;margin-top:8px;}
  .pantry-cost-compact{align-items:flex-start;min-width:auto;flex-direction:row;gap:8px;}
  .pantry-cost-compact .muted{font-size:0.78rem;}
  .pantry-details-footer{flex-direction:column;align-items:stretch;}
  .pantry-details-footer .pantry-actions{display:flex;gap:10px;justify-content:flex-end;}
}

/* Pantry item hover (subtle) */
.pantry-item:hover{border-color:rgba(255,255,255,.12);}
.pantry-item.inactive:hover{border-color:rgba(255,255,255,.08);}

.pantry-history{margin-top:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.10);}
.pantry-history-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.pantry-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:0.86rem;}
/* PANTRY: visibility chips */
.pantry-visibility{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;}
.pantry-vis-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  user-select:none;
}
.pantry-vis-chip input{accent-color: var(--accent);}
.pantry-vis-chip span{font-family: var(--font-data); font-weight:800; letter-spacing:0.06em; font-size:0.78rem;}

/* Editable block (styling consolidated in main pantry-grid above) */

.pantry-grid .muted { margin-bottom: 6px; }

/* Footer area (styling consolidated in main pantry-actions above) */

.pantry-actions .muted { line-height: 1.2; }

/* Make the cost feel "result" */
.pantry-actions span[style*="color:var(--accent)"] {
  font-size: 1.02rem;
}

/* Pills breathe */
.pill { margin-right: 8px; }

/* Buttons alignment on larger screens */
@media (min-width: 521px) {
  .pantry-actions { align-items: center; }
}

/* =========================================================
   PREMIUM CATEGORY CHIPS + DRINK MARKS (v1)
   ========================================================= */

.cat-chip-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cat-chip-premium .cat-chip-icon {
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

/* Category icons can be SVG or image */
.cat-chip-premium .cat-chip-icon img {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.premium-section-badge img {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* DRINKS: card-stack transition (category switch) */
.drinks-screen .cat-stack-out {
  opacity: 0;
  transform: translateX(-10px) scale(0.992);
  transition: opacity 140ms ease, transform 140ms ease;
}

.drinks-screen .cat-stack-in {
  animation: catStackIn 220ms ease both;
}

@keyframes catStackIn {
  from { opacity: 0; transform: translateX(14px) scale(0.992); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.drinks-hero {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  margin: 8px 0 14px 0;
}

.drinks-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.drinks-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.88));
  pointer-events: none;
}

/* DRINKS hero: text over image (premium header) */
.drinks-hero-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px 16px 14px 16px;
  z-index: 2;
}

.drinks-hero-title{
  margin:0;
  font-size:2.05rem;
  font-weight:900;
  letter-spacing:0.01em;
}

.drinks-hero-sub{
  margin-top: 6px;
  color: var(--txt-dim);
  font-size:0.95rem;
}

.cat-chip-premium[data-active="1"] {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.28);
}

.drink-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.drink-mark svg {
  display:block;
}

.drink-mark img {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.premium-section-header {
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.premium-section-left{display:flex; align-items:center; gap: 12px;}
.premium-section-badge{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.premium-section-title{font-weight: 800; letter-spacing: 0.2px;}
.premium-section-sub{font-size: 0.75rem; color: rgba(255,255,255,0.65); margin-top: 2px;}
.premium-section-right{font-family: var(--font-data); font-weight: 800; opacity: 0.8;}


/* Premium badge finish */
.drink-mark{
  position: relative;
  overflow:hidden;
}
.drink-mark::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(120px 90px at 20% 20%, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 55%),
              linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  pointer-events:none;
  opacity:.85;
}
.drink-mark::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.12;
  pointer-events:none;
}
.drink-mark svg{
  position:relative;
  z-index:2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}


/* ============================================================
   Step 3 Polish: Section Identity Overrides (minimal, scalable)
   ============================================================ */
.drinks-screen {
  --section-accent: rgba(194,124,46,0.9);
  --section-glow: rgba(194,124,46,0.16);
  --section-bgA: rgba(255,255,255,0.02);
  --section-bgB: rgba(0,0,0,0.0);
  --section-pattern: none;
}

/* Editorial header gets a subtle identity wash */
.drinks-screen .premium-section-header {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, var(--section-bgA), var(--section-bgB));
  box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.03) inset;
}

.drinks-screen .premium-section-header::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-image: var(--section-pattern);
  opacity: 0.9;
  pointer-events:none;
  mix-blend-mode: screen;
}

.drinks-screen .premium-section-header::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 42px var(--section-glow);
  pointer-events:none;
}

.drinks-screen .premium-section-badge{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

.drinks-screen .premium-section-title{
  letter-spacing: 0.2px;
}

.drinks-screen .premium-section-sub{
  color: color-mix(in srgb, var(--txt-dim) 85%, var(--section-accent) 15%);
}

/* Category chips inherit a subtle accent when active */
.drinks-screen .cat-chip-premium[data-active="1"]{
  border-color: color-mix(in srgb, var(--section-accent) 35%, rgba(255,255,255,0.18) 65%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 10px 22px rgba(0,0,0,0.28);
}

/* Drink cards get a gentle per-section tint without looking like a theme switch */
.drinks-screen[data-cat=\"signature_cold\"] .tech-card,
.drinks-screen[data-cat=\"fruit_acid\"] .tech-card,
.drinks-screen[data-cat=\"mocktail\"] .tech-card,
.drinks-screen[data-cat=\"spirit\"] .tech-card,
.drinks-screen[data-cat=\"frappe\"] .tech-card,
.drinks-screen[data-cat=\"wellness\"] .tech-card,
.drinks-screen[data-cat=\"signature_hot\"] .tech-card,
.drinks-screen[data-cat=\"hot_classic\"] .tech-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.16));
}


/* ==========================================================================
   TOOLS PRO
   ========================================================================== */
.tools-root { padding: 14px 14px 40px; }
.tools-grid { display:flex; flex-direction:column; gap:10px; }
.tool-card { width:100%; text-align:left; display:flex; gap:12px; align-items:center; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.tool-card-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,255,255,0.06); }
.tool-card-title { font-weight:700; letter-spacing:0.2px; }
.tool-card-desc { font-size:0.86rem; opacity:0.85; margin-top:2px; }
.tool-card-cta { margin-left:auto; opacity:0.6; }

.tools-panel { margin-top:14px; }
.tool-view { padding: 10px 0; }
.tool-header h3 { margin: 0; }
.tool-row { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.tool-label { font-size:0.82rem; opacity:0.85; }
.tool-inp, .tool-select { padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); color:inherit; }
.tool-result { margin-top:12px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.tool-big { font-size:1.35rem; font-weight:800; }
.tool-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.tool-li { font-size:0.92rem; line-height:1.25rem; opacity:0.92; }

.tool-seg { display:flex; gap:8px; }
.tool-seg .seg { flex:1; padding:10px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:inherit; }
.tool-seg .seg.active { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.16); }

.btn-secondary { margin-top: 6px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:inherit; display:inline-flex; gap:8px; align-items:center; }



/* ==========================================================================
   BOTTOM NAV (LIQUID GLASS – SINGLE PILL, CLIPPED)
   Goal:
   - One (1) liquid-glass pill only (no extra base bar)
   - Icons NEVER escape the rounded pill when horizontal scrolling
   - Content behind remains visible via blur (true glass)
   ========================================================================== */

/* The glass pill itself (wrapper). It clips the scrolling nav inside. */
#bottom-dock{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: env(safe-area-inset-bottom);
  height: 64px;
  border-radius: 24px;
  z-index: 999;

  /* TRUE liquid glass */
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0.28) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.28);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);

  /* Critical: clip anything that would escape the pill */
  overflow: hidden;
}

/* The scrolling nav lives INSIDE the pill */
#bottom-nav{
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  /* Side padding matches the visual pill edges */
  padding: 0 22px;
  scroll-padding-left: 22px;
  scroll-padding-right: 22px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  background: transparent;
  border: none;
}

#bottom-nav::-webkit-scrollbar{ display:none; }
#bottom-nav .nav-item:first-child{ margin-left: 6px; }
#bottom-nav .nav-item:last-child{ margin-right: 6px; }

/* Micro transition on view changes */
#viewport{
  transition: opacity .12s ease, transform .12s ease;
  will-change: opacity, transform;
}
#viewport.view-enter{
  opacity: 0;
  transform: translateY(6px);
}

/* Bottom nav items (fixed height so active label never "pushes" outside the dock) */
#bottom-nav .nav-item{
  flex: 0 0 auto;
  width: 82px;
  min-width: 82px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px 8px;
  border-radius: 18px;

  /* keep the bar as the only 'glass' surface */
  border: 1px solid transparent;
  background: transparent;

  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease;
  scroll-snap-align: start;
  color: var(--txt-dim);
  position: relative;
  box-shadow: none;
}

/* FOUNDATIONS tab (routeKey = lab): show full label without truncation */
#bottom-nav .nav-item.active[data-route="lab"]{
  width: 112px;
  min-width: 112px;
}
#bottom-nav .nav-item.active[data-route="lab"] span{
  font-size: 9px;
  letter-spacing: 0.12em;
  left: 10px;
  right: 10px;
}

#bottom-nav .nav-item i{
  font-size: 1.08rem;
  opacity: .88;
  transform: translateY(0);
  transition: transform .12s ease, opacity .18s ease, filter .18s ease;
}

/* label sits INSIDE the pill (absolute), so it never changes layout */
#bottom-nav .nav-item span{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;

  display: none;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
}

#bottom-nav .nav-item.active{
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0.18) 100%);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
  color: var(--accent);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

#bottom-nav .nav-item.active i{
  opacity: 1;
  transform: translateY(-6px); /* make room for label without growing height */
  filter: drop-shadow(0 0 8px rgba(194,124,46,0.38));
}

#bottom-nav .nav-item.active span{ display:block; }

/* extra safety for long labels like FOUNDATIONS */
#bottom-nav .nav-item.active span{
  letter-spacing: .10em;
}

#bottom-nav .nav-item:active{ transform: translateY(0px) scale(.99); }

/* Discrete dot badge (used on HOME for new WOW) */
.nav-badge{
  position:absolute;
  top: 0px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(194,124,46,0.35);
}
.nav-badge.hidden{ display:none; }

/* Prevent horizontal drift */
html, body { overflow-x: hidden; }
body.modal-open{ overflow:hidden; }

/* ==========================================================================
   MORE SHEET
   ========================================================================== */
.more-sheet.hidden{ display:none; }
.more-sheet{ position:fixed; inset:0; z-index: 200; }
.more-sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.more-sheet-panel{
  position:absolute; left: 10px; right: 10px; bottom:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(12,12,12,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px;
}
.more-sheet-handle{
  width: 54px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 2px auto 10px;
}
.more-sheet-title{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .9;
  margin-bottom: 12px;
}
.more-sheet-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.more-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.more-item i{ opacity: .9; }
.more-item-label{
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .74rem;
  text-transform: uppercase;
  opacity: .88;
}

/* ==========================================================================
   TOOLS PRO (POLISH)
   ========================================================================== */
.tool-how{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
.tool-how-ic{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(255,255,255,0.06); }
.tool-how-title{ font-weight: 900; letter-spacing:.08em; text-transform: uppercase; font-size:.72rem; opacity:.9; }
.tool-how-text{ margin-top:4px; font-size:.92rem; line-height:1.35rem; color: var(--txt-dim); }

.tool-card{
  width:100%;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: inherit;
}
.tool-card:active{ transform: scale(.99); }

.tool-topbar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 6px 0 10px;
}
.tool-back{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.tool-back span{ font-weight: 800; letter-spacing:.14em; font-size:.70rem; text-transform:uppercase; opacity:.9; }
.tool-topmeta-kicker{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; opacity:.65; }
.tool-topmeta-title{ font-weight: 900; font-size: 1.05rem; }

.tool-inp:focus, .tool-select:focus, input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(194,124,46,0.55);
}

#viewport{ padding-bottom: 120px; }


/* TOOLS: Per-tool guide (school barista) */
.tool-guide{
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
}
.tool-guide-row{ display:flex; gap:10px; align-items:flex-start; }
.tool-guide-ic{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); opacity:0.9;
}
.tool-guide-title{ font-weight:800; letter-spacing:0.2px; }
.tool-guide-text{ font-size:0.92rem; opacity:0.9; margin-top:2px; line-height:1.25rem; }

.tool-guide-acc{ margin-top:10px; border-top:1px solid rgba(255,255,255,0.07); padding-top:10px; }
.tool-guide-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:0.78rem; letter-spacing:0.7px; text-transform:uppercase;
  color: rgba(255,255,255,0.85);
}
.tool-guide-acc summary::-webkit-details-marker{ display:none; }
.tool-guide-acc summary i{ opacity:0.65; transition: transform 0.18s ease; }
.tool-guide-acc[open] summary i{ transform: rotate(180deg); }

.tool-guide-list{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.tool-guide-li{ display:flex; gap:10px; font-size:0.92rem; opacity:0.92; line-height:1.25rem; }
.tool-step{
  width:22px; height:22px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background: rgba(194,124,46,0.18); border:1px solid rgba(194,124,46,0.25);
  font-weight:900; font-size:0.78rem;
}
.tool-bullet{ width:22px; display:flex; justify-content:center; opacity:0.7; }

.tool-guide-tip{
  margin-top:10px; display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:14px; background: rgba(194,124,46,0.10);
  border:1px solid rgba(194,124,46,0.16);
  font-size:0.92rem; line-height:1.25rem;
}
.tool-guide-tip i{ margin-top:2px; opacity:0.9; }

/* Disabled input look */
.tool-inp.is-disabled, .tool-inp[disabled]{
  opacity:0.55;
  filter: grayscale(0.1);
}


/* === TOOLS PRO: KPIs / Recommendations (v15.2 polish) === */
.tool-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:520px){
  .tool-kpis{ grid-template-columns: 1fr; }
}
.tool-kpi{
  padding:12px;
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.kpi-k{
  font-size:0.72rem;
  letter-spacing:0.7px;
  text-transform:uppercase;
  opacity:0.7;
}
.kpi-v{
  margin-top:2px;
  font-size:1.1rem;
  font-weight:900;
}
.kpi-s{
  margin-top: 6px;
  font-size:0.85rem;
  opacity:0.9;
}

.tag{
  display:inline-flex;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight:800;
  font-size:0.78rem;
}
.tag.ok{
  border-color: rgba(60, 200, 120, 0.35);
  background: rgba(60, 200, 120, 0.12);
}
.tag.warn{
  border-color: rgba(240, 190, 60, 0.40);
  background: rgba(240, 190, 60, 0.12);
}

.tool-rec{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.tool-rec-title{
  font-weight:900;
  margin-bottom:8px;
}
.tool-rec-list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  line-height:1.25rem;
  opacity:0.95;
}


.tool-error{display:flex; gap:14px; padding:16px; border:1px solid rgba(255,255,255,0.12); border-radius:18px; background:rgba(255,255,255,0.04);}
.tool-error-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,120,0,0.12);border:1px solid rgba(255,120,0,0.18);}
.tool-error-title{font-weight:700; margin-bottom:4px;}
.tool-error-text{color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.35;}
.tool-error-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}


/* TOOLS PRO v2 (3 core tools) */
.tool-panel{ margin-top:10px; }

.tool-form{ margin-top:12px; }
.tool-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 430px){
  .tool-form-grid{ grid-template-columns: 1fr; }
}
.tool-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.86rem;
  opacity:0.92;
}
.tool-field.metric{ opacity:0.92; }
.tool-field.tool-check{
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.tool-field.tool-check input{ transform: scale(1.05); }

.tool-actions{ display:flex; gap:10px; margin-top:12px; }
.tool-actions .btn{ flex:1; }

.tool-out{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }

.tool-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 430px){
  .tool-kpis{ grid-template-columns: 1fr; }
}
.tool-kpi{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius:16px;
  padding:10px 12px;
}
.tool-kpi-l{ font-size:0.74rem; opacity:0.72; text-transform:uppercase; letter-spacing:0.6px; }
.tool-kpi-v{ font-weight:900; margin-top:2px; }

.tool-block{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius:18px;
  padding:12px;
}
.tool-block.primary{
  border-color: rgba(194,124,46,0.25);
  background: rgba(194,124,46,0.10);
}
.tool-block.warn{
  border-color: rgba(255,120,120,0.22);
  background: rgba(255,120,120,0.08);
}
.tool-block-tt{ font-weight:1000; letter-spacing:0.2px; margin-bottom:6px; }
.tool-block-li{ opacity:0.92; line-height:1.25rem; margin:4px 0; }

.tool-notes{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius:18px;
  padding:12px;
}
.tool-notes-tt{
  font-weight:1000;
  font-size:0.78rem;
  letter-spacing:0.8px;
  text-transform:uppercase;
  opacity:0.85;
  margin-bottom:6px;
}
.tool-note{ opacity:0.92; line-height:1.25rem; margin:4px 0; }

.tool-callout{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  opacity:0.95;
}
.tool-callout i{ margin-top:2px; opacity:0.8; }

.tool-gloss{
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:12px;
}
.tool-gloss-hd{
  font-weight:1000;
  font-size:0.78rem;
  letter-spacing:0.8px;
  text-transform:uppercase;
  opacity:0.85;
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.tool-gloss-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.tool-gloss-item{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
  align-items:start;
}
@media (max-width: 430px){
  .tool-gloss-item{ grid-template-columns: 1fr; }
}
.tool-gloss-item b{ font-weight:1000; }
.tool-gloss-item span{ opacity:0.9; line-height:1.25rem; }


/* TOOLS PRO — layout */
.tools-shell{display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 160px);padding-bottom:18px;}
.tools-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/brew/method-espresso.webp") type("image/webp"),
    url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.75) 100%
  );
  pointer-events:none;
}
.tools-hero > *{ position:relative; z-index:1; }

.tools-hero-title{
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
  font-size:2.05rem;
}
.tools-hero-sub{
  margin-top: 6px;
  color: #ffffff;
  font-size:0.95rem;
  line-height:1.25;
  max-width: 36ch;
}
.tools-grid{display:flex;flex-direction:column;gap:10px;}
.tool-card{cursor:pointer;}
.tool-spacer{flex:1 1 auto;}


/* TOOLS PRO — premium buttons */
.tool-actions{ display:flex; gap:12px; margin-top:14px; }
@media (max-width:430px){ .tool-actions{ flex-direction:column; } }

.tool-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  border-radius: 16px;
  padding: 14px 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 48px;
  width: 100%;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.tool-btn:active{ transform: scale(0.99); }
.tool-btn i{ font-size: 0.95rem; opacity:0.95; }

.tool-btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.18);
}
.tool-btn-primary:hover{ background: rgba(255,255,255,0.10); }

.tool-btn-ghost{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  opacity: 0.92;
}
.tool-btn-ghost:hover{ background: rgba(255,255,255,0.05); }


/* TOOLS PRO (CORE) */

.tools-shell{padding:16px 16px 0 16px;
  /* Hard reset of any section tint leaking from other modules */
  --tools-accent: rgba(194,124,46,0.95);
  --tools-accent-soft: rgba(194,124,46,0.18);
  --tools-accent-ink: rgba(194,124,46,0.80);
}
.tools-shell a{ color: inherit; }
.tools-shell *{ -webkit-tap-highlight-color: transparent; }
.tools-hero{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); border-radius:16px; padding:14px 14px; margin-bottom:14px;}
.tools-hero-title{font-size:14px; letter-spacing:0.18em; opacity:0.9; font-weight:700;}
.tools-hero-sub{margin-top: 6px; font-size:13px; opacity:0.75; line-height:1.35;}
.tools-body{display:flex; flex-direction:column; gap:14px;}
.tools-home{display:flex; flex-direction:column; gap:12px;}
.tools-help{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:14px; padding:12px;}
.tools-help-title{font-weight:700; font-size:13px; margin-bottom:6px;}
.tools-help-text{font-size:13px; opacity:0.8; line-height:1.35;}
.tools-help-muted{display:block; margin-top: 6px; opacity:0.7;}
.tools-grid{display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:900px){.tools-grid{grid-template-columns:1fr 1fr 1fr;}}
.tools-card{width:100%; text-align:left; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px; cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: var(--txt-main);
  -webkit-tap-highlight-color: transparent;
}

/* TOOLS cards: full image like "Consejo del día" (no mini-thumbnail-only) */
.tools-card.tools-card--media{
  display:block;
  padding:0;
  overflow:hidden;
}
.tools-card.tools-card--media .tools-card-media{
  height:86px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.tools-card.tools-card--media .tools-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.62) 100%);
}
.tools-card.tools-card--media .tools-card-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
}
.tools-card.tools-card--media .tools-card-body{
  flex:1;
}

/* --------------------------------------------------------------------------
   GLOBAL iOS BUTTON/LINK COLOR LOCK
   Safari iOS applies a blue tint to <button>/<a> when color isn't explicitly
   set. Tech cards and back buttons are <button> elements in several sections
   (FOUNDATIONS, TOOLS, etc.). Force theme colors to prevent the default blue.
   -------------------------------------------------------------------------- */

button,
button:visited,
button:active,
button:focus {
  -webkit-appearance: none;
  appearance: none;
}

/* Primary system buttons */
.btn,
.btn:visited,
.btn:active,
.btn:focus {
  color: var(--txt-main);
}

/* Card-buttons used in Foundations and other menus */
button.tech-card,
button.tech-card:visited,
button.tech-card:active,
button.tech-card:focus,
button.tools-card,
button.tools-card:visited,
button.tools-card:active,
button.tools-card:focus {
  color: var(--txt-main);
  -webkit-tap-highlight-color: transparent;
}

/* Ensure inline text inherits unless explicitly set (e.g., var(--txt-dim)) */
button.tech-card *,
button.tools-card * {
  color: inherit;
}
.tools-card:active{transform:scale(0.99);}
.tools-card:focus,
.tools-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset, 0 12px 26px rgba(0,0,0,0.35);
}
.tools-card-ic{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.28));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
  color: var(--tools-accent);
}
.tools-card-title{font-weight:800; font-size:14px; color: var(--txt-main);}
.tools-card-desc{margin-top:4px; font-size:12.5px; opacity:0.72; line-height:1.35; color: color-mix(in srgb, var(--txt-main) 78%, var(--txt-dim) 22%);}
.tools-card-go{margin-left:auto; opacity:0.75; color: var(--tools-accent-ink);}

.tool-frame{display:flex; flex-direction:column; gap:12px;}
.tool-topbar{display:flex; align-items:center; gap:10px;}
.tool-back{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.02); color:inherit; border-radius:999px; padding:8px 10px; font-size:12.5px; display:flex; align-items:center; gap:8px;}
.tool-topbar-title{font-weight:900; letter-spacing:0.02em;}
.tool-topbar-spacer{flex:1;}

.tool-guide{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-guide-title{font-weight:900; margin-bottom:10px;}
.tool-guide-row{display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.06);}
.tool-guide-row:first-of-type{border-top:none;}
.tool-guide-k{font-size:12px; opacity:0.7; font-weight:700;}
.tool-guide-v{font-size:13px; opacity:0.82; line-height:1.35;}
.tool-guide-tip{margin-top:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); border-radius:12px; padding:10px; font-size:13px; opacity:0.85; display:flex; gap:8px; align-items:flex-start;}
.tool-guide-tip-tag{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:20px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); font-size:0.68rem; letter-spacing:0.18em; font-weight:900; opacity:0.9;}
.tool-guide-tip-tag{
  border-color: rgba(194,124,46,0.28);
  background: rgba(194,124,46,0.08);
  color: var(--tools-accent-ink);
}

.tool-panel{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:12px;}
.tool-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tool-grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
@media (max-width:420px){.tool-grid-2{grid-template-columns:1fr;} .tool-grid-3{grid-template-columns:1fr;}}
.tool-field span{display:block; font-size:12px; opacity:0.7; margin-bottom:6px; font-weight:700;}
.tool-input,.tool-select{width:100%; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.15); color:inherit; border-radius:12px; padding:10px 10px; font-size:14px; outline:none;}
.tools-shell .tool-input:focus,.tools-shell .tool-select:focus{
  border-color: rgba(194,124,46,0.45);
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
}
.tool-actions{display:flex; gap:10px;}
@media (max-width:420px){.tool-actions{flex-direction:column;}}
.tool-btn{border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:12px 12px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;}
.tool-btn-primary{background:rgba(255,255,255,0.10);}
.tool-btn-ghost{background:transparent; opacity:0.9;}
.tool-btn:active{transform:scale(0.99);}
.tool-output{display:flex; flex-direction:column; gap:10px; margin-top:4px;}

.tool-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:420px){.tool-kpis{grid-template-columns:1fr;}}
.tool-kpi{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:14px; padding:10px;}
.tool-kpi-k{font-size:12px; opacity:0.7; font-weight:700;}
.tool-kpi-v{font-size:16px; font-weight:900; margin-top:2px;}
.tool-actions-stack{display:flex; flex-direction:column; gap:10px;}
.tool-action-card{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); border-radius:16px; padding:12px;}
.tool-action-title{font-weight:900;}
.tool-action-body{margin-top: 6px; font-size:13px; opacity:0.8; line-height:1.35;}
.tool-dont{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-dont-title{font-weight:900; margin-bottom:6px;}
.tool-dont ul{margin:0; padding-left:18px;}
.tool-dont li{margin:6px 0; font-size:13px; opacity:0.8; line-height:1.35;}

.tool-note{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-note-title{font-weight:900; margin-bottom:6px;}
.tool-note-text{font-size:13px; opacity:0.82; line-height:1.35;}
.tool-muted{opacity:0.72;}

.tool-glossary{border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); border-radius:16px; padding:12px;}
.tool-glossary-title{font-weight:900; margin-bottom:6px;}
.tool-glossary-item{font-size:13px; opacity:0.82; line-height:1.35; margin-top:8px;}

.tool-sep{height:1px; background:rgba(255,255,255,0.06); margin:6px 0;}
.tool-inline-title{font-weight:900; font-size:13px; opacity:0.9; margin-top:2px;}

.tools-bottom-spacer{height:22px;}

/* =============================
   TOOLS (Sprint B) – Premium UI helpers
   ============================= */
.tools-backbtn-txt{font-weight:900;}

.tools-btn-lg{padding:10px 12px; border-radius:12px;}
.tools-btn-lg .tools-btn-lg-txt{margin-left:8px; font-weight:900;}

.tools-btn-pill{padding:8px 10px; border-radius:999px;}

.tools-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 2px;
}
.tools-tabbtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--txt-main);
  font-weight:900;
  letter-spacing:0.02em;
  cursor:pointer;
}
.tools-tabbtn i{opacity:0.9;}
.tools-tabbtn span{font-size:0.92rem;}
.tools-tabbtn.is-active,
.tools-tabbtn[aria-selected="true"]{
  background: var(--tools-accent-soft);
  border-color: color-mix(in srgb, var(--tools-accent) 40%, rgba(255,255,255,0.10));
  box-shadow: 0 0 0 1px var(--tools-accent-soft) inset;
}
.tools-tabbtn:active{transform:scale(0.99);}
.tools-tabbtn:focus-visible{outline:none; box-shadow: 0 0 0 2px var(--tools-accent-soft);}

/* Latte Lab panels */
.ll-panel{display:none;}
.ll-panel.is-active{display:block;}



/* =========================
   TOOLS PRO — Premium UI (v16.2)
   Align TOOLS visuals with the rest of Coffee OS (dark, copper, minimal).
   ========================= */
.tools-home{ display:flex; flex-direction:column; gap:14px; }
.tools-help{
  border:1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(0,0,0,0.20));
  border-radius: 16px;
  padding: 14px;
}
.tools-help-title{ font-weight: 900; letter-spacing: .2px; }
.tools-help-text{ margin-top: 6px; font-size:0.92rem; line-height:1.3rem; opacity:0.9; }
.tools-help-muted{ display:block; margin-top: 6px; opacity:0.72; font-size:0.86rem; }

.tools-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 860px){ .tools-grid{ grid-template-columns: 1fr 1fr 1fr; } }

.tools-card{
  width:100%;
  text-align:left;
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  border-radius: 16px;
  padding: 14px;
  cursor:pointer;
  transition: border-color 160ms ease, background 160ms ease;
  /* iOS button/link defaults can force blue text — lock to our theme */
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: var(--txt-main);
}
.tools-card:hover{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.035);
}
.tools-card:active{
  background: rgba(255,255,255,0.04);
}
.tools-card-ic{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.28));
  border: 1px solid rgba(255,255,255,0.10);
  /* Match the capsule stroke + give premium glow */
  box-shadow:
    0 0 0 1px var(--tools-accent-soft) inset,
    0 10px 22px rgba(0,0,0,0.35),
    0 0 14px color-mix(in srgb, var(--tools-accent) 28%, transparent);
  color: var(--tools-accent);
}
.tools-card-ic svg{opacity:0.98; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tools-accent) 28%, transparent));}
/* Force icon stroke to accent (prevents iOS button tint/visited weirdness) */
.tools-card-ic svg, .tools-card-ic svg *{ stroke: var(--tools-accent); }
.tools-card-title{ font-weight: 900; letter-spacing: .2px; color: var(--txt-main); }
.tools-card-desc{ margin-top:3px; font-size:0.9rem; opacity:0.75; line-height:1.25rem; color: color-mix(in srgb, var(--txt-main) 78%, var(--txt-dim) 22%); }
.tools-card-go{ margin-left:auto; opacity:0.80; font-size: 1.2rem; line-height: 1; color: var(--tools-accent-ink); }

.tool-panel{
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 14px;
}
.tool-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 520px){ .tool-grid-2{ grid-template-columns: 1fr; } }

.tool-field{ display:flex; flex-direction:column; gap:7px; }
.tool-field > span{ font-size:0.78rem; opacity:0.75; letter-spacing:0.5px; text-transform:uppercase; }

.tool-input, .tool-select{
  width:100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--txt-main);
  outline: none;
}
.tool-input{ font-family: var(--font-data); }
.tool-input:focus, .tool-select:focus{
  border-color: rgba(194,124,46,0.40);
  box-shadow: 0 0 0 3px rgba(194,124,46,0.12);
}

.tool-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}
@media (max-width: 520px){ .tool-actions{ flex-direction:column; } }

.tool-btn{
  width:100%;
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--txt-main);
  font-weight: 900;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.tool-btn i{ opacity:0.9; }
.tool-btn:active{ transform: scale(0.99); }

.tool-btn-primary{
  background: rgba(194,124,46,0.18);
  border-color: rgba(194,124,46,0.28);
}
.tool-btn-primary:hover{
  border-color: rgba(194,124,46,0.42);
  box-shadow: 0 16px 38px rgba(0,0,0,0.35), 0 0 0 1px rgba(194,124,46,0.10) inset;
}

.tool-btn-ghost{
  background: rgba(255,255,255,0.03);
}



/* ==========================================================================
   BREW | PRESET BANNER (from TOOLS)
   ========================================================================== */
.preset-banner{
  margin: 10px 0 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(1200px 400px at 10% 0%, rgba(194,124,46,0.18), transparent 55%), rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.preset-banner-top{ display:flex; flex-direction:column; gap:6px; }
.preset-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:0.9px;
  font-size: 0.72rem; color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}
.preset-badge i{ color: var(--accent); }
.preset-title{
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
}
.preset-sub{
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
}
.preset-banner-actions{
  display:flex; gap:10px; margin-top: 12px;
}
.preset-btn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.94);
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 46px;
  width: 100%;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.preset-btn:active{ transform: scale(0.99); }
.preset-btn-primary{
  background: linear-gradient(180deg, rgba(194,124,46,0.28), rgba(194,124,46,0.10));
  border-color: rgba(194,124,46,0.35);
}
.preset-btn-ghost{
  background: rgba(255,255,255,0.04);
}
@media (max-width:430px){ .preset-banner-actions{ flex-direction:column; } }

/* Unified pro input (used in My Recipes + Tools) */
.input-pro{
  width:100%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  color:inherit;
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
.input-pro:focus{ border-color: rgba(194,124,46,0.65); box-shadow: 0 0 0 3px rgba(194,124,46,0.12); }


/* Foundations media */
.foundation-media{margin-top:12px;}
.foundation-img{display:block;width:100%;max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,140,61,0.12);}
.foundation-caption{margin-top:8px;font-size:12px;line-height:1.35;color:rgba(255,255,255,0.55);}


/* =======================
   Mini button (inline) 
   Used for small CTAs like "Agregar a Alacena" without breaking layout
   ======================= */
.btn-arch.btn-mini{
  width:auto;
  padding:10px 12px;
  border-radius:12px;
  font-size:0.72rem;
  letter-spacing:.6px;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-add-pantry{
  margin-top:8px;
}


/* =======================
   FOOD Manual (Guide)
   ======================= */
.food-manual section{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.food-manual h3{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.04em;
}
.food-manual p{
  margin:8px 0 0 0;
  color:rgba(255,255,255,0.80);
  line-height:1.45;
}
.food-manual ul, .food-manual ol{
  margin:10px 0 0 18px;
  padding:0;
  color:rgba(255,255,255,0.82);
  line-height:1.45;
}
.food-manual li{ margin:6px 0; }

/* FOOD | single-flow ops pack (keeps steps + standard in one card) */
.food-ops{ }
.food-ops-sep{
  height:1px;
  background:rgba(255,255,255,0.08);
  margin-top:12px;
}
.food-ops-title{
  margin-top:10px;
  font-weight:900;
  letter-spacing:0.04em;
}
.food-ops-block{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}
.food-ops-h{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.food-ops-b{ margin-top:8px; }
.food-ops-ul{ margin:8px 0 0 18px; }
.food-ops-ul li{ margin:6px 0; }

/* =====================================================================
   FOOD | SOP Renderer (tables-first)
   ===================================================================== */
.sop-table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(0,0,0,0.18);
}
.sop-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.sop-th, .sop-td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  vertical-align:top;
}
.sop-th{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:900;
  position:sticky;
  top:0;
  background:rgba(12,12,12,0.92);
  backdrop-filter: blur(10px);
}
.sop-step{ width:70px; text-align:center; font-weight:900; }
.sop-main{ font-weight:900; }
.sop-sub{ color:rgba(255,255,255,0.82); }
.sop-ok{ color:rgba(255,255,255,0.86); }
.sop-fix{ color:rgba(255,255,255,0.78); }

.sop-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.sop-param{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

/* =====================================================================
   FOOD | SOP Guided Mode (dots + play + step timer)
   ===================================================================== */
.sop-guide{
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}
/* SOP: tabs (overview first, guided optional) */
.sop-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
}
.sop-shell{ margin-top:12px; }
.sop-panel{ margin-top:12px; }
.sop-tabbtn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--txt-dim);
  font-weight:900;
  letter-spacing:0.04em;
  cursor:pointer;
}
.sop-tabbtn.active{
  background:rgba(0,0,0,0.25);
  border-color:rgba(255,255,255,0.12);
  color:var(--txt);
}

.sop-guide-bar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sop-dots{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.sop-dot{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  /* Prevent iOS/Safari default blue tint on controls */
  -webkit-appearance:none;
  appearance:none;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.sop-dot-n{
  font-size:0.85rem;
  font-weight:900;
  color:rgba(255,255,255,0.78) !important;
  opacity:0.95;
}
.sop-dot:focus-visible{
  outline:none;
  border-color:rgba(194,124,46,0.65);
  box-shadow:
    0 0 0 3px rgba(194,124,46,0.14),
    0 0 0 1px rgba(194,124,46,0.20) inset;
}

/* Coffee OS sober copper accent (no "system blue") */
.sop-dot.active{
  background:rgba(194,124,46,0.18);
  border-color:rgba(194,124,46,0.55);
  box-shadow:
    0 0 0 4px rgba(194,124,46,0.10),
    0 10px 22px rgba(0,0,0,0.35);
}
.sop-dot.active .sop-dot-n{ opacity:1; color:rgba(247,236,220,0.95) !important; }

/* Optional: completed steps (when class "done" is applied) */
.sop-dot.done{
  background:rgba(194,124,46,0.10);
  border-color:rgba(194,124,46,0.35);
}
.sop-dot.done .sop-dot-n{ color:rgba(240,224,200,0.88) !important; }
.sop-guide-btns{ display:flex; gap:8px; align-items:center; }

.sop-guide-card{
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(0,0,0,0.20);
}
.sop-guide-meta{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sop-guide-row{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap:10px;
  margin-top:10px;
}
.sop-guide-k{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:900;
}
.sop-guide-v{ font-weight:700; }

.sop-timer{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background:rgba(255,255,255,0.02);
}
.sop-timer-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sop-time{
  font-size:2.0rem;
  font-weight:900;
  letter-spacing:0.08em;
  margin-top:10px;
}
.sop-timer-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.sop-timer-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.sop-details summary{
  cursor:pointer;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  font-weight:900;
}
.sop-details[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.sop-k{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.sop-v{ margin-top: 6px; font-weight:900; }

.sop-qc{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.sop-qc-col{
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}
.sop-qc-h{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--txt-dim);
  font-weight:800;
}
.sop-ul{ margin:8px 0 0 18px; }
.sop-ul li{ margin:6px 0; }

@media (max-width: 520px){
  .sop-grid{ grid-template-columns:1fr; }
  .sop-qc{ grid-template-columns:1fr; }
}

/* FOOD SOP polish */
.sop-table{ border-collapse:separate; border-spacing:0; }
.sop-table tr:nth-child(even) .sop-td{ background:rgba(255,255,255,0.02); }
.sop-table tr:hover .sop-td{ background:rgba(255,255,255,0.04); }
.sop-th, .sop-td{ padding:10px 10px; }
.sop-th{ position:sticky; top:0; backdrop-filter:blur(8px); }
.sop-shell{ gap:14px; }
.sop-guide-card{ padding:14px; }
.sop-guide-row{ gap:10px; }
.sop-time{ font-variant-numeric:tabular-nums; }

/* Fix #8: SOP table → stacked cards on mobile */
@media (max-width: 520px){
  .sop-table{ min-width:0; }
  .sop-table thead{ display:none; }
  .sop-table tbody tr{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    margin-bottom:10px;
    padding:10px;
    background:rgba(255,255,255,0.02);
  }
  .sop-table .sop-td{
    display:block;
    padding:4px 0;
    border:none;
  }
  .sop-table .sop-td.sop-step{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--txt-dim);
    text-align:left;
    width:auto;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:6px;
  }
  .sop-table .sop-td .sop-sub::before{ content:'Criterio: '; font-weight:700; color:var(--txt-dim); font-size:0.78rem; }
  .sop-table .sop-td .sop-ok::before{ content:'✓ OK: '; font-weight:700; font-size:0.78rem; }
  .sop-table .sop-td .sop-fix::before{ content:'⚠ Fix: '; font-weight:700; font-size:0.78rem; }
}

/* Fix #9: Food chip row CSS class (replaces inline JS styles) */
.food-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scroll-snap-type:x mandatory;
}

/* Fix #13: food-specific fallback icon styling */
.food-cat-mark .fa-utensils,
.food-thumb-icon .fa-utensils{ color:var(--accent); }


/* ==========================================================================
   BUSINESS (V1)
   ========================================================================== */
.biz-form{ display:block; }
.biz-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 520px){
  .biz-grid{ grid-template-columns: 1fr; }
}

.biz-help{
  display:block;
  margin-top: 6px;
  font-size:0.78rem;
  color: rgba(255,255,255,0.55);
  line-height:1.25;
}
.biz-help code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.75rem;
  color: rgba(255,255,255,0.7);
}
.biz-helpbox{
  border:1px solid var(--border-dim);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  padding:10px 12px;
  margin-bottom:12px;
  box-sizing:border-box;
  width:100%;
  grid-column: 1 / -1;
}
.biz-helpbox summary{
  cursor:pointer;
  font-weight:800;
  letter-spacing:0.02em;
  color: var(--txt);
  list-style:none;
}
.biz-helpbox summary::-webkit-details-marker{ display:none; }
.biz-helpbox ul{
  margin:10px 0 0 18px;
  color: rgba(255,255,255,0.75);
  font-size:0.88rem;
  line-height:1.35;
}
.biz-helpbox li{ margin:6px 0; }

.biz-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.85rem;
  color:var(--txt-dim);
}
.biz-field input, .biz-field select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border-dim);
  background: rgba(255,255,255,0.03);
  color: var(--txt);
  outline:none;
}
.biz-field input::placeholder{ color: rgba(255,255,255,0.35); }

/* Business / Operations / CRM: enforce dark inputs even when not wrapped in .biz-field */
#biz-body input,
#biz-body select,
#biz-body textarea{
  border-radius:12px;
  border:1px solid var(--border-dim);
  background: rgba(255,255,255,0.03);
  color: var(--txt);
  padding:10px 10px;
  outline:none;
}
#biz-body input::placeholder,
#biz-body textarea::placeholder{ color: rgba(255,255,255,0.35); }

/* =========================================================
   BUSINESS | Stepper + Health Check
   ========================================================= */
.biz-stepper{
  display:grid;
  gap:10px;
}
.biz-step{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(0,0,0,0.10);
}
.biz-step-ic{
  font-size:1.1rem;
  width:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.biz-step-body{ flex:1; }
.biz-step-title{ font-weight:1000; }
.biz-step-hint{ color:var(--txt-dim); font-size:0.9rem; margin-top:2px; }
.biz-health{
  padding:10px;
  border:1px dashed rgba(255,255,255,0.14);
  border-radius:14px;
  background: rgba(0,0,0,0.06);
}

.biz-breakdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.biz-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border:1px solid var(--border-dim);
  border-radius:12px;
  background: rgba(255,255,255,0.02);
}
.biz-row.err{ border-color: rgba(255,120,120,0.35); background: rgba(255,120,120,0.06); }
.biz-row-main{ min-width:0; }
.biz-row-name{
  font-weight:800;
  letter-spacing:0.02em;
  color: var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.biz-row-meta{ margin-top:2px; font-size:0.8rem; color: var(--txt-dim); }
.biz-row-cost{ font-weight:900; white-space:nowrap; }
.biz-miss{
  font-weight:900;
  color: rgba(255,180,120,0.95);
}

.tool-warn{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,180,120,0.35);
  background: rgba(255,180,120,0.08);
  color: rgba(255,220,190,0.95);
  font-size:0.9rem;
}



/* BUSINESS: align action buttons in Cost Simulator */
.biz-btn-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.biz-btn-row .biz-btn{
  flex:1;
  justify-content:center;
  margin-top:0; /* override .btn-secondary margin-top */
}
.biz-btn-row .biz-btn-accent{
  border-color: rgba(194,124,46,0.45);
  background: rgba(194,124,46,0.10);
}
.biz-btn-row .biz-btn-accent:hover{
  background: rgba(194,124,46,0.16);
  border-color: rgba(194,124,46,0.60);
}


/* ==========================================================================
   DASHBOARD V2 (HOME) — REMOVED (V3 active)
   ========================================================================== */

/* (home-v2 removed — V3 is the active layout) */

/* ==========================================================================
   DASHBOARD V3 (HOME) — full-bleed hero photo (Apple-like)
   ========================================================================== */

.home-v3{ padding: 0 0 80px; }

.hero-home{
  position: relative;
  height: 48vh;
  min-height: 360px;
  max-height: 520px;
  overflow: hidden;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
}

.hero-media{
  position:absolute;
  inset:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.02);
}

.hero-scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.45) 38%,
    rgba(0,0,0,0.88) 100%
  );
}

.hero-vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 78% 18%, rgba(196,138,73,.10), transparent 60%);
  pointer-events:none;
}

.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 54px 18px 20px;
}

.hero-top{
  position:absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.hero-kicker{
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.hero-gear{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--txt-main);
  backdrop-filter: blur(8px);
}
.hero-gear:active{ transform: scale(.98); }

/* Mini hero inside cards (Dashboard: Progreso real) */
.mini-hero{
  position: relative;
  height: 138px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.mini-hero-media{
  position:absolute;
  inset:0;
}

.mini-hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 72% 55%;
  transform: scale(1.02);
}

.mini-hero-scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.50) 55%,
    rgba(0,0,0,.88) 100%
  );
}

.mini-hero-content{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}

.mini-hero-kicker{
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.mini-hero-title{
  font-weight: 900;
  font-size: 1.06rem;
  margin-top: 4px;
  color: rgba(255,255,255,.96);
}

.mini-hero-score{
  font-weight: 900;
  color: var(--accent);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  padding: 8px 10px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-brand{
  font-size: .78rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}

.hero-greet{
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
}

.hero-sub{
  margin-top: 10px;
  font-size: .98rem;
  color: rgba(255,255,255,.74);
  line-height: 1.35;
  max-width: 34ch;
}

.hero-actions{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-actions .hero-btn{ width: 100%; margin-top: 0; }

.hero-meta{
  margin-top: 16px;
  display:flex;
  width: 100%;
  gap: 12px;
}

/* HOME hero pills: keep the same visual style, just distribute evenly (50/50) */
.hero-meta .pill{
  flex: 1;
  min-width: 0;
  justify-content: center;
}

/* Align the rest of the dashboard to feel premium under the hero */
.home-v3 .dash-card,
.home-v3 .dash-explore,
.home-v3 .dash-bridge{
  padding: 0 14px;
}
.home-v3 .dash-card{ margin-top: 16px; }
.home-v3 .dash-explore{ margin-top: 18px; }
.home-v3 .dash-bridge{ margin-top: 16px; }

/* dash-hero V2 removed — V3 hero-home is the active layout */

/* Brand in-section rows were visually breaking layouts.
   We revert sections to the original clean layout and use ONLY the global watermark. */
.brand-section-row,
.brand-section{
  display: none !important;
}

.dash-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: .78rem; color: var(--txt-main);
  font-family: var(--font-data);
}

.dash-card { margin-top: 14px; }
.dash-card-h { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.dash-card-k { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--txt-dim); }
.dash-card-t { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }
.dash-card-s { font-size: .88rem; color: var(--txt-dim); margin-top: 6px; line-height: 1.35; }
.dash-card-ico { font-size: 1.15rem; color: var(--accent); margin-top: 2px; }

.dash-btn { width: 100%; margin-top: 12px; }

.dash-explore { margin-top: 18px; }
.dash-section-h { margin-bottom: 10px; }
.dash-section-k { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--txt-dim); }
.dash-section-t { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dash-tile {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--txt-main);
}

/* Photo tiles (Apple-like) */
.dash-tile.photo{
  min-height: 116px;
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .dash-tile.photo:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
  .dash-tile.photo:hover::before{ transform: scale(1.12); opacity: .78; }
}
.dash-tile.photo:focus-visible{ outline: 2px solid rgba(255,255,255,.18); outline-offset: 2px; }
.dash-tile.photo:focus-visible::before{ transform: scale(1.12); opacity: .78; }
.dash-tile.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  opacity: .70;
  filter: saturate(1.04) contrast(1.02);
  transition: transform .55s ease, opacity .25s ease;
}
.dash-tile.photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.62) 70%,
    rgba(0,0,0,.78) 100%
  );
}
.dash-tile.photo > *{ position: relative; z-index: 2; }

/* Per-route backgrounds (jpg fallback + webp via image-set) */
.dash-tile.tile-brew{ --tile-bg: url("../img/hero/tiles/brew.jpg"); --tile-bg: image-set(url("../img/hero/tiles/brew.webp") type("image/webp"), url("../img/hero/tiles/brew.jpg") type("image/jpeg")); }
.dash-tile.tile-drinks{ --tile-bg: url("../img/hero/tiles/drinks.jpg"); --tile-bg: image-set(url("../img/hero/tiles/drinks.webp") type("image/webp"), url("../img/hero/tiles/drinks.jpg") type("image/jpeg")); }
.dash-tile.tile-food{ --tile-bg: url("../img/hero/tiles/food.jpg"); --tile-bg: image-set(url("../img/hero/tiles/food.webp") type("image/webp"), url("../img/hero/tiles/food.jpg") type("image/jpeg")); }
.dash-tile.tile-tools{ --tile-bg: url("../img/hero/tiles/tools.jpg"); --tile-bg: image-set(url("../img/hero/tiles/tools.webp") type("image/webp"), url("../img/hero/tiles/tools.jpg") type("image/jpeg")); }
.dash-tile.tile-foundations{ --tile-bg: url("../img/hero/tiles/foundations.jpg"); --tile-bg: image-set(url("../img/hero/tiles/foundations.webp") type("image/webp"), url("../img/hero/tiles/foundations.jpg") type("image/jpeg")); }
.dash-tile.tile-business{ --tile-bg: url("../img/hero/tiles/business.jpg"); --tile-bg: image-set(url("../img/hero/tiles/business.webp") type("image/webp"), url("../img/hero/tiles/business.jpg") type("image/jpeg")); }


/* FOUNDATIONS — module photo tiles */
.foundations-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/foundations/foundations-hero.webp") type("image/webp"),
    url("../img/hero/foundations/foundations-hero.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.foundations-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.72) 100%
  );
}
.foundations-hero > *{ position:relative; z-index:1; }

.foundations-hero-title{
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:14px;
  margin:0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.foundations-hero-sub{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  opacity:0.82;
  max-width: 68ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.foundations-tiles{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.foundations-tiles .dash-tile.photo{
  min-height: 132px;
}

.dash-tile.tile-found-coffee_basics{ --tile-bg: image-set(url("../img/hero/foundations/coffee_basics.webp") type("image/webp"), url("../img/hero/foundations/coffee_basics.jpg") type("image/jpeg")); }
.dash-tile.tile-found-extraction_fundamentals{ --tile-bg: image-set(url("../img/hero/foundations/extraction_fundamentals.webp") type("image/webp"), url("../img/hero/foundations/extraction_fundamentals.jpg") type("image/jpeg")); }
.dash-tile.tile-found-grind_water{ --tile-bg: image-set(url("../img/hero/foundations/grind_water.webp") type("image/webp"), url("../img/hero/foundations/grind_water.jpg") type("image/jpeg")); }
.dash-tile.tile-found-beans_origins{ --tile-bg: image-set(url("../img/hero/foundations/beans_origins.webp") type("image/webp"), url("../img/hero/foundations/beans_origins.jpg") type("image/jpeg")); }
.dash-tile.tile-found-processing_methods{ --tile-bg: image-set(url("../img/hero/foundations/processing_methods.webp") type("image/webp"), url("../img/hero/foundations/processing_methods.jpg") type("image/jpeg")); }
.dash-tile.tile-found-equipment_tools{ --tile-bg: image-set(url("../img/hero/foundations/equipment_tools.webp") type("image/webp"), url("../img/hero/foundations/equipment_tools.jpg") type("image/jpeg")); }
.dash-tile.tile-found-milk_latte_art{ --tile-bg: image-set(url("../img/hero/foundations/milk_latte_art.webp") type("image/webp"), url("../img/hero/foundations/milk_latte_art.jpg") type("image/jpeg")); }
.dash-tile.tile-found-latte_art_academy{ --tile-bg: image-set(url("../img/hero/foundations/latte_art_academy.webp") type("image/webp"), url("../img/hero/foundations/latte_art_academy.jpg") type("image/jpeg")); }



/* Dashboard photo cards (same concept as tiles) */
.dash-card.photo,
.dash-bridge-inner.photo{
  position: relative;
  overflow: hidden;
}

.dash-card.photo{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.dash-card.photo::before,
.dash-bridge-inner.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  opacity: .72;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .55s ease, opacity .25s ease;
}

.dash-card.photo::after,
.dash-bridge-inner.photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.58) 70%,
    rgba(0,0,0,.78) 100%
  );
}

.dash-card.photo > *,
.dash-bridge-inner.photo > *{
  position: relative;
  z-index: 2;
}

@media (hover:hover){
  .dash-card.photo:hover,
  .dash-bridge-inner.photo:hover{
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .dash-card.photo:hover::before,
  .dash-bridge-inner.photo:hover::before{
    transform: scale(1.12);
    opacity: .80;
  }
}

/* Card backgrounds */
/* Card backgrounds (jpg fallback + webp via image-set) */
.dash-card.card-practice{ --card-bg: url("../img/hero/cards/practice.jpg"); --card-bg: image-set(url("../img/hero/cards/practice.webp") type("image/webp"), url("../img/hero/cards/practice.jpg") type("image/jpeg")); }
.dash-card.card-wow{ --card-bg: url("../img/hero/cards/wow.jpg"); --card-bg: image-set(url("../img/hero/cards/wow.webp") type("image/webp"), url("../img/hero/cards/wow.jpg") type("image/jpeg")); }
.dash-bridge-inner.bridge-cafe{ --card-bg: url("../img/hero/cards/cafe.jpg"); --card-bg: image-set(url("../img/hero/cards/cafe.webp") type("image/webp"), url("../img/hero/cards/cafe.jpg") type("image/jpeg")); }
.dash-tile:active { transform: scale(.99); }
.dash-tile-ico { font-size: 1.05rem; color: rgba(255,255,255,.92); }
.dash-tile-t { margin-top: 8px; font-weight: 800; }
.dash-tile-s { margin-top: 3px; font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.25; }

.dash-fact { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.dash-fact-title { font-weight: 800; }
.dash-fact-body { margin-top: 6px; color: var(--txt-dim); line-height: 1.35; font-size: .88rem; }

.dash-bridge { margin-top: 16px; padding-bottom: 6px; }
.dash-bridge-inner {
  display:flex; justify-content:space-between; gap: 12px; align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.dash-bridge-t { font-weight: 800; }
.dash-bridge-s { margin-top: 3px; font-size: .85rem; color: var(--txt-dim); }

/* --------------------------------------------------------------------------
   HOME V3 — Alignment + typography polish (Dashboard)
   Goal: cards feel like the same system as tiles (same inner padding + rhythm).
   -------------------------------------------------------------------------- */

.home-v3{
  /* IMPORTANT:
     The viewport already has 20px padding.
     Adding extra horizontal padding at block-level makes cards/tiles look "off" on iPhone.
     So we keep everything aligned to the viewport rail and only tune INNER padding per component.
  */
  --dash-pad: 0px;
}

/* Ensure every block aligns to the same horizontal rhythm */
.home-v3 .dash-card,
.home-v3 .dash-explore,
.home-v3 .dash-bridge{
  padding-left: var(--dash-pad);
  padding-right: var(--dash-pad);
}

/* Cards were inheriting .tech-card padding (20px) which looked "off" vs tiles (14px).
   We keep the tech-card look, but match the tile system spacing. */
.home-v3 .dash-card.tech-card{
  padding: 18px;
  border-radius: 18px;
  margin-bottom: 0; /* avoid extra gaps between dashboard blocks */
}

.home-v3 .dash-card-h{ align-items: flex-start; }
.home-v3 .dash-card-k{
  font-size: .70rem;
  letter-spacing: 1.8px;
  opacity: .92;
}
.home-v3 .dash-card-t{
  font-size: 1.16rem;
  letter-spacing: .1px;
}
.home-v3 .dash-card-s{
  font-size: .94rem;
  line-height: 1.42;
}

/* Bridge: match the same inner padding + radius and improve text hierarchy */
.home-v3 .dash-bridge-inner{
  padding: 18px;
  border-radius: 18px;
}

/* Buttons on HOME: cleaner + more premium, without touching other modules */
.home-v3 .btn-arch{
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.86rem;
  letter-spacing: 0.9px;
}
.home-v3 .btn-arch.primary{
  /* keep the strong primary but soften the feel */
  border-color: rgba(255,255,255,0.10);
}
.home-v3 .dash-bridge-t{
  font-size: 1.06rem;
  line-height: 1.15;
  letter-spacing: .2px;
}
.home-v3 .dash-bridge-s{
  font-size: .90rem;
  line-height: 1.35;
}

/* Buttons inside dashboard blocks: slightly tighter + cleaner radius.
   (Scoped to HOME only so we don't affect other modules.) */
.home-v3 .dash-btn.btn-arch{
  padding: 14px 14px;
  border-radius: 12px;
  font-size: .86rem;
  letter-spacing: 1.2px;
}
.home-v3 .dash-btn.btn-arch.primary{
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Small improvement: avoid icon jumping / inconsistent alignment */
.home-v3 .dash-card-ico,
.home-v3 .dash-tile-ico{
  line-height: 1;
}

/* ==========================================================================
   SETTINGS
   ========================================================================== */

/* ==========================================================================
   SETTINGS — V2 (restructured, multi-card, accessible)
   ========================================================================== */
.settings-wrap { padding: 16px 14px 80px; display:flex; flex-direction:column; gap:14px; }
.settings-hero { margin-bottom: 2px; }
.settings-kicker { font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color: var(--txt-dim); }
.settings-title { margin-top: 6px; font-size: 1.35rem; font-weight: 800; }
.settings-sub { margin-top: 6px; color: var(--txt-dim); line-height: 1.35; }

.settings-card { padding: 16px; }
.settings-row { margin-top: 14px; }
.settings-row:first-child { margin-top: 0; }
.settings-label { font-weight: 800; margin-bottom: 6px; font-size: 0.9rem; }
.settings-hint { font-size: .82rem; color: var(--txt-dim); line-height: 1.35; margin-top: 6px; }

.settings-input, .settings-select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--txt-main);
  outline: none;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  transition: border-color 0.2s;
}
.settings-input:focus, .settings-select:focus {
  border-color: rgba(194,124,46,.5);
  background: rgba(0,0,0,.32);
}

.settings-split { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(194,124,46,.25);
  background: rgba(194,124,46,.08);
  font-family: var(--font-data);
  font-size: .84rem;
  font-weight: 700;
  width: fit-content;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.settings-chips { display:flex; gap: 8px; margin-top: 8px; flex-wrap:wrap; }
.settings-chips .chip { cursor: pointer; transition: all 0.2s; }
.settings-chips .chip:hover { border-color: rgba(255,255,255,.18); }
.chip.active { background: rgba(196, 138, 73, .18); border-color: rgba(196, 138, 73, .38); }

/* -- Section headers inside cards -- */
.settings-section-head {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.settings-section-head i { color: var(--accent); font-size: 0.9rem; }

/* -- Avatar -- */
.settings-avatar-row { display: flex; align-items: center; gap: 14px; }
.settings-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(194,124,46,.25), rgba(194,124,46,.08));
  border: 2px solid rgba(194,124,46,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
}

/* -- Custom toggle switch (replaces native checkbox) -- */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.settings-switch {
  position: relative;
  width: 48px; height: 28px;
  flex-shrink: 0;
}
.settings-switch input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.settings-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background 0.25s;
  border: 1px solid rgba(255,255,255,.08);
}
.settings-switch-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--txt-dim);
  transition: transform 0.25s, background 0.25s;
}
.settings-switch input:checked + .settings-switch-slider {
  background: rgba(194,124,46,.30);
  border-color: rgba(194,124,46,.40);
}
.settings-switch input:checked + .settings-switch-slider::before {
  transform: translateX(20px);
  background: var(--accent);
}

/* -- Stats row -- */
.settings-stats-row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 10px -4px 0;
}
.settings-stats-row::-webkit-scrollbar { display: none; }
.settings-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 4px;
}
.settings-stat-n {
  font-family: var(--font-data);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--txt-main);
}
.settings-stat-l {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
  margin-top: 2px;
}

/* -- Button groups (side by side) -- */
.settings-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-btn-group .btn-arch { margin-top: 0; }

/* -- Save area (floating feel) -- */
.settings-save-area { padding: 0; }
.settings-save-area .btn-arch { width: 100%; }

/* -- Collapsible diagnostics -- */
.settings-collapsible {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  justify-content: space-between;
  color: var(--txt-dim);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.settings-collapse-icon {
  transition: transform 0.25s;
  font-size: 0.72rem;
  color: var(--txt-dim);
}
.settings-collapsible-body { padding-top: 12px; }

/* -- Error items -- */
.settings-error-item { padding: 10px !important; }
.settings-error-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* -- About -- */
.settings-about { padding: 14px 16px; }
.settings-about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.settings-about-name {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}
.settings-about-ver {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--txt-dim);
  margin-top: 2px;
  letter-spacing: 0.06em;
}
.settings-about-badge {
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(194,124,46,.25);
  background: rgba(194,124,46,.08);
  color: var(--accent);
}

/* Legacy compat: old .toggle style */
.settings-toggles { display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.toggle { display:flex; align-items:center; gap: 10px; color: var(--txt-main); }
.toggle input { transform: scale(1.05); }

@media (max-width: 480px){
  .settings-stats-row { gap: 0; }
  .settings-stat { padding: 8px 2px; }
  .settings-stat-n { font-size: 0.95rem; }
  .settings-btn-group { grid-template-columns: 1fr; }
}
@media (max-width: 360px){ .settings-split{ grid-template-columns:1fr; } .dash-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   BREW | Brew Lab Header (subtitle + hero)
   ========================================================================== */
/* Default subtitle style (used in a few places) */
.brew-lab-subtitle{
  color: var(--txt-dim);
  font-size: 0.95rem;
  margin: 6px 0 10px 0;
}

.brew-lab-hero{
  width: 100%;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: image-set(
    url("../img/hero/brew/brew-lab-hero.webp") type("image/webp"),
    url("../img/hero/brew/brew-lab-hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  /* Push focus slightly to the right so the pour stays visible on iPhone */
  background-position: 70% center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  margin: 0 0 22px 0;
}

/* Scrim for readability */
.brew-lab-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.40) 40%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events:none;
}

/* Soft vignette */
.brew-lab-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 90% at 10% 15%,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.34) 55%,
    rgba(0,0,0,0.52) 100%
  );
  pointer-events:none;
}

/* When used as a header hero, place subtitle on top of the image */
.brew-lab-hero--header .brew-lab-hero-content{
  position:absolute;
  inset:0;
  padding: 18px 18px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content: space-around;
  gap: 6px;
  z-index: 2;
}


.brew-lab-title{
  font-size: 0.95rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

.brew-lab-hero--header .brew-lab-subtitle{
  margin: 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

@media (max-width: 420px){
  .brew-lab-hero{ height: 150px; }
}

/* ==========================================================================
   BREW | Visual Method Grid (photo cards)
   ========================================================================== */
.brew-method-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* More breathing room between cards */
  gap:24px;
  margin-top: 0; /* spacing handled by hero margin */
}

.brew-method-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  /* Larger cards so the grid doesn't feel cramped on mobile */
  min-height:182px;
  background: var(--tile-bg, rgba(255,255,255,0.04));
  background-size: cover;
  background-position:center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.brew-method-card:active{ transform: translateY(1px); }

.brew-method-scrim{
  position:absolute; inset:0;
  z-index:1;
  /* Stronger at the top for text readability (keeps image alive) */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.48) 38%,
    rgba(0,0,0,0.22) 100%
  );
}

.brew-method-content{
  position:absolute;
  top:12px;
  left:14px;
  right:42px;
  z-index:2;

  /* keep a clean top-left stack */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.brew-method-content::before{
  content:"";
  position:absolute;
  inset:-10px -10px -14px -10px;
  border-radius:16px;
  /* subtle local haze behind text (not a blur filter) */
  background: radial-gradient(120% 120% at 0% 0%,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.00) 100%
  );
  z-index:-1;
}

.brew-method-kicker{
  font-size:0.70rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom:6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-title{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:0.01em;
  color: rgba(255,255,255,0.96);
  line-height:1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-sub{
  margin-top:4px;
  font-size:0.88rem;
  color: rgba(255,255,255,0.72);
  line-height:1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.60);
}

.brew-method-arrow{
  position:absolute;
  right: 10px; bottom:12px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-weight:800;
  z-index: 3;
}

/* Per-method photo backgrounds (webp + jpg fallback via image-set) */
.brew-method-card.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.brew-method-card.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.brew-method-card.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.brew-method-card.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.brew-method-card.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.brew-method-card.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.brew-method-card.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.brew-method-card.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

@media (max-width: 360px){
  .brew-method-grid{ gap:16px; }
  .brew-method-card{ min-height:148px; }
  .brew-method-title{ font-size:1.00rem; }
}

/* =========================
   TOOLS: image personalization pack (v16.11.84)
   Adds hero + tip + per-tool thumbnails without changing layout/logic.
   ========================= */

/* Hero background */
.tools-hero{
  position: relative;
  overflow: hidden;
}
.tools-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/tools/tools_hero.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
  z-index:0;
}
.tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 48%, rgba(0,0,0,0.68) 100%);
  z-index:1;
}
.tools-hero > *{ position:relative; z-index:2; }

/* Consejo del día card background */
.tech-card.tools-day{
  position: relative;
  overflow: hidden;
}
.tech-card.tools-day::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/tools/tools_tip.jpg");
  background-size:cover;
  background-position:center;
  opacity:0.38;
  transform:scale(1.02);
  z-index:0;
}
.tech-card.tools-day::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.60) 100%);
  z-index:1;
}
.tech-card.tools-day > *{ position:relative; z-index:2; }

/* Tool card thumbnails in the icon box */
.tools-card{ position:relative; }
.tools-card-ic{
  position: relative;
  overflow:hidden;
}
.tools-card-ic::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-size:cover;
  background-position:center;
  opacity:0.95;
  z-index:0;
}
.tools-card-ic::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
  z-index:1;
}
/* Keep SVG but make it subtle over the photo */
.tools-card-ic svg{
  position:relative;
  z-index:2;
  opacity:0.65;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

/* Map by tool id */
button.tools-card[data-tool-card="espresso"] .tools-card-ic::before{ background-image:url("../img/tools/tools_espresso.jpg"); }
button.tools-card[data-tool-card="pourover"] .tools-card-ic::before{ background-image:url("../img/tools/tools_pourover.jpg"); }
button.tools-card[data-tool-card="ratio"] .tools-card-ic::before{ background-image:url("../img/tools/tools_brewmat.jpg"); }
button.tools-card[data-tool-card="compass"] .tools-card-ic::before{ background-image:url("../img/tools/tools_compass.png"); }
button.tools-card[data-tool-card="latte"] .tools-card-ic::before{ background-image:url("../img/tools/tools_latte.jpg"); }
button.tools-card[data-tool-card="water"] .tools-card-ic::before{ background-image:url("../img/tools/tools_water.jpg"); }

/* Slightly increase contrast for readability on image-backed hero/cards */
.tools-hero-title, .tools-hero-sub{ text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
/* TOOLS HERO — expanded like Foundations (image background + title over image) */
.tools-shell .tools-hero{
  width:100%;
  height:190px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: image-set(
    url("../img/hero/brew/method-espresso.webp") type("image/webp"),
    url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")
  ) !important;
  background-size:cover !important;
  background-position:center !important;
  margin: 10px 0 14px 0;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.tools-shell .tools-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.75) 100%
  );
  pointer-events:none;
}
.tools-shell .tools-hero > *{ position:relative; z-index:1; }

.tools-shell .tools-hero-title{
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
  font-size:2.05rem;
  opacity: 1;
}
.tools-shell .tools-hero-sub{
  margin-top: 6px;
  color: #ffffff;
  font-size:0.95rem;
  line-height:1.25;
  max-width: 40ch;
  opacity: 1;
}


/* ===== PATCH v16.11.104: TOOLS HERO readability (match Recipes/Foundations) ===== */
.tools-hero-title,
.tools-shell .tools-hero-title{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.78) !important;
}
.tools-hero-sub,
.tools-shell .tools-hero-sub{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.78) !important;
}
/* Slightly deepen overlay only on TOOLS hero to ensure consistent legibility */
.tools-hero::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.62) 65%,
    rgba(0,0,0,.82) 100%
  ) !important;
}

/* ===== PATCH v16.11.105: TOOLS HERO stacking fix (ensure overlay stays behind text) ===== */
.tools-shell .tools-hero{ position:relative; }
.tools-shell .tools-hero::before{ content:none !important; z-index:0 !important; }
.tools-shell .tools-hero::after{ z-index:1 !important; }
.tools-shell .tools-hero > *{ position:relative; z-index:2 !important; }


/* =====================================================================
   UX: Toasts + Empty States (Production polish)
   ===================================================================== */

#toast-host{
  position:fixed;
  left:12px;
  right:12px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  pointer-events:none;
  border:1px solid var(--border-dim);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(20,20,20,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:var(--txt-main);
  font-weight:800;
  letter-spacing:0.2px;
  transform: translateY(10px);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}

.toast.show{
  transform: translateY(0px);
  opacity:1;
}

.toast-info{ border-color:rgba(255,255,255,0.14); }
.toast-success{ border-color: rgba(70, 200, 120, 0.45); }
.toast-warn{ border-color: rgba(240, 200, 90, 0.45); }
.toast-error{ border-color: rgba(240, 90, 90, 0.45); }

.empty-state{
  padding:16px;
  text-align:left;
}

.empty-kicker{
  font-size:0.7rem;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--txt-dim);
  font-weight:900;
}

.empty-title{
  margin-top:6px;
  font-size:1.05rem;
  font-weight:950;
  color:var(--txt-main);
}

.empty-body{
  margin-top:6px;
  color:var(--txt-dim);
  font-size:0.92rem;
  line-height:1.35;
}

.title-truncate{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* === TOOLS Sprint A: diagnostics + auto-run toggle === */
.tool-autotoggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--txt-dim);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tool-autotoggle input{ transform: translateY(1px); }
.tool-autotoggle span{ letter-spacing:.2px; }

.tool-diag{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.tool-diag-title{
  font-weight:800;
  font-size:.95rem;
  margin-bottom:8px;
}
.tool-diag-list{
  margin:0;
  padding-left:18px;
  color:var(--txt-dim);
  line-height:1.35;
  font-size:.9rem;
}



/* === DRINKS Sprint B: Premium detail tabs + My Drinks toolbar === */
.drinks-detail-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 2px 10px 2px;
  margin:0 0 6px 0;
  scrollbar-width:none;
}
.drinks-detail-tabs::-webkit-scrollbar{ display:none; }
.drinks-tab{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--txt-dim);
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.80rem;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
}
.drinks-tab[aria-selected="true"]{
  color: var(--txt-main);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.drinks-detail-panels{ padding-bottom: 80px; }
.drinks-panel{ display:none; }
.drinks-panel.is-active{ display:block; }

.drinks-my-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.drinks-my-left{ min-width:220px; }
.drinks-my-title{ font-weight:900; letter-spacing:0.04em; }
.drinks-my-sub{ margin-top:4px; }
.drinks-my-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.drinks-my-sort{
  min-width:160px;
  padding:10px 12px !important;
  border-radius:12px !important;
}

.drinks-my-search{
  min-width:180px;
  padding:10px 12px !important;
  border-radius:12px !important;
}



/* ======================================================================
   BREW | FLAGSHIP METHOD DETAILS (Hero + Recipe Preview Cards)
   ====================================================================== */

.brew-method-hero{
  width:100%;
  min-height: 280px;
  border-radius: 22px;
  overflow:hidden;
  position:relative;
  background: var(--tile-bg, rgba(255,255,255,0.04));
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 46px rgba(0,0,0,0.36);
  margin: 10px 0 18px 0;
}

.brew-method-hero .brew-method-hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}

.brew-method-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 12% 18%,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.40) 100%);
  pointer-events:none;
}

.brew-method-hero-actions{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  gap:10px;
  z-index:3;
  flex-wrap:wrap;
}

.brew-hero-btn{
  padding: 10px 12px !important;
  font-weight: 900 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,10,10,0.40) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.brew-method-hero-content{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.brew-method-hero-kicker{
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
  font-weight: 800;
}

.brew-method-hero-title{
  font-size: 1.8rem;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--txt-main);
  text-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.brew-method-hero-sub{
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 62ch;
  opacity: 0.98;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brew-method-hero-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 4px;
}

/* shared pills */
.brew-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brew-pill--ghost{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
}

.brew-pill--dim{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.10);
}

/* Map hero backgrounds to existing method assets */
.brew-method-hero.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.brew-method-hero.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.brew-method-hero.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.brew-method-hero.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.brew-method-hero.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.brew-method-hero.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.brew-method-hero.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.brew-method-hero.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

/* Recipe list header */
.brew-recipe-list-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 10px 0;
}

.brew-recipe-list-title{
  font-size: 0.92rem;
  letter-spacing: 2.2px;
  font-weight: 950;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase;
}

.brew-recipe-list{
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding-bottom: 24px;
}

/* Flagship recipe card */
.brew-recipe-card{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}

.brew-recipe-card-bg{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.22) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events:none;
}

.brew-recipe-card-accent{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background: linear-gradient(180deg, rgba(194,124,46,1) 0%, rgba(194,124,46,0.20) 100%);
  opacity: 0.95;
  pointer-events:none;
}

.brew-recipe-main{
  position:relative;
  padding: 16px 16px 14px 16px;
  z-index:2;
}

.brew-recipe-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index:3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brew-recipe-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.brew-recipe-title{
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: 0.2px;
  color: var(--txt-main);
  line-height: 1.15;
}

.brew-recipe-arrow{
  font-size: 1.28rem;
  opacity: 0.88;
}

.brew-recipe-author{
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.70);
}

.brew-recipe-concept{
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.52;
  color: rgba(255,255,255,0.76);
}

.brew-recipe-chips{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.brew-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.brew-chip i{ opacity: 0.9; }

.brew-recipe-footer{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brew-recipe-card:active{
  transform: scale(0.985);
  box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}

.brew-recipe-card:focus{
  outline:none;
  box-shadow: 0 0 0 2px rgba(194,124,46,0.40), 0 12px 34px rgba(0,0,0,0.28);
}




/* ============================================================
   BREW | ULTRA FLAGSHIP HERO (parallax + sticky compact)
   ============================================================ */

.brew-method-stickybar{
  position: sticky;
  top: 0px;
    z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(10,10,10,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.40);
  transition: padding 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.brew-method-stickybar.is-compact{
  padding: 8px 10px;
  background: rgba(8,8,8,0.62);
  border-color: rgba(255,255,255,0.14);
}

.brew-sticky-btn{
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 160ms ease, width 220ms ease, height 220ms ease, border-radius 220ms ease, padding 220ms ease;
}

.brew-sticky-btn-label{
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.88;
  white-space: nowrap;
}

.brew-method-stickybar.is-compact .brew-sticky-btn{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
}
.brew-method-stickybar.is-compact .brew-sticky-btn-label{ display:none; }
.brew-sticky-btn:active{ transform: scale(0.96); }

.brew-method-stickybar-center{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.brew-method-stickybar-title{
  font-weight: 950;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 0.88rem;
  line-height: 1.05;
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: font-size 220ms ease, letter-spacing 220ms ease;
}
.brew-method-stickybar-sub{
  font-size: 0.72rem;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.3px;
  transition: opacity 160ms ease, max-height 220ms ease;
}
.brew-method-stickybar.is-compact .brew-method-stickybar-title{
  font-size: 0.82rem;
  letter-spacing: 1.0px;
}
.brew-method-stickybar.is-compact .brew-method-stickybar-sub{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* Hero background layer for parallax */
.brew-method-hero{
  background: transparent; /* bg is handled by .brew-method-hero-bg */
}
.brew-method-hero-bg{
  position: absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0) scale(1.10);
  will-change: transform;
  transition: transform 80ms linear;
}
.brew-method-hero-title{
  transform-origin: left bottom;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* ============================
   FOUNDATIONS (Lab) — Phase B visual polish
   ============================ */

.tech-card.foundations-topic-card{
  text-align:left;
  width:100%;
  padding:14px;
  cursor:pointer;
}

.foundations-topic-card .foundations-topic-title{
  font-weight:900;
  letter-spacing:0.04em;
}

.foundations-topic-card .foundations-topic-summary{
  color:var(--txt-dim);
  font-size:0.92rem;
  margin-top:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width: 420px){
  .foundations-topic-card{
    padding:12px;
  }
  .foundations-topic-card .foundations-topic-summary{
    -webkit-line-clamp:1;
  }
}

/* Reading mode for topic content */
.foundations-reading .fx-text,
.foundations-reading p,
.foundations-reading li{
  line-height:1.55;
  font-size:1.02rem;
}

.foundations-reading h2,
.foundations-reading h3{
  letter-spacing:0.02em;
}

.foundations-reading .fx-callout{
  border-radius:16px;
}


/* Focus ring (Business -> Pantry deep link) */
.focus-ring{ outline:2px solid rgba(255,255,255,0.55); outline-offset:2px; box-shadow:0 0 0 6px rgba(255,255,255,0.08); border-radius:14px; }

/* Business: Correcciones rápidas */
.biz-fixes{ margin-top:12px; padding:12px; border:1px solid rgba(255,255,255,0.10); border-radius:16px; background:rgba(255,255,255,0.03); }
.biz-fixes-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.biz-fixes-title{ font-weight:1000; letter-spacing:0.02em; }
.biz-fixes-sub{ color:var(--txt-dim); font-size:0.9rem; margin-top:2px; }
.biz-fix-block{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); }
.biz-fix-block-hd{ font-weight:900; font-size:0.95rem; }
.biz-fix-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.biz-fix-label{ color:var(--txt-dim); font-size:0.92rem; }
.biz-fix-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.biz-fix-chip{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,0.10); border-radius:999px; background:rgba(255,255,255,0.02); }
.biz-fix-chip-name{ font-size:0.9rem; }
.biz-fix-mini{ padding:6px 10px; font-size:0.85rem; border-radius:999px; }
.biz-fix-more{ color:var(--txt-dim); font-size:0.85rem; padding:6px 8px; }

/* CRM premium helpers */
.biz-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.72rem; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; margin-left:6px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); }
.biz-badge.vip{ border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.10); color: rgba(255,215,0,0.95); }
.biz-pill{ display:inline-block; padding:0 8px; border-radius:999px; font-size:0.8rem; font-weight:900; margin-left:6px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.10); }

.biz-dup-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (max-width: 820px){ .biz-dup-grid{ grid-template-columns: 1fr; } }
.biz-dup-card{ padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }

.biz-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.biz-modal .biz-modal-card{ width:min(720px, 100%); max-height: 88vh; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background: rgba(20,20,20,0.75); box-shadow: 0 20px 60px rgba(0,0,0,0.55); padding:16px; display:flex; flex-direction:column; }
.biz-modal .biz-modal-hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.biz-modal .biz-modal-title{ font-weight:1000; letter-spacing:0.03em; font-size:1.05rem; }
.biz-modal .biz-modal-sub{ color:var(--txt-dim); font-size:0.85rem; margin-top:4px; line-height:1.45; }
.biz-modal .biz-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); }
.biz-modal .biz-modal-body{ margin-top:12px; overflow:auto; -webkit-overflow-scrolling: touch; padding-right:4px; }


/* BUSINESS hero responsive layout */
.biz-hero-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.biz-hero-left{ flex:1 1 auto; min-width:0; }
.biz-hero-right{ flex:0 0 auto; min-width:210px; text-align:right; }
.biz-mode-card{ padding:12px; max-width:360px; margin-left:auto; }
.biz-mode-label{ color:var(--txt-dim); font-size:0.82rem; margin-bottom:8px; text-align:left; }
.biz-mode-chips{ justify-content:flex-start; }
.biz-mode-hint{ text-align:left; margin-top:8px; color:var(--txt-dim); font-size:0.85rem; line-height:1.35; }

@media (max-width: 560px){
  .biz-hero-row{ flex-direction:column; align-items:stretch; }
  .biz-hero-right{ min-width:0; text-align:left; }
  .biz-mode-card{ max-width:none; margin-left:0; }
  .biz-hero-left .tech-card{ max-width:none !important; }
}

/* CRM floating actions (always reachable on mobile) */
.crm-fab{
  position: fixed;
  right: 16px;
  bottom: 96px; /* above bottom nav */
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}
.crm-fab-btn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,20,20,0.65);
  color: var(--txt);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.crm-fab-btn.primary{
  border-color: rgba(220,180,120,0.35);
  background: rgba(60,40,20,0.65);
}


/* ========================================================================== 
   FOUNDATIONS | QUIZ (Prueba)
   ========================================================================== */
.quiz-card { padding: 16px; }
.quiz-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:0.85rem; opacity:0.92; margin:8px 0 14px; }
.quiz-q { padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.03); margin: 10px 0; }
.quiz-q-h { font-weight: 800; letter-spacing: 0.01em; margin-bottom: 10px; line-height:1.25; }
.quiz-opts { display:flex; flex-wrap:wrap; gap:10px; }
.quiz-opt.is-selected { outline: 2px solid rgba(0,0,0,0.18); transform: translateY(-1px); }
.quiz-fb-wrap { margin-top: 10px; }
.quiz-fb { border-radius: 14px; padding: 12px; }
.quiz-fb.ok { background: rgba(0, 0, 0, 0.04); }
.quiz-fb.bad { background: rgba(0, 0, 0, 0.06); }
.quiz-fb-h { font-weight: 900; margin-bottom: 6px; letter-spacing:0.02em; }
.quiz-fb-t { font-size: 0.95rem; line-height: 1.35; opacity: 0.96; margin: 6px 0; }
.quiz-ch { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,0.12); }
.quiz-ch-h { font-weight: 900; margin-bottom: 6px; }
.quiz-ch-t { font-size: 0.95rem; line-height: 1.35; }
.quiz-result { margin-top: 8px; }

/* ======================================================================
   QUIZ UI FIX (Foundations)
   - Adds missing button/link styles used by LabController quiz
   - Prevents broken wrapping/overflow on iOS
   ====================================================================== */

.pill-btn{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--txt-main);
  padding: 12px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pill-btn:active{ transform: scale(0.99); }
.pill-btn:hover{ border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.08); }

.primary-btn{
  -webkit-appearance:none;
  appearance:none;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--txt-main);
  color: #0b0b0b;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
.primary-btn:active{ transform: scale(0.99); }

.link-btn{
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background: transparent;
  color: inherit;
  opacity: 0.92;
  padding: 8px 0;
  font-family: var(--font-ui);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:active{ opacity: 0.75; }

/* Quiz options: stack full width for readability (no broken wrap) */
.quiz-opts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.quiz-opt{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  padding: 12px 14px;
  border-radius: 14px;
}
.quiz-opt.is-selected{
  outline: 2px solid rgba(255,255,255,0.22);
}

/* Make feedback blocks clearer on dark glass */
.quiz-fb.ok{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.quiz-fb.bad{ background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); }

/* Prevent horizontal “rubber band” inside quiz cards on iOS */
.quiz-card, .quiz-q{ max-width: 100%; overflow-x: hidden; }

/* ============================================================
   BUSINESS: Quick Sale product grid + search
   ============================================================ */
.qs-prod-btn:hover, .qs-prod-btn:focus{
  border-color: var(--accent) !important;
  background: rgba(255,255,255,0.04);
}
.biz-search-results{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.biz-search-item:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* ============================================================
   BUSINESS: Thermal ticket print styles (58/80mm)
   ============================================================ */
@media print {
  .biz-ticket-print {
    width: 80mm !important;
    max-width: 80mm !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    color: #000 !important;
    background: #fff !important;
    padding: 4mm !important;
    margin: 0 auto !important;
  }
  .biz-ticket-print * {
    color: #000 !important;
    background: transparent !important;
  }
  .biz-ticket-print .ticket-divider {
    border-top: 1px dashed #000;
    margin: 4px 0;
  }
}

/* ============================================================
   BUSINESS: Tab chip row scrollable on mobile
   ============================================================ */
#biz-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  gap: 6px;
}
#biz-tabs::-webkit-scrollbar { display: none; }
#biz-tabs .chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   BUSINESS: Empty state styling
   ============================================================ */
.biz-empty-state{
  text-align: center;
  padding: 32px 16px;
  color: var(--txt-dim);
}
.biz-empty-state .biz-empty-icon{
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.biz-empty-state .biz-empty-title{
  font-weight: 900;
  font-size: 1rem;
  color: var(--txt);
  margin-bottom: 6px;
}
.biz-empty-state .biz-empty-hint{
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ============================================================
   CRM: Improved mobile layout & alignment
   ============================================================ */
#crm-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}
#crm-tabs::-webkit-scrollbar { display: none; }
#crm-tabs .chip { white-space: nowrap; flex-shrink: 0; }

/* Better table styling for CRM on smaller screens */
.table td, .table th {
  padding: 8px 10px;
  font-size: 0.88rem;
  vertical-align: middle;
}
.table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.table tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Quick Sale modal product grid - better mobile sizing */
.qs-prod-btn:hover,
.qs-prod-btn:focus {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Food tabs responsive fix */
@media (max-width: 420px) {
  .food-tabs {
    gap: 4px;
    padding: 4px;
  }
  .food-tab {
    padding: 7px 8px;
    font-size: 0.72rem;
    letter-spacing: 0;
  }
  .drinks-detail-tabs {
    gap: 5px;
  }
  .drinks-tab {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}

/* CRM Insights grid cards consistent spacing */
.tech-card .data-table + .data-table {
  margin-top: 0;
}

/* Chip row improvements for CRM filters */
.chip-row {
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

/* ============================================================
   CRM / Business: Comprehensive alignment & spacing fixes
   ============================================================ */

/* Consistent card padding across all business sections */
#biz-body .tech-card {
  box-sizing: border-box;
}

/* Fix flex containers that wrap awkwardly */
#biz-body [style*="display:flex"] {
  box-sizing: border-box;
}

/* Better CRM ticket list row alignment */
#biz-body .table tr td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Fix button groups alignment in CRM */
#biz-body .btn-arch {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure chip rows don't wrap unexpectedly — but keep nowrap for sub-tab rows that need scroll */
#biz-body .chip-row {
  display: flex;
  gap: 6px;
}
/* Only allow wrapping on chip rows that are explicitly NOT meant for scrolling (e.g. filter chips).
   Sub-tab chip rows keep nowrap + overflow-x:auto from the base .chip-row rule. */
#biz-body .chip-row.chip-row-wrap {
  flex-wrap: wrap;
}

/* Better data-table grid on mobile */
.data-table {
  gap: 8px !important;
}

/* CRM section headers consistent size */
#biz-body .tech-card > div:first-child > div[style*="font-weight:900"] {
  line-height: 1.3;
}

/* Fix overlapping text in small screens */
@media (max-width: 480px) {
  #biz-body .tech-card {
    padding: 12px !important;
  }
  
  #biz-body .biz-grid {
    gap: 8px;
  }
  
  /* Stack buttons vertically on very small screens */
  #biz-body [style*="display:flex"][style*="gap:10px"] {
    gap: 8px;
  }
  
  .data-cell {
    padding: 8px 10px !important;
  }
  
  /* Make action buttons smaller */
  #biz-body .btn-mini {
    padding: 6px 8px;
    font-size: 0.82rem;
  }
}

/* CRM manual ticket details section */
#crm-manual-ticket summary {
  font-size: 0.95rem;
}

/* CRM ticket history better row spacing */
#biz-body .table tbody tr {
  transition: background 0.15s ease;
}
#biz-body .table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

/* CRM customer filters chip-row fix */
#biz-body .chip {
  font-size: 0.82rem;
  padding: 8px 12px;
}

/* Fix the data-table cells alignment */
.data-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

/* Quick Sale modal improvements */
.modal-card .chip {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.modal-card .chip:hover {
  background: rgba(255,255,255,0.08);
}
.modal-card .chip.active {
  border-color: var(--accent);
}

/* Tighter btn-mini inside tables */
.table .btn-arch.btn-mini {
  padding: 7px 9px;
  gap: 4px;
}

/* ============================================================
   BUSINESS PREMIUM: Enhanced styling for plan premium feel
   ============================================================ */

/* KPI cards subtle gradient accent */
#biz-body .tech-card > div > div[style*="font-weight:1000"][style*="font-size:1.25"] {
  background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.95));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Progress bars smooth animation */
#biz-body div[style*="background: var(--accent)"][style*="border-radius:999px"] {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quick Sale product grid: better tap targets on mobile */
@media (max-width: 480px) {
  .qs-prod-btn {
    padding: 12px 10px !important;
    min-height: 56px;
  }
}

/* Better Quick Sale cart spacing */
#qs-cart > div {
  transition: background 0.15s ease;
}
#qs-cart > div:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Stepper (Ruta recomendada) better visual flow */
.biz-stepper {
  position: relative;
}
.biz-step + .biz-step::before {
  content: '';
  position: absolute;
  left: 15px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.10);
  transform: translateY(-12px);
}

/* Dashboard alert cards hover */
#biz-body .tech-card[style*="border-radius:12px"]:hover {
  border-color: rgba(255,255,255,0.18);
  transition: border-color 0.2s ease;
}

/* Exports section buttons consistent sizing */
#biz-body [id*="export"] {
  font-size: 0.85rem;
}

/* Better ops tab overflow */
#ops-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}
#ops-tabs::-webkit-scrollbar { display: none; }
#ops-tabs .chip { white-space: nowrap; flex-shrink: 0; }


/* ========================================================================
   PRE-BREW SCREEN — Preparación paso a paso antes del timer
   ======================================================================== */

.prebrew-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 4px 24px 4px;
}

.prebrew-topbar {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 6px 6px 16px;
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Top bar buttons must NOT inherit the global .btn-arch width:100% */
.prebrew-topbar .btn-arch{
    width: auto;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    letter-spacing: 1px;
}

.prebrew-topbar .prebrew-skip{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}
.prebrew-topbar .prebrew-skip:hover{
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.09);
}

.prebrew-topbar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 0 6px;
}

.prebrew-topbar-kicker{
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: rgba(255,255,255,0.62);
}
.prebrew-topbar-recipe{
    margin-top: 2px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.6px;
    font-size: 0.88rem;
    font-weight: 900;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prebrew-topbar > button,
.prebrew-topbar .prebrew-skip{
    flex-shrink: 0;
}

/* HERO (pro) */
.prebrew-hero{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    padding: 16px 14px;
    margin: 4px 6px 14px;
}
.prebrew-hero-bg{
    position:absolute;
    inset:0;
    background-image: var(--tile-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.1);
    opacity: 0.28;
    transform: scale(1.06);
}
.prebrew-hero-scrim{
    position:absolute;
    inset:0;
    background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.68) 60%, rgba(0,0,0,0.75) 100%);
}
.prebrew-hero-content{
    position: relative;
    z-index: 1;
}
.prebrew-hero-kicker{
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.prebrew-hero-title{
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.95);
}
.prebrew-hero-sub{
    margin-top: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
}
.prebrew-hero-meta{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Reuse existing method hero assets */
.prebrew-hero.method-v60{ --tile-bg: image-set(url("../img/hero/brew/method-v60.webp") type("image/webp"), url("../img/hero/brew/method-v60.jpg") type("image/jpeg")); }
.prebrew-hero.method-kalita{ --tile-bg: image-set(url("../img/hero/brew/method-kalita.webp") type("image/webp"), url("../img/hero/brew/method-kalita.jpg") type("image/jpeg")); }
.prebrew-hero.method-espresso{ --tile-bg: image-set(url("../img/hero/brew/method-espresso.webp") type("image/webp"), url("../img/hero/brew/method-espresso.jpg") type("image/jpeg")); }
.prebrew-hero.method-frenchpress{ --tile-bg: image-set(url("../img/hero/brew/method-frenchpress.webp") type("image/webp"), url("../img/hero/brew/method-frenchpress.jpg") type("image/jpeg")); }
.prebrew-hero.method-moka{ --tile-bg: image-set(url("../img/hero/brew/method-moka.webp") type("image/webp"), url("../img/hero/brew/method-moka.jpg") type("image/jpeg")); }
.prebrew-hero.method-aeropress{ --tile-bg: image-set(url("../img/hero/brew/method-aeropress.webp") type("image/webp"), url("../img/hero/brew/method-aeropress.jpg") type("image/jpeg")); }
.prebrew-hero.method-chemex{ --tile-bg: image-set(url("../img/hero/brew/method-chemex.webp") type("image/webp"), url("../img/hero/brew/method-chemex.jpg") type("image/jpeg")); }
.prebrew-hero.method-syphon{ --tile-bg: image-set(url("../img/hero/brew/method-syphon.webp") type("image/webp"), url("../img/hero/brew/method-syphon.jpg") type("image/jpeg")); }

/* Progress Dots */
.prebrew-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.prebrew-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(255,255,255,0.08);
}

.prebrew-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(194,124,46,0.45);
    transform: scale(1.3);
}

.prebrew-dot.done {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.5;
}

/* Step Counter */
.prebrew-counter {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt-dim);
    margin-bottom: 20px;
}

/* Step Card */
.prebrew-step-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 36px 24px 32px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

.prebrew-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
    opacity: 0.6;
}

.prebrew-step-icon {
    font-size: 2.8rem;
    color: var(--accent);
    margin-bottom: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
    filter: drop-shadow(0 2px 8px rgba(194,124,46,0.3));
}

.prebrew-step-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt-main);
    margin-bottom: 12px;
    line-height: 1.3;
}

.prebrew-step-detail {
    font-size: 0.95rem;
    color: var(--txt-dim);
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto;
}

/* Checklist of completed steps */
.prebrew-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0 8px;
}

.prebrew-checklist-item {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: var(--txt-dim);
    opacity: 0.7;
    line-height: 1.3;
}

.prebrew-checklist-item span {
    text-decoration: line-through;
    text-decoration-color: rgba(194,124,46,0.4);
}

/* Controls */
.prebrew-controls {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
}

.prebrew-btn-prev,
.prebrew-btn-next {
    flex: 1;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prebrew-btn-start {
    width: 100%;
    padding: 22px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    animation: prebrew-pulse 2s ease-in-out infinite;
}

@keyframes prebrew-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(194,124,46,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(194,124,46,0); }
}

.prebrew-skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    opacity: 1;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
    font-family: inherit;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.prebrew-skip:hover,
.prebrew-skip:active {
    border-color: rgba(194,124,46,0.55);
    background: rgba(194,124,46,0.08);
    transform: translateY(-1px);
}

.prebrew-skip i{ opacity: 0.95; }
.prebrew-skip span{ font-size: 0.78rem; font-weight: 800; }

.prebrew-skip--bottom{
    width: 100%;
    margin-top: 10px;
    padding: 14px 12px;
}

.prebrew-skip--top{
    height: 40px;
    padding: 0 12px;
}
.prebrew-skip--top span{ font-size: 0.72rem; }

/* ==========================================================================
   PANTRY v2 — Visual Upgrade + Inventory Stock
   ========================================================================== */

/* ── Hero ── */
.pantry-hero {
  padding: 24px 20px 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(194,124,46,.12) 0%, transparent 70%);
  border-radius: 0 0 18px 18px;
}
.pantry-hero-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-top: 8px;
}
.pantry-hero-sub {
  margin-top: 4px;
  font-size: .88rem;
  color: var(--txt-dim);
}

/* ── Dashboard Stats ── */
.pantry-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pantry-dash-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.pantry-dash-n {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-data);
}
.pantry-dash-l {
  font-size: .7rem;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}
.pantry-dash-warn { color: var(--danger); }

/* ── Alert rows ── */
.pantry-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.1);
  margin-bottom: 4px;
  transition: background .15s;
}
.pantry-alert-row:hover { background: rgba(0,0,0,.2); }
.pantry-alert-row:last-child { margin-bottom: 0; }

/* ── Stock inline section (inside item details) ── */
.pantry-stock-inline {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

/* ── Stock bar pulse ── */
@keyframes pantry-bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.pantry-bar-pulse { animation: pantry-bar-pulse 1.8s ease-in-out infinite; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .pantry-dash-grid { grid-template-columns: 1fr 1fr; }
  .pantry-stock-inline .pantry-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   UX Modal System v2.0 — Professional confirm/alert dialogs
   ========================================================================== */
.ux-modal-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.0);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity .22s ease, backdrop-filter .22s ease, background .22s ease;
}
.ux-modal-overlay.ux-modal-in {
  opacity: 1;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px);
}
.ux-modal-overlay.ux-modal-out {
  opacity: 0;
  background: rgba(0,0,0,0.0);
  backdrop-filter: blur(0px);
}
.ux-modal-card {
  width: min(480px, 94vw);
  background: rgba(20,20,20,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  color: var(--txt-main, #fff);
  transform: scale(0.96) translateY(8px);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.ux-modal-in .ux-modal-card {
  transform: scale(1) translateY(0);
}
.ux-modal-out .ux-modal-card {
  transform: scale(0.96) translateY(8px);
}
.ux-modal-title {
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.ux-modal-body {
  color: var(--txt-dim, #aaa);
  font-size: 0.94rem;
  line-height: 1.5;
  white-space: pre-line;
}
.ux-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px; flex-wrap: wrap;
}
.ux-modal-actions .btn-arch {
  min-width: auto; padding: 11px 18px;
  font-weight: 800; font-size: 0.88rem;
}
.ux-modal-actions .btn-arch.danger {
  color: var(--danger, #CF6679);
  border-color: rgba(207,102,121,0.3);
}
.ux-modal-actions .btn-arch.primary {
  background: var(--accent, #C27C2E);
  color: #fff; border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ux-modal-overlay, .ux-modal-card {
    transition-duration: 0.01ms !important;
  }
}

/* Post-sale notification slide up */
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Pulse for loyalty badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}