body { font-family: Arial; padding: 30px; overflow: hidden;
}
.cards-container { display: flex; gap: 20px; align-items: stretch; }
.card { background: #fff;
    padding: 16px; box-sizing: border-box;
}
.filters-card { flex: 0 0 30%; height:90vh; overflow-y:auto; }
.results-card { flex: 0 0 70%; height:90vh;
    overflow-y:auto; overflow-x:auto;
}
.filter-group { margin-top: 15px; }
.filter-group strong { display: block; margin-bottom: 5px; }
.checkbox-container {
    border:1px solid #ccc; width:100%;
    height:100px; overflow-y:auto; padding:5px;
}
.checkbox-container label { display:block; margin-bottom:3px; }
label, select, button { width:100%; margin-top:5px; }
table {
    border-collapse: collapse; width:100%; margin-top:20px;
}
th, td {
    border:1px solid #777; padding:8px; text-align:center;
}
th { background: #ccc; }
.chart-btn {
    background:none; border:none; cursor:pointer;
    font-size:1.1em;
}
#chart-container {
    display:none; position:absolute; width:500px; height:330px;
    background:#fff; border:1px solid #666; padding:10px;
    box-shadow: rgba(0,0,0,0.5) 0 0 10px;
    z-index:999;
}
#close-chart {
    position:absolute; top:2px; right:4px;
    background:none; border:none; font-size:1.2em; cursor:pointer;
}
#chartCanvas { width:100% !important; height:100% !important; }
.select-custom {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 1em;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select-custom:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 4px rgba(102, 175, 233, 0.6);
}

.select2-selection {
    margin: 10px 0;
}

/* Spinner pequeño */
.chart-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: rgba(40,51,107,1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Estado visual del botón mientras carga */
.chart-btn.loading { pointer-events: none; opacity: 0.7; }

/* Accordion styles for filters */
.accordion {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e6ef;
  background: #fff;
  margin-bottom: 12px;
  margin-top: 12px;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  background: linear-gradient(0deg, #f8f9ff, #ffffff);
  user-select: none;
  gap: 8px;
}
.accordion-header:focus { outline: 2px solid rgba(40,51,107,0.14); }
.accordion-title { font-weight: 600; color: #28336b; }
.accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #28336b;
  font-size: 20px;
}
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease, padding 180ms ease;
  padding: 0 12px;
}
.accordion-panel.open {
  padding: 14px 12px 18px 12px;
}
.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  border: 0px;
  padding: 1px;
}
.checkbox-container label {
  display: inline-flex;
  margin: 0px 0px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fbfbff;
  border: 1px solid #eef0fb;
  font-size: 13px;
  color: #1f2a57;
}

/* Estilo cuando el label contiene un input checked (CSS-only usando :has) */
.checkbox-container label:has(input[type="checkbox"]:checked) {
  background: #28336b;
  border-color: rgba(40,51,107,0.18);
  color: #fff;
  box-shadow: 0 2px 6px rgba(40,51,107,0.12);
}



.accordion-helper {
  font-size: 12px;
  color: #6b6f86;
  margin-left: 8px;
}

