/* Estilos propios de la página: registration/login.html */
.landing { max-width: 1120px; margin: 0 auto; padding: 32px 16px; }
.landing-brand img { height: 64px; }

/* Distribución: escritorio = login y programación a la izquierda, ciclo a la derecha.
   Celular = login, ciclo seleccionado, programación (uno debajo del otro). */
.landing-grid {
  display: grid; gap: 24px;
  grid-template-columns: 5fr 7fr;
  grid-template-areas: "login panel" "lista panel";
  grid-template-rows: auto 1fr;   /* el espacio sobrante va abajo: la lista queda pegada al login */
  align-items: start;
}
.area-login { grid-area: login; }
.area-lista { grid-area: lista; }
.area-panel { grid-area: panel; position: sticky; top: 24px; scroll-margin-top: 16px; }
@media (max-width: 991px) {
  .landing-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "login" "panel" "lista"; }
  .area-panel { position: static; }
}

.card-ngc { border: 0; border-radius: 20px; box-shadow: 0 4px 24px rgba(3,57,130,.12); background:#fff; }
.etq { font-size:.7rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#52668d; }
.tipo-badge { font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.tipo-parche  { background:#e8f0fb; color:#033982; }
.tipo-chapel  { background:#09265f; color:#fff; }
.tipo-festivo { background:#eceef2; color:#6b7a99; }

.ciclo-hero { background:#033982; color:#fff; border-radius:20px; }
.ciclo-hero .etq { color:rgba(255,255,255,.7); }
.ciclo-panel[hidden] { display:none !important; }

.chip { font-weight:800; color:#033982; background:#eef3fb; border-radius:8px; min-width:40px; text-align:center; padding:2px 6px; font-size:.85rem; }
.fila { width:100%; background:none; border:0; text-align:left; padding:8px 6px;
        border-bottom:1px solid #eef1f6; font-size:.9rem; border-radius:8px; cursor:pointer;
        transition: background .15s; }
.fila:last-of-type { border-bottom:0; }
.fila:hover { background:#f4f6f9; }
.fila.pasado { opacity:.55; }
.fila.pasado.seleccionado, .fila.pasado:hover { opacity:1; }
.fila.seleccionado { background:#e8f0fb; box-shadow: inset 3px 0 0 #033982; }
.col-fecha { min-width:112px; white-space:nowrap; }
@media (max-width: 575px) { .fila { font-size:.82rem; gap:6px !important; } .col-fecha { min-width:0; font-size:.75rem; } }
.punto-actual { width:8px; height:8px; border-radius:50%; background:#033982; display:inline-block; }