/* ============================================================ meteoBezana — meteobezana.css Skin weewx 5.x — Mompía, Santa Cruz de Bezana Responsive: móvil → tablet → desktop Dark mode por defecto, light mode con clase .light en ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- VARIABLES DARK (por defecto) ---- */ :root { --bg: #0f1117; --bg2: #1a1d27; --bg3: #222535; --bg4: #2a2e42; --txt: #f0f2ff; --txt2: #9ba3c4; --txt3: #5c6380; --blue: #4a9eff; --blue2: #1a4a8a; --blue3: #0d2a55; --teal: #2dd4a0; --amber: #ffb830; --red: #ff6b6b; --purple: #a78bfa; --green: #4ade80; --border: rgba(255,255,255,0.07); --rad: 12px; --card: var(--bg2); --input: var(--bg3); --shadow: none; --tc: #5c6380; --gc: rgba(255,255,255,0.04); --tooltip-bg: #1a1d27; --tooltip-title: #9ba3c4; --tooltip-body: #f0f2ff; } /* ---- VARIABLES LIGHT ---- */ body.light { --bg: #f0f4f8; --bg2: #ffffff; --bg3: #e8edf3; --bg4: #d8e0ea; --txt: #1a1f2e; --txt2: #4a5568; --txt3: #8896a8; --blue: #1a6fd4; --blue2: #c5dcf7; --blue3: #deeafa; --teal: #0a8a60; --amber: #b07000; --red: #cc2222; --purple: #6b44d4; --green: #1a8a40; --border: rgba(0,0,0,0.09); --card: #ffffff; --input: #e8edf3; --shadow: 0 1px 4px rgba(0,0,0,0.08); --tc: #8896a8; --gc: rgba(0,0,0,0.05); --tooltip-bg: #ffffff; --tooltip-title: #4a5568; --tooltip-body: #1a1f2e; } /* ---- BASE ---- */ body { background: var(--bg); color: var(--txt); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; transition: background 0.25s, color 0.25s; min-height: 100vh; } .shell { max-width: 960px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } /* ---- TOPBAR ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card); border-radius: var(--rad); border: 0.5px solid var(--border); flex-wrap: wrap; gap: 8px; transition: background 0.25s; box-shadow: var(--shadow); } .logo { font-size: 16px; font-weight: 600; color: var(--blue); } .logo span { color: var(--txt2); font-weight: 400; font-size: 13px; } .nav { display: flex; gap: 3px; flex-wrap: wrap; } .nav a { padding: 5px 11px; border-radius: 8px; color: var(--txt2); font-size: 13px; cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s; user-select: none; } .nav a:hover:not(.act) { background: var(--bg3); } .nav a.act { background: var(--blue3); color: var(--blue); } .topbar-right { display: flex; align-items: center; gap: 8px; } .upd { font-size: 11px; color: var(--txt3); background: var(--bg3); padding: 4px 10px; border-radius: 6px; white-space: nowrap; } .upd span { color: var(--teal); } .theme-btn { background: var(--bg3); border: 0.5px solid var(--border); color: var(--txt2); font-size: 13px; padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .theme-btn:hover { background: var(--bg4); } /* ---- SECCIONES / PÁGINAS ---- */ .sec-title { font-size: 11px; font-weight: 500; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 2px; } .page { display: none; flex-direction: column; gap: 12px; } .page.act { display: flex; } /* ---- PANEL ACTUAL ---- */ .current-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.75fr; gap: 10px; } .temp-hero { background: var(--card); border: 0.5px solid var(--blue2); border-radius: var(--rad); padding: 20px 24px; transition: background 0.25s; box-shadow: var(--shadow); } .temp-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; } .t-big { font-size: 68px; font-weight: 700; line-height: 1; color: var(--txt); } .t-dec { font-size: 34px; font-weight: 700; color: var(--blue); line-height: 1; padding-bottom: 6px; } .t-unit { font-size: 20px; color: var(--txt2); padding-bottom: 10px; } .t-cond { font-size: 15px; color: var(--txt); margin-bottom: 4px; } .t-feels { font-size: 13px; color: var(--txt3); } .t-minmax { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--border); flex-wrap: wrap; } .tmm { display: flex; flex-direction: column; gap: 2px; } .tmm-l { font-size: 11px; color: var(--txt3); } .tmm-v { font-size: 15px; font-weight: 600; } .tmm-t { font-size: 10px; color: var(--txt3); margin-top: 1px; } .tmm-v.hi { color: #e05030; } .tmm-v.lo { color: #3080d0; } .tmm-v.teal { color: var(--teal); } .tmm-v.blue { color: var(--blue); } /* Columna central */ .mid-col { display: flex; flex-direction: column; gap: 8px; } .metrics2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mc { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 12px 14px; transition: background 0.25s; box-shadow: var(--shadow); } .mc-l { font-size: 11px; color: var(--txt3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .mc-v { font-size: 19px; font-weight: 600; margin-bottom: 2px; } .mc-v.blue { color: var(--blue); } .mc-v.purple { color: var(--purple); } .mc-unit { font-size: 12px; color: var(--txt3); font-weight: 400; } .mc-s { font-size: 11px; color: var(--txt3); } .sun-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 12px 14px; transition: background 0.25s; box-shadow: var(--shadow); } .sun-row { display: flex; justify-content: space-between; } .sun-it { display: flex; flex-direction: column; align-items: center; gap: 3px; } .sun-l { font-size: 10px; color: var(--txt3); } .sun-v { font-size: 13px; font-weight: 500; color: var(--amber); } .sun-v.muted { color: var(--txt2); } .sun-bar { height: 3px; background: var(--bg3); border-radius: 2px; margin: 7px 0 6px; } .sun-prog { height: 3px; background: var(--amber); border-radius: 2px; width: 0%; transition: width 1s ease; } /* Columna viento */ .wind-col { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: background 0.25s; box-shadow: var(--shadow); } .wind-col-title { font-size: 11px; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.08em; } .wind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .ws { background: var(--bg3); border-radius: 8px; padding: 9px 11px; transition: background 0.25s; } .ws-l { font-size: 10px; color: var(--txt3); margin-bottom: 3px; } .ws-v { font-size: 17px; font-weight: 600; color: var(--txt); } .ws-u { font-size: 10px; color: var(--txt3); font-weight: 400; } .ws.racha { border: 0.5px solid rgba(255,184,48,0.3); } .ws.racha .ws-v { color: var(--amber); } .ws-avg-wrap { background: var(--bg3); border-radius: 8px; padding: 10px 12px; } .ws-avg-label { font-size: 10px; color: var(--txt3); margin-bottom: 6px; } .ws-avg-row { display: flex; align-items: center; gap: 8px; } .ws-avg-val { font-size: 20px; font-weight: 600; color: var(--txt); white-space: nowrap; } .ws-avg-bar-wrap { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; } .ws-avg-bar { height: 4px; background: var(--blue); border-radius: 2px; width: 0%; transition: width 1s ease; } /* ---- PREVISIÓN 7 DÍAS ---- */ .forecast-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .forecast-loading { color: var(--txt3); font-size: 13px; padding: 1rem 0; } .fd { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 5px; align-items: center; transition: background 0.25s; box-shadow: var(--shadow); } .fd.today { border-color: var(--blue2); } .fd-day { font-size: 11px; color: var(--txt3); } .fd-ico { width: 30px; height: 30px; } .fd-hi { font-size: 15px; font-weight: 600; color: var(--txt); } .fd-lo { font-size: 12px; color: var(--txt3); } .fd-mm { font-size: 10px; color: var(--blue); } .fd-wind { font-size: 10px; color: var(--txt3); } .fd-desc { font-size: 10px; color: var(--txt3); line-height: 1.3; } /* ---- TABLA HORARIA ---- */ .table-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); overflow: hidden; transition: background 0.25s; box-shadow: var(--shadow); } .table-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 0.5px solid var(--border); flex-wrap: wrap; gap: 8px; } .table-title { font-size: 14px; font-weight: 500; color: var(--txt); } .tctrl { display: flex; gap: 4px; } .tb { background: var(--bg3); border: none; color: var(--txt3); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .tb.act { background: var(--blue3); color: var(--blue); } .tb:hover:not(.act) { background: var(--bg4); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 520px; } thead tr { background: var(--bg3); } th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 500; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0.5px solid var(--border); white-space: nowrap; } th:not(:first-child) { text-align: right; } td { padding: 7px 12px; font-size: 13px; color: var(--txt2); border-bottom: 0.5px solid var(--border); white-space: nowrap; } td:not(:first-child) { text-align: right; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg3); } tr.now-row td { background: rgba(74,158,255,0.07); color: var(--txt); } tr.now-row td:first-child { color: var(--blue); font-weight: 500; } .vhi { color: #e05030 !important; } .vlo { color: #3080d0 !important; } .vgust { color: var(--amber) !important; } .vrain { color: var(--blue) !important; } .dir-badge { font-size: 10px; color: var(--txt3); margin-left: 3px; } .now-badge { font-size: 10px; color: var(--teal); margin-left: 4px; } /* ---- GRÁFICAS ---- */ .charts-stack { display: flex; flex-direction: column; gap: 10px; } .chart-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 16px; transition: background 0.25s; box-shadow: var(--shadow); } .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; } .chart-title { font-size: 14px; font-weight: 500; color: var(--txt); } .chart-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .chart-wrap { position: relative; height: 155px; } .pbg { display: flex; gap: 3px; } .pb { background: var(--bg3); border: none; color: var(--txt3); font-size: 11px; padding: 4px 9px; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .pb.act { background: var(--blue3); color: var(--blue); } .pb:hover:not(.act) { background: var(--bg4); } .dl-btn { background: var(--bg3); border: 0.5px solid var(--border); color: var(--txt2); font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .dl-btn:hover { background: var(--bg4); } /* ---- PÁGINA GRÁFICOS ---- */ .period-selector { display: flex; gap: 6px; flex-wrap: wrap; } .g-subtitle { font-size: 12px; color: var(--txt3); margin-top: -4px; } /* ---- RÉCORDS ---- */ .rec-tabs { display: flex; gap: 4px; } .rec-tab { padding: 6px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 0.5px solid var(--border); color: var(--txt2); background: var(--card); transition: background 0.15s; } .rec-tab.act { background: var(--blue3); color: var(--blue); border-color: var(--blue2); } .rec-tab:hover:not(.act) { background: var(--bg3); } .rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .rec-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); overflow: hidden; box-shadow: var(--shadow); } .rec-card-head { padding: 10px 14px; background: var(--bg3); border-bottom: 0.5px solid var(--border); } .rec-card-head h3 { font-size: 12px; font-weight: 500; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.05em; } .rec-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 0.5px solid var(--border); gap: 8px; } .rec-row:last-child { border-bottom: none; } .rec-label { font-size: 12px; color: var(--txt3); } .rec-date { font-size: 10px; color: var(--txt3); margin-top: 1px; } .rec-val { font-size: 14px; font-weight: 600; color: var(--txt); white-space: nowrap; } .rec-val.hi { color: #e05030; } .rec-val.lo { color: #3080d0; } .rec-val.blue { color: var(--blue); } .rec-val.amber { color: var(--amber); } .rec-val.purple { color: var(--purple); } /* ---- INFORMES NOAA ---- */ .rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .rep-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 14px; transition: background 0.15s; box-shadow: var(--shadow); } .rep-card:hover { background: var(--bg3); } .rep-year { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 8px; } .rep-months { display: flex; flex-wrap: wrap; gap: 3px; } .rep-month { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg3); color: var(--txt3); cursor: pointer; text-decoration: none; transition: background 0.15s; } .rep-month:hover { background: var(--blue3); color: var(--blue); } /* ---- SOBRE ---- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .about-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--rad); padding: 16px 18px; transition: background 0.25s; box-shadow: var(--shadow); } .about-card h3 { font-size: 13px; font-weight: 500; color: var(--txt); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 0.5px solid var(--border); } .about-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 0.5px solid var(--border); gap: 8px; } .about-row:last-child { border-bottom: none; } .about-label { font-size: 12px; color: var(--txt3); } .about-val { font-size: 12px; color: var(--txt); font-weight: 500; text-align: right; } .networks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; } .net-item { background: var(--bg3); border-radius: 8px; padding: 10px 14px; } .net-label { font-size: 11px; color: var(--txt3); margin-bottom: 3px; } .net-val { font-size: 13px; font-weight: 500; color: var(--blue); } /* ---- FOOTER ---- */ .footer { text-align: center; padding: 8px; font-size: 11px; color: var(--txt3); } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet (≤ 768px) */ @media (max-width: 768px) { .current-grid { grid-template-columns: 1fr 1fr; } .wind-col { grid-column: 1 / -1; } .forecast-grid { grid-template-columns: repeat(4, 1fr); overflow-x: auto; padding-bottom: 4px; } .about-grid { grid-template-columns: 1fr; } .logo span { display: none; } } /* Móvil (≤ 540px) */ @media (max-width: 540px) { .shell { padding: 8px; gap: 8px; } .topbar { padding: 8px 12px; } .logo { font-size: 15px; } .nav a { padding: 4px 8px; font-size: 12px; } .theme-btn { font-size: 12px; padding: 4px 8px; } .upd { display: none; } .current-grid { grid-template-columns: 1fr; } .wind-col { grid-column: auto; } .t-big { font-size: 52px; } .t-dec { font-size: 26px; } .t-unit { font-size: 18px; } .metrics2 { grid-template-columns: 1fr 1fr; } .forecast-grid { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; padding-bottom: 4px; } .rec-grid { grid-template-columns: 1fr; } .chart-card { padding: 12px; } .chart-header { flex-direction: column; align-items: flex-start; } .chart-wrap { height: 130px; } .rec-tabs { flex-wrap: wrap; } .about-grid { grid-template-columns: 1fr; } .table-header { flex-direction: column; align-items: flex-start; } } /* Móvil muy pequeño (≤ 360px) */ @media (max-width: 360px) { .nav { display: none; } .t-big { font-size: 44px; } } /* ============================================================ ALMANAQUE — botón trigger y modal ============================================================ */ /* Botón en la sun-card */ .almanac-btn { display: block; width: 100%; margin-top: 10px; padding: 6px 0; background: none; border: none; border-top: 0.5px solid var(--border); color: var(--blue); font-size: 12px; cursor: pointer; text-align: center; transition: opacity 0.15s; letter-spacing: 0.02em; } .almanac-btn:hover { opacity: 0.7; } /* Overlay */ .alm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: flex-start; justify-content: center; padding: 20px 12px; overflow-y: auto; backdrop-filter: blur(2px); } .alm-overlay.open { display: flex; } /* Modal box */ .alm-modal { background: var(--card); border: 0.5px solid var(--border); border-radius: 16px; width: 100%; max-width: 620px; padding: 0; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); animation: almIn 0.2s ease; } @keyframes almIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* Header del modal */ .alm-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 0.5px solid var(--border); background: var(--bg3); } .alm-title { font-size: 16px; font-weight: 500; color: var(--txt); margin-bottom: 2px; } .alm-date { font-size: 12px; color: var(--txt3); text-transform: capitalize; } .alm-close { background: var(--bg4); border: 0.5px solid var(--border); color: var(--txt2); width: 28px; height: 28px; border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .alm-close:hover { background: var(--red); color: #fff; border-color: var(--red); } /* Secciones sol / luna */ .alm-section { padding: 18px 20px; border-bottom: 0.5px solid var(--border); } .alm-section:last-child { border-bottom: none; } .alm-section-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; } .alm-section-title svg { color: var(--amber); flex-shrink: 0; } .alm-section:last-child .alm-section-title svg { color: var(--purple); } /* Grid de datos */ .alm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; } .alm-item { background: var(--bg3); border-radius: 8px; padding: 9px 12px; } .alm-item-label { font-size: 11px; color: var(--txt3); margin-bottom: 3px; } .alm-item-val { font-size: 14px; font-weight: 600; color: var(--txt); } .alm-item-val.amber { color: var(--amber); } .alm-item-val.purple { color: var(--purple); } /* Timeline solar */ .alm-sun-timeline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .alm-tl-label { font-size: 11px; color: var(--txt3); white-space: nowrap; min-width: 38px; } .alm-tl-label:last-child { text-align: right; } .alm-tl-track { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; position: relative; overflow: visible; } .alm-tl-fill { height: 6px; background: linear-gradient(90deg, #ff9500, var(--amber)); border-radius: 3px; width: 0%; transition: width 0.8s ease; } .alm-tl-now { position: absolute; top: -4px; width: 14px; height: 14px; background: var(--amber); border: 2px solid var(--card); border-radius: 50%; left: 0%; transform: translateX(-50%); transition: left 0.8s ease; display: none; } /* Próximos eventos */ .alm-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; } .alm-event-item { background: var(--bg3); border-radius: 8px; padding: 8px 12px; } /* Visual de fase lunar */ .alm-moon-visual { display: flex; align-items: center; gap: 16px; background: var(--bg3); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; } #alm-moon-canvas { flex-shrink: 0; } .alm-moon-info { display: flex; flex-direction: column; gap: 4px; } .alm-moon-phase-big { font-size: 16px; font-weight: 500; color: var(--purple); } .alm-moon-pct-big { font-size: 13px; color: var(--txt3); } /* Responsive modal */ @media (max-width: 540px) { .alm-overlay { padding: 10px 8px; align-items: flex-start; } .alm-modal { border-radius: 12px; } .alm-header { padding: 14px 16px 12px; } .alm-section { padding: 14px 16px; } .alm-grid { grid-template-columns: 1fr 1fr; } .alm-events { grid-template-columns: 1fr 1fr; } .alm-item-val { font-size: 13px; } }