/* ======================================================================
   AliansSalud — sistema de diseño (paleta "salud moderno" teal/verde agua)
   Sobre Bootstrap 5.3. Refinado: glassmorphism leve, sombras en capas,
   micro-animaciones y estados vacíos cuidados.
   ====================================================================== */

:root {
    --brand:        #0FB5A6;
    --brand-2:      #14C2B2;   /* highlight para gradientes */
    --brand-dark:   #0E7C7B;
    --brand-darker: #0A5D5C;
    --brand-soft:   #E5F5F3;
    --bg:           #F2F7F7;
    --surface:      #FFFFFF;
    --ink:          #1F2D3D;
    --muted:        #64748B;
    --line:         #E3ECEC;

    /* sombras en capas (más realistas que una sola sombra dura) */
    --shadow-sm: 0 1px 2px rgba(16,40,40,.04), 0 2px 6px rgba(16,40,40,.05);
    --shadow-md: 0 2px 4px rgba(16,40,40,.04), 0 10px 24px rgba(16,40,40,.07);
    --shadow-lg: 0 8px 20px rgba(14,124,123,.10), 0 18px 40px rgba(16,40,40,.10);
    --shadow-brand: 0 6px 18px rgba(15,181,166,.30);

    --bs-primary:        #0FB5A6;
    --bs-primary-rgb:    15, 181, 166;
    --bs-link-color:     #0E7C7B;
    --bs-link-hover-color: #0A5D5C;
    --bs-body-color:     #1F2D3D;
    --bs-border-radius:  .7rem;
    --bs-border-radius-lg: 1rem;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }

