/* ============================================================
   CALENDARIOS.CSS — Página de calendario de directos
   Patricia Alonso · patriciaalonso.es
   ============================================================ */

    .calendario-page {
      position: relative;
      max-width: 1000px;
      margin: 30px auto 60px auto;
      padding: 0 32px;
    }

    .titulo-calendario-page {
      font-family: 'Cinzel', serif;
      font-size: 2rem;
      color: #7B5FE0;
      text-align: center;
      margin-bottom: 10px;
      text-shadow: 0 0 10px #7B5FE0, 0 0 20px #9146FF;
    }
    .leyenda {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .leyenda-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      color: #fff;
    }
    .leyenda-color { width: 16px; height: 16px; border-radius: 4px; }
    .leyenda-patz { background: #E834C4; box-shadow: 0 0 6px #E834C4; }
    .leyenda-zhoomn { background: #00C8FF; box-shadow: 0 0 6px #00C8FF; }
    .calendario-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
    }
    .dia-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .dia-header {
      background: rgba(123, 95, 224, 0.15);
      border: 1px solid rgba(123, 95, 224, 0.4);
      border-radius: 8px 8px 0 0;
      padding: 7px 6px;
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      color: #7B5FE0;
      text-shadow: 0 0 6px #7B5FE0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .dia-fecha {
      font-family: 'Poppins', sans-serif;
      font-size: 0.62rem;
      font-weight: 400;
      color: var(--texto-suave, #B8AED0);
      text-shadow: none;
      letter-spacing: 0.02em;
    }

    .dia-header-hoy {
      background: rgba(123, 95, 224, 0.32);
      border-color: #9B82EE;
      box-shadow: 0 0 12px rgba(123, 95, 224, 0.5);
    }

    .dia-header-hoy .dia-fecha {
      color: #D9A85C;
      font-weight: 500;
    }

    .dia-columna {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 190px;
      background: rgba(10, 10, 30, 0.5);
      border: 1px solid rgba(123, 95, 224, 0.2);
      border-top: none;
      border-radius: 0 0 8px 8px;
      padding: 6px 5px;
    }
    .evento-card {
      border-radius: 8px;
      padding: 8px 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.72rem;
      line-height: 1.4;
      position: relative;
      transition: transform 0.2s ease;
    }
    .evento-card:hover { transform: scale(1.03); }
    .evento-card.patz {
      background: rgba(232, 52, 196, 0.2);
      border: 1px solid #E834C4;
      box-shadow: 0 0 8px rgba(232, 52, 196, 0.4);
      color: #fff;
    }
    .evento-card.zhoomn {
      background: rgba(0, 200, 255, 0.15);
      border: 1px solid #00C8FF;
      box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
      color: #fff;
    }
    .evento-titulo { font-weight: bold; margin-bottom: 3px; font-size: 0.75rem; }
    .evento-canal-patz { color: #E834C4; }
    .evento-canal-zhoomn { color: #00C8FF; }
    .evento-hora { font-size: 0.68rem; opacity: 0.8; }
    .evento-desc { font-size: 0.65rem; opacity: 0.7; margin-top: 3px; }
    .btn-eliminar-evento {
      position: absolute;
      top: 4px; right: 6px;
      background: none; border: none;
      color: rgba(255,255,255,0.5);
      font-size: 0.7rem; cursor: pointer;
    }
    .btn-eliminar-evento:hover { color: #ff4444; }
    .dia-vacio {
      font-family: 'Poppins', sans-serif;
      font-size: 0.65rem;
      color: rgba(255,255,255,0.2);
      text-align: center;
      padding: 10px 0;
    }
    .panel-admin {
      margin-top: 36px;
      background: rgba(20, 20, 40, 0.85);
      border: 2px solid #7B5FE0;
      border-radius: 14px;
      padding: 22px;
      box-shadow: 0 0 20px rgba(123, 95, 224, 0.3);
    }
    .panel-admin h3 {
      font-family: 'Cinzel', serif;
      font-size: 1.3rem;
      color: #7B5FE0;
      text-shadow: 0 0 8px #7B5FE0;
      margin-bottom: 20px;
      text-align: center;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .form-campo { display: flex; flex-direction: column; gap: 6px; }
    .form-campo label { font-family: 'Poppins', sans-serif; font-size: 0.78rem; color: #ccc; }
    .form-campo input,
    .form-campo select,
    .form-campo textarea {
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(123, 95, 224, 0.5);
      border-radius: 6px;
      padding: 8px 10px;
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 0.8rem;
      outline: none;
    }
    .form-campo input:focus,
    .form-campo select:focus { border-color: #7B5FE0; box-shadow: 0 0 6px rgba(123, 95, 224, 0.4); }
    .form-campo select option { background: #1a1a2e; }
    .btn-crear-evento {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, #7B5FE0, #9146FF);
      color: #fff; border: none;
      border-radius: 8px; padding: 12px 20px;
      font-family: 'Cinzel', serif;
      font-size: 0.9rem; cursor: pointer;
      box-shadow: 0 0 12px rgba(123, 95, 224, 0.5);
      transition: transform 0.2s ease;
    }
    .btn-crear-evento:hover { transform: translateY(-2px); }
    .separador-neon {
      width: 80%; max-width: 800px; height: 1px;
      background: linear-gradient(to right, transparent, #7B5FE0, #9146FF, transparent);
      margin: 0 auto 40px auto; opacity: 0.4;
    }
    @media (max-width: 900px) {
      .calendario-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .form-grid { grid-template-columns: repeat(2, 1fr); }
      .dia-columna { min-height: 130px; }
    }
    @media (max-width: 600px) {
      .calendario-page { margin: 20px auto 40px auto; padding: 0 20px; }
      .calendario-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .form-grid { grid-template-columns: 1fr; }
      .titulo-calendario-page { font-size: 1.4rem; }
      .leyenda { gap: 16px; margin-bottom: 16px; }
      .dia-columna { min-height: 70px; gap: 5px; }
      .dia-vacio { padding: 6px 0; }
    }