/*
 * Medicuan · Panel medico (Handlebars SSR)
 * Estilos del shell del doctor: sidebar + topbar + paneles de contenido.
 * Pensado para complementar handlebars.css (no reemplazarlo).
 */

.doctor-body {
    background: #f5f7fb;
    color: var(--hbs-text);
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

html.doctor-drawer-open,
html.doctor-drawer-open body {
    overflow: hidden;
}

.doctor-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    transition: grid-template-columns .25s ease;
}
.doctor-shell.is-collapsed { grid-template-columns: 86px 1fr; }

/* ───────────── Sidebar ───────────── */
.doctor-sidebar {
    background: linear-gradient(180deg, #0b457f 0%, #105ea6 60%, #1f7bbf 100%);
    color: #e2e8f0;
    padding: 1.4rem 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky; top: 0;
    height: 100vh; overflow: hidden;
}
.doctor-sidebar__brand { display: flex; align-items: center; gap: .7rem; padding: 0 .4rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.doctor-sidebar__brand img { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 4px; }
.doctor-sidebar__brand strong { display: block; }
.doctor-sidebar__brand small { color: rgba(255, 255, 255, .65); font-size: .8rem; }

.doctor-sidebar__nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; overflow-y: auto; min-height: 0; }
.doctor-sidebar__link {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .8rem; border-radius: 12px;
    color: rgba(255, 255, 255, .82); text-decoration: none;
    font-weight: 500; font-size: .95rem;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    white-space: nowrap; overflow: hidden;
}
.doctor-sidebar__link i { width: 22px; text-align: center; font-size: 1rem; }
.doctor-sidebar__link:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); }
.doctor-sidebar__link.is-active {
    background: rgba(255, 255, 255, .93);
    color: var(--hbs-primary-dark, #0b457f);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    font-weight: 700;
}
.doctor-sidebar__link.is-active i {
    color: var(--hbs-secondary, #2eb8cb);
}

.doctor-sidebar__logout {
    display: flex; align-items: center; gap: .8rem;
    background: rgba(0, 0, 0, .25); color: #fff; border: none;
    border-radius: 12px; padding: .7rem .8rem; cursor: pointer; font: inherit;
    transition: background .15s ease;
}
.doctor-sidebar__logout:hover { background: rgba(0, 0, 0, .4); }

.is-collapsed .doctor-sidebar__brand strong,
.is-collapsed .doctor-sidebar__brand small,
.is-collapsed .doctor-sidebar__link span,
.is-collapsed .doctor-sidebar__logout span { display: none; }
.is-collapsed .doctor-sidebar__link { justify-content: center; }

/* ───────────── Doctor main ───────────── */
.doctor-main { display: flex; flex-direction: column; min-width: 0; }
.doctor-topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    padding-top: max(1rem, env(safe-area-inset-top));
    background: #fff;
    border-bottom: 1px solid var(--hbs-border);
    position: sticky;
    top: 0;
    z-index: 5;
}
.doctor-topbar__menu {
    background: rgba(16, 94, 166, .08); border: none; color: var(--hbs-primary-dark);
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 1rem;
}
.doctor-topbar__title { flex: 1; }
.doctor-topbar__title h1 { font-size: 1.2rem; letter-spacing: -.005em; }
.doctor-topbar__title p { font-size: .85rem; color: var(--hbs-muted); }
.doctor-topbar__actions { display: flex; align-items: center; gap: .8rem; }
.doctor-topbar__icon {
    position: relative; width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--hbs-border); background: #fff; cursor: pointer; font-size: 1rem;
    transition: background .15s ease, transform .1s ease;
}
.doctor-topbar__icon:hover { background: rgba(16, 94, 166, .06); transform: translateY(-1px); }
.doctor-topbar__badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--hbs-danger); color: #fff;
    font-size: .7rem; padding: .1rem .4rem; border-radius: 999px;
    font-weight: 700;
}
.doctor-topbar__user { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem; border-radius: 12px; }
.doctor-topbar__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hbs-primary), var(--hbs-secondary));
    color: #fff; display: grid; place-items: center; font-weight: 700;
}
.doctor-topbar__userText strong { display: block; font-size: .9rem; }
.doctor-topbar__userText small { color: var(--hbs-muted); font-size: .8rem; }

