/* Kukulcan — small card styles for indicators (accent for Total) */

:root {
  /* reuse existing vars if present; fallback values if not */
  --kuk-rose: #CB1D73;
  --kuk-cyan: #06b6d4;
  --kuk-matte: #7393C6;
  --kuk-card-border: rgba(2,6,23,0.06);
  --kuk-muted: #6b7280;
}

/* Base summary card: equal height, compact padding and room for bottom accent bar */
.summary-card {
  position: relative;
  box-sizing: border-box;
  min-height: 100px;                /* reduce vertical visual bulk */
  padding: 0.85rem 1rem 1.25rem;    /* tighter top padding, keep bottom room for bar */
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--kuk-card-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Bottom accent bar common placement (thin) */
.summary-card::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); /* neutral fallback */
  box-shadow: 0 6px 18px rgba(0,0,0,0.02);
}

/* Variant colours (use gradients for subtle richness) */
.summary-card.total-card::after {
  background: linear-gradient(90deg, var(--kuk-rose), #d1347f);
  box-shadow: 0 8px 20px rgba(203,29,115,0.06);
}

.summary-card.lastyear-card::after {
  background: linear-gradient(90deg, var(--kuk-cyan), #00bfcf);
  box-shadow: 0 8px 20px rgba(6,182,212,0.06);
}

.summary-card.percent-card::after {
  background: linear-gradient(90deg, var(--kuk-matte), #5a84b8);
  box-shadow: 0 8px 20px rgba(115,147,198,0.06);
}

/* Value and label helpers */
.summary-card .label {
  font-size: 0.7rem;
  color: var(--kuk-muted);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.summary-card .value {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f1724;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* subtle meta helper below value */
.summary-card .meta {
  font-size: 0.78rem;
  color: var(--kuk-muted);
}

/* hover lift for interactive feel */
.summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.06);
}

/* ensure bottom accent never overlaps text on very small cards */
.summary-card::after {
  bottom: 12px;
  height: 6px;
}

/* Slightly shorten the accent width for subtler look on large screens */
@media (min-width: 1024px) {
  .summary-card::after { left: 20px; right: 20px; }
}

/* Make the percentage value green when above average for quick at-a-glance */
.summary-card.percent-card .value.above { color: #16a34a; } /* add class 'above' server-side if appropriate */

/* kukulkan-theme.css
   Fallback layout + card styles used when Tailwind isn't available.
   Scoped and specific to IDs/classes used in Muertes.cshtml.
*/

#summaryRow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
#summaryRow .summary-card {
  width: 100%;
  box-sizing: border-box;
}

/* Cards */
.fallback-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 6px 18px rgba(124,58,237,0.03);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Dashboard: usar más ancho útil y reducir márgenes laterales */
.kpi__inner {
  /* 1200px es un buen equilibrio en pantallas grandes */
  max-width: 1200px !important;
  padding-left: 0.5rem !important;  /* override tailwind px-2 si aplica */
  padding-right: 0.5rem !important;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Reducir padding horizontal de las tarjetas para ganar ancho al chart */
.fallback-card {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box;
}

/* Charts grid fallback */
#chartsRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Ensure chart containers expand */
#muertesMap, #yearlyChartWrap, #osigChartWrap, #ageChartWrap {
  width: 100%;
  box-sizing: border-box;
}



.fallback-card .w-full {
  min-width: 0; /* garantiza que los wrappers internos no forcen ancho mínimo */
}

/* Asegura que los contenedores de gráficos puedan ocupar 100% del ancho disponible */
#violenceTypeChartWrap,
#weaponChartWrap,
#osigChartWrap,
#ageChartWrap,
#yearlyChartWrap {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* Responsive rules */
@media (min-width: 768px) {
  #summaryRow { flex-direction: row; align-items: stretch; }
  #summaryRow .summary-card { flex: 1 1 0; }
}

@media (min-width: 1024px) {
  #chartsRow { grid-template-columns: 1fr 1fr; }
}

/* Small helpers */
.text-xs { font-size: 0.75rem; }
.text-2xl { font-size: 1.5rem; font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-slate-900 { color: #0f172a; }
.text-slate-500 { color: #6b7280; }
.text-slate-400 { color: #9ca3af; }
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }

/* Keep layout responsive: stack on small screens, row on >=768px */
@media (min-width: 768px) {
  #summaryRow { display: flex; gap: 1rem; }
  #summaryRow .summary-card { flex: 1 1 0; }
}

/* Evitar forzar layout: no convertir .fallback-card en flex aquí */
.fallback-card {
  min-width: 0; /* permite shrink dentro del grid */
  box-sizing: border-box;
}

/* Wrapper del chart: permitir encoger */
.chart-wrap,
.fallback-card .w-full {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* Quitar márgenes internos extra que puedan aplicar los componentes de la card */
.fallback-card > .text-sm,
.fallback-card > .text-sm + .chart-wrap {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* Ajuste específico para Apex: evitar márgenes laterales inesperados */
.fallback-card .apexcharts-canvas,
.fallback-card .apexcharts-svg,
.fallback-card .apexcharts-inner {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Force those two rows to be exactly 2 columns on md+ (overrides conflicting rules) */
@media (min-width: 768px) {
  #chartsRow,
  #violenceWeaponRow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important; /* matches tailwind gap-6 */
  }

  #chartsRow > .fallback-card,
  #violenceWeaponRow > .fallback-card {
    min-width: 0 !important;
  }
}

/* Force judicial + found-place to share a single row (50% / 50%) on md+ */
@media (min-width: 768px) {
  #judicialFoundRow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important; /* matches tailwind gap-6 */
    align-items: start;
  }

  #judicialFoundRow > .fallback-card {
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Ensure chart wrappers don't force full width */
  #judicialFoundRow .chart-wrap,
  #judicialFoundRow .w-full {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
  }
}

/* Styles for department labels on the leaflet map */
.departamento-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0f1724 !important; /* dark text */
  font-weight: 700 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8), 0 0 6px rgba(0,0,0,0.25);
  padding: 0 4px !important;
  line-height: 1 !important;
}

/* Slightly reduce label visibility on very small screens to avoid clutter */
@media (max-width: 640px) {
  .departamento-label {
    display: none !important;
  }
}

/* Muertes filters — modern, reusable styles (updated: soft pink background) */
.filters-card {
  /* soft pink background (subtle gradient) */
  background: linear-gradient(180deg, #fff5f8 0%, #fffafc 100%);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(8,15,26,0.04);
  border: 1px solid rgba(203,29,115,0.06); /* faint pink border */
  margin-bottom: 1rem;
}

/* grid */
.filters-grid { display: grid; gap: .75rem; grid-template-columns: repeat(1,1fr); }
@media (min-width:640px) { .filters-grid { grid-template-columns: repeat(4,1fr); } }

.filter-control { display:flex; flex-direction:column; gap:.25rem; }
.filter-label { font-size:.75rem; color:#54707a; font-weight:600; }

/* select (custom arrow + subtle white field) */
.filter-select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#ffffff;
  border:1px solid rgba(15,23,42,0.06);
  padding:.5rem .875rem;
  border-radius:.5rem;
  font-size:.925rem;
  color:#0f172a;
  box-shadow:0 1px 2px rgba(2,6,23,0.03);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' stroke='%23939FA8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:1rem;
}

/* focus ring tuned to the kuk rose hue (soft) */
.filter-select:focus {
  outline:none;
  box-shadow:0 0 0 6px rgba(203,29,115,0.06);
  border-color: rgba(203,29,115,0.28);
}

/* actions */
.filter-actions { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(90deg,#CB1D73,#8B5CF6);
  color:#fff; padding:.55rem .9rem; border-radius:.5rem;
  font-weight:600; box-shadow:0 6px 20px rgba(203,29,115,0.12);
  border:none; cursor:pointer;
}
.btn-primary svg { width:1rem; height:1rem; }
.btn-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; padding:.45rem .85rem; border-radius:.5rem;
  border:1px solid rgba(15,23,42,0.08); color:#0f172a; font-weight:600; cursor:pointer;
}
.filters-meta { margin-left:auto; color:#6b7b83; font-size:.875rem; display:flex; align-items:center; gap:.75rem; }

@media (max-width:639px) {
  .filters-meta { margin-top:.5rem; margin-left:0; }
  .filter-actions { flex-wrap:wrap; gap:.5rem; }
}

/* Wrapper para garantizar compatibilidad y comportamiento consistente */
.org-logo {
  /* fallback si el navegador no soporta algunas utilidades de tailwind */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc; /* mismo que bg-gray-50 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.25rem;
  overflow: hidden;
}
.org-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ApexCharts: allow axis text to be visible and prevent clipping for all dashboards */
.chart-wrap, #yearlyViolenciaChartWrap, #violenciaAgeChartWrap, #osigChartWrap, #ageChartWrap, #foundPlaceChartWrap, #violenceTypeChartWrap, #weaponChartWrap {
  min-width: 0;   /* allow flex/grid children to shrink */
  overflow: visible;
}

/* Force apexcharts x-axis text visible and legible (override aggressive global rules) */
.apexcharts-xaxis text,
.apexcharts-xaxis-tick text {
  fill: #0f1724 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  display: block !important;
  pointer-events: none;
}

/* Allow SVG groups not to be clipped */
.apexcharts-svg {
  overflow: visible !important;
}

/* Scrollable chart wrapper & subtle fade indicators for long lists */
.chart-scrollable {
  max-height: calc(34px * 15 + 80px); /* ~= altura para 15 filas + offset (coincide con calcHorizontalHeight) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Optional: small visual fade at top/bottom to signal scrollable content */
.chart-scrollable::before,
.chart-scrollable::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 5;
}
.chart-scrollable::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
}
.chart-scrollable::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

/* Expanded state (when user toggles "Mostrar más") */
.chart-scrollable.expanded {
  max-height: none;
}

/* Ensure apex svg doesn't overflow the scroll container horizontally */
.chart-scrollable .apexcharts-svg {
  max-width: 100%;
  overflow: visible !important;
}

/* Make scrollable charts robust vs other rules (higher specificity + important) */
.chart-wrap.chart-scrollable {
  display: block; /* ensure normal flow */
  max-height: calc(34px * 15 + 80px); /* height for ~15 rows + offset */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* subtle fades to indicate more content */
.chart-wrap.chart-scrollable::before,
.chart-wrap.chart-scrollable::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 5;
}
.chart-wrap.chart-scrollable::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
}
.chart-wrap.chart-scrollable::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

/* Ensure ApexCharts SVG doesn't cause horizontal overflow */
.chart-wrap.chart-scrollable .apexcharts-svg {
  max-width: 100%;
  overflow: visible !important;
}

/* Optional: visible thin scrollbar (for webkit) */
.chart-wrap.chart-scrollable::-webkit-scrollbar { width: 10px; }
.chart-wrap.chart-scrollable::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 6px; }

/* Strong overrides for specific scrollable charts on ViolenciaGeneralizada */
#violenciaOsigChart.chart-scrollable,
#violenciaTypeChart.chart-scrollable,
#orgsChart.chart-scrollable {
  max-height: calc(34px * 15 + 80px) !important; /* ~15 filas + offset */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
}

/* Prevent internal Apex elements from escaping the scroll container */
#violenciaOsigChart.chart-scrollable .apexcharts-canvas,
#violenciaTypeChart.chart-scrollable .apexcharts-canvas,
#orgsChart.chart-scrollable .apexcharts-canvas,
#violenciaOsigChart.chart-scrollable .apexcharts-svg,
#violenciaTypeChart.chart-scrollable .apexcharts-svg,
#orgsChart.chart-scrollable .apexcharts-svg {
  overflow: hidden !important;
  position: relative !important;
  max-width: 100% !important;
  height: auto !important;
}

