/* ==========================================================================
   SOS Jurídico — Calendario Propio v2.0 (CSS compartido)
   Archivo: sos-herramientas/sos-calendario.css

   Todas las clases usan el prefijo sos-cal- sin excepción.
   El popup HTML en cada template.php usa EXACTAMENTE estas clases.
   Solo el id del div raíz lleva el prefijo de la herramienta.
   ========================================================================== */

/* ── Animación de apertura ────────────────────────────────────────────── */
@keyframes sos-cal-popIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Popup raíz ───────────────────────────────────────────────────────── */
.sos-cal-popup {
  position: absolute !important;
  z-index: 9999 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #ECEFF1 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 16px !important;
  width: 282px !important;
  font-family: inherit !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  animation: sos-cal-popIn 0.18s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Nav superior (mes · año ▾  con flechas) ──────────────────────────── */
.sos-cal-popup .sos-cal-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.sos-cal-popup .sos-cal-btn-nav {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F7F9FA !important;
  border: 1px solid #ECEFF1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #4F5B66 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.sos-cal-popup .sos-cal-btn-nav:hover {
  background: #ECEFF1 !important;
  color: #0F4C81 !important;
  border-color: #0F4C81 !important;
}

.sos-cal-popup .sos-cal-title-btn {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  text-align: center !important;
  transition: background 0.15s ease !important;
}

.sos-cal-popup .sos-cal-title-btn:hover {
  background: #ECEFF1 !important;
  color: #0F4C81 !important;
}

/* ── Selector de mes y año ────────────────────────────────────────────── */
.sos-cal-popup .sos-cal-month-picker {
  margin-bottom: 6px !important;
}

.sos-cal-popup .sos-cal-year-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.sos-cal-popup .sos-cal-year-input {
  flex: 1 !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border: 1.5px solid transparent !important;
  border-radius: 6px !important;
  padding: 0 6px !important;
  height: 30px !important;
  outline: none !important;
  background: transparent !important;
  color: #1A1A1A !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  -moz-appearance: textfield !important;
  cursor: text !important;
}

.sos-cal-popup .sos-cal-year-input::-webkit-outer-spin-button,
.sos-cal-popup .sos-cal-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

.sos-cal-popup .sos-cal-year-input:hover {
  background: #F7F9FA !important;
  border-color: #ECEFF1 !important;
}

.sos-cal-popup .sos-cal-year-input:focus {
  background: #FFFFFF !important;
  border-color: #0F4C81 !important;
}

/* CRÍTICO: 4 columnas — no cambiar */
.sos-cal-popup .sos-cal-month-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
}

.sos-cal-popup .sos-cal-back-row {
  display: flex !important;
  justify-content: flex-start !important;
  padding-top: 8px !important;
  border-top: 1px solid #F7F9FA !important;
  margin-top: 4px !important;
}

.sos-cal-popup .sos-cal-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  background: transparent !important;
  border: 1px solid #ECEFF1 !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #4F5B66 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.sos-cal-popup .sos-cal-back-btn:hover {
  border-color: #0F4C81 !important;
  color: #0F4C81 !important;
}

.sos-cal-popup .sos-cal-month-btn {
  padding: 9px 4px !important;
  background: #F7F9FA !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #4F5B66 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
}

.sos-cal-popup .sos-cal-month-btn:hover {
  background: rgba(15,76,129,0.08) !important;
  color: #0F4C81 !important;
  border-color: rgba(15,76,129,0.2) !important;
}

.sos-cal-popup .sos-cal-month-btn.sos-cal-month-active {
  background: #0F4C81 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* ── Cuadrícula de días ───────────────────────────────────────────────── */
.sos-cal-popup .sos-cal-dow-row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  margin-bottom: 4px !important;
}

.sos-cal-popup .sos-cal-dow-cell {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #A0ADB8 !important;
  text-align: center !important;
  padding: 4px 0 !important;
  letter-spacing: 0.02em !important;
  font-family: inherit !important;
}

.sos-cal-popup .sos-cal-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1px !important;
}

.sos-cal-popup .sos-cal-day {
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #1A1A1A !important;
  font-family: inherit !important;
  transition: background 0.15s ease !important;
  position: relative !important;
}

.sos-cal-popup .sos-cal-day:hover          { background: #ECEFF1 !important; }
.sos-cal-popup .sos-cal-day.sos-cal-empty  { cursor: default !important; pointer-events: none !important; }
.sos-cal-popup .sos-cal-day.sos-cal-empty:hover { background: transparent !important; }

.sos-cal-popup .sos-cal-day.sos-cal-today {
  color: #0F4C81 !important;
  font-weight: 700 !important;
}

.sos-cal-popup .sos-cal-day.sos-cal-today::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #0F4C81 !important;
}

.sos-cal-popup .sos-cal-day.sos-cal-selected {
  background: #0F4C81 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.sos-cal-popup .sos-cal-day.sos-cal-selected:hover { background: #0D3F6B !important; }

.sos-cal-popup .sos-cal-day.sos-cal-anchor {
  background: #0F4C81 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 6px 0 0 6px !important;
}
.sos-cal-popup .sos-cal-day.sos-cal-anchor:hover { background: #0D3F6B !important; color: #FFFFFF !important; }

.sos-cal-popup .sos-cal-day.sos-cal-inrange {
  background: rgba(15,76,129,0.1) !important;
  color: #0F4C81 !important;
  border-radius: 0 !important;
}

.sos-cal-popup .sos-cal-day.sos-cal-range-end {
  background: #0F4C81 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 0 6px 6px 0 !important;
}
.sos-cal-popup .sos-cal-day.sos-cal-range-end:hover { background: #0D3F6B !important; color: #FFFFFF !important; }

.sos-cal-popup .sos-cal-day.sos-cal-anchor.sos-cal-range-single { border-radius: 6px !important; }

/* ── Hint de rango ────────────────────────────────────────────────────── */
.sos-cal-popup .sos-cal-hint {
  font-size: 0.72rem !important;
  color: #4F5B66 !important;
  text-align: center !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #F7F9FA !important;
  letter-spacing: 0.01em !important;
  font-family: inherit !important;
}

/* ── HIDDEN — SIEMPRE AL FINAL ────────────────────────────────────────── */
/* Especificidad 0,2,0 — igual a las demás reglas del popup.
   Con !important y misma especificidad, la declaración más tardía gana.
   Al estar al final del archivo, esta regla siempre prevalece. */
.sos-cal-popup.sos-cal-hidden,
.sos-cal-popup .sos-cal-hidden { display: none !important; }