/* ============================================
   HolaX - Paginas SSR: wiki de estados y medicos
   (functions/_lib/page-shell.js)
   ============================================ */

.hx-page {
    --hx-blue: #006EE3;
    --hx-text: #0f172a;
    --hx-muted: #64748b;
    --hx-border: #e5e7eb;
    --hx-bg: #f5f7fb;
    margin: 0;
    background: var(--hx-bg);
    color: var(--hx-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.55;
}
.hx-page a { color: var(--hx-blue); }

.hx-top { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.hx-top-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.hx-logo img { height: 32px; width: 32px; border-radius: 7px; }
.hx-top-links { display: flex; gap: 16px; }
.hx-top-links a { color: var(--hx-text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.hx-top-links a:hover { color: var(--hx-blue); }

.hx-main { max-width: 1200px; margin: 0 auto; padding: 12px 16px 48px; box-sizing: border-box; }
.hx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .83rem; color: #94a3b8; margin: 4px 0 12px; }
.hx-crumbs a { text-decoration: none; }

.hx-hero { background: linear-gradient(135deg, #0052ab, #006EE3 60%, #2b8cff); color: #fff; border-radius: 20px; padding: 28px 22px; margin-bottom: 18px; }
.hx-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.02em; }
.hx-hero .hx-sub { font-size: clamp(1rem, 3vw, 1.15rem); font-weight: 600; margin: 0 0 12px; color: rgba(255,255,255,.92); }
.hx-hero .hx-lead { margin: 0; color: rgba(255,255,255,.95); max-width: 820px; font-size: 1rem; }
.hx-hero a { color: #fff; }
.hx-kicker { margin: 0 0 8px; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); }
.hx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.hx-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--hx-blue) !important; font-weight: 700; padding: 10px 16px; border-radius: 12px; text-decoration: none; border: 0; }
.hx-section .hx-btn, .hx-center .hx-btn, .hx-cta .hx-btn { background: var(--hx-blue); color: #fff !important; }
.hx-btn-red { background: #dc2626 !important; color: #fff !important; }
.hx-btn-ghost { background: rgba(255,255,255,.15) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4); }

.hx-section { background: #fff; border: 1px solid var(--hx-border); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.hx-section > h2 { font-size: 1.2rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.hx-section > h2 i { color: var(--hx-blue); }
.hx-section h3 { font-size: 1rem; margin: 18px 0 8px; }
.hx-section p { margin: 0 0 10px; }
.hx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hx-two .hx-section { margin-bottom: 16px; }
@media (max-width: 760px) { .hx-two { grid-template-columns: 1fr; gap: 0; } }

.hx-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hx-fact { background: var(--hx-bg); border-radius: 12px; padding: 12px; }
.hx-fact span { display: block; font-size: .78rem; color: var(--hx-muted); }
.hx-fact strong { font-size: 1.05rem; }
@media (max-width: 760px) { .hx-facts { grid-template-columns: repeat(2, 1fr); } }

.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--hx-border); border-radius: 999px; background: #fff; text-decoration: none; color: var(--hx-text) !important; font-size: .88rem; }
a.hx-chip:hover, .hx-chip.is-active { border-color: var(--hx-blue); color: var(--hx-blue) !important; background: #eff6ff; }
.hx-chip b { background: #f1f5f9; border-radius: 999px; padding: 0 7px; font-size: .75rem; color: var(--hx-muted); }
.hx-chip-static { background: var(--hx-bg); }

.hx-list { margin: 0; padding-left: 20px; }
.hx-list li { margin-bottom: 6px; }
.hx-link { font-weight: 700; text-decoration: none; }
.hx-note { color: var(--hx-muted); background: var(--hx-bg); border-radius: 12px; padding: 12px 14px; }
.hx-center { text-align: center; margin-top: 14px; }
.hx-cities { color: var(--hx-muted); font-size: .9rem; margin: 12px 0; }
.hx-pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eff6ff; color: var(--hx-blue); margin-left: 6px; }
.hx-sources { font-size: .8rem; color: var(--hx-muted); text-align: center; margin: 18px 0 0; }

/* Weather */
.hx-weather { background: linear-gradient(135deg, #e0f2fe, #eff6ff); border-radius: 14px; padding: 16px; }
.hx-weather-loading { color: var(--hx-muted); }
.hx-weather-now { display: flex; align-items: center; gap: 16px; }
.hx-weather-now > i { font-size: 2.6rem; color: #f59e0b; }
.hx-weather-now strong { display: block; font-size: 2rem; line-height: 1; }
.hx-weather-now span { display: block; font-weight: 600; }
.hx-weather-now small { color: var(--hx-muted); }
.hx-fc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.hx-fc-day { background: #fff; border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hx-fc-day i { color: var(--hx-blue); font-size: 1.2rem; }
.hx-fc-day small { color: var(--hx-muted); }
.hx-fc-day em { font-style: normal; font-size: .75rem; color: var(--hx-muted); }
.hx-weather-src { font-size: .72rem; color: var(--hx-muted); margin: 8px 0 0; text-align: right; }

/* Emergencies */
.hx-em-national { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.hx-em-card { display: flex; flex-direction: column; gap: 2px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 14px; padding: 14px; text-decoration: none; color: var(--hx-text) !important; }
.hx-em-card i { color: #dc2626; font-size: 1.2rem; }
.hx-em-card strong { font-size: 1.4rem; color: #b91c1c; }
.hx-em-card span { font-size: .82rem; color: var(--hx-muted); }
@media (max-width: 760px) { .hx-em-national { grid-template-columns: 1fr; } }
.hx-em-group h4 { margin: 12px 0 6px; font-size: .95rem; }
.hx-em-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hx-border); }
.hx-em-item small { display: block; color: var(--hx-muted); }
.hx-tel { white-space: nowrap; font-weight: 700; text-decoration: none; }

/* Organisms */
.hx-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hx-org { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--hx-border); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--hx-text) !important; }
.hx-org:hover { border-color: var(--hx-blue); }
.hx-org i { color: var(--hx-blue); font-size: 1.2rem; margin-top: 3px; }
.hx-org strong { display: block; }
.hx-org span { font-size: .82rem; color: var(--hx-muted); }

/* Cards */
.hx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 1024px) { .hx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .hx-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.hx-card { display: block; background: #fff; border: 1px solid var(--hx-border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit !important; transition: transform .2s, box-shadow .2s; }
.hx-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--hx-blue); }
.hx-card-img { position: relative; aspect-ratio: 4 / 3; background: #f1f5f9; }
.hx-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hx-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 2rem; }
.hx-card-star { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fbbf24; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .65rem; }
.hx-card-body { padding: 10px; }
.hx-card-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-card-tag { font-size: .75rem; color: var(--hx-blue); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-card-loc { font-size: .75rem; color: var(--hx-muted); }

/* FAQ */
.hx-faq { border: 1px solid var(--hx-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.hx-faq summary { cursor: pointer; font-weight: 700; }
.hx-faq p { margin: 8px 0 0; color: #475569; }

/* States index */
.hx-state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1024px) { .hx-state-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hx-state-grid { grid-template-columns: 1fr; } }
.hx-state-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--hx-border); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--hx-text) !important; background: #fff; }
.hx-state-card:hover { border-color: var(--hx-blue); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.hx-state-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hx-state-head h3 { margin: 0; font-size: 1.15rem; }
.hx-state-card p { margin: 0; font-size: .9rem; color: #475569; }
.hx-state-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 4px 0; }
.hx-state-card dt { font-size: .72rem; color: var(--hx-muted); }
.hx-state-card dd { margin: 0; font-weight: 700; font-size: .9rem; }
.hx-table-wrap { overflow-x: auto; }
.hx-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hx-table th, .hx-table td { padding: 8px 10px; border-bottom: 1px solid var(--hx-border); text-align: left; white-space: nowrap; }
.hx-table th { background: var(--hx-bg); font-size: .8rem; }
.hx-table .num { text-align: right; }

/* Specialties */
.hx-esp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hx-esp-card { display: flex; flex-direction: column; border: 1px solid var(--hx-border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--hx-text) !important; }
a.hx-esp-card:hover { border-color: var(--hx-blue); background: #eff6ff; }
.hx-esp-card span { font-size: .8rem; color: var(--hx-muted); }
.hx-esp-card.is-empty { opacity: .55; }
.hx-cta { text-align: center; background: #eff6ff; border-color: #bfdbfe; }
.hx-cta h2 { justify-content: center; }

.hx-footer { background: #0f172a; color: #94a3b8; text-align: center; padding: 26px 16px; font-size: .85rem; }
.hx-footer p { margin: 4px 0; }
.hx-footer a { color: #60a5fa; }

@media (max-width: 640px) {
    .hx-top-links { gap: 10px; }
    .hx-top-links a { font-size: .82rem; }
    .hx-section { padding: 16px; }
    .hx-hero { padding: 22px 16px; border-radius: 16px; }
}

/* Banner del estado (panel admin → Wiki) */
.hx-banner { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: #e2e8f0; }
.hx-banner img { display: block; width: 100%; max-height: 360px; object-fit: cover; }

/* Asesoria legal */
.hx-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #0f172a, #1e3a5f); color: #fff; border: 0; }
.hx-legal-icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fbbf24; flex-shrink: 0; }
.hx-legal-body { flex: 1 1 260px; min-width: 0; }
.hx-legal-body h2 { font-size: 1.15rem; margin: 0 0 4px; color: #fff; }
.hx-legal-body p { margin: 0; color: rgba(255,255,255,.88); font-size: .93rem; }
.hx-legal-btn { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff !important; font-weight: 800; padding: 12px 18px; border-radius: 12px; text-decoration: none; white-space: nowrap; }
.hx-legal-btn:hover { background: #1ebe5b; }
@media (max-width: 640px) { .hx-legal-btn { width: 100%; justify-content: center; } }