/* =========================================================
   CONTENEDOR DE LAS TARJETAS ASTRONÓMICAS
   ========================================================= */

.astro-grid {
    grid-template-columns: 1fr;
}

.astro-card {
    position: relative;
    min-height: 145px;
    padding: 13px 10px 9px;
    text-align: center;
}

.astro-card h3 {
    margin-bottom: 13px;
    color: #f5a623;
}

.astro-card > p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
}


/* =========================================================
   HORAS DE SALIDA Y PUESTA
   ========================================================= */

.sun-tracker,
.moon-tracker {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: end;
    gap: 4px;
	justify-items: center;
}

.astro-time {
    display: grid;
    color: var(--text);
    font-size: 0.68rem;
    text-align: left;
}

.astro-time b {
    color: #f5a623;
}

.astro-time.right {
    text-align: right;
}


/* =========================================================
   RECORRIDO Y POSICIÓN DEL SOL
   ========================================================= */

.sun-path {
    position: relative;
	width: 200px;
    height: 103px;
    border: 1px solid #b8cad4;
    border-bottom: 2px solid #6f8794;
    border-radius: 100px 100px 0 0;
}

.sun-position {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 18px #ffcc0088; 
    transform: translate(-50%, 50%);
    transition: left 0.5s ease, bottom 0.5s ease;
}


/* =========================================================
   FASE LUNAR
   ========================================================= */

.moon-tracker {
    align-items: center;
}

.moon-tracker img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    justify-self: center;
}


/* =========================================================
   MAPA Y RADAR RAINVIEWER
   ========================================================= */

.radar-panel {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.radar-panel h3 {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 500;
    margin: 0;
    padding: 4px 8px;
    border-radius: 3px;
    background: #ffffff;
    color: #263d49;
    font-size: 0.72rem;
    white-space: nowrap;
    transform: translateX(-50%);
}

.radar-timestamp {
    position: absolute;
    bottom: 15px;
    left: 50%;
    z-index: 500;
    padding: 4px 9px;
    border-radius: 3px;
    background: #ffffff;
    color: #263d49;
    box-shadow: 0 2px 6px #0004;
    font-size: 0.67rem;
    white-space: nowrap;
    transform: translateX(-50%);
}

.radar-panel #rain-map {
    height: 520px;
    border-radius: 0;
}
.leaflet-touch .leaflet-bar a:first-child {
    border-radius: 10px 10px 0px 0px!important;
}
.leaflet-touch .leaflet-bar a:last-child {
    border-radius: 0px 0px 10px 10px!important;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: none!important;
}
/* =========================================================
   MARCADOR GPS CON AUREOLA
   ========================================================= */

.gps-marker-wrapper {
    border: 0;
    background: transparent;
}

.gps-dot {
    display: block;
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
    animation: gps-pulse 1.5s infinite;
}

@keyframes gps-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.45);
    }

    70% {
        box-shadow: 0 0 0 11px rgba(33, 150, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}


/* =========================================================
   AJUSTES PARA MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 390px) {
    .sun-tracker,
    .moon-tracker {
        grid-template-columns: 52px 1fr 52px;
    }

    .sun-path {
        height: 103px;
    }

    .moon-tracker img {
        width: 72px;
        height: 72px;
    }
}