/*
 * jb-tools.css — Johnny's Bar & Burger · Design System
 * Basado en Material Design 3 (m3.material.io)
 * Versión 1.0 · Mayo 2026
 *
 * Color seed: #E65100 (JB brand orange)
 * Generado con MD3 color system roles
 *
 * ÍNDICE
 *   1. MD3 Color Roles
 *   2. MD3 Typescale
 *   3. MD3 Shape & Elevation
 *   4. JB Brand tokens (slow/busy, feedback)
 *   5. Reset / Base
 *   6. Layout: header · topbar · main · footer
 *   7. Navigation: tabs
 *   8. Components: card · section · row · badge · chip
 *   9. Tables
 *  10. KPI cards · Day cards
 *  11. Tool grid (index)
 *  12. PIN screen
 *  13. Utilities
 *  14. Responsive
 */

/* ══════════════════════════════════════════════════════════
   1. MD3 COLOR ROLES
   Seed: #2E7D32 · Esquema: "Tonal Green"
   ══════════════════════════════════════════════════════════ */
:root {
  /* Primary (verde JB) */
  --md-primary:              #2E7D32;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #C8E6C9;
  --md-on-primary-container: #1B5E20;

  /* Secondary (verde neutro) */
  --md-secondary:            #52634F;
  --md-on-secondary:         #FFFFFF;
  --md-secondary-container:  #D5E8CE;
  --md-on-secondary-container: #111F0F;

  /* Tertiary (ámbar cálido) */
  --md-tertiary:             #7C6200;
  --md-on-tertiary:          #FFFFFF;
  --md-tertiary-container:   #FFE175;
  --md-on-tertiary-container:#261E00;

  /* Error */
  --md-error:                #BA1A1A;
  --md-on-error:             #FFFFFF;
  --md-error-container:      #FFDAD6;
  --md-on-error-container:   #410002;

  /* Surface */
  --md-surface:              #F6FBF4;
  --md-on-surface:           #1A1C18;
  --md-surface-variant:      #DCE5D4;
  --md-on-surface-variant:   #414941;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #EEF4EC;
  --md-surface-container:         #E8EDE6;
  --md-surface-container-high:    #E2E8E0;
  --md-surface-container-highest: #DCE2DA;

  /* Outline */
  --md-outline:              #717970;
  --md-outline-variant:      #C0C9B9;

  /* Inverse */
  --md-inverse-surface:      #2F312D;
  --md-inverse-on-surface:   #EEF4EC;
  --md-inverse-primary:      #8ED68F;

  /* Scrim */
  --md-scrim:                #000000;

  /* ── MD3 Shape ── */
  --md-shape-none:     0px;
  --md-shape-extra-sm: 4px;
  --md-shape-sm:       8px;
  --md-shape-md:      12px;
  --md-shape-lg:      16px;
  --md-shape-extra-lg:28px;
  --md-shape-full:    999px;

  /* ── MD3 Elevation (box-shadow) ── */
  --md-elev-0: none;
  --md-elev-1: 0px 1px 2px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0px 1px 2px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0px 1px 3px rgba(0,0,0,.3), 0px 4px 8px 3px rgba(0,0,0,.15);
  --md-elev-4: 0px 2px 3px rgba(0,0,0,.3), 0px 6px 10px 4px rgba(0,0,0,.15);

  /* ── MD3 State layers ── */
  --md-state-hover:   rgba(0,0,0,.08);
  --md-state-pressed: rgba(0,0,0,.12);
  --md-state-focus:   rgba(0,0,0,.12);
  --md-state-drag:    rgba(0,0,0,.16);
}

/* ══════════════════════════════════════════════════════════
   2. MD3 TYPESCALE
   ══════════════════════════════════════════════════════════ */
:root {
  /* Display */
  --md-display-lg:   3.5625rem/1.12;   /* 57px */
  --md-display-md:   2.8125rem/1.16;   /* 45px */
  --md-display-sm:   2.25rem/1.22;     /* 36px */

  /* Headline */
  --md-headline-lg:  2rem/1.25;        /* 32px */
  --md-headline-md:  1.75rem/1.29;     /* 28px */
  --md-headline-sm:  1.5rem/1.33;      /* 24px */

  /* Title */
  --md-title-lg:     1.375rem/1.27;    /* 22px */
  --md-title-md:     1rem/1.5;         /* 16px · weight 500 */
  --md-title-sm:     .875rem/1.43;     /* 14px · weight 500 */

  /* Body */
  --md-body-lg:      1rem/1.5;         /* 16px */
  --md-body-md:      .875rem/1.43;     /* 14px */
  --md-body-sm:      .75rem/1.33;      /* 12px */

  /* Label */
  --md-label-lg:     .875rem/1.43;     /* 14px · weight 500 */
  --md-label-md:     .75rem/1.33;      /* 12px · weight 500 */
  --md-label-sm:     .6875rem/1.45;    /* 11px · weight 500 */
}

