/* =========================================================
   tabtrack-styles.css
   Versión unificada + GRÁFICAS
   - Incluye: Global, Layout, Sidebar, Topnav, Login,
     Dashboard (meses/line chart), trend area, doughnuts,
     mesas/cards, perfil, pagos, planes, utilidades.
   - Añadido soporte CSS específico para canvases/graphs.
   ========================================================= */

/* =========================
   Variables / Root
   ========================= */
:root{
  --blue: #0046ff;
  --blue-strong: #0a3fdc;
  --magenta: #ff00ff;
  --magenta-2: #ff00e6;
  --purple: #7a14ff;
  --celeste: #9fb7ff;
  --sidebar-bg: #f6f6f6;
  --muted: #9aa0ad;
  --divider: #dfe6f0;
  --dot: #bdbdbd;
  --white: #ffffff;
  --body-bg: #fff;
  --font-sans: 'Montserrat', sans-serif;
  --chart-height-sm: 90px;
  --chart-height-md: 120px;
  --chart-height-trend: 220px;
  --donut-big-size: 220px;
  --donut-small-size: 140px;
}

/* =========================
   Reset & Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--body-bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utility */
.hidden{display:none !important}
.text-center{text-align:center}
.flex{display:flex}
.flex-column{display:flex;flex-direction:column}

/* =========================
   App layout (sidebar + main)
   ========================= */
