/* ============================================================
   MédicosRD — assets/css/app.css v2 (dark theme original)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --azul:        #1a6cf6;
    --azul-dark:   #1250c4;
    --azul-light:  #e8f0fe;
    --texto:       #111111;
    --texto-2:     #555555;
    --texto-3:     #999999;
    --borde:       #ebebeb;
    --borde-2:     #d4d4d4;
    --fondo:       #f6f7f9;
    --fondo-2:     #ffffff;
    --verde:       #1a7a4a;
    --verde-light: #eafbf2;
    --wa:          #25D366;
    --wa-light:    #e7fbe8;
    --amber:       #a06800;
    --amber-light: #fff3db;
    --rojo:        #cc3333;
    --rojo-light:  #fff0f0;
    --radio-sm:    8px;
    --radio-md:    12px;
    --radio-lg:    16px;
    --radio-xl:    24px;
    --sombra-sm:   0 1px 3px rgba(0,0,0,.06);
    --sombra-md:   0 2px 8px rgba(0,0,0,.08);
    --trans:       all .15s ease;
}

/* Dark mode del sistema */
@media (prefers-color-scheme: dark) {
    :root {
        --texto:    #f0f0f0;
        --texto-2:  #aaaaaa;
        --texto-3:  #666666;
        --borde:    #2a2a2a;
        --borde-2:  #3a3a3a;
        --fondo:    #0f0f10;
        --fondo-2:  #1a1a1c;
        --azul-light: #0a1e3a;
        --verde-light:#0a2015;
        --wa-light:   #0a1e0a;
        --amber-light:#1e1200;
        --rojo-light: #1e0a0a;
    }
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--fondo);
    color: var(--texto);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────── */
.container    { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 680px;  margin: 0 auto; padding: 0 20px; }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
    background: var(--fondo-2);
    border-bottom: 1px solid var(--borde);
    height: 60px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--sombra-sm);
}
.navbar .container { display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; }
.navbar-logo { font-size:1.35rem;font-weight:800;color:var(--texto);letter-spacing:-.5px;text-decoration:none;flex-shrink:0; }
.navbar-logo:hover { text-decoration:none; }
.navbar-logo span  { color:var(--azul); }
.navbar-links { display:flex;align-items:center;gap:2px;flex:1;justify-content:center; }
.navbar-links a { padding:6px 12px;border-radius:var(--radio-md);font-size:.875rem;color:var(--texto-2);font-weight:500;text-decoration:none;transition:var(--trans); }
.navbar-links a:hover { background:var(--fondo);color:var(--texto);text-decoration:none; }
.navbar-ctas { display:flex;align-items:center;gap:8px;flex-shrink:0; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-dark) 100%);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 15% 60%,rgba(255,255,255,.08) 0%,transparent 55%),
               radial-gradient(ellipse at 85% 15%,rgba(255,255,255,.05) 0%,transparent 50%);
}
.hero > * { position:relative; }
.hero-title { font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:#fff;line-height:1.2;margin-bottom:10px;letter-spacing:-.5px; }
.hero-sub   { color:rgba(255,255,255,.8);font-size:.95rem;margin-bottom:28px; }

/* ── BUSCADOR ───────────────────────────────────────────────── */
.search-box { background:var(--fondo-2);border-radius:var(--radio-xl);box-shadow:0 8px 32px rgba(0,0,0,.18);overflow:hidden;max-width:680px; }
.search-main { display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--borde); }
.search-main i { color:var(--texto-3);font-size:18px;flex-shrink:0; }
.search-main input { flex:1;border:none;outline:none;font-size:.95rem;color:var(--texto);background:transparent;min-width:0; }
.search-main input::placeholder { color:var(--texto-3); }
.btn-buscar { background:var(--azul);color:#fff;border:none;border-radius:var(--radio-lg);padding:10px 20px;font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:var(--trans);font-family:inherit; }
.btn-buscar:hover { background:var(--azul-dark); }
.search-tabs { display:flex;padding:6px 8px;gap:4px; }
.search-tab { padding:7px 14px;border-radius:var(--radio-md);font-size:.82rem;font-weight:500;border:none;background:transparent;color:var(--texto-3);cursor:pointer;transition:var(--trans);display:flex;align-items:center;gap:5px;font-family:inherit; }
.search-tab:hover  { background:var(--fondo);color:var(--texto-2); }
.search-tab.active { background:var(--azul-light);color:var(--azul);font-weight:600; }

/* ── SECCIONES ──────────────────────────────────────────────── */
.section { padding:48px 0; }
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px; }
.section-title  { font-size:1.15rem;font-weight:700;color:var(--texto);letter-spacing:-.3px; }
.section-link   { font-size:.875rem;color:var(--azul);font-weight:500;display:flex;align-items:center;gap:4px;flex-shrink:0;text-decoration:none; }
.section-link:hover { text-decoration:underline; }