/* visible thumb for webkit (optional) */
#violenciaOsigChart.chart-scrollable::-webkit-scrollbar,
#violenciaTypeChart.chart-scrollable::-webkit-scrollbar,
#orgsChart.chart-scrollable::-webkit-scrollbar { width: 10px; }
#violenciaOsigChart.chart-scrollable::-webkit-scrollbar-thumb,
#violenciaTypeChart.chart-scrollable::-webkit-scrollbar-thumb,
#orgsChart.chart-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 6px;
}

/* ===== Org buttons / actions (añadir al final del archivo) ===== */
.org-actions {
  margin-top: 1rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* CTA principal: Ver sitio */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: .65rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--kuk-rose), #8B5CF6);
  box-shadow: 0 8px 24px rgba(203,29,115,0.12);
  border: none;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  line-height: 1;
}
.btn-cta svg { opacity: .95; }

/* Hover / Active */
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(203,29,115,0.14); }
.btn-cta:active { transform: translateY(-1px); }

/* Focus accesible */
.btn-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 5px rgba(203,29,115,0.12), 0 8px 24px rgba(203,29,115,0.14);
  border-radius: .65rem;
}

/* Contacto: secundario visible pero más ligero */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border-radius: .65rem;
  font-weight: 700;
  color: var(--kuk-rose);
  background: #ffffff;
  border: 1px solid rgba(203,29,115,0.12);
  text-decoration: none;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  line-height: 1;
}
.btn-contact svg { color: var(--kuk-rose); }

/* Hover / Focus */
.btn-contact:hover { background: linear-gradient(90deg, rgba(203,29,115,0.03), rgba(139,92,246,0.02)); transform: translateY(-2px); }
.btn-contact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 5px rgba(203,29,115,0.06);
  border-radius: .65rem;
}

/* Responsive: ajustar tamaño de texto en móviles */
@media (max-width: 640px) {
  .btn-cta, .btn-contact { font-size: .925rem; padding: .5rem .75rem; }
  .org-actions { gap: .4rem; }
}