.doctor-content {
    flex: 1;
    padding: 1rem 1.25rem 1.5rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* ───────────── Panel base (todas las vistas internas) ───────────── */
.dpanel {
    background: #fff; border-radius: var(--hbs-radius); padding: 1.5rem;
    border: 1px solid var(--hbs-border); box-shadow: var(--hbs-shadow-sm);
    animation: hbs-pop-in .3s ease both;
}
.dpanel__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.dpanel__head h2 { font-size: 1.25rem; letter-spacing: -.005em; }
.dpanel__head p { color: var(--hbs-muted); font-size: .9rem; margin-top: .15rem; }
.dpanel__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dpanel__date,
.dpanel__select,
.dpanel__input {
    padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--hbs-border);
    font: inherit; background: #fff;
}
.dpanel__monthLabel { font-weight: 600; color: var(--hbs-primary-dark); padding: 0 .6rem; }

/* ───────────── Cards/grid auxiliares ───────────── */
.dgrid { display: grid; gap: 1rem; margin-top: 1rem; }
.dgrid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dgrid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dgrid--ia { grid-template-columns: 1.05fr 1.2fr; }
@media (max-width: 980px) { .dgrid--ia { grid-template-columns: 1fr; } }

.dcard {
    background: #fff; border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius);
    padding: 1.2rem;
    transition: transform .15s ease, box-shadow .15s ease;
    animation: hbs-pop-in .25s ease both;
}
.dcard:hover { transform: translateY(-2px); box-shadow: var(--hbs-shadow-md); }
.dcard h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.dcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.dcard__foot { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dcard--span2 { grid-column: span 2; }
@media (max-width: 980px) { .dcard--span2 { grid-column: 1 / -1; } }

.dcard--patient { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: .8rem; }
.dcard__avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hbs-primary), var(--hbs-secondary)); color: #fff;
    display: grid; place-items: center; font-weight: 700;
}
.dcard__avatarBig {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hbs-primary), var(--hbs-secondary)); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 1.6rem; margin: 0 auto 1rem;
}
.dcard--profile { text-align: center; }
.dcard__name { font-size: 1rem; }
.dcard__meta { color: var(--hbs-muted); font-size: .85rem; }

.dlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .35rem; color: var(--hbs-muted); }
.dlist li strong { color: var(--hbs-text); margin-right: .25rem; }
.dlist--metrics li { display: flex; justify-content: space-between; }

.ddef { display: grid; grid-template-columns: 160px 1fr; gap: .55rem 1rem; }
.ddef dt { color: var(--hbs-muted); font-weight: 600; }
.ddef dd { margin: 0; }

.dchip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem; border-radius: 999px; font-size: .8rem;
    background: rgba(16, 94, 166, .08); color: var(--hbs-primary-dark); font-weight: 600;
}
.dchip--ok { background: rgba(16, 185, 129, .12); color: var(--hbs-success); }
.dchip--warn { background: rgba(245, 158, 11, .12); color: var(--hbs-warning); }
.dchip--muted { background: rgba(100, 116, 139, .12); color: var(--hbs-muted); }
.dchip--danger { background: rgba(239, 68, 68, .12); color: var(--hbs-danger); }

.dpill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.dpill--info { background: rgba(46, 184, 203, .12); color: var(--hbs-primary-dark); }