/* ══════════════════════════════════════════════════════════
   4. JB BRAND TOKENS
   (aliases semánticos sobre MD3 para uso en la app)
   ══════════════════════════════════════════════════════════ */
:root {
  /* Brand direct */
  --jb-brand:       #2E7D32;
  --jb-brand-dark:  #1B5E20;
  --jb-brand-dim:   #C8E6C9;

  /* Slow (días martes–jueves) */
  --jb-slow:        #2E7D32;
  --jb-slow-bg:     #F1F8E9;
  --jb-slow-border: #C8E6C9;

  /* Busy (días viernes–domingo) */
  --jb-busy:        #BF360C;
  --jb-busy-bg:     #FFF3E0;
  --jb-busy-border: #FFCCBC;

  /* Feedback */
  --jb-pos:         #2E7D32;
  --jb-neg:         #C62828;
  --jb-warn:        #F57F17;

  /* Layout */
  --jb-content-max: 700px;
  --jb-font:        'Roboto Flex', 'Roboto', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   5. RESET / BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--jb-font);
  font-size: .875rem;
  line-height: 1.43;
  background: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Material Symbols: tamaño y ajuste óptico */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.25rem;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
.material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ══════════════════════════════════════════════════════════
   6. LAYOUT
   ══════════════════════════════════════════════════════════ */

/* ── Top app bar (MD3 "Top App Bar – Small") ── */
.jb-topbar {
  background: var(--md-primary);
  color: var(--md-on-primary);
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--md-elev-2);
}

.jb-topbar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}

.jb-topbar__leading {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--md-on-primary);
  opacity: .8;
  padding: 8px;
  margin-left: -8px;
  border-radius: var(--md-shape-full);
  transition: opacity .15s, background .15s;
}
.jb-topbar__leading:hover { opacity: 1; background: var(--md-state-hover); }

.jb-topbar__title {
  flex: 1;
  font-size: 1.375rem;  /* Title Large */
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-topbar__meta {
  font-size: .75rem;
  opacity: .8;
  flex-shrink: 0;
}

.jb-topbar__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.jb-topbar__note {
  font-size: .6875rem;
  opacity: .8;
  background: rgba(0,0,0,.15);
  padding: 3px 10px;
  border-radius: var(--md-shape-full);
}

/* ── Main content ── */
.jb-main {
  max-width: var(--jb-content-max);
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Footer ── */
.jb-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: .6875rem;
  color: var(--md-on-surface-variant);
  opacity: .6;
}

/* ══════════════════════════════════════════════════════════
   7. NAVIGATION: SECONDARY NAV BAR / TABS
   (MD3 "Secondary Navigation Bar")
   ══════════════════════════════════════════════════════════ */
.jb-navbar {
  background: var(--jb-brand-dark);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 6px;
}
.jb-navbar::-webkit-scrollbar { display: none; }

.jb-navtab {
  flex-shrink: 0;
  padding: 10px 15px;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  letter-spacing: .01em;
  transition: color .15s, border-color .15s, background .1s;
}
.jb-navtab:hover:not(.is-active) {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
}
.jb-navtab.is-active {
  color: #fff;
  border-bottom-color: var(--md-primary-container);
}

/* Panels */
.jb-panel { display: none; }
.jb-panel.is-active { display: contents; }
/* Si el panel necesita flex-column, usar .jb-panel--flex */
.jb-panel--flex { display: none; flex-direction: column; gap: 12px; }
.jb-panel--flex.is-active { display: flex; }

/* ══════════════════════════════════════════════════════════
   8. COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── MD3 Card (Filled) ── */
.jb-card {
  background: var(--md-surface-container);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-0);
  overflow: hidden;
}

/* ── Section (card con cabecera de color) ── */
.jb-section {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
}

.jb-section__title {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 7px 14px;
}

/* ── Column header (encima de rows) ── */
.jb-col-hdr {
  display: grid;
  background: var(--md-primary-container);
  border-bottom: 1px solid var(--md-outline-variant);
}
.jb-col-hdr.is-2col { grid-template-columns: 1fr 64px 64px; }
.jb-col-hdr.is-1col { grid-template-columns: 1fr 84px; }
.jb-col-hdr.is-3col { grid-template-columns: 1fr 80px 80px 70px; }

