/* ═══ Sol y sombras (ficha de localización) ═══ */
.sol-block .sol-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
.sol-block .sol-fecha { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sol-block .sol-fecha input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input, #fff); color: var(--text-primary); }
.sol-block .sol-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-block .sol-preset-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.sol-orient { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.sol-orient-label { font-weight: 600; margin-right: 4px; }
.sol-chip { border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--text-primary); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.sol-chip.on { background: #f0932b; border-color: #f0932b; color: #fff; }
.sol-hint { flex-basis: 100%; color: var(--text-muted); font-size: 0.8rem; }
.sol-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.sol-col-brujula { flex: 0 0 300px; max-width: 100%; text-align: center; }
.sol-col-datos { flex: 1 1 420px; min-width: 0; }
.sol-brujula { width: 100%; max-width: 300px; height: auto; }
.sol-brujula-pie { color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }
.sol-hora { font-size: 9px; fill: #4a5568; }
.sol-hora-b { font-size: 11px; font-weight: 700; fill: #1f2a44; }
.sol-cardinal { font-size: 13px; font-weight: 700; fill: #1f2a44; }
.sol-ama { fill: #ffd166; stroke: #e8890c; stroke-width: 2; }
.sol-ata { fill: #f0932b; stroke: #b5651d; stroke-width: 2; }
.sol-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sol-tile { background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.sol-tile-t { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.sol-tile-v { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin: 2px 0; }
.sol-tile-s { font-size: 0.78rem; color: var(--text-secondary); }
.sol-dia-t { font-weight: 600; margin-bottom: 6px; }
.sol-linea { width: 100%; height: 48px; display: block; border-radius: 6px; }
.sol-linea-f { height: 18px; }
.sol-eje { font-size: 11px; fill: #6b7280; }
.sol-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: var(--text-secondary); margin: 6px 0 12px; }
.sol-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.sol-fachadas { display: flex; flex-direction: column; gap: 10px; }
.sol-fachada-t { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.sol-fachada-t span { color: var(--text-secondary); font-size: 0.85rem; }
.sol-fachada-h { color: var(--text-muted) !important; font-size: 0.78rem !important; }
.sol-sin-orient { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
@media (max-width: 640px) { .sol-col-brujula { flex-basis: 100%; } }
/* Tiempo meteorológico dentro del bloque Sol y sombras */
.sol-tiempo { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.sol-tiempo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.sol-fiab { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.sol-fiab-ok { background: #e5f8ea; color: #1b7a3d; }
.sol-fiab-aviso { background: #fff3d6; color: #9a5b00; }
.sol-fiab-no { background: #eceff3; color: #4a5568; }
.sol-fiab-hist { background: #e8f1fd; color: #1d4ed8; }
.sol-tiempo-fuente { color: var(--text-muted); font-size: 0.78rem; font-weight: 400; }
.sol-tiempo-aviso { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 6px; }
.sol-tiempo-rec { background: #fff8e6; border-left: 3px solid #f0932b; padding: 8px 10px; border-radius: 6px; font-size: 0.88rem; margin: 0 0 12px; }
.sol-tiles-tiempo { margin-top: 8px; }
.sol-lluvia { font-size: 14px; }