/* /opt/turnopro/app/static/css/calendario.css */
/* Calendario reutilizable - estilos consistentes con public_carrito.html y temas Claro/Oscuro */

/* Variables mapeadas al sistema de tema existente */
:root {
  --accent: var(--tech-accent-primary, #0ea5e9);
  --bg: var(--tech-card-bg, #0b0f14);
  --fg: var(--tech-text-primary, #ffffff);
  --muted: var(--tech-text-muted, #a1a1aa);
  --border: var(--tech-border, rgba(255, 255, 255, 0.14));
}

/* Ajustes por tema para legibilidad */
body.tema-claro {
  --fg: #111827;
  --muted: #475569;
  --border: rgba(0, 0, 0, 0.18);
}

body.tema-oscuro {
  --fg: #e5e7eb;
  --muted: #9aa3b2;
  --border: rgba(255, 255, 255, 0.16);
}

/* Contenedor del calendario */
.calendar {
  display: grid;
  gap: .8rem;
  color: var(--fg);
}

/* Encabezado del calendario */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-title {
  font-weight: 600;
  text-transform: capitalize;
}

/* Navegación de mes */
.cal-nav {
  display: flex;
  gap: .45rem;
}

.cal-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  padding: .35rem .65rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.cal-btn:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.cal-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

/* Grid de días */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
  /* Se garantizan 6 filas via JS con espaciadores para evitar saltos entre meses */
}

.cal-weekday {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}

/* Celda y botón del día */
.cal-cell {
  /* Celdas cuadradas para consistencia visual */
  aspect-ratio: 1/1;
}

.cal-day {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  color: var(--fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.cal-day:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.cal-day[selected],
.cal-day.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cal-day[aria-current="date"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cal-day[disabled] {
  opacity: .35;
  cursor: not-allowed;
}