.jb-col-hdr > * {
  padding: 5px 8px;
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--md-on-primary-container);
}
.jb-col-hdr > *:first-child { text-align: left; padding-left: 14px; }
.jb-col-hdr .is-slow { color: var(--jb-slow); }
.jb-col-hdr .is-busy { color: var(--jb-busy); }

/* ── Data row ── */
.jb-row {
  display: grid;
  border-bottom: 1px solid var(--md-surface-container);
  min-height: 34px;
  align-items: center;
}
.jb-row:last-child  { border-bottom: none; }
.jb-row:nth-child(even) { background: var(--md-surface-container-low); }

.jb-row.is-2col { grid-template-columns: 1fr 64px 64px; }
.jb-row.is-1col { grid-template-columns: 1fr 84px; }
.jb-row.is-3col { grid-template-columns: 1fr 80px 80px 70px; }

.jb-row__label {
  padding: 6px 14px;
  font-size: .875rem;
  color: var(--md-on-surface-variant);
  line-height: 1.3;
}
.jb-row__slow,
.jb-row__busy,
.jb-row__val {
  padding: 6px 8px;
  font-size: .9375rem;
  font-weight: 700;
  text-align: center;
}
.jb-row__slow { color: var(--jb-slow); background: var(--jb-slow-bg); }
.jb-row__busy { color: var(--jb-busy); background: var(--jb-busy-bg); }
.jb-row__val  {
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  font-weight: 500;
}
.jb-row__slow.is-zero,
.jb-row__busy.is-zero,
.jb-row__val.is-zero {
  color: var(--md-outline) !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* ── MD3 Badge / Chip ── */
.jb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--md-shape-full);
  line-height: 1.2;
}
.jb-badge--slow   { background: var(--jb-slow-border); color: #1B5E20; }
.jb-badge--busy   { background: var(--jb-busy-border); color: var(--jb-brand); }
.jb-badge--brand  { background: var(--md-primary); color: var(--md-on-primary); }
.jb-badge--surf   { background: var(--md-surface-variant); color: var(--md-on-surface-variant); font-weight: 400; }
.jb-badge--pos    { background: #E8F5E9; color: var(--jb-pos); }
.jb-badge--neg    { background: #FFEBEE; color: var(--jb-neg); }
.jb-badge--warn   { background: #FFF8E1; color: var(--jb-warn); }

/* ── Assist chip (MD3) ── */
.jb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface-variant);
  cursor: default;
  transition: background .1s;
}
.jb-chip:hover { background: var(--md-surface-container-low); }

/* ══════════════════════════════════════════════════════════
   9. TABLES
   ══════════════════════════════════════════════════════════ */
.jb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-1);
}
.jb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  background: var(--md-surface-container-lowest);
  white-space: nowrap;
}
.jb-table thead tr { background: var(--md-primary); color: var(--md-on-primary); }
.jb-table th {
  padding: 9px 10px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .02em;
}
.jb-table th:first-child { text-align: left; min-width: 150px; }
.jb-table th.is-slow  { background: var(--jb-slow); }
.jb-table th.is-busy  { background: var(--jb-busy); }
.jb-table th.is-total { background: var(--jb-brand-dark); }

.jb-table tbody tr:nth-child(even) { background: var(--md-surface-container-low); }
.jb-table tbody tr:hover { background: var(--jb-busy-bg); transition: background .1s; }
.jb-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--md-surface-container);
}
.jb-table td:first-child { text-align: left; padding-left: 12px; color: var(--md-on-surface-variant); }
.jb-table td.is-slow  { color: var(--jb-slow); font-weight: 500; }
.jb-table td.is-busy  { color: var(--jb-busy); font-weight: 500; }
.jb-table td.is-total { font-weight: 700; color: var(--md-on-surface); }
.jb-table td.is-zero  { color: var(--md-outline) !important; font-weight: 400 !important; }

/* ══════════════════════════════════════════════════════════
   10. KPI CARDS · DAY CARDS
   ══════════════════════════════════════════════════════════ */

/* ── KPI Grid ── */
.jb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.jb-kpi {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  padding: 14px 16px;
  box-shadow: var(--md-elev-1);
}
.jb-kpi__label {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.jb-kpi__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-on-surface);
  line-height: 1.2;
}
.jb-kpi__var {
  font-size: .78rem;
  font-weight: 700;
  margin-top: 3px;
}
.jb-kpi__var.is-pos { color: var(--jb-pos); }
.jb-kpi__var.is-neg { color: var(--jb-neg); }
.jb-kpi__var.is-neu { color: var(--md-on-surface-variant); }
.jb-kpi__sub { font-size: .6875rem; color: var(--md-outline); margin-top: 2px; }

