/* css/tu-ruta-3d.css — tu-ruta-3d.php: lo propio de la página, sobre la pantalla de Aportar (css/aportar.css). */

/* Los pasos ①②③④ (js/tu-ruta-3d.js: data-paso): el que toca, encendido y con su borde; los hechos, ✓; los que vienen, gris */
.r3d-bloque .ap-cabeza { align-items: center; }
.r3d-paso { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
            border-radius: 50%; font-weight: 800; font-size: 1rem; background: #e3e6e8; color: #7a868c; transition: background .2s, color .2s; }
.r3d-paso::before { content: attr(data-n); }
.r3d-bloque[data-paso="activo"] { border-color: var(--acento); border-width: 2px; box-shadow: 0 6px 20px color-mix(in srgb, var(--acento) 22%, transparent); }
.r3d-bloque[data-paso="activo"] .r3d-paso { background: var(--acento); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 25%, transparent); }
.r3d-bloque[data-paso="activo"] .ap-titulo { font-size: 1.08rem; }
.r3d-bloque[data-paso="hecho"] .r3d-paso { background: #2e9e5b; color: #fff; }
.r3d-bloque[data-paso="hecho"] .r3d-paso::before { content: "✓"; }
.r3d-bloque[data-paso="pendiente"] .ap-titulo { color: var(--fog); }
.r3d-empieza { margin-left: auto; padding: .15rem .6rem; border-radius: 999px; background: var(--acento); color: #fff; font-size: .75rem; font-weight: 700; }
.r3d-bloque:not([data-paso="activo"]) .r3d-empieza { display: none; }

/* «Gratis» y lo que tiene de personal el vídeo */
.r3d-gratis { display: inline-block; vertical-align: 1px; margin-right: .3rem; padding: .05rem .5rem; border-radius: 999px; background: #ffd23f;
              color: #5a2a00; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.r3d-tuyo { margin-top: .7rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--border));
            background: color-mix(in srgb, var(--acento) 7%, var(--card-bg, #fff)); }
.r3d-tuyo h2 { margin: 0 0 .35rem; font-size: 1rem; }
.r3d-tuyo p { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; }
.r3d-tuyo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.r3d-tuyo li { font-size: .85rem; line-height: 1.4; }

/* «Introducir ruta» (apagado mientras se procesa) y las casillas, apagadas hasta que hay archivo */
.r3d-zona { cursor: pointer; }
.r3d-zona strong { font-size: 1.05rem; }
.r3d-zona[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.r3d-datos { color: var(--warm-dark); }
#r3dBloqueCasillas[aria-disabled="true"] .aportar-fila, #r3dBloqueMapa[aria-disabled="true"] .r3d-mapas { opacity: 0.5; }
.r3d-mapas .aportar-opcion:disabled { cursor: not-allowed; }
.r3d-mapas .aportar-opcion:disabled:hover { border-color: var(--border); }

/* La ventana de las condiciones */
.r3d-condiciones { width: min(92vw, 760px); height: min(86vh, 820px); padding: 0; border: 0; border-radius: 14px; overflow: hidden;
                   flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.r3d-condiciones[open] { display: flex; }
.r3d-condiciones::backdrop { background: rgba(10, 20, 25, .55); }
.r3d-condiciones header, .r3d-condiciones footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 1rem; }
.r3d-condiciones header { border-bottom: 1px solid var(--border); }
.r3d-condiciones footer { border-top: 1px solid var(--border); }
.r3d-condiciones h2 { margin: 0; font-size: 1.05rem; }
.r3d-condiciones footer p { margin: 0; font-size: .85rem; color: var(--fog); }
.r3d-condiciones iframe { flex: 1; width: 100%; border: 0; }
.r3d-cerrar { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: inherit; }

/* El mapa elegido */
.r3d-mapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3D arriba, 2D abajo */
.r3d-mapas .aportar-opcion[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--card-bg, #fff)); }
@media (max-width: 520px) { .r3d-mapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* «Ver ruta»: grande; mientras se procesa, se dice en él */
.r3d-ver { width: 100%; justify-content: center; font-size: 1.05rem; padding: 12px 18px; }
.r3d-ver.procesando:disabled { opacity: 0.85; animation: r3d-latido 1.6s ease-in-out infinite; }
@keyframes r3d-latido { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .r3d-ver.procesando:disabled { animation: none; } }