:root { --teal:#007c84; --teal-dark:#00636b; --green:#06966d; --mint:#e4f6f2; --ink:#153332; --muted:#6d7d7d; --paper:#f5f7f7; --line:#e2e9e8; --sun:#ffc83d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); padding-bottom:74px; }
body.welcome-open { overflow:hidden; }
button,input { font:inherit; }
.welcome { position:fixed; z-index:100; inset:0; padding:18px; display:grid; place-items:center; overflow:auto; background:linear-gradient(165deg,#f8fbfb,#fff); transition:opacity .3s ease,visibility .3s ease; }.welcome.hidden { opacity:0; visibility:hidden; pointer-events:none; }.welcome-card { width:min(100%,430px); padding:28px 25px 24px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:0 25px 70px rgba(0,74,80,.18); }.welcome-logo { width:92px; height:92px; margin:0 auto 17px; display:block; object-fit:cover; border-radius:23px; box-shadow:0 6px 18px rgba(0,70,120,.2); }.welcome h1 { margin:0 0 12px; font-size:1.35rem; line-height:1.2; }.welcome h1 span { color:var(--teal); }.welcome-card > p { max-width:340px; margin:0 auto 18px; color:#4f6060; font-size:.88rem; line-height:1.45; }.instagram-profile { display:flex; flex-direction:column; align-items:center; color:var(--ink); text-decoration:none; }.instagram-profile strong { margin-top:8px; font-size:.78rem; }.instagram-profile b { color:#087ea5; font-size:1.05rem; }.instagram-icon { width:68px; height:68px; position:relative; display:grid; place-items:center; border-radius:18px; background:radial-gradient(circle at 67% 68%,#ffd600 0 15%,#ff7a00 25%,#ff0169 52%,#d300c5 72%,#7638fa 100%); box-shadow:0 5px 15px rgba(199,0,107,.18); }.instagram-icon:before { content:''; width:37px; height:37px; border:5px solid white; border-radius:12px; }.instagram-icon:after { content:''; position:absolute; width:15px; height:15px; border:4px solid white; border-radius:50%; }.instagram-icon i { position:absolute; z-index:1; right:14px; top:13px; width:6px; height:6px; background:white; border-radius:50%; }.welcome-benefits { margin:20px 0; padding:0; display:grid; gap:11px; list-style:none; text-align:left; font-size:.72rem; }.welcome-benefits li { display:flex; align-items:center; gap:11px; }.welcome-benefits span { width:22px; color:var(--teal); text-align:center; font-size:1rem; }.instagram-button,.continue-button { width:100%; min-height:48px; display:grid; place-items:center; border:0; border-radius:11px; color:white; background:linear-gradient(90deg,#079968,#08a279); text-decoration:none; font-size:.82rem; font-weight:850; cursor:pointer; }.continue-button { margin-top:10px; color:var(--teal); background:#e8f5f3; }.welcome-card > small { display:block; margin:12px auto 0; color:var(--muted); font-size:.62rem; line-height:1.4; }
.app-header { height:78px; padding:14px max(18px,calc((100% - 920px)/2)); display:flex; align-items:center; gap:16px; color:#fff; background:linear-gradient(135deg,var(--teal-dark),#039397); box-shadow:0 4px 20px rgba(0,75,80,.16); }
.brand { display:flex; align-items:center; gap:10px; margin-right:auto; color:#fff; text-decoration:none; font-size:.72rem; line-height:1.05; letter-spacing:.02em; }
.brand b { font-size:.86rem; }.brand-mark { display:block; width:40px; height:40px; object-fit:cover; border:2px solid rgba(255,255,255,.85); border-radius:11px; box-shadow:0 3px 9px rgba(0,42,70,.18); }
.icon-button { width:38px; height:38px; padding:0; border:0; display:grid; place-content:center; color:#fff; background:transparent; cursor:pointer; font-size:1.55rem; }
.menu { gap:4px; }.menu span { display:block; width:19px; height:2px; background:white; border-radius:2px; }.refresh:disabled { opacity:.5; animation:spin 1s linear infinite; }
main { max-width:920px; margin:auto; padding:16px 18px 32px; }
.city-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:14px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:0 3px 13px rgba(0,72,76,.06); }
.city { border:0; border-radius:999px; padding:10px; color:var(--muted); background:transparent; font-size:.72rem; font-weight:800; cursor:pointer; }.city.active { color:#fff; background:linear-gradient(90deg,var(--teal-dark),#07929a); box-shadow:0 4px 10px rgba(0,108,116,.2); }.city:disabled { opacity:.55; }
.daily-card { min-height:145px; padding:20px; display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:17px; overflow:hidden; position:relative; background:linear-gradient(118deg,#fff 0 68%,#d7edf0 68%); border:1px solid var(--line); border-radius:15px; box-shadow:0 5px 20px rgba(0,70,70,.07); }
.daily-card:after { content:''; position:absolute; right:-20px; bottom:-45px; width:200px; height:95px; border-radius:50%; background:linear-gradient(170deg,#b0d3d4,#f7f2dc); opacity:.6; }
.sun { width:62px; height:62px; position:relative; z-index:1; display:grid; place-items:center; border-radius:50%; background:var(--sun); box-shadow:0 0 0 8px #fff5c9; }.sun:before,.sun:after,.sun span:before,.sun span:after { content:''; position:absolute; width:4px; height:13px; border-radius:5px; background:var(--sun); }.sun:before{top:-17px}.sun:after{bottom:-17px}.sun span:before{left:-17px;top:24px;transform:rotate(90deg)}.sun span:after{right:-17px;top:24px;transform:rotate(90deg)}
.daily-copy { z-index:1; display:flex; flex-direction:column; gap:4px; }.daily-copy strong { font-size:1.08rem; }.daily-copy span { color:var(--muted); font-size:.76rem; }.daily-copy b { margin-top:5px; color:var(--teal); font-size:.82rem; }
.daily-copy .temperature { display:flex; align-items:baseline; gap:7px; margin-top:2px; }.daily-copy .temperature strong { color:#137da4; font-size:1.4rem; }.daily-copy .temperature i { color:#e75b50; font-style:normal; font-weight:750; font-size:.75rem; }.daily-status { z-index:1; min-width:130px; display:grid; grid-template-columns:9px 1fr; align-items:center; gap:4px 7px; }.daily-status strong { font-size:.76rem; }.daily-status small { grid-column:2; color:var(--muted); font-size:.68rem; }.weather-data { grid-column:1/-1; margin-top:8px; color:#4e6564; font-size:.66rem; line-height:1.55; }.live-dot { width:8px; height:8px; border-radius:50%; background:#17af76; box-shadow:0 0 0 4px #d9f4e9; }
.search-box { margin:14px 0 21px; padding:12px 12px 12px 17px; display:grid; grid-template-columns:24px 1fr 46px; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 16px rgba(0,70,70,.06); }.search-box > span { font-size:1.6rem; color:#718282; }.search-box div { display:flex; flex-direction:column; }.search-box strong { font-size:.8rem; }.search-box small { color:var(--muted); font-size:.67rem; }.search-box button { width:44px; height:44px; border:0; border-radius:11px; color:white; background:var(--teal); font-size:1.4rem; cursor:pointer; }.search-input { grid-column:1/-1; }.search-input input { width:100%; padding:11px 13px; border:1px solid #bcd0ce; border-radius:10px; outline-color:var(--teal); }
.search-input { display:grid; grid-template-columns:1fr auto; gap:8px; }.search-input[hidden] { display:none; }.search-input label { min-width:0; }.search-box .search-input button { width:auto; padding:0 15px; font-size:.68rem; font-weight:850; }.medicine-results { margin:-8px 0 18px; display:grid; gap:8px; }.medicine-results[hidden] { display:none; }.catalog-pending { padding:15px; color:#526463; background:#edf6f5; border:1px solid #d4e9e6; border-radius:12px; font-size:.75rem; }.catalog-pending strong { color:var(--teal); }.catalog-pending p { margin:5px 0 0; line-height:1.45; }.medicine-heading { display:flex; justify-content:space-between; padding:0 3px 4px; font-size:.75rem; }.medicine-heading small { color:var(--muted); }.medicine-card { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; }.medicine-card .rank { display:grid; place-items:center; width:25px; height:25px; color:#fff; background:var(--teal); border-radius:7px; font-size:.72rem; font-weight:850; }.medicine-card > div { display:flex; flex-direction:column; gap:2px; }.medicine-card > div strong { font-size:.8rem; }.medicine-card > div b { margin-top:3px; color:var(--teal); font-size:.69rem; }.medicine-card small { color:var(--muted); font-size:.62rem; }.medicine-price { color:#087e5e; font-size:.88rem; }
.instagram-banner { margin:2px 0 20px; padding:15px 16px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; color:#fff; background:linear-gradient(120deg,#6546d7 0%,#d62976 48%,#f77737 100%); border:1px solid rgba(255,255,255,.24); border-radius:16px; box-shadow:0 9px 24px rgba(190,35,111,.24); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }.instagram-banner:hover,.instagram-banner:focus-visible { transform:translateY(-2px); box-shadow:0 13px 30px rgba(190,35,111,.32); }.mini-instagram { display:grid; place-items:center; width:44px; height:44px; color:#d62976; background:#fff; border-radius:13px; box-shadow:0 3px 10px rgba(75,0,50,.18); font-size:1.65rem; font-weight:850; }.instagram-banner > span:nth-child(2) { display:flex; flex-direction:column; }.instagram-banner strong { font-size:.82rem; letter-spacing:.01em; }.instagram-banner small { margin-top:3px; color:rgba(255,255,255,.88); font-size:.66rem; }.instagram-banner > b { padding:8px 10px; color:#a52466; background:#fff; border-radius:9px; font-size:.7rem; box-shadow:0 2px 7px rgba(75,0,50,.12); }
.seremi-source { margin-top:10px; padding:12px; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; color:var(--ink); background:#edf6fb; border:1px solid #d4e7f1; border-radius:12px; text-decoration:none; }.seremi-source[hidden] { display:none; }.seremi-source > span:first-child { display:grid; place-items:center; width:30px; height:30px; color:white; background:#106fa0; border-radius:9px; font-size:1.2rem; }.seremi-source > span:nth-child(2) { display:flex; flex-direction:column; }.seremi-source strong { font-size:.7rem; }.seremi-source small { margin-top:2px; color:var(--muted); font-size:.59rem; }.seremi-source b { color:#106f9f; font-size:.66rem; }
.pharmacy-section { margin:18px -4px 0; padding:16px; background:linear-gradient(145deg,#dff3ef,#eaf7f7); border:1px solid #b5ded6; border-left:6px solid var(--teal); border-radius:17px; box-shadow:0 8px 22px rgba(0,95,88,.12); }.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; }.section-title h1 { margin:0; color:#075f55; font-size:.9rem; text-transform:uppercase; letter-spacing:.035em; }.section-title span { padding:6px 10px; color:#fff; background:var(--teal); border-radius:999px; font-size:.66rem; font-weight:800; box-shadow:0 3px 8px rgba(0,95,88,.18); }
#notice:not(:empty) { margin:0 0 12px; padding:12px 14px; border-radius:10px; background:#fff2d8; color:#744b00; font-size:.8rem; }
.cards { display:grid; gap:10px; }.card { position:relative; overflow:hidden; padding:16px; background:#fff; border:1px solid #c7e2dc; border-left:5px solid var(--green); border-radius:14px; box-shadow:0 6px 17px rgba(0,83,76,.11); }.card-head { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }.pharmacy-icon { display:grid; place-items:center; width:46px; height:46px; color:#fff; background:var(--green); border-radius:50% 50% 50% 14px; box-shadow:0 4px 10px rgba(0,151,105,.2); font-size:30px; font-weight:950; }.card h2 { margin:0 0 4px; color:#064f4a; font-size:.94rem; }.address { margin:0; color:#526968; font-size:.74rem; }.badge { padding:5px 8px; color:#fff; background:#079968; border-radius:999px; font-size:.58rem; font-weight:850; white-space:nowrap; }.card-info { margin:9px 0 0 58px; display:flex; align-items:center; justify-content:space-between; gap:10px; }.schedule { color:#08785b; font-size:.7rem; font-weight:650; }.actions { display:flex; gap:6px; }.actions a { padding:7px 9px; border-radius:8px; text-align:center; text-decoration:none; font-size:.67rem; font-weight:800; }.map { color:white; background:var(--teal); }.phone { color:var(--teal); background:#e7f4f4; }
.badge.regular { color:#526b74; background:#e9f0f3; }
.tip,.source-note { display:flex; gap:12px; margin-top:18px; padding:15px; border-radius:13px; font-size:.73rem; }.tip { background:#eaf5f2; }.source-note { align-items:center; color:#74654d; background:#fffaf0; border:1px solid #f1e8d5; }.tip > span,.source-note > span { font-size:1.2rem; color:var(--green); }.tip strong,.tip p,.source-note p { margin:0; }.tip p { margin-top:3px; color:var(--muted); line-height:1.45; }.empty { padding:38px 18px; border:1px dashed #aac3bb; border-radius:13px; text-align:center; color:var(--muted); }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.bottom-nav { position:fixed; z-index:10; left:0; right:0; bottom:0; height:68px; display:flex; justify-content:center; background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -5px 20px rgba(0,50,55,.07); backdrop-filter:blur(10px); }.bottom-nav a { width:min(25%,160px); padding:9px 4px 7px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#718180; text-decoration:none; font-size:.61rem; }.bottom-nav span { font-size:1.15rem; font-weight:750; }.bottom-nav .active { color:var(--teal); }footer { padding:20px; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); text-align:center; font-size:.68rem; }.developer-signature { color:var(--teal); text-decoration:none; font-size:.75rem; }.developer-signature strong { letter-spacing:.03em; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:560px) { .daily-card { grid-template-columns:62px 1fr; }.daily-status { grid-column:1/-1; margin-left:4px; }.daily-card:after { width:130px; }.card-info { margin-left:0; }.badge { display:none; }.instagram-banner { grid-template-columns:44px 1fr auto; }.seremi-source { grid-template-columns:32px 1fr; }.seremi-source > b { grid-column:2; }.instagram-banner > b { padding:7px 8px; font-size:.64rem; }.medicine-price { font-size:.76rem; } }
@media (max-height:690px) { .welcome { place-items:start center; }.welcome-card { padding-top:20px; }.welcome-logo { width:60px;height:60px;font-size:45px;margin-bottom:10px; }.welcome-benefits { margin:13px 0;gap:7px; }.welcome-card > p { margin-bottom:12px; } }
@media (min-width:720px) { main { padding-top:24px; }.cards { grid-template-columns:1fr 1fr; }.search-box { grid-template-columns:24px 1fr 46px; }.source-note,.tip { max-width:600px; }.app-header { height:84px; } }