body {
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* fondo con "mesh" sutil de marca */
    background-color: var(--bg);
    background-image:
        radial-gradient(60rem 30rem at 100% -5%, rgba(15,181,166,.07), transparent 60%),
        radial-gradient(50rem 28rem at -10% 0%, rgba(14,124,123,.06), transparent 55%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.018em; }
.lead { font-weight: 400; }

/* entrada suave del contenido */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main { animation: fadeUp .4s cubic-bezier(.2,.7,.3,1) both; }

/* ---------- Navbar (glass sticky) ----------------------------------- */
.app-navbar {
    position: sticky; top: 0; z-index: 1030;
    background: linear-gradient(90deg, rgba(13,112,111,.92), rgba(15,181,166,.92));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 4px 24px rgba(14,124,123,.18);
}
.app-navbar .navbar-brand { font-weight: 800; letter-spacing: .2px; }
.app-navbar .navbar-brand .bi { filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.app-navbar .nav-link { color: rgba(255,255,255,.92) !important; font-weight: 500; border-radius: .55rem; padding: .42rem .75rem !important; transition: background .18s, transform .18s; }
.app-navbar .nav-link:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* ---------- Sidebar (panel del staff) ------------------------------- */
.app-sidebar {
    --bs-offcanvas-width: 250px;
    background: linear-gradient(180deg, var(--brand-dark), var(--brand-darker));
    color: rgba(255,255,255,.92);
}
@media (min-width: 992px) {
    .app-sidebar {
        width: 250px; flex: 0 0 250px;
        position: sticky; top: 0; height: 100vh;
        box-shadow: 6px 0 30px rgba(14,124,123,.16);
    }
    .app-sidebar .offcanvas-body { overflow-y: auto; }
}
.app-sidebar .app-brand { color: #fff; font-weight: 800; letter-spacing: .2px; text-decoration: none; font-size: 1.15rem; }
.app-sidebar .app-brand .bi { filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.app-sidebar .nav-link {
    color: rgba(255,255,255,.85); font-weight: 500; border-radius: .6rem;
    padding: .6rem .85rem; display: flex; align-items: center; gap: .7rem;
    transition: background .16s, color .16s;
}
.app-sidebar .nav-link .bi { font-size: 1.05rem; width: 1.3rem; text-align: center; flex: none; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; transform: none; }
.app-sidebar .nav-link.active { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 3px 0 0 rgba(255,255,255,.9); }
.app-sidebar hr { border-color: rgba(255,255,255,.2); opacity: 1; }
.app-sidebar .sidebar-user { color: rgba(255,255,255,.72); }

.app-topbar {
    position: sticky; top: 0; z-index: 1020;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    color: #fff; box-shadow: 0 2px 12px rgba(14,124,123,.2);
}
.app-topbar .app-brand, .app-topbar .btn { color: #fff; font-weight: 700; }

/* ---------- Botones ------------------------------------------------- */
.btn {
    font-weight: 600; border-radius: .65rem; padding: .55rem 1.05rem;
    transition: transform .14s ease, box-shadow .22s ease, background-color .16s, border-color .16s, color .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker); --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    background-image: linear-gradient(180deg, var(--brand-2), var(--brand));
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(15,181,166,.42); }
.btn-outline-primary {
    --bs-btn-color: var(--brand-dark); --bs-btn-border-color: #9bd9d2;
    --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
}
.btn-link { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--brand-darker); }
.btn-lg { padding: .7rem 1.4rem; }

/* ---------- Cards --------------------------------------------------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.card-header { background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 600; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* tarjeta clickeable (listado de profesionales) */
.card-hover { cursor: pointer; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; border-color: #BFE6E2; }

/* ---------- Texto / utilidades de marca ----------------------------- */
.text-primary { color: var(--brand-dark) !important; }
.bg-brand-soft { background: var(--brand-soft); }
.text-brand { color: var(--brand-dark); }
a { color: var(--brand-dark); }

/* ---------- Badges -------------------------------------------------- */
.badge.bg-primary   { background: var(--brand) !important; }
.badge.bg-secondary { background: #64748B !important; }
.badge.bg-info      { background: #0ea5b5 !important; }
.badge.bg-success   { background: #16a34a !important; }
.badge.bg-warning   { background: #d97706 !important; color:#fff !important; }
.badge { font-weight: 600; padding: .42em .7em; border-radius: .55rem; letter-spacing: .01em; }

/* ---------- Formularios -------------------------------------------- */
.form-control, .form-select { border-radius: .65rem; border-color: #D7E3E3; padding: .58rem .85rem; transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .22rem rgba(15,181,166,.18); }
.form-label { font-weight: 600; font-size: .9rem; color: #44566b; margin-bottom: .35rem; }

/* ---------- Slots de horario --------------------------------------- */
.slot-btn { min-width: 5.4rem; font-variant-numeric: tabular-nums; transition: transform .14s ease, box-shadow .2s ease, background-color .15s, color .15s; }
.slot-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,181,166,.26); }

/* ---------- Alerts (acento lateral) --------------------------------- */
.alert { border: 0; border-radius: .8rem; border-left: 4px solid; box-shadow: var(--shadow-sm); }
.alert-success { background: #e7f7ee; color: #14753f; border-left-color: #2bb673; }
.alert-danger  { background: #fdecec; color: #b42318; border-left-color: #e5564b; }
.alert-warning { background: #fff5e6; color: #b54708; border-left-color: #f0a13c; }
.alert-info    { background: var(--brand-soft); color: var(--brand-darker); border-left-color: var(--brand); }

/* ---------- Stepper (wizard de reserva) ----------------------------- */
.stepper { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.9rem; flex-wrap: wrap; }
.stepper .step { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-weight: 600; font-size: .92rem; }
.stepper .step .dot {
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 2px solid var(--line); color: var(--muted); font-size: .85rem; flex: none;
    transition: all .25s ease;
}
.stepper .step.active .dot { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(15,181,166,.16); }
.stepper .step.active { color: var(--ink); }
.stepper .step.done .dot { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.stepper .sep { flex: 1 1 1.5rem; height: 2px; background: linear-gradient(90deg, var(--line), #cfe4e2); min-width: 1rem; max-width: 3rem; border-radius: 2px; }

/* ---------- Hero (landing) ----------------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(900px 320px at 85% -20%, rgba(15,181,166,.16), transparent 60%),
        radial-gradient(700px 300px at 0% 120%, rgba(14,124,123,.10), transparent 55%),
        linear-gradient(180deg, #ffffff, #f5fafa);
    border: 1px solid var(--line);
    border-radius: 1.6rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.hero::after { /* brillo superior tenue */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}
.hero-badge { background: rgba(15,181,166,.12); color: var(--brand-darker); font-weight: 600; border-radius: 2rem; padding: .38rem .95rem; font-size: .85rem; display: inline-block; border: 1px solid rgba(15,181,166,.2); }
.feature-ic {
    width: 3rem; height: 3rem; border-radius: .95rem; display: grid; place-items: center;
    background: linear-gradient(135deg, #ecf8f6, #d3efea); color: var(--brand-dark); font-size: 1.35rem; flex: none;
    box-shadow: inset 0 0 0 1px rgba(15,181,166,.16);
}

/* ---------- Landing: buscador ----------------------------------------- */
.lp-search { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 36rem; }
.lp-search-field {
    flex: 1 1 14rem; display: flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--line); border-radius: .8rem;
    padding: .15rem .9rem; box-shadow: var(--shadow-sm);
}
.lp-search-field .form-select { padding-left: 0; font-weight: 500; }
.lp-search .btn { border-radius: .8rem; }

/* ---------- Landing: banda de stats ----------------------------------- */
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem .5rem; box-shadow: var(--shadow-sm); height: 100%; }
.stat-num { font-size: 1.9rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.stat-lbl { font-size: .85rem; color: var(--muted); margin-top: .25rem; }

/* ---------- Landing: tarjetas de especialidad ------------------------- */
.specialty-card {
    background: #fff; border: 1px solid var(--line); border-radius: 1rem;
    padding: 1.3rem 1rem; text-align: center; height: 100%;
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
.specialty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #BFE6E2; }
.specialty-card .feature-ic { margin-left: auto; margin-right: auto; }

/* ---------- Footer -------------------------------------------------- */
.app-footer { color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- Tablas -------------------------------------------------- */
.table { --bs-table-hover-bg: var(--brand-soft); }
.table > thead th { color: #51607a; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--line); }
.table > tbody td { border-color: #eef3f3; }
.table-hover > tbody > tr { transition: background-color .12s; }

/* ---------- Rating de estrellas (sin JS) ---------------------------- */
.estrellas { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.estrellas input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrellas label { font-size: 1.9rem; line-height: 1; color: #d6e1e0; cursor: pointer; transition: color .12s, transform .12s; }
.estrellas label:hover { transform: scale(1.12); }
.estrellas input:checked ~ label,
.estrellas label:hover,
.estrellas label:hover ~ label { color: #f5b301; }
.estrellas input:focus-visible ~ label { outline: 2px solid rgba(15,181,166,.5); border-radius: 4px; }

/* ---------- Scrollbar ----------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cad9d8; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aecac8; background-clip: content-box; }

/* ---------- Accesibilidad: respetar reduce-motion ------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}