/* Deseleccionar todo */
.accordion-panel .deselect-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6e9f6;
  color: #28336b;
  font-size: 13px;
  cursor: pointer;
}
.accordion-panel .deselect-all:active { transform: translateY(1px); }
.accordion-panel .deselect-all .dot { width:8px; height:8px; border-radius:50%; background:#f2f4ff; border:1px solid #dfe6ff; display:inline-block; }


button {
  font-size: 18px;
  width: 100%;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow,transform;
  background: radial-gradient( 100% 100% at 100% 0%, #ffb561 0%, #ea8a19 100% );
  box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  padding: 0 2em;
  color: #fff;
  height: 3em;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  border-radius: 10px;
}

button:hover {
  box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #ea8a19;
  transform: translateY(-0.1em);
}

button:active {
  box-shadow: inset 0px 0.1em 0.6em #ea8a19;
  transform: translateY(0em);
}



.results-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 820px;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #1f2a57;
  font-size: 14px;
  background: transparent;
}

.results-card thead {
  position: sticky;
  top: 0;
  z-index: 7;
  display: block; 
  background: linear-gradient(180deg,#ffffff 0%, #f4f6fb 100%);
  border-bottom: 1px solid rgba(40,51,107,0.08);
  border-radius: 10px;
}

.results-card thead tr {
  display: grid;
  grid-template-columns: 46px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 6px;
  box-sizing: border-box;
}

.results-card thead th {
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: left;
}

.results-card thead th {
  color: #ffffff;
  text-align: center;
}
.results-card thead {
  background: linear-gradient(180deg, #2b3a6a 0%, #27315f 100%);
}

.results-card tbody {
  display: block;
  padding: 12px 6px;
  overflow: auto;
  box-sizing: border-box;
}

.results-card tbody tr {
  display: grid;
  grid-template-columns: 46px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 12px;
  align-items: center;
  background: #ffffff;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.04);
  transition: transform .12s ease, box-shadow .14s ease, background-color .12s ease;
  box-sizing: border-box;
  min-width: 760px;
}

.results-card thead th:nth-child(1), .results-card tbody td:nth-child(1) { text-align:center; }
.results-card thead th:nth-child(5), .results-card tbody td:nth-child(5),
.results-card thead th:nth-child(6), .results-card tbody td:nth-child(6),
.results-card thead th:nth-child(7), .results-card tbody td:nth-child(7) { text-align:right; }

.results-card thead th, .results-card tbody td {
  padding: 0;
  border: 0 !important;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-card tbody td:nth-child(4) {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.results-card tbody tr:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(16,24,40,0.08);
}

.results-card tbody .chart-btn {
  width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 8px; border: 1px solid rgba(40,51,107,0.06);
  background: linear-gradient(180deg,#ffffff,#f6f9ff); color:#28336b;
  box-shadow: 0 2px 8px rgba(18,33,74,0.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.results-card tbody .chart-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,33,74,0.06); }

.results-card tbody tr:focus-within { outline: 3px solid rgba(40,51,107,0.06); outline-offset: 2px; }
.results-card tbody .chart-btn:focus { box-shadow: 0 0 0 4px rgba(40,51,107,0.12); outline: none; }

.results-card > h2 {
  margin: 6px 12px 18px;
  padding: 14px 18px;
  text-align: center;            
  background: linear-gradient(180deg,#f7f9ff 0%, #ffffff 100%);
  border-radius: 10px;
  color: #0f2340;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  border: 1px solid rgba(40,51,107,0.06);
  line-height: 1.2;
  display: block;
  word-break: break-word;
}

.results-card > h2 small,
.results-card > h2 .muted {
  display: block;
  font-weight: 600;
  color: #44506a;
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.95;
}
 /* Estilos para buscador y lista de locales dentro del accordion */
 #local-search { font-size:14px; }
 .local-item:hover { background: rgba(40,51,107,0.03); cursor: pointer; }
 .local-item input { margin-right:8px; }
 #local-noresults { font-size:13px; }

 /* Tooltip enriquecido para Transacciones */
.trans-tooltip {
  position: fixed;
  z-index: 12000;
  background: #fff;
  color: #222;
  border: 1px solid rgba(34,41,82,0.08);
  box-shadow: 0 8px 24px rgba(34,41,82,0.08);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  max-width: 360px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trans-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  white-space: normal;
}
.trans-tooltip h4 { margin: 0 0 6px 0; font-size:13px; color:#28336b; font-weight:600; }
.trans-tooltip ul { margin:0; padding:0 0 0 14px; }
.trans-tooltip li { margin: 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trans-cell { cursor: help; position: relative; outline: none; }

/* Tooltip enriquecido (transacciones / mermas) */
.trans-tooltip, .merma-tooltip {
  position: fixed;
  z-index: 12000;
  background: #fff;
  color: #222;
  border: 1px solid rgba(34,41,82,0.08);
  box-shadow: 0 8px 24px rgba(34,41,82,0.08);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  max-width: 420px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
}
.trans-tooltip.visible, .merma-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.trans-tooltip h4, .merma-tooltip h4 { margin: 0 0 6px 0; font-size:13px; color:#28336b; font-weight:600; }
.trans-tooltip ul, .merma-tooltip ul { margin:0; padding:0 0 0 14px; }
.trans-tooltip li, .merma-tooltip li { margin: 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.merma-cell, .trans-cell { cursor: help; position: relative; outline: none; }


/* Chart and popover styles — palette #28336b, Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --brand-900: #28336b;
  --brand-800: #2b3a6a;
  --brand-700: #27315f;
  --muted: #6b6f86;
  --surface: #ffffff;
  --bg-soft: #f6f8ff;
  --card-shadow: 0 10px 30px rgba(16,24,40,0.06);
  --glass: rgba(40,51,107,0.06);
  --accent: rgba(40,51,107,0.12);
  --success: #2fa84f;
  --danger: #e05151;
}

/* Ensure charts use the app font and inherit color rhythm */
#chart-container,
#chart-container * {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #0f2340;
}

/* Chart container: floating card with subtle shadow and rounded corners */
#chart-container {
  display: none;
  position: absolute;
  z-index: 12000;
  width: min(680px, 92vw);
  height: min(420px, 62vh);
  max-width: 680px;
  max-height: 520px;
  background: linear-gradient(180deg, var(--surface), #fbfdff);
  border-radius: 12px;
  border: 1px solid rgba(40,51,107,0.08);
  box-shadow: var(--card-shadow);
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Close button */
#close-chart {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--brand-900);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
}
#close-chart:focus { outline: 3px solid rgba(40,51,107,0.12); }

/* Canvas sizing and responsive behavior */
#chartCanvas {
  width: 100% !important;
  height: calc(100% - 36px) !important; /* leave room for heading/controls */
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40,51,107,0.02), rgba(40,51,107,0.00));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Chart header (optional, space for legend or title) */
#chart-container .chart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  height: 28px;
  color: var(--brand-900);
  font-weight: 600;
  font-size: 14px;
}

/* Small pill legend */
#chart-container .chart-legend {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
#chart-container .legend-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #274056;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

/* Spinner used by chart buttons (keeps same visual as app) */
.chart-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: var(--brand-900);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chart card focus ring for keyboard users */
#chart-container:focus-within {
  outline: 4px solid rgba(40,51,107,0.08);
  outline-offset: 4px;
}

/* Tooltip / Popover styling used for data points if created in DOM */
.chart-popover {
  position: fixed;
  z-index: 13000;
  background: var(--surface);
  color: #0f2340;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,0.08);
  border: 1px solid rgba(40,51,107,0.06);
  font-size: 13px;
  line-height: 1.35;
  max-width: 420px;
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 160ms ease, transform 160ms ease;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}
.chart-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chart-popover h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--brand-900);
  font-weight: 700;
}
.chart-popover ul { margin: 0; padding-left: 14px; }
.chart-popover li { margin: 4px 0; white-space: normal; color: #253244; }

/* Chart.js canvas fallback background for low-data states */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  height: 100%;
}

/* Utility responsive tweaks */
@media (max-width: 880px) {
  #chart-container { width: calc(100vw - 24px); left: 12px !important; right: 12px !important; height: 56vh; }
  #chartCanvas { height: calc(100% - 38px) !important; }
}

/* Color tokens for dataset usage (preferred order) */
.chart-color-1 { --cs: var(--brand-900); }
.chart-color-2 { --cs: #3b6fb8; }
.chart-color-3 { --cs: #7aa7ff; }
.chart-color-4 { --cs: var(--success); }
.chart-color-5 { --cs: var(--danger); }

/* Chart.js recommended default plugin styles (applied via config) */
.canvas-gridline {
  stroke: rgba(40,51,107,0.06);
}
.canvas-tick {
  color: #556078;
  font: 12px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  height: 500;
}

.trans-tooltip .tt-table, .merma-tooltip .tt-table, .ajustesinv-tooltip .tt-table, .tt-table {
  border-collapse: collapse;
  font-size:13px;
  min-width: 320px;
}
.tt-table th, .tt-table td {
  border: 1px solid #e6e9f2;
  padding: 6px 8px;
}
.tt-table thead th {
  background: #f6f8fc;
  color: #28336b;
  font-weight:700;
}
.tt-subtotal td { background:#fbfbfd; }
.tt-total td { background:#f2f4f8; }
.tt-table-wrapper h4 { margin:0 0 6px 0; font-size:14px; color:#28336b; }

.trans-tooltip, .merma-tooltip, .ajustesinv-tooltip {
  box-sizing: border-box;
  max-width: 520px;         
  max-height: 560px;        /* altura máxima; ajusta según prefieras */
  overflow: hidden;         
  padding: 10px;
  background: #fff;
  border: 1px solid #e6e9f2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  z-index: 99999;
}

.trans-tooltip .tt-table-wrapper,
.ajustesinv-tooltip .tt-table-wrapper,
.merma-tooltip .tt-table-wrapper {
  display: block;
  max-height: 500px;        
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;       
}

.tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tt-table th, .tt-table td {
  border: 1px solid #eef1f7;
  padding: 6px 8px;
  vertical-align: middle;
}
.tt-table thead th { background:#f6f8fc; color:#28336b; font-weight:700; }
.tt-subtotal td { background:#fbfbfd; }
.tt-total td { background:#f2f4f8; font-weight:800; }

/* permitir interacción cuando está visible */
.trans-tooltip.visible,
.merma-tooltip.visible,
.ajustesinv-tooltip.visible {
  pointer-events: auto; /* permite hover, scroll y selección dentro del tooltip */
  opacity: 1;
  transform: translateY(0) scale(1);
}

#global-data-tooltip {
  position: fixed;
  left: -9999px;
  top: -9999px;
  pointer-events: none;
  z-index: 99999;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  color: #28336b;
  font-size: 13px;
  line-height: 1.3;
  transition: opacity 160ms ease, transform 160ms ease;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  will-change: transform, opacity, left, top;
}
#global-data-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.trans-tooltip,
.merma-tooltip,
.ajustesinv-tooltip,
.existencia-tooltip,
.promedio-tooltip {
  box-sizing: border-box;
  max-width: 520px;
  min-width: 260px;
  max-height: 560px;
  overflow: hidden;
  padding: 10px;
  background: #fff;
  border: 1px solid #e6e9f2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  z-index: 99999;
  color: #28336b;
}

.existencia-tooltip .tt-wrapper,
.promedio-tooltip .tt-wrapper,
.trans-tooltip .tt-table-wrapper,
.merma-tooltip .tt-table-wrapper,
.ajustesinv-tooltip .tt-table-wrapper {
  display: block;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* tabla general (ya la tienes) */
.tt-table { width:100%; border-collapse:collapse; font-size:13px; }
.tt-table th, .tt-table td { border:1px solid #eef1f7; padding:6px 8px; vertical-align: middle; }
.tt-table thead th { background:#f6f8fc; color:#28336b; font-weight:700; }
.tt-subtotal td { background:#fbfbfd; }
.tt-total td { background:#f2f4f8; font-weight:800; }
.tt-table-wrapper h4 { margin:0 0 6px 0; font-size:14px; color:#28336b; }
.tt-wrapper { min-width: 220px; }
.tt-wrapper table.tt-table { border: none; }
.tt-wrapper td { border: none; padding:6px 8px; }
.tt-wrapper .tt-total td { background:#f2f4f8; font-weight:700; }
#global-data-tooltip:focus { outline: none; box-shadow: 0 0 0 3px rgba(40,51,107,0.08); }
.trans-tooltip.visible,
.merma-tooltip.visible,
.ajustesinv-tooltip.visible,
.existencia-tooltip.visible,
.promedio-tooltip.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}