.dstat {
    background: #fff; border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius);
    padding: .9rem 1.1rem; min-width: 120px; flex: 1;
    display: flex; flex-direction: column;
    transition: transform .15s ease;
}
.dstat:hover { transform: translateY(-1px); }
.dstat strong { font-size: 1.6rem; color: var(--hbs-primary-dark); }
.dstat span { color: var(--hbs-muted); font-size: .85rem; }
.dstat--ok strong { color: var(--hbs-success); }
.dstat--info strong { color: var(--hbs-secondary); }
.dstat--muted strong { color: var(--hbs-muted); }
.dpanel__stats { display: flex; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ───────────── Tablas ───────────── */
.dtable {
    background: #fff;
    border: 1px solid var(--hbs-border);
    border-radius: var(--hbs-radius);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.dtable__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.dtable__table thead th {
    text-align: left; padding: .85rem 1rem; background: rgba(16, 94, 166, .04);
    color: var(--hbs-primary-dark); font-weight: 600; font-size: .85rem;
    border-bottom: 1px solid var(--hbs-border);
}
.dtable__table tbody td {
    padding: .85rem 1rem; border-bottom: 1px solid var(--hbs-border);
    font-size: .9rem; color: var(--hbs-text);
}
.dtable__table tbody tr:last-child td { border-bottom: none; }
.dtable__table tbody tr { transition: background .12s ease; }
.dtable__table tbody tr:hover { background: rgba(16, 94, 166, .04); }
.dtable__loading, .dtable__empty { text-align: center; padding: 2rem 1rem; color: var(--hbs-muted); }

/* ───────────── Calendario ───────────── */
.dcal { background: #fff; border: 1px solid var(--hbs-border); border-radius: var(--hbs-radius); padding: 1rem; margin-bottom: 1.2rem; }
.dcal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; padding: 0 .35rem .35rem; color: var(--hbs-muted); font-size: .8rem; font-weight: 600; text-align: center; }
.dcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.dcal__cell {
    border-radius: 12px; min-height: 72px; padding: .4rem .5rem;
    background: #f8fafc; border: 1px solid transparent;
    cursor: pointer; display: flex; flex-direction: column; gap: .25rem;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.dcal__cell:hover { transform: translateY(-1px); border-color: var(--hbs-secondary); }
.dcal__cell.is-other { opacity: .35; cursor: default; }
.dcal__cell.is-active { background: rgba(16, 94, 166, .1); border-color: var(--hbs-primary); }
.dcal__cell.is-today { box-shadow: inset 0 0 0 2px var(--hbs-secondary); }
.dcal__cellNum { font-weight: 600; }
.dcal__cellChip { font-size: .7rem; color: var(--hbs-primary-dark); }

/* ───────────── IA chat ───────────── */
.dform { display: flex; flex-direction: column; gap: .8rem; }
.dform__field { display: flex; flex-direction: column; gap: .25rem; }
.dform__field span { font-weight: 600; font-size: .85rem; color: var(--hbs-text); }
.dform__field input,
.dform__field select,
.dform__field textarea {
    padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--hbs-border);
    font: inherit; background: #fff; resize: vertical;
}
.dform__field input:focus,
.dform__field select:focus,
.dform__field textarea:focus {
    outline: none; border-color: var(--hbs-primary);
    box-shadow: 0 0 0 4px rgba(16, 94, 166, .1);
}
.dform__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.iachat {
    border: 1px dashed var(--hbs-border); border-radius: 14px;
    background: #f8fafc; padding: 1rem; min-height: 280px;
    display: flex; flex-direction: column; gap: .65rem;
}
.iachat__hint { color: var(--hbs-muted); font-size: .9rem; text-align: center; margin: auto; }
.iachat__msg {
    background: #fff; border: 1px solid var(--hbs-border); border-radius: 12px;
    padding: .75rem .9rem; font-size: .9rem; animation: hbs-pop-in .25s ease both;
}
.iachat__msg--user { background: rgba(16, 94, 166, .07); border-color: rgba(16, 94, 166, .2); }
.iachat__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }

/* ───────────── Video ───────────── */
.dpanel--video .dpanel__head { margin-bottom: .8rem; }
.dvideo {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem;
    margin: 1rem 0;
}
.dvideo__local, .dvideo__remote {
    background: #0f172a; border-radius: var(--hbs-radius); min-height: 320px;
    object-fit: cover; width: 100%;
    display: grid; place-items: center; color: #94a3b8;
}
.dvideo__remote p { padding: 1rem; text-align: center; }
.dvideo__room { display: flex; gap: .5rem; align-items: stretch; margin-top: .5rem; }
.dvideo__room input {
    flex: 1; padding: .65rem .8rem; border-radius: 10px;
    border: 1px solid var(--hbs-border); background: #f8fafc; font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 880px) { .dvideo { grid-template-columns: 1fr; } }

/* ───────────── Responsive del shell ───────────── */
@media (max-width: 980px) {
    .doctor-shell { grid-template-columns: 1fr; }
    .doctor-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .doctor-shell.is-open .doctor-sidebar { transform: translateX(0); box-shadow: var(--hbs-shadow-lg); }
    .doctor-shell.is-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 50;
    }
}

@media (max-width: 640px) {
    .dpanel {
        padding: 1rem;
        border-radius: var(--hbs-radius);
    }
    .dpanel__head {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }
    .dpanel__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .dpanel__actions .hbs-btn,
    .dpanel__actions .dpanel__date,
    .dpanel__actions .dpanel__select,
    .dpanel__actions .dpanel__input {
        width: 100%;
    }
    .dpanel__stats {
        flex-direction: column;
    }
    .dstat {
        min-width: 0;
        width: 100%;
    }
    .doctor-topbar__title h1 {
        font-size: clamp(1rem, 4vw, 1.15rem);
    }
    .doctor-topbar__title p {
        display: none;
    }
    .doctor-topbar__menu {
        min-width: 44px;
        min-height: 44px;
    }
    .dpanel--ia .dpanel__head {
        gap: .75rem;
    }
    .dpanel--ia .dpill {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .doctor-topbar__userText {
        display: none;
    }
    .doctor-topbar__actions {
        gap: .4rem;
    }
    .dgrid--3 {
        grid-template-columns: 1fr;
    }
    .dcard--patient {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
    }
    .dcard--patient .dcard__cta {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .ddef {
        grid-template-columns: 1fr;
    }
    .ddef dt {
        margin-top: .35rem;
    }
    .dform__row {
        grid-template-columns: 1fr;
    }
    .dcal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dcal__weekdays,
    .dcal__grid {
        min-width: 320px;
    }
    .dcal__cell {
        min-height: 56px;
        padding: .35rem .25rem;
    }
    .dcal__cellChip {
        font-size: .62rem;
        line-height: 1.15;
    }
    .dvideo__local,
    .dvideo__remote {
        min-height: 220px;
    }
    .dvideo__room {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doctor-shell.is-open .doctor-sidebar {
        transition: none;
    }
}

/* ── Transición suave al entrar al contenido de cada página ── */
.doctor-content > * {
    animation: hbs-fade-in .38s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Glassmorphism blur en sidebar ── */
.doctor-sidebar__link:hover {
    backdrop-filter: blur(6px);
}
.doctor-sidebar__link.is-active {
    backdrop-filter: blur(0px);
}

/* ── Topbar blur sticky ── */
.doctor-topbar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .88);
}

/* ── Cards con transición suave + blur sombra ── */
.dcard {
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1),
                filter .2s ease;
}
.dcard:hover {
    filter: drop-shadow(0 8px 24px rgba(16, 94, 166, .16));
}

/* ── Overlay mobile con blur ── */
.doctor-shell.is-open::after {
    animation: hbs-fade-in .22s ease both;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ── Shimmer en botones primarios ── */
.hbs-btn--primary {
    position: relative;
    overflow: hidden;
}
.hbs-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .48s ease;
    pointer-events: none;
}
.hbs-btn--primary:hover::after {
    transform: translateX(100%);
}

/* ── dpanel con entrada suave ── */
.dpanel {
    animation: hbs-pop-in .32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── dstat hover suave ── */
.dstat {
    transition: transform .18s ease, box-shadow .18s ease;
}
.dstat:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(16, 94, 166, .1);
}