/* Calendario móvil: simplificado premium
   - Mantiene línea al borde
   - Punto pegado a la línea
   - Fecha integrada dentro de la tarjeta (sin peleas de alineación)
*/

@media (max-width: 768px){
  :root{ --cal-line-x: 14px; }

  .calendario-timeline{ padding: 1.75rem 0 0.75rem; }

  /* Línea al borde izquierdo */
  .calendario-timeline::before{
    left: var(--cal-line-x) !important;
    transform: none !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 2px !important;
    z-index: 0;
  }

  /* 2 columnas: rail (línea+punto) + tarjeta */
  .calendario-item,
  .calendario-item:nth-child(odd),
  .calendario-item:nth-child(even){
    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    grid-template-areas: "rail content" !important;
    align-items: stretch !important;
    gap: 0.9rem !important;
    margin-bottom: 1.65rem !important;
    position: relative !important;
  }

  /* Punto: más cerca de la línea */
  .calendario-dot{
    grid-area: rail !important;
    justify-self: center !important;
    align-self: center !important;

    width: 12px !important;
    height: 12px !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;

    position: relative !important;
    left: calc(var(--cal-line-x) - 15px) !important; /* pega el punto hacia la línea */
    z-index: 3 !important;
  }

  /* Oculta las fechas antiguas SOLO en móvil */
  .calendario-item > .calendario-date{ display: none !important; }

  /* NUEVA fecha dentro de la tarjeta */
  .calendario-date-in{
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: rgba(212,175,55,0.96) !important;

    /* centrado premium */
    text-align: center !important;
    margin: 0 auto 0.7rem !important;
    max-width: 18ch !important; /* doble piso */
    white-space: normal !important;

    /* subrayado dorado sutil */
    position: relative !important;
    padding-bottom: 0.5rem !important;

    /* micro-estética */
    opacity: 0.98;
  }

  .calendario-date-in::after{
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin: 0.45rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,0.85) 35%, rgba(212,175,55,0.85) 65%, rgba(212,175,55,0) 100%);
  }

  /* Tarjeta más grande (premium) */
  .calendario-content{
    grid-area: content !important;
    padding: 1.7rem 1.5rem !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  /* (eliminado) ya no movemos .calendario-date; usamos .calendario-date-in dentro del content */

  /* Tipografía interna un poco más grande */
  .calendario-content h3{ font-size: 1.22rem !important; }
  .calendario-content p{ font-size: 1.0rem !important; }
}

@media (min-width: 769px){
  /* Desktop: usar la fecha interna dentro de la tarjeta (misma lógica que móvil) */
  .calendario-item > .calendario-date{ display: none !important; }
  .calendario-date-in{ display: block !important; }

  .calendario-date-in{
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--dorado-principal) !important;

    text-align: left !important;
    margin: 0 0 0.75rem 0 !important;
    max-width: none !important;
    white-space: normal !important;
    opacity: 0.98;
  }

  .calendario-date-in::after{
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,0.85) 35%, rgba(212,175,55,0.85) 65%, rgba(212,175,55,0) 100%);
  }
}

@media (max-width: 480px){
  :root{ --cal-line-x: 12px; }

  .calendario-item,
  .calendario-item:nth-child(odd),
  .calendario-item:nth-child(even){
    grid-template-columns: 28px 1fr !important;
    gap: 0.8rem !important;
  }

  .calendario-dot{
    width: 11px !important;
    height: 11px !important;
    left: calc(var(--cal-line-x) - 14px) !important;
  }

  .calendario-date-in{
    font-size: 0.82rem !important;
    max-width: 16ch !important;
    margin: 0 auto 0.6rem !important;
    text-align: center !important;
    padding-bottom: 0.45rem !important;
  }

  .calendario-date-in::after{
    width: 34px;
    height: 2px;
    margin-top: 0.4rem;
  }

  .calendario-content{
    padding: 1.55rem 1.3rem !important;
    border-radius: 16px !important;
  }
}