/* ── ESPECIALIDADES ─────────────────────────────────────────── */
.esp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px; }
.esp-item { display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--radio-lg);cursor:pointer;transition:var(--trans);font-family:inherit;text-decoration:none; }
.esp-item:hover { border-color:var(--azul);background:var(--azul-light);transform:translateY(-2px);box-shadow:var(--sombra-md);text-decoration:none; }
.esp-icon  { width:48px;height:48px;border-radius:var(--radio-md);display:flex;align-items:center;justify-content:center;font-size:22px; }
.esp-nombre{ font-size:.75rem;font-weight:600;color:var(--texto-2);text-align:center;line-height:1.3; }
.esp-item:hover .esp-nombre { color:var(--azul); }

/* ── CARDS DE MÉDICOS ───────────────────────────────────────── */
.medicos-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }
.medico-card { background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--radio-xl);overflow:hidden;transition:var(--trans);display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:var(--sombra-sm); }
.medico-card:hover { border-color:var(--azul);box-shadow:var(--sombra-md);transform:translateY(-2px);text-decoration:none; }
.medico-card.destacado { border-color:#fbbf24;border-width:2px; }
.medico-card.destacado::before { content:'⭐ Destacado';display:block;background:linear-gradient(90deg,#f59e0b,#d97706);color:#fff;font-size:.7rem;font-weight:700;padding:4px 12px;letter-spacing:.05em;text-align:center; }
.medico-card-top { display:flex;gap:12px;padding:16px 16px 10px;text-decoration:none;color:inherit; }
.medico-avatar   { width:56px;height:56px;border-radius:var(--radio-md);background:var(--azul-light);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--azul);flex-shrink:0;overflow:hidden;object-fit:cover; }
.medico-info     { flex:1;min-width:0; }
.medico-nombre   { font-size:.9rem;font-weight:700;color:var(--texto);display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.3;margin-bottom:2px; }
.medico-esp      { font-size:.8rem;color:var(--texto-2);margin-bottom:3px; }
.medico-hosp     { font-size:.75rem;color:var(--texto-3);display:flex;align-items:center;gap:4px; }
.verificado      { color:var(--azul);font-size:14px; }
.medico-chips    { padding:0 16px 10px;display:flex;flex-wrap:wrap;gap:5px; }
.medico-footer   { padding:10px 16px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--borde);margin-top:auto; }
.medico-precio   { font-size:.82rem;color:var(--texto-2); }
.medico-ctas     { display:flex;gap:6px; }

/* ── CTAs PERFIL ────────────────────────────────────────────── */
.cta-grid { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--borde);background:var(--fondo-2);position:sticky;top:60px;z-index:90;box-shadow:var(--sombra-sm); }
.cta-item { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;font-size:.78rem;font-weight:600;cursor:pointer;border:none;background:transparent;border-right:1px solid var(--borde);transition:var(--trans);text-decoration:none;color:var(--texto-2);font-family:inherit; }
.cta-item:last-child { border-right:none; }
.cta-item i { font-size:20px; }
.cta-item:hover { text-decoration:none; }
.cta-call { color:var(--azul); }
.cta-call:hover { background:var(--azul-light); }
.cta-wa   { color:var(--verde); }
.cta-wa:hover { background:var(--verde-light); }
.cta-map  { color:var(--amber); }
.cta-map:hover { background:var(--amber-light); }
.cta-share { color:var(--texto-3); }
.cta-share:hover { background:var(--fondo); }

