/* Paleta y espaciado base del calendario */
:root {
  --cal-gap: 16px;
  --cal-radius: 18px;
  --cal-day-bg: #103a24;
  --cal-day-border: #145e36;
  --cal-day-text: #eafff2;
  --cal-day-hover-shadow: 0 16px 32px rgba(0,0,0,0.26);
  --cal-day-hover-outline: rgba(20,94,54,0.45);
  --cal-day-selected-bg: color-mix(in srgb, var(--bugambilia, #e85c9e) 24%, transparent);
  --cal-day-selected-border: color-mix(in srgb, var(--bugambilia, #e85c9e) 82%, rgba(14,54,33,0.85) 18%);
  --cal-day-selected-shadow: 0 20px 38px rgba(232,92,158,0.32);
  --cal-day-selected-text: #fff;
  --cal-day-today-outline: rgba(20,94,54,0.55);
  --cal-day-today-bg: color-mix(in srgb, rgba(20,94,54,0.35) 60%, transparent 40%);
  --cal-ring-border: color-mix(in srgb, rgba(36,119,78,0.52) 70%, rgba(0,0,0,0.45) 30%);
  --cal-ring-event: color-mix(in srgb, var(--bugambilia, #e85c9e) 86%, #a01f63 14%);
  --cal-ring-visit: color-mix(in srgb, #7be4bc 78%, #1d6b45 22%);
  --cal-ring-cash-outer: color-mix(in srgb, #f7d07a 80%, #7a4b10 20%);
  --cal-ring-cash-inner: color-mix(in srgb, #f39b3c 85%, #7a3f0d 15%);
  --cal-bg-busy: color-mix(in srgb, rgba(24,86,56,0.88) 72%, rgba(232,92,158,0.22) 28%);
}

/* Modal */
/* Elevamos por encima de la sidebar (z-index:4000) y usamos flex para centrar */
.vc-modal {
  position: fixed; inset: 0; display: none; z-index: 5001;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.vc-modal[aria-hidden="false"] { display: flex; }
/* Contenedor del contenido (coincide con el HTML) */
.vc-content {
  position: relative;
  /* Reduce size to a compact panel on desktop */
  width: min(480px, 92vw);
  background: #0f3b26; color:#eafff2; border-radius: 12px; padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.32);
  border:1px solid #145e36;
}
/* Compat: si alguna vista usara .vc-dialog aún, hereda el mismo estilo */
.vc-dialog {
  position: relative;
  /* Make legacy dialog match the green compact style */
  width: min(480px, 92vw);
  background: #0f3b26; color: #eafff2;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  border: 1px solid #145e36;
}
.vc-header { display:flex; align-items:center; justify-content:space-between; padding: 8px 8px 12px; }
.vc-title { margin:0; font-size: 20px; font-weight: 800; }
.vc-close { border:1px solid #145e36; background: #103a24; color:#eafff2; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 18px; }
.vc-body { padding: 8px 6px; }
.vc-footer { display:flex; justify-content:flex-end; gap:10px; padding-top: 10px; }

/* Header Mes/Año centrado y grande */
.cal-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: 10px;
}
.cal-nav {
  border:1px solid #145e36;
  background: rgba(16,59,38,.85);
  color:#f4fff9;
  font-size: 20px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .15s ease, transform .12s ease;
}
.cal-nav:hover{ background: rgba(20,78,50,.95); transform:translateY(-1px); }
.cal-nav:active{ transform:translateY(0); }
.cal-title { justify-self: center; text-align: center; font-size: 22px; font-weight: 800; }
.cal-title .cal-title-year { font-size: 18px; font-weight: 700; opacity: .9; }

/* Encabezado de días */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cal-gap);
  justify-items: stretch;
  margin-bottom: 16px;
}
.cal-weekdays > div {
  text-align: center;
  font-weight: 700;
  opacity: .9;
  color:#eafff2;
  letter-spacing: .08em;
}

/* Días del mes */
.qcal{ width:100%; padding:0; margin:0; box-sizing:border-box; }
.cal-days {
  --cal-offset: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cal-gap);
  margin-bottom: 22px;
  grid-auto-rows: 1fr;
}
.cal-days > *:first-child {
  grid-column-start: var(--cal-offset);
}
.cal-day,
.cal-day--empty {
  position: relative;
  border-radius: var(--cal-radius);
  background: var(--cal-day-bg);
  border: 1px solid var(--cal-day-border);
  color: var(--cal-day-text);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  transition: transform .12s ease, box-shadow .18s ease, outline .18s ease, border-color .18s ease;
  isolation: isolate;
}
.cal-day { cursor: pointer; }
.cal-day--empty { display: none; }
.cal-day:hover {
  transform: translateY(-2px);
  box-shadow: var(--cal-day-hover-shadow);
  outline: 2px solid var(--cal-day-hover-outline);
}
.cal-day--today:not(.is-selected),
.cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px var(--cal-day-today-outline);
  background: linear-gradient(180deg, var(--cal-day-today-bg), transparent 60%);
}
.cal-day.is-selected {
  background: var(--cal-day-selected-bg);
  border-color: var(--cal-day-selected-border);
  color: var(--cal-day-selected-text);
  box-shadow: var(--cal-day-selected-shadow);
}
@media (max-width: 1180px){
  .cal-weekdays,
  .cal-days{ gap:12px; }
  .cal-day{ font-size:.95rem; }
}
@media (max-width: 900px){
  .cal-weekdays,
  .cal-days{ gap:10px; }
  .cal-day{ font-size:.92rem; }
}
@media (max-width: 680px){
  .cal-weekdays,
  .cal-days{ gap:6px; }
  .cal-day{ font-size:.9rem; }
}

/* Mobile: make modal background slightly transparent green instead of white */
@media (max-width: 640px) {
  .vc-content,
  .vc-dialog {
    width: min(96vw, 420px) !important;
    background: rgba(15,59,38,0.95) !important; /* slight transparency */
    padding: 10px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
    border: 1px solid color-mix(in srgb, rgba(36,119,78,0.48) 60%, rgba(0,0,0,0.28) 40%) !important;
  }
  /* Reduce calendar tile sizes a bit to fit the compact modal */
  .cal-day { font-size: 0.86rem !important; }
  .cal-times { grid-template-columns: repeat(3, 1fr) !important; }
  #visit-calendar-modal { padding: 8px !important; }
}

/* Horarios */
.vc-times-wrap { margin-top: 6px; }
.vc-subtitle { margin: 0 0 8px; font-size: 14px; opacity: .9; }
.cal-times {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.cal-time {
  height: 36px; border-radius: 10px; border: 1px solid #145e36; background: #0f422a; color:#eafff2; font-weight: 700; cursor: pointer;
}
.cal-time.is-selected { outline: 2px solid color-mix(in srgb, var(--bugambilia, #e85c9e) 35%, transparent); background: color-mix(in srgb, var(--bugambilia, #e85c9e) 22%, transparent); color:#fff; border-color: var(--bugambilia, #e85c9e); }

/* --- Overrides v2: centrar título y ordenar header --- */
.cal-header {
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.cal-nav {
  border:1px solid #145e36 !important;
  background: rgba(16,59,38,.85) !important;
  color:#f4fff9 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition: background .15s ease, transform .12s ease !important;
}
.cal-nav:hover{ background: rgba(20,78,50,.95) !important; transform:translateY(-1px) !important; }
.cal-nav:active{ transform:translateY(0) !important; }
.cal-title {
  justify-self: center !important;
  text-align: center !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  display: block !important;
}
.cal-title .cal-title-year {
  font-size: 20px !important;
  font-weight: 700 !important;
  opacity: .9 !important;
}

/* Encabezado de días: 7 columnas */
#cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 14px !important;
}
#cal-weekdays > div {
  text-align: center !important;
  font-weight: 700 !important;
  opacity: .9 !important;
  letter-spacing: .08em !important;
}

/* Días deshabilitados (pasados o con evento) */
.cal-day.is-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  background: #F5F4EC !important;
  border-style: dashed !important;
}
.cal-day.is-disabled:hover {
  outline: none !important;
}

/* Deshabilitar todos los horarios cuando el día está inhabilitado */
.cal-time.is-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  background: #fff !important;
  border-style: dashed !important;
}

/* Oculta cualquier rastro del contenedor legacy */
#visit-calendar-modal #cal-times { display: none !important; }

/* Estilo para el nuevo contenedor */
#visit-calendar-modal #visit-times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#visit-calendar-modal #visit-times .cal-time {
  height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, rgba(24,86,56,0.86) 72%, rgba(0,0,0,0.38) 28%);
  background: color-mix(in srgb, rgba(18,68,45,0.95) 82%, rgba(0,0,0,0.25) 18%);
  color: #f3fff9;
  font-weight: 700;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
#visit-calendar-modal #visit-times .cal-time:hover {
  background: color-mix(in srgb, rgba(24,86,56,0.92) 88%, rgba(0,0,0,0.18) 12%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
#visit-calendar-modal #visit-times .cal-time.is-selected {
  background: color-mix(in srgb, var(--bugambilia, #e85c9e) 26%, rgba(18,68,45,0.94) 74%);
  border-color: color-mix(in srgb, var(--bugambilia, #e85c9e) 55%, rgba(18,68,45,0.94) 45%);
  color:#fff;
  box-shadow: 0 18px 36px rgba(232,92,158,0.28);
  transform: translateY(-1px);
}
#visit-calendar-modal #visit-times .cal-time.is-disabled {
  background: color-mix(in srgb, rgba(10,36,24,0.92) 88%, rgba(0,0,0,0.35) 12%);
  border-style: dashed;
  border-color: color-mix(in srgb, rgba(24,60,40,0.7) 70%, rgba(0,0,0,0.45) 30%);
  color: color-mix(in srgb, #d8f9e6 55%, rgba(132,189,158,0.6) 45%);
  cursor: not-allowed;
  box-shadow: none;
  opacity: .6;
  transform: none;
}

/* ===== Overrides duros v2 ===== */
.cal-header {
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.cal-title {
  justify-self: center !important;
  text-align: center !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}
.cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.cal-weekdays > div {
  text-align: center !important;
  font-weight: 700 !important;
  opacity: .9 !important;
  letter-spacing: .08em !important;
}
/* Oculta el contenedor legacy */
#visit-calendar-modal #cal-times { display: none !important; }
/* Estilo del contenedor nuevo */
#visit-calendar-modal #visit-times {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
#visit-calendar-modal #visit-times .cal-time {
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, rgba(24,86,56,0.86) 72%, rgba(0,0,0,0.38) 28%) !important;
  background: color-mix(in srgb, rgba(18,68,45,0.95) 82%, rgba(0,0,0,0.25) 18%) !important;
  color: #f3fff9 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease !important;
}
#visit-calendar-modal #visit-times .cal-time:hover {
  background: color-mix(in srgb, rgba(24,86,56,0.92) 88%, rgba(0,0,0,0.18) 12%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.28) !important;
}
#visit-calendar-modal #visit-times .cal-time.is-selected {
  background: color-mix(in srgb, var(--bugambilia, #e85c9e) 26%, rgba(18,68,45,0.94) 74%) !important;
  border-color: color-mix(in srgb, var(--bugambilia, #e85c9e) 55%, rgba(18,68,45,0.94) 45%) !important;
  color:#fff !important;
  box-shadow: 0 18px 36px rgba(232,92,158,0.28) !important;
  transform: translateY(-1px) !important;
}
#visit-calendar-modal #visit-times .cal-time.is-disabled {
  background: color-mix(in srgb, rgba(10,36,24,0.92) 88%, rgba(0,0,0,0.35) 12%) !important;
  border-style: dashed !important;
  border-color: color-mix(in srgb, rgba(24,60,40,0.7) 70%, rgba(0,0,0,0.45) 30%) !important;
  color: color-mix(in srgb, #d8f9e6 55%, rgba(132,189,158,0.6) 45%) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: .6 !important;
  transform: none !important;
}
/* Días deshabilitados */
.cal-day.is-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  background: #F5F4EC !important;
  border-style: dashed !important;
}
.cal-day.is-disabled:hover { outline: none !important; }

/* Badge de build para validar que este CSS cargó */
.vc-title .vc-build {
  background: #F5F4EC !important;
  border: 1px solid #E7E6DA !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
}

/* ===== Colores / indicadores unificados calendario v2 ===== */
/* Reglas de aro (ring) alrededor de días con tipos específicos */
.cal-day.is-event { position: relative; }
.cal-day.is-event::after {
  content:'';
  position:absolute;
  inset:3px;
  border:2px solid var(--cal-ring-event);
  border-radius:12px;
  background: transparent;
  pointer-events:none;
}
.cal-day.is-visit { position: relative; }
.cal-day.is-visit::after {
  content:'';
  position:absolute;
  inset:3px;
  border:2px solid var(--cal-ring-visit);
  border-radius:12px;
  background: transparent;
  pointer-events:none;
}
.cal-day.is-visit-efectivo { position: relative; }
.cal-day.is-visit-efectivo::before {
  content:'';
  position:absolute;
  inset:3px;
  border:2px solid var(--cal-ring-cash-outer);
  border-radius:14px;
  background: transparent;
  pointer-events:none;
}
.cal-day.is-visit-efectivo::after {
  content:'';
  position:absolute;
  inset:7px;
  border:2px solid var(--cal-ring-cash-inner);
  border-radius:10px;
  background: transparent;
  pointer-events:none;
}

/* Día ocupado (event o visita) también puede usar relleno distinto opcional */
.cal-day.is-busy:not(.is-selected) {
  /* Keep the green day background but emphasize with border color */
  background: var(--cal-day-bg);
  border-color: var(--cal-ring-border);
}

/* Leyenda (legend swatches) */
.cal-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; margin-top:18px; justify-content:space-between; }
.cal-legend__item { display:flex; align-items:center; gap:8px; }
.leg-swatch { width:22px; height:22px; border-radius:11px; background: var(--cal-day-bg); position:relative; }
.leg-swatch.leg-event::after { content:''; position:absolute; inset:3px; border:2px solid var(--cal-ring-event); border-radius:6px; background:transparent; pointer-events:none; }
.leg-swatch.leg-visit::after { content:''; position:absolute; inset:3px; border:2px solid var(--cal-ring-visit); border-radius:6px; background:transparent; pointer-events:none; }
.leg-swatch.leg-visit-efectivo::after { content:''; position:absolute; inset:3px; border:2px solid var(--cal-ring-cash-outer); border-radius:6px; background:transparent; pointer-events:none; }
.leg-swatch.leg-visit-efectivo::before { content:''; position:absolute; inset:8px; border:2px solid var(--cal-ring-cash-inner); border-radius:4px; background:transparent; pointer-events:none; }

/* Estado seleccionado debe verse por encima de aros */