/* ── Day cards ── */
.jb-day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.jb-day-card {
  border-radius: var(--md-shape-md);
  padding: 12px;
  box-shadow: var(--md-elev-1);
}
.jb-day-card.is-slow { background: var(--jb-slow-bg);  border-left: 3px solid var(--jb-slow); }
.jb-day-card.is-busy { background: var(--jb-busy-bg);  border-left: 3px solid var(--jb-busy); }
.jb-day-card__name  { font-size: .6875rem; font-weight: 700; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .04em; }
.jb-day-card__total { font-size: 1.375rem; font-weight: 700; margin: 4px 0 2px; }
.jb-day-card__tix   { font-size: .6875rem; color: var(--md-outline); }
.jb-day-card__var   { font-size: .75rem; font-weight: 700; margin-top: 4px; }
.jb-day-card__var.is-pos { color: var(--jb-pos); }
.jb-day-card__var.is-neg { color: var(--jb-neg); }

/* ══════════════════════════════════════════════════════════
   11. TOOL GRID (index.html)
   ══════════════════════════════════════════════════════════ */
.jb-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  max-width: 920px;
  margin: 0 auto;
  align-items: start;
  align-content: start;
}
.jb-tool-card {
  background: var(--md-surface-container-lowest);
  border-radius: var(--md-shape-lg);
  padding: 18px 18px 14px;
  color: var(--md-on-surface);
  text-decoration: none;
  box-shadow: var(--md-elev-1);
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.jb-tool-card:hover {
  border-color: var(--md-primary);
  box-shadow: var(--md-elev-3);
  transform: translateY(-2px);
}
.jb-tool-card__icon { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.jb-tool-card__name { font-size: 1rem; font-weight: 700; }
.jb-tool-card__desc { font-size: .8125rem; color: var(--md-on-surface-variant); line-height: 1.4; margin-top: 2px; }
.jb-tool-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.jb-tool-card.is-soon { opacity: .55; pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   12. PIN SCREEN (MD3 "Dialog")
   ══════════════════════════════════════════════════════════ */
.jb-pin {
  position: fixed;
  inset: 0;
  background: var(--md-surface-container-lowest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 999;
}
.jb-pin__logo  { width: 72px; height: 72px; display: block; margin: 0 auto 8px; opacity: .85; }
.jb-pin__title { font-size: 1.375rem; font-weight: 500; text-align: center; margin-bottom: 4px; }
.jb-pin__sub   { font-size: .875rem; color: var(--md-on-surface-variant); text-align: center; }
.jb-pin__dots  { display: flex; gap: 14px; }
.jb-pin__dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--md-outline-variant);
  background: transparent;
  transition: background .15s, border-color .15s;
}
.jb-pin__dot.is-filled { background: var(--md-primary); border-color: var(--md-primary); }
.jb-pin__dot.is-error  { background: var(--md-error);   border-color: var(--md-error); }
.jb-pin__pad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 10px;
}
.jb-pin__btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-size: 1.375rem;
  font-weight: 400;
  transition: background .1s;
}
.jb-pin__btn:hover  { background: var(--md-surface-container-highest); }
.jb-pin__btn:active { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.jb-pin__btn.is-empty { visibility: hidden; }
.jb-pin__error { font-size: .6875rem; color: var(--md-error); height: 18px; letter-spacing: .03em; text-align: center; }

/* ══════════════════════════════════════════════════════════
   13. UTILIDADES
   ══════════════════════════════════════════════════════════ */
.u-pos    { color: var(--jb-pos) !important; }
.u-neg    { color: var(--jb-neg) !important; }
.u-warn   { color: var(--jb-warn) !important; }
.u-muted  { color: var(--md-outline) !important; }
.u-zero   { color: var(--md-outline-variant) !important; font-weight: 400 !important; }
.u-bold   { font-weight: 700 !important; }
.u-center { text-align: center !important; }
.u-right  { text-align: right !important; }

.u-bg-pos  { background: #E8F5E9 !important; }
.u-bg-neg  { background: #FFEBEE !important; }
.u-bg-warn { background: #FFF8E1 !important; }
.u-bg-info { background: var(--md-surface-container) !important; }

.u-divider {
  border: none;
  border-top: 1px solid var(--md-outline-variant);
  margin: 12px 0;
}

/* ══════════════════════════════════════════════════════════
   14. RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .jb-main { padding: 20px; }
  .jb-row__label { font-size: .9375rem; }
}

@media (min-width: 640px) {
  .jb-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .jb-day-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 479px) {
  .jb-tool-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
  .jb-day-grid  { grid-template-columns: repeat(2, 1fr); }
  .jb-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
  .jb-topbar__title { font-size: 1.1rem; }
}