.app{display:flex;min-height:100vh}
.sidebar{
  width:200px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--divider);
  flex-shrink:0;
}
.logo-wrap{height:76px;display:flex;align-items:center;padding-left:18px}
.side-menu{padding-top:8px}
.side-menu a{display:block;padding:14px 18px;color:#222;text-decoration:none;font-weight:600}
.side-menu a.active{background:var(--blue);color:#fff}
.side-divider{height:1px;background:var(--divider);margin:0 12px}

/* Top nav (compartido) */
.topbar{height:76px;border-bottom:1px solid var(--divider);display:flex;align-items:center;justify-content:center;background:var(--white)}
.topnav{display:flex;gap:56px;align-items:center}
.topnav a{text-decoration:none;color:var(--muted);font-weight:600;padding:8px 0}
.topnav a.active{color:var(--blue);position:relative}
.topnav a.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-18px;height:3px;background:var(--blue)}

/* Container helpers */
.container, .container-area{padding:34px 48px;max-width:1200px;margin:0 auto}
@media (max-width:1100px){ .container, .container-area{padding:20px 22px} }

/* =========================
   LOGIN / Landing screen
   ========================= */
.login-bg{
  background: linear-gradient(135deg,#ff00ff,#3b24ff 60%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.login-box{
  width:420px;max-width:90%;padding:32px;border-radius:12px;text-align:center;background:rgba(255,255,255,0.06)
}
.login-logo{font-size:48px;font-weight:800;color:#fff;margin-bottom:24px}
.login-h1{font-size:34px;font-weight:800;margin:0 0 8px}
.login-sub{font-size:18px;margin-bottom:18px}
.input{width:100%;padding:12px 14px;border-radius:8px;border:none;margin-bottom:12px;font-size:15px}
.btn-primary{background:var(--white);color:var(--blue);padding:10px 16px;border-radius:8px;border:none;font-weight:800}

/* =========================
   Dashboard / Meses y LÍNEAS
   ========================= */
/* month columns (row of months) */
.month-row{display:flex;gap:0}
.month-col{
  flex:1;
  padding:2rem;
  border-right:1px dashed var(--divider);
  min-height:220px;
  background:transparent;
}
.month-col:last-child{border-right:none}
.month-col h5{font-weight:600;text-align:center;margin-bottom:1rem}
.month-text{margin-top:1.25rem;font-size:0.9rem;color:#6c757d;text-align:center;line-height:1.4}

/* line charts container */
.line-row{display:flex;gap:0;margin-bottom:18px}
.line-col{flex:1;padding:10px;border-right:1px dashed var(--divider);min-height:var(--chart-height-md);display:flex;flex-direction:column;align-items:center;justify-content:center}
.line-col:last-child{border-right:none}
.line-title{font-weight:700;color:var(--blue);margin-bottom:8px}
.line-canvas{width:100%;height:var(--chart-height-md);position:relative}
.line-canvas canvas{width:100% !important;height:100% !important;display:block}

/* trend area (shaded vertical bars + separators) */
.trend-wrap{position:relative;padding:22px 14px 8px;background:transparent;margin-top:18px}
.trend-wrap .shade{position:absolute;top:0;bottom:0;width:25%}
.trend-wrap .shade.s1{left:0;background:rgba(0,42,255,0.03)}
.trend-wrap .shade.s2{left:25%;background:rgba(0,42,255,0.00)}
.trend-wrap .shade.s3{left:50%;background:rgba(0,42,255,0.03)}
.trend-wrap .shade.s4{left:75%;background:rgba(0,42,255,0.00)}
.trend-wrap .sep{position:absolute;top:0;bottom:0;width:0;border-right:1px dashed var(--divider);z-index:3}
.trend-wrap .sep.s1{left:25%}.trend-wrap .sep.s2{left:50%}.trend-wrap .sep.s3{left:75%}
.trend-canvas{position:relative;z-index:4;height:var(--chart-height-trend);padding:0 12px}
.trend-canvas canvas{width:100% !important;height:100% !important;display:block}

/* date ticks row below trend */
.date-row{display:flex;justify-content:space-between;gap:6px;padding:6px 8px;margin-top:10px}
.date-row .tick{flex:1;text-align:center;color:#9aa0ab;font-size:.78rem;padding-top:8px}
.date-row .box{display:inline-block;padding:6px 10px;border-radius:4px;background:var(--blue);color:#fff;font-weight:700;font-size:.78rem}
.date-row .box-mag{background:var(--magenta)}

/* =========================
   Circular charts (DOUGHNUTS) styling
   ========================= */
/* generic chart wrapper (keeps canvas ratio predictable) */
.chart-wrapper{position:relative;display:flex;align-items:center;justify-content:center}

/* circle-cell (row of small circular charts) */
.circle-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2.5rem 1rem;
  text-align:center;
  border-right:1px dashed var(--divider);
  min-width:160px;
}
.circle-cell:last-child{border-right:none}

/* canvas sizing for small doughnuts */
.circle-cell canvas{width:var(--chart-height-md) !important;height:var(--chart-height-md) !important;display:block}

/* value centered above/over doughnut */
.circle-value{
  position:relative;
  margin-top:-calc(var(--chart-height-md) - 28px); /* pulls value to center of ring */
  font-size:1.4rem;
  font-weight:700;
  color:var(--blue);
  z-index:2;
  background:var(--body-bg);
  padding:0 .25rem;
  border-radius:3px;
}

/* text for circle item */
.circle-text{margin-top:calc(14px + 6px);font-size:0.95rem;color:#495057;line-height:1.4;text-align:center}
.circle-text strong{color:var(--blue)}

/* big donut in header / large ones */
.big-donut{width:var(--donut-big-size);height:var(--donut-big-size);position:relative}
.big-donut canvas{width:100% !important;height:100% !important;display:block}
.big-donut .val{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;color:var(--blue)}

/* small donuts for cards */
.small-donut{width:var(--donut-small-size);height:var(--donut-small-size);position:relative}
.small-donut canvas{width:100% !important;height:100% !important;display:block}
.small-donut .dval{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:800;color:var(--magenta)}

/* helper class to request thin ring from Chart.js,
   Chart option should set: cutout: '80%' or higher */
.doughnut-thin {}

/* =========================
   Mesas / Cards (small & edit grid variants)
   ========================= */
/* small mesa card grid */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:28px;
  align-items:start;
}

/* mesa/card */
.mesa-card{width:100%;border:1px solid var(--divider);background:#fff}
.mesa-header{background:var(--blue);color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-header-active{background:var(--blue);color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-header-free{background:grey;color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-header-alert{background:red;color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-header-parcial{background:aqua;color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-header-pendingclose{background:rgb(26, 196, 26);color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-title{font-size:46px;font-weight:800;margin:0;line-height:1;letter-spacing:-1px}
.mesa-table{padding:0 0 14px 0;background:#fff}
.mesa-table table{width:100%;border-collapse:collapse;font-size:14px}
.mesa-table td{padding:9px 18px;border-top:1px solid var(--divider);vertical-align:middle}
.mesa-table td.label{color:#666;width:48%}
.mesa-table td.value{text-align:right;color:#222;width:52%}
.status-pill{display:inline-block;padding:8px 18px;background:var(--blue);color:#fff;font-weight:700;border-radius:2px;font-size:14px}
.status-pill.pink{background:var(--magenta)}

/* edit-layout variants (cards with big title and small table) */
.card-1{grid-column:1 / 2}
.card-2{grid-column:2 / 3}
.card-3{grid-column:3 / 4}
.card-4{grid-column:1 / 2;grid-row:2}

/* add button */
.add-wrap{display:flex;align-items:center;justify-content:center}
.add-btn{width:78px;height:78px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;border:none;cursor:pointer}

/* mesa "Cierre" variants (card fixed width) */
.mesa-fixed .mesa-card{width:320px}
.cards-grid-fixed{display:grid;grid-template-columns:repeat(3,320px);gap:46px 48px;justify-content:start}

/* =========================
   Perfil / Configuraciones
   ========================= */
.profile-row{display:flex;align-items:center;gap:26px;margin-top:18px}
.avatar{width:110px;height:110px;border-radius:50%;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0}
.greeting{display:flex;flex-direction:column;gap:6px}
.greet-line1,.greet-line2{color:var(--blue);font-size:36px;font-weight:700;margin:0}
.separator-blue{height:3px;background:var(--blue);margin:26px 0 20px 0;width:70%}
.info{max-width:620px;margin-top:6px}
.info-row{padding:18px 0;border-bottom:4px dotted var(--dot);font-size:15px;color:#444;line-height:1.8}
.social-row{margin-top:16px;display:flex;gap:14px;align-items:center}
.social-circle{width:34px;height:34px;border-radius:50%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.open-btn{display:inline-block;margin-top:18px;background:var(--blue);color:#fff;padding:10px 20px;border-radius:20px;text-decoration:none;font-weight:600;font-size:14px}

/* =========================
   Plataforma de pago (lista + dotted)
   ========================= */
.page-title{color:var(--blue);font-weight:800;font-size:68px;line-height:0.95;margin:8px 0 12px 0}
.page-sub{color:#6b6f76;font-size:16px;margin:0 0 30px 0}
.items{margin-top:14px;max-width:760px}
.item{display:flex;align-items:center;gap:22px;padding:14px 0;position:relative}
.icon{width:56px;flex:0 0 56px;display:flex;align-items:flex-start;justify-content:center}
.content{flex:1;display:flex;flex-direction:column;gap:8px}
.label{font-size:16px;color:#333;align-self:flex-start}
.dotted{border-bottom:3px dotted var(--dot);width:100%;height:0;margin-top:6px}

/* =========================
   Planes / Cards estilo grande con gradientes
   ========================= */
.title-large{color:var(--blue);font-size:56px;font-weight:800;line-height:0.95;margin:10px 0 36px 0}
.cards{display:flex;gap:44px;justify-content:space-between;align-items:flex-start}
.card{
  width:310px;
  min-height:660px;
  border-radius:28px;
  padding:28px 28px 36px;
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.card.magenta{background:linear-gradient(180deg,#ff00ff 0%,#ff00e6 100%)}
.card.blue{background:linear-gradient(180deg,#0b48c9 0%,#0739b7 100%)}
.card.gradient{background:linear-gradient(135deg,#0b48c9 0%, #7a14ff 40%, #ff00ff 100%)}
.brand{font-weight:800;font-size:34px;letter-spacing:-1px;color:var(--white);margin-bottom:20px;line-height:0.95}
.plan-title{font-weight:800;font-size:22px;margin:0 0 10px}
.plan-desc{font-size:11px;opacity:0.95;margin-bottom:26px;max-width:230px;line-height:1.2}

/* features list (texto con dot debajo) */
.features{list-style:none;padding:0;margin:8px 0 0 0;flex:1}
.features li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-weight:700;color:rgba(255,255,255,0.96);font-size:15px}
.features .icon{width:24px;height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;opacity:0.95}
.features .icon svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6}
.features .text-block{display:flex;flex-direction:column;gap:8px;flex:1}
.features .text{color:rgba(255,255,255,0.98);font-size:15px;line-height:1.1}
.features .dot{height:0;border-bottom:3px dotted rgba(255,255,255,0.35);width:100%;display:block}
.features li + li{margin-top:6px}
.price-sep{border-bottom:3px dotted rgba(255,255,255,0.35);margin:18px 0 18px}
.price{text-align:center;margin-top:16px}
.price .amount{font-size:28px;font-weight:900;margin-bottom:6px}
.price .small{font-size:11px;opacity:0.95;line-height:1.2;max-width:220px;margin:0 auto}

/* =========================
   Chart interaction hints (visual only)
   ========================= */
/* When Chart.js renders canvas, these wrappers keep ratio and alignment.
   JS should set maintainAspectRatio:false and Chart options for cutout etc. */
.chart-container{width:100%;display:block;position:relative}
.chart-overlay-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}

/* small helper to force canvases not to be stretched by parent flexbox */
canvas{max-width:100%;height:auto;display:block}

/* =========================
   Responsive tweaks shared
   ========================= */
@media (max-width:1180px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .cards{gap:24px;flex-wrap:wrap;justify-content:center}
  .card{width:44%}
  .big-donut{width:180px;height:180px}
}
@media (max-width:760px){
  .cards-grid{grid-template-columns:1fr}
  .cards{flex-direction:column;align-items:center}
  .card{width:86%;min-height:580px}
  .page-title{font-size:48px}
  .title-large{font-size:40px;text-align:center}
  .trend-canvas{height:300px}
  :root{ --donut-big-size:180px; --donut-small-size:120px; --chart-height-trend:260px }
}

/* =========================
   Small utilities
   ========================= */
.center-vert{display:flex;align-items:center;justify-content:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-18{margin-top:18px}
.p-8{padding:8px}.p-12{padding:12px}
.text-muted{color:var(--muted)}
.bold{font-weight:700}

/* =========================
   End file
   ========================= */
/* =========================================================
   tabtrack-styles.css
   Unificación final — incluye:
   - Variables / base / layout
   - Sidebar, topnav (tus reglas exactas)
   - Dashboards, charts (line + doughnut), trend area
   - Mesas/cards, perfil, plataforma de pago, planes
   - Tus fragmentos adicionales (month-col, main-header, circle-cell, etc.)
   ========================================================= */


canvas{max-width:100%;height:auto;display:block}

/* small utilities */
.hidden{display:none !important}
.text-center{text-align:center}
.flex{display:flex}
.flex-column{display:flex;flex-direction:column}

/* --------------------------
   App layout (sidebar + main)
   -------------------------- */
/* Your exact sidebar rules (you provided) */
.sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #dee2e6;
}
.sidebar .nav-link {
  color: #495057;
  padding: 0.75rem 1rem;
}
.sidebar .nav-link.active {
  background: #0046ff;
  color: #fff;
}

/* keep legacy .side-menu for other views */
.logo-wrap{height:76px;display:flex;align-items:center;padding-left:18px}

/* --------------------------
   Top navigation — include both variants (.topnav and .top-nav)
   -------------------------- */
/* generic topnav (kept for older pages) */
.topnav{display:flex;gap:56px;align-items:center}
.topnav a{text-decoration:none;color:var(--muted);font-weight:600;padding:8px 0}
.topnav a.active{color:var(--blue);position:relative}
.topnav a.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-18px;height:3px;background:var(--blue)}

/* Your specific 'top-nav' rules (from your fragment) */
.top-nav {
  border-bottom: 1px solid #dee2e6;
}
.top-nav .nav-link {
  color: #0046ff;
  padding: 1rem;
  position: relative;
  font-weight: 600;
}
.top-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 3px;
  background: #0046ff;
}

/* --------------------------
   Container helpers
   -------------------------- */
.container, .container-area{padding:34px 48px;max-width:1200px;margin:0 auto}
.container-area{ padding-top:22px; padding-bottom:10px; } /* from your fragment */
@media (max-width:1100px){ .container, .container-area{padding:20px 22px} }

/* --------------------------
   Month columns (your provided rules)
   -------------------------- */
.month-row{display:flex;gap:0}
.month-col {
  border-right: 1px dashed #dee2e6;
  padding: 2rem;
  height: auto;
}
.month-col:last-child { border-right: none; }
.month-col h5 {
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}
.month-col canvas {
  display: block;
  margin: 0 auto;
  height: 90px !important;
}
.month-text {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: #6c757d;
  text-align: center;
  line-height: 1.4;
}

/* --------------------------
   Circles (your circle-cell overrides)
   -------------------------- */
.circle-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem;
  text-align: center;
  border-right: 1px dashed #dee2e6;
}
.circle-cell:last-child {
  border-right: none;
}
.circle-cell canvas {
  width: 200px !important;
  height: 120px !important;
}
.circle-value {
  position: relative;
  margin-top: -85px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0046ff;
  z-index: 1;
  background: #f8f9fa;
  padding: 0 0.25rem;
}
.circle-text {
  margin-top: 5.5rem;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.4;
}
.circle-text strong {
  color: #0046ff;
}

/* --------------------------
   Detail row (generic / your rules)
   -------------------------- */
.detail-row{display:flex;gap:0}
.detail-row > div {
  border-right: 1px dashed #dee2e6;
  padding: 2.5rem 1rem;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.5;
}
.detail-row > div:last-child { border-right: none; }

/* --------------------------
   Sub-nav (your fragment)
   -------------------------- */
.subnav {
  border-bottom: 1px solid #dee2e6;
  background: #fff;
}
.subnav .nav-link {
  color: #6c757d;
  padding: .75rem 1rem;
  font-weight: 500;
  border-right: 1px solid #dee2e6;
}
.subnav .nav-link:last-child { border-right: none; }
.subnav .nav-link.active {
  color: #0046ff;
  background: #e9ecef;
}

/* --------------------------
   Main header 3 columns (your fragment)
   -------------------------- */
.main-header { padding: 2rem 1rem; }
.main-header .title { font-size: 3.5rem; font-weight: 700; color: #0046ff; line-height: 1.1; }
.main-header .title .currency { font-size: 2rem; vertical-align: top; margin-left: .5rem; }
.main-header .desc { font-size: 1rem; color: #495057; line-height: 1.6; }
.main-header .chart-col { display: flex; justify-content: center; align-items: center; }
.main-header .chart-wrapper { position: relative; width: 200px; height: 200px; }
.main-header canvas { max-width: 100%; max-height: 100%; }
.main-header .big-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; font-weight: 700; color: #0046ff; }

/* Slight alternate header row definitions used elsewhere (kept for responsive sections) */
.main-header { padding:2rem 1rem; }
.main-header .col-left { display:flex; flex-direction:column; justify-content:center; }
.main-header .month { font-size:3rem; font-weight:700; color:#0046ff; }
.main-header .amount { font-size:3rem; font-weight:700; color:#0046ff; line-height:1; }
.main-header .col-center { padding:0 1rem; }
.main-header .col-right { display:flex; justify-content:center; align-items:center; }
.chart-circle { position:relative; width:220px; height:220px; }
.chart-circle canvas { max-width:100%; max-height:100%; }
.chart-circle .value { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:3rem; font-weight:700; color:#0046ff; }

/* --------------------------
   Line chart container (your fragment)
   -------------------------- */
.line-chart-container { position:relative; width:100%; padding-top:25%; }
.line-chart-container canvas { position:absolute; top:0; left:0; width:100%!important; height:100%!important; }
.date-axis { display:flex; justify-content:center; align-items:center; font-size:.8rem; color:#6c757d; margin:1rem 0; }
.date-axis div { margin:0 .5rem; text-align:center; }
.date-axis .active { color:#0046ff; font-weight:600; }

/* --------------------------
   Trend area & week-row (your fragments and enhancements)
   -------------------------- */
.week-row { display:flex; margin-bottom:8px; }
.week { flex:1; text-align:center; padding:14px 0; font-weight:600; color:#222; }

.trend-wrap { position:relative; margin-top:8px; padding:28px 12px 12px; background:transparent; }
/* vertical shaded column blocks (cover full height) */
.trend-wrap .shade { position:absolute; top:0; bottom:0; width:25%; pointer-events:none; }
.trend-wrap .shade:nth-of-type(1){ left:0; background:rgba(0,42,255,0.03); }
.trend-wrap .shade:nth-of-type(2){ left:25%; background:rgba(0,42,255,0.00); }
.trend-wrap .shade:nth-of-type(3){ left:50%; background:rgba(0,42,255,0.03); }
.trend-wrap .shade:nth-of-type(4){ left:75%; background:rgba(0,42,255,0.00); }

/* dashed separators full height */
.trend-wrap .sep { position:absolute; top:0; bottom:0; width:0; border-right:1px dashed var(--divider); z-index:4; }
.trend-wrap .sep.s2{ left:50%; } .trend-wrap .sep.s3{ left:75%; }
.trend-wrap .sep.s1{ left:25%; }

/* trend canvas */
.trend-canvas { position:relative; z-index:3; height:220px; padding:0 8px; }
.trend-canvas canvas{ width:100% !important; height:100% !important; display:block; }

/* date ticks row below trend */
.date-row { display:flex; justify-content:space-between; align-items:flex-start; padding:6px 8px; margin-top:10px; }
.date-row .tick { flex:1; text-align:center; color:#9aa0ab; font-size:.8rem; padding-top:6px; }

/* --------------------------
   Four columns area (cards with donuts) — your fragments
   -------------------------- */
.four-cols { display:flex; border-top:1px dashed var(--divider); margin-top:24px; }
.col-block {
  flex:1;
  padding:34px 28px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  background:#fff;
}
.col-block:nth-child(odd){ background:var(--col-light); }

/* thin vertical line between columns */
.col-block + .col-block::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:rgba(0,42,255,0.06);
  z-index:4;
}
.col-block { border-right:1px dashed var(--divider); }
.col-block:last-child { border-right:none; }

.donut { width:170px; height:170px; position:relative; margin-top:8px; }
.donut canvas{ width:100% !important; height:100% !important; display:block; }
.donut .dval { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:34px; font-weight:700; color:var(--blue); }

.small-title { font-weight:700; color:var(--blue); margin-top:12px; text-align:center; }
.big-num { margin-top:24px; font-size:36px; font-weight:700; color:var(--blue); }
.para { margin-top:18px; color:#444; font-size:.9rem; line-height:1.45; text-align:left; }

/* tweak spacing */
.week-row{ margin-bottom:0; }
.trend-wrap{ margin-top:6px; padding-top:18px; padding-bottom:6px; }

/* --------------------------
   Bottom text columns (your fragment)
   -------------------------- */
.bottom-row{display:flex;gap:12px;margin-top:18px;padding-top:18px}
.bottom-col{flex:1;padding:0 8px}
.bottom-col h6{font-size:.95rem;font-weight:800;color:var(--blue);margin-bottom:8px}
.bottom-col p{font-size:.88rem;color:#444;line-height:1.5;margin:0}

/* --------------------------
   Header row (hdr-left, hdr-center, hdr-right) — from earlier
   -------------------------- */
.header-row{display:flex;align-items:flex-start;gap:18px}
.hdr-left{flex:0 0 40%}
.hdr-center{flex:0 0 34%}
.hdr-right{flex:0 0 26%;display:flex;align-items:center;justify-content:flex-end;gap:22px}

.month-title{font-size:48px;font-weight:800;color:var(--blue);margin:0 0 8px}
.amount{font-size:64px;font-weight:900;color:var(--blue);margin:0;line-height:0.95}
.desc{font-size:0.92rem;color:#444;line-height:1.6;margin:0;max-width:520px}

/* person icons */
.person-block{display:flex;flex-direction:column;align-items:center;gap:6px}
.person-icon{width:54px;height:84px;display:block}
.person-val{font-weight:800;color:#9aa0ab;font-size:18px}
.person-label{font-weight:800;color:#9aa0ab;font-size:18px;margin-top:2px}

/* big donut in header */
.big-donut{width:200px;height:200px;position:relative}
.big-donut canvas{width:100% !important;height:100% !important;display:block}
.big-donut .val{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;color:var(--blue)}

/* --------------------------
   Small chart blocks (your fragment)
   -------------------------- */
.bottom-row .col { border-right: 1px dashed #dee2e6; }
.bottom-row .col:last-child { border-right: none; }
.small-chart { text-align: center; padding: 2rem 1rem; }
.small-chart .chart-wrapper { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.small-chart canvas { max-width: 100%; max-height: 100%; }
.small-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 700; color: #0046ff; }
.small-desc { margin-top: 2rem; font-size: .85rem; color: #495057; line-height: 1.5; }
.small-desc strong { color: #0046ff; }

/* --------------------------
   Plan cards + features list (dot-under-text) — kept from previous combined CSS
   -------------------------- */
.cards{display:flex;gap:44px;justify-content:space-between;align-items:flex-start}
.card{
  width:310px;
  min-height:660px;
  border-radius:28px;
  padding:28px 28px 36px;
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.card.magenta{background:linear-gradient(180deg,#ff00ff 0%,#ff00e6 100%)}
.card.blue{background:linear-gradient(180deg,#0b48c9 0%,#0739b7 100%)}
.card.gradient{background:linear-gradient(135deg,#0b48c9 0%, #7a14ff 40%, #ff00ff 100%)}
.brand{font-weight:800;font-size:34px;letter-spacing:-1px;color:var(--white);margin-bottom:20px;line-height:0.95}
.plan-title{font-weight:800;font-size:22px;margin:0 0 10px}
.plan-desc{font-size:11px;opacity:0.95;margin-bottom:26px;max-width:230px;line-height:1.2}

/* features list (text-block + dotted line under) */
.features{list-style:none;padding:0;margin:8px 0 0 0;flex:1}
.features li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-weight:700;color:rgba(255,255,255,0.96);font-size:15px}
.features .icon{width:24px;height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;opacity:0.95}
.features .icon svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6}
.features .text-block{display:flex;flex-direction:column;gap:8px;flex:1}
.features .text{color:rgba(255,255,255,0.98);font-size:15px;line-height:1.1}
.features .dot{height:0;border-bottom:3px dotted rgba(255,255,255,0.35);width:100%;display:block}
.features li + li{margin-top:6px}
.price-sep{border-bottom:3px dotted rgba(255,255,255,0.35);margin:18px 0 18px}
.price{text-align:center;margin-top:16px}
.price .amount{font-size:28px;font-weight:900;margin-bottom:6px}
.price .small{font-size:11px;opacity:0.95;line-height:1.2;max-width:220px;margin:0 auto}

/* --------------------------
   Mesas small cards (mesa-card) — kept earlier rules
   -------------------------- */
.mesa-card{width:100%;border:1px solid var(--divider);background:#fff}
.mesa-header{background:var(--blue);color:#fff;padding:14px 18px;display:flex;align-items:flex-end;justify-content:space-between}
.mesa-title{font-size:46px;font-weight:800;margin:0;line-height:1;letter-spacing:-1px}
.mesa-table{padding:0 0 14px 0;background:#fff}
.mesa-table table{width:100%;border-collapse:collapse;font-size:14px}
.mesa-table td{padding:9px 18px;border-top:1px solid var(--divider);vertical-align:middle}
.mesa-table td.label{color:#666;width:48%}
.mesa-table td.value{text-align:right;color:#222;width:52%}

/* --------------------------
   Responsive tweaks
   -------------------------- */
@media(max-width:991px){
  .week { font-size:.95rem; }
  .trend-canvas{ height:240px; }
  .four-cols{ flex-direction:column; }
  .col-block{ border-right:none; border-bottom:1px dashed var(--divider); }
  .col-block + .col-block::before{ display:none; }
}
@media (max-width:1100px){
  .hdr-left,.hdr-center,.hdr-right{flex:0 0 100%}
  .hdr-right{justify-content:flex-start;margin-top:12px}
  .trend-canvas{height:300px}
  .bottom-row{flex-direction:column}
}
@media (max-width:760px){
  .title-large{font-size:40px;text-align:center}
  .card{width:86%;min-height:580px}
  :root{ --donut-big-size:180px; --donut-small-size:120px; --chart-height-trend:260px }
}

/* --------------------------
   Small helpers & utilities
   -------------------------- */
.center-vert{display:flex;align-items:center;justify-content:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-18{margin-top:18px}
.p-8{padding:8px}.p-12{padding:12px}
.text-muted{color:var(--muted)}
.bold{font-weight:700}

/* =========================
   End of file
   ========================= */

.mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    padding: 20px;
}

.mesa-circle-container {
    position: relative;
    display: inline-block;
}

.mesa-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.mesa-circle:hover {
    transform: scale(1.1);
    border-color: rgba(255,255,255,0.5);
}

.mesa-number {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}

.mesa-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    color: black;
}

.mesa-circle-container:hover .mesa-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-content h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.tooltip-details p {
    margin: 5px 0;
    font-size: 0.9em;
}

/* Contenedor general del ticket */
  .ticket {
    font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 520px;
    margin: 0 auto;
  }

  .ticket-header {
    text-align: center;
    padding: 12px 16px;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
  }

  .ticket-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
  }

  .ticket-subtitle {
    font-size: 0.85rem;
    color: #6b7280; /* gris suave */
  }

  .ticket-body {
    padding: 12px 16px;
  }

  .ticket-items {
    width: 100%;
    border-collapse: collapse;
  }

  .ticket-items th {
    text-align: left;
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
    padding-bottom: 8px;
  }

  .ticket-items td {
    padding: 6px 0;
    font-size: 0.95rem;
    color: #111827;
    vertical-align: top;
  }

  .ticket-items .name {
    font-weight: 600;
  }

  .ticket-row {
    border-bottom: 1px dashed rgba(0,0,0,0.06);
    padding-bottom: 6px;
  }

  .qty {
    width: 48px;
    text-align: center;
    color: #374151;
    font-weight: 600;
  }

  .price {
    width: 90px;
    text-align: right;
    color: #111827;
    font-variant-numeric: tabular-nums;
  }

  .ticket-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .ticket-summary .label {
    color: #6b7280;
    font-size: 0.9rem;
  }

  .ticket-summary .value {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }

  /* Botón pequeño de cerrar en footer */
  .modal-footer .btn {
    min-width: 90px;
  }

  /* Pequeño detalle visual */
  .chip {
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    background: linear-gradient(90deg,#e6f0ff,#f3f9ff);
    color:#0f172a;
    font-weight:600;
    font-size:0.78rem;
  }

  /* Responsive */
  @media (max-width: 420px) {
    .ticket { padding: 0 6px; }
    .price { width: 80px; }
  }

  .top-nav .sucursal-wrapper { position: relative; display: inline-flex; align-items: center; gap:8px; }
.top-nav .profile-btn { display:flex; align-items:center; gap:8px; border-radius:999px; padding:6px 8px; background:#fff; border:1px solid #e6e9ef; cursor:pointer; }
.top-nav .profile-circle { width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#f2f4f8; border:1px solid #eef2f6; }
.top-nav .profile-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.top-nav .profile-label { font-size:13px; color:#102a43; font-weight:600; margin-left:4px; }
.top-nav .chev { font-size:12px; color:#6b7280; margin-left:4px; }

/* dropdown */
.top-nav .dropdown-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:260px; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(2,6,23,0.12); border:1px solid #e6e9ef; padding:6px; z-index:1200; display:none; }
.top-nav .dropdown-menu.show { display:block; }
.top-nav .sucursal-item { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer; }
.top-nav .sucursal-item:hover { background:#f5f8ff; }
.top-nav .mini { width:40px; height:40px; border-radius:8px; overflow:hidden; background:#eee; border:1px solid #f0f2f5; }
.top-nav .meta { font-size:13px; color:#0f1724; }
.top-nav .meta small { display:block; color:#6b7280; font-weight:500; font-size:12px; }
.top-nav .dropdown-footer { padding-top:6px; border-top:1px dashed #eef2f6; margin-top:8px; font-size:13px; color:#6b7280; text-align:center; }