/* ── TABS ───────────────────────────────────────────────────── */
.perfil-tabs { display:flex;gap:0; }
.perfil-tab  { padding:12px 20px;font-size:.875rem;font-weight:500;border:none;background:transparent;color:rgba(255,255,255,.65);cursor:pointer;border-bottom:3px solid transparent;transition:var(--trans);font-family:inherit; }
.perfil-tab:hover  { color:rgba(255,255,255,.9); }
.perfil-tab.active { color:#fff;border-bottom-color:#fff;font-weight:700; }
.perfil-panel        { display:block; }
.perfil-panel.hidden { display:none; }

/* ── BADGES Y CHIPS ─────────────────────────────────────────── */
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:600;background:var(--fondo);color:var(--texto-3);border:1px solid var(--borde); }
.badge-verificado { background:var(--azul-light);color:var(--azul);border-color:var(--azul); }
.badge-premium    { background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe; }
.badge-destacado  { background:var(--amber-light);color:var(--amber);border-color:#fde68a; }
.badge-gray       { background:var(--fondo);color:var(--texto-3); }
.chip { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:500; }
.chip-blue  { background:var(--azul-light);color:var(--azul); }
.chip-green { background:var(--verde-light);color:var(--verde); }
.chip-amber { background:var(--amber-light);color:var(--amber); }
.chip-gray  { background:var(--fondo);color:var(--texto-2);border:1px solid var(--borde); }

/* ── BOTONES ────────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--radio-lg);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:var(--trans);text-decoration:none;white-space:nowrap;font-family:inherit; }
.btn:hover { text-decoration:none; }
.btn-primary   { background:var(--azul);color:#fff; }
.btn-primary:hover { background:var(--azul-dark);color:#fff; }
.btn-secondary { background:var(--fondo);color:var(--texto-2);border:1px solid var(--borde); }
.btn-secondary:hover { background:var(--borde);color:var(--texto); }
.btn-danger    { background:var(--rojo-light);color:var(--rojo);border:1px solid #fecaca; }
.btn-danger:hover { background:#fecaca; }
.btn-sm    { padding:6px 12px;font-size:.8rem;border-radius:var(--radio-md); }
.btn-block { width:100%;justify-content:center; }
.btn-cta   { display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:99px;font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:var(--trans);text-decoration:none;font-family:inherit; }
.btn-call { background:var(--azul-light);color:var(--azul);border:1px solid var(--azul); }
.btn-call:hover { background:var(--azul);color:#fff;text-decoration:none; }
.btn-wa   { background:var(--wa-light);color:var(--verde);border:1px solid #bbf7d0; }
.btn-wa:hover { background:var(--wa);color:#fff;text-decoration:none; }

/* ── FORMULARIOS ────────────────────────────────────────────── */
.form-group   { margin-bottom:16px; }
.form-label   { display:block;font-size:.82rem;font-weight:600;color:var(--texto-2);margin-bottom:5px; }
.form-hint    { font-size:.76rem;color:var(--texto-3);margin-top:4px; }
.form-control { width:100%;padding:10px 14px;background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--radio-md);font-size:.9rem;color:var(--texto);outline:none;transition:var(--trans);font-family:inherit; }
.form-control:focus { border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,108,246,.1); }
.form-control::placeholder { color:var(--texto-3); }

