/* Estilo del calendario, adaptado al nuevo sistema de diseño.
   Mismas clases/IDs que usa calendario.js — solo cambia el aspecto visual. */

#titulo-mes {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.leyenda-tipos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--mut);
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.punto-leyenda {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.punto-dj { background: var(--violet); }
.punto-tecnico { background: var(--acc); }
.punto-alquiler { background: var(--blue); }

/* Selector Mensual / Anual */
.selector-vista {
  display: flex;
  gap: 8px;
}

.btn-vista {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--mut);
}

.btn-vista.activo {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ===== Grid mensual ===== */
#calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.dia-celda {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 84px;
  padding: 6px;
  font-size: 12px;
}

.dia-numero {
  font-weight: 600;
  color: var(--mut);
  margin-bottom: 4px;
}

.dia-vacio {
  background: transparent;
  border: none;
}

/* Colores de los puntos/etiquetas de evento, por tipo de bolo (mismos tonos que las badges de Esdeveniments) */
.evento-punto-dj, .mini-punto.evento-punto-dj {
  background: var(--violet-bg);
  color: var(--violet);
}

.evento-punto-tecnico, .mini-punto.evento-punto-tecnico {
  background: var(--gold);
  color: var(--goldink);
}

.evento-punto-alquiler, .mini-punto.evento-punto-alquiler {
  background: var(--blue-bg);
  color: var(--blue);
}

.evento-punto-sin-tipo, .mini-punto.evento-punto-sin-tipo {
  background: var(--nt);
  color: var(--ntink);
}

.evento-punto-dj, .evento-punto-tecnico, .evento-punto-alquiler, .evento-punto-sin-tipo {
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 2px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Modal de detalle: estils base (.modal-overlay / .modal-caja) promocionats a components.css,
   que aquesta pàgina ja carrega -- es reutilitzen tal qual, sense duplicar-los aquí. */

/* Vista mensual a mòbil/tauleta (sense ratolí real, vegeu calendario.js): la
   cel·la del dia sempre té la mateixa alçada, amb un punt de color per
   esdeveniment enlloc del seu nom -- clicar el dia porta a la vista diària. */
.dia-celda-mobil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
}

.dia-celda-amb-events {
  cursor: pointer;
}

.dia-celda-amb-events .dia-numero {
  color: var(--ink);
  font-weight: 700;
}

.dia-celda-amb-events:hover {
  background: var(--hov);
}

.dia-punts-mobil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
}

/* Vista anual: cuadrícula de 12 mini-calendarios */
.calendario-anual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mini-mes {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.mini-mes-titulo {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--mut);
  text-transform: uppercase;
}

.mini-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.mini-dia:hover {
  background: var(--hov);
}

.mini-dia-vacio {
  cursor: default;
}

.mini-dia-numero {
  color: var(--mut);
}

.mini-dia-con-eventos .mini-dia-numero {
  color: var(--ink);
  font-weight: 600;
}

.mini-puntos {
  display: flex;
  gap: 1px;
  margin-top: 1px;
}

.mini-punto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

@media (max-width: 720px) {
  #calendario-grid { gap: 3px; }

  .dia-celda {
    min-height: 60px;
    padding: 3px;
    font-size: 10px;
  }

  .evento-punto-dj, .evento-punto-tecnico, .evento-punto-alquiler, .evento-punto-sin-tipo {
    font-size: 9px;
    padding: 1px 3px;
  }

  .calendario-anual-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}