/* Simulatorul de eclipse (inc/astro-simulator-eclipse.php). Culorile vin din paleta --astro-* ; cele specifice hartii sunt desenate in canvas. */
.ase { margin: 1rem 0; }
.ase.lucru { cursor: progress; }
.ase-msg[hidden] { display: none; }
.ase-perioada { margin-bottom: 1rem; }
.ase-perioada .astro-tranzit-camp { background: transparent; }
.ase-butoane button, .ase-loc-cauta button, .ase-sug button {
	font: inherit; cursor: pointer; background: var(--astro-fundal, #fff); color: inherit; border: 1px solid var(--astro-linie, #b9c3d6); border-radius: 6px; padding: 0.4rem 0.75rem;
}
.ase-gps { font: inherit; cursor: pointer; background: var(--astro-fundal, #fff); color: inherit; border: 1px solid var(--astro-linie, #b9c3d6); border-radius: 6px; padding: 0.4rem 0.75rem; }
.ase-gps:hover, .ase-butoane button:hover, .ase-loc-cauta button:hover, .ase-sug button:hover { border-color: var(--astro-sus, #1d4f91); }
.ase-lista { margin-bottom: 1rem; }
.ase-nota { opacity: 0.7; margin: 0; }
.ase-nota.rosu, .ase-msg.rosu, .ase-stare .rosu { color: var(--astro-eroare, #b3261e); }
.ase-titlu { margin: 0.5rem 0; }

.ase-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.2rem; align-items: start; } /* cerul si harta alaturi, ca animatia si harta sa se vada odata */
.ase-cap { margin: 0 0 0.35rem; font-family: "Open Sans", sans-serif; font-weight: 700; }
.ase-sub { margin: 0.3rem 0 0; opacity: 0.75; font-size: 0.9rem; }
.ase-cer { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background: #05060d; }
.ase-harta { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 8px; cursor: crosshair; background: #dbe8f7; }
.ase-stare { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; min-height: 4.2rem; }
.ase-stare b { font-family: "Open Sans", sans-serif; }

.ase-control { margin: 1rem 0; padding: 0.8rem; border: 1px solid var(--astro-linie, #b9c3d6); border-radius: 8px; display: grid; gap: 0.8rem; }
.ase-timp { display: grid; gap: 0.4rem; }
.ase-ora { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; }
.ase-ora span { opacity: 0.75; font-size: 0.92rem; }
.ase-slider { width: 100%; }
.ase-butoane { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ase-butoane select { font: inherit; }
.ase-loc-t { margin: 0; font-family: "Open Sans", sans-serif; font-weight: 700; }
.ase-loc-nume { margin: 0.1rem 0 0.4rem; }
.ase-loc-cauta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ase-loc-cauta input { flex: 1 1 12rem; min-width: 0; font: inherit; padding: 0.4rem 0.6rem; }
.ase-sug { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; margin-top: 0.3rem; }

.ase-info { margin: 1rem 0; }
.ase-rez { margin: 0 0 0.6rem; padding: 0.6rem 0.8rem; border-left: 4px solid var(--astro-sus, #1d4f91); background: var(--astro-info-fundal, #eaf2fc); }
.ase-rez.nu { border-left-color: var(--astro-eroare, #b3261e); background: #fbeaea; }
.ase-tab { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.ase-tab th, .ase-tab td { padding: 0.35rem 0.6rem; text-align: left; border-bottom: 1px solid var(--astro-linie, #d6dcea); white-space: nowrap; }
.ase-tab em { opacity: 0.7; }

.ase-lg { display: inline-block; width: 1.6rem; height: 0.9rem; border-radius: 3px; flex: none; vertical-align: middle; }
.ase-lg.lg-um { background: rgba(24, 24, 60, 0.85); }
.ase-lg.lg-in { background: rgba(214, 92, 18, 0.85); }
.ase-lg.lg-pa { background: linear-gradient(90deg, rgba(244, 196, 70, 0.25), rgba(224, 116, 30, 0.7)); }
.ase-lg.lg-ac { background: rgba(74, 74, 190, 0.7); }
.ase-lg.lg-ob { width: 0.9rem; border-radius: 50%; background: #d81b2c; border: 2px solid #fff; box-shadow: 0 0 0 1px #888; }
.ase-lg.lg-tot { background: rgba(255, 255, 255, 0.9); border: 1px solid #aab; }
.ase-lg.lg-par { background: rgba(130, 190, 150, 0.8); }
.ase-lg.lg-nu { background: rgba(8, 10, 40, 0.5); }
.ase-lg.lg-so { width: 0.9rem; border-radius: 50%; background: #ffb400; border: 1px solid #7a4a00; }
.ase-lg.lg-lu { width: 0.9rem; border-radius: 50%; background: #f4efe0; border: 1px solid #555; }

@media (max-width: 760px) {
	.ase-grila { grid-template-columns: minmax(0, 1fr); }
}

/* zoom pe harta */
.ase-harta-cadru { position: relative; }
.ase-harta { touch-action: pan-y; }
.ase-zoom { position: absolute; top: .5rem; right: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.ase-zoom button { width: 2.2rem; height: 2.2rem; padding: 0; font: inherit; font-size: 1.25rem; line-height: 1; color: #1d2b4a; background: rgba(255, 255, 255, .92); border: 1px solid var(--astro-linie, #b9c3d6); border-radius: 4px; cursor: pointer; }
.ase-zoom button:hover { border-color: var(--astro-sus, #1d4f91); background: #fff; }
.ase-harta { cursor: crosshair; }
.ase-bt { margin: 1rem 0 .8rem; }

/* lista eclipselor ca tabel */
.ase-tabel { width: 100%; border-collapse: collapse; }
.ase-tabel th, .ase-tabel td { padding: .55rem .7rem; text-align: left; vertical-align: middle; }
.ase-tabel thead th { background: var(--astro-sus, #1d4f91); color: #fff; }
.ase-tabel tbody tr { cursor: pointer; border-top: 1px solid var(--astro-linie, #b9c3d6); background: #fff; }
.ase-tabel tbody tr:hover { background: var(--astro-bordura-albastra, #e8eef8); }
.ase-tabel tbody tr.ales { background: var(--astro-bordura-albastra, #e8eef8); box-shadow: inset 4px 0 0 var(--astro-sus, #1d4f91); font-weight: 600; }
.ase-tabel tbody tr:focus-visible { outline: 2px solid var(--astro-sus, #1d4f91); outline-offset: -2px; }
.ase-tabel td.ase-astru { width: 2.4rem; text-align: center; }
@media (max-width: 640px) { .ase-tabel th, .ase-tabel td { padding: .5rem .45rem; font-size: .92rem; }  }
.ase-tabel tbody tr.nu-se-vede { background: #fde7ec; }
.ase-tabel tbody tr.nu-se-vede:hover { background: #fbd5de; }
.ase-tabel tbody tr.nu-se-vede.ales { background: #f9c9d5; }
/* caseta unica de sus (anul, locul, viteza) pe toata latimea, slider-ul si butoanele sub harta */
.ase-perioada { max-width: none; margin-bottom: 1rem; }
.ase-harta-bloc .ase-control { margin: .8rem 0 0; max-width: none; }
.ase-harta-bloc .ase-bt { margin: .2rem 0 0; }
.ase-perioada .af-rand + .af-rand { border-top: 1px solid var(--astro-linie, #d5deee); }