/* ── FLASH MESSAGES ─────────────────────────────────────────── */
.flash { padding:12px 16px;border-radius:var(--radio-md);font-size:.875rem;display:flex;align-items:center;gap:8px;margin-bottom:14px; }
.flash-ok    { background:var(--verde-light);color:#065f46;border:1px solid #a7f3d0; }
.flash-error { background:var(--rojo-light);color:#991b1b;border:1px solid #fecaca; }
.flash-info  { background:var(--azul-light);color:var(--azul);border:1px solid var(--azul); }

/* ── PERFIL PÚBLICO ─────────────────────────────────────────── */
.hosp-detail { display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--texto-2); }
.hosp-detail i { color:var(--texto-3);font-size:15px;flex-shrink:0; }

/* ── BOTTOM NAV MÓVIL ───────────────────────────────────────── */
.bottom-nav { display:none;position:fixed;bottom:0;left:0;right:0;background:var(--fondo-2);border-top:1px solid var(--borde);z-index:200;box-shadow:0 -4px 16px rgba(0,0,0,.06); }
.bottom-nav-items { display:grid;grid-template-columns:repeat(5,1fr); }
.bottom-nav-item { display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:.65rem;font-weight:600;color:var(--texto-3);text-decoration:none;cursor:pointer;border:none;background:none;font-family:inherit;transition:var(--trans); }
.bottom-nav-item i { font-size:20px; }
.bottom-nav-item.active { color:var(--azul); }
.bottom-nav-item:hover  { color:var(--azul);text-decoration:none; }

/* ── MODO IMPOSTOR ──────────────────────────────────────────── */
.impostor-bar { background:#f97316;color:#fff;text-align:center;padding:8px 16px;font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;position:sticky;top:60px;z-index:150; }
.impostor-bar a { color:#fff;text-decoration:underline; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background:#0f172a;color:#94a3b8;padding:44px 0 20px;margin-top:60px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px; }
.footer-logo      { font-size:1.3rem;font-weight:800;color:#fff; }
.footer-logo span { color:var(--azul); }
.footer-brand p   { font-size:.875rem;line-height:1.6;margin-top:10px; }
.footer-col h4    { color:#fff;font-size:.875rem;font-weight:700;margin-bottom:14px; }
.footer-col a     { display:block;color:#94a3b8;font-size:.875rem;margin-bottom:8px;text-decoration:none;transition:var(--trans); }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #1e293b;padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem; }

/* ── DARK MODE FORZADO (toggle) ─────────────────────────────── */
.dark-forced { --texto:#f0f0f0;--texto-2:#aaa;--texto-3:#666;--borde:#2a2a2a;--borde-2:#3a3a3a;--fondo:#0f0f10;--fondo-2:#1a1a1c;--azul-light:#0a1e3a;--verde-light:#0a2015;--wa-light:#0a1e0a;--amber-light:#1e1200;--rojo-light:#1e0a0a; }
.dark-forced body       { background:#0f0f10; }
.dark-forced .navbar    { background:#1a1a1c;border-color:#2a2a2a; }
.dark-forced .medico-card { background:#1a1a1c;border-color:#2a2a2a; }
.dark-forced .form-control { background:#1a1a1c;border-color:#2a2a2a;color:#f0f0f0; }
.dark-forced .btn-secondary { background:#2a2a2a;border-color:#3a3a3a;color:#c0c0c0; }
.dark-forced .cta-grid  { background:#1a1a1c;border-color:#2a2a2a; }
.dark-forced .cta-item  { border-color:#2a2a2a; }
.dark-forced .search-box { background:#1a1a1c; }
.dark-forced .search-main input { color:#f0f0f0; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:768px) {
    .navbar-links { display:none; }
    .bottom-nav   { display:block; }
    body          { padding-bottom:64px; }
    .hero         { padding:36px 0 32px; }
    .hero-title   { font-size:1.5rem; }
    .section      { padding:32px 0; }
    .medicos-grid { grid-template-columns:1fr; }
    .esp-grid     { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
    .footer-grid  { grid-template-columns:1fr 1fr;gap:24px; }
    .footer-brand { grid-column:1/-1; }
    .footer-bottom{ flex-direction:column;text-align:center; }
    .cta-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:480px) {
    .search-tabs { overflow-x:auto; }
    .cta-grid { grid-template-columns:repeat(2,1fr); }
    .cta-item { border-bottom:1px solid var(--borde); }
}

/* ── UTILIDADES ─────────────────────────────────────────────── */
.hidden { display:none !important; }