/*
Theme Name: Euros Journey Theme
Theme URI: https://example.com/euros-journey
Author: Creatribu DBloper
Author URI: https://creatribu.com
Description: Landing minimalista para el experimento social "El viaje de mis €UROS". Sin page builders ni frameworks pesados.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: euros-journey-theme
Tags: landing, mapa, leaflet, osm, rest-api, minimal
*/

:root{
  --bg:#0b1220;
  --bg-soft:#0f172a;
  --card:#0c1324;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#facc15; /* amarillo */
  --accent:#ef4444; /* rojo ruta */
  --pill:#111827;
  --border:#1f2937;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text); background: radial-gradient(1200px 600px at 50% -10%, #172142 10%, var(--bg) 55%);
}

.wrap{max-width:1200px; margin:0 auto; padding:24px}
h1{
  text-align:center; color:var(--brand); font-size: clamp(36px, 5vw, 64px); margin: 10px 0 6px; letter-spacing:.5px
}
p.lead{
  max-width: 980px; margin: 0 auto 22px; line-height:1.55; color:#f3f4f6; text-align:center
}
p.lead em{color:var(--brand); font-style:normal}
small.hint{display:block; text-align:center; color:var(--muted); margin-top:6px}

.grid{
  display:grid; grid-template-columns: 1.1fr 1.6fr; gap:22px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.form-group{display:flex; flex-direction:column; gap:10px}
.input, select, button{
  width:100%; padding:14px 16px; border-radius:16px; border:1px solid #1f2937; outline:none;
  background:#0b1326; color:var(--text);
}
.input::placeholder{color:#6b7280}
select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 6px), calc(100% - 15px) calc(1em + 6px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
button{
  cursor:pointer; background:linear-gradient(180deg, #ffd34d, #fbbf24);
  color:#111827; font-weight:700; letter-spacing:.5px; border:0; transition:.2s transform;
}
button:hover{transform:translateY(-1px) scale(1.01)}
button:disabled{opacity:.6; cursor:not-allowed}
.error{color:#fca5a5; margin:8px 0 0}
.success{color:#86efac; margin:8px 0 0}

.map-card{padding:0}
#map{height:560px; width:100%; border-radius:14px; overflow:hidden}
@media (max-width: 980px){#map{height:480px}}

.sidebar{
  margin-top:14px;
}
.sidebar h3{margin:0 0 10px; font-size:18px; color:#f9fafb; letter-spacing:.3px}
.point-list{list-style:none; padding:0; margin:0; max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:12px}
.point-list li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px dashed #1f2937;
}
.point-list li:last-child{border-bottom:0}
.tag{background:var(--pill); color:#cbd5e1; padding:2px 8px; border-radius:999px; font-size:12px}
.coords{color:#93c5fd; font-size:12px}
.small{font-size:12px; color:var(--muted)}

.bill-icon{max-width:90px; width:90px; height:auto; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.4)}
.leaflet-popup-content img{width:90px; height:auto; display:block; margin:0 0 6px; border-radius:4px}

footer.site{margin-top:28px; text-align:center; color:var(--muted)}
a.clean{color:#a5b4fc; text-decoration:none}
a.clean:hover{text-decoration:underline}