:root{
    --bg:#f6f9fd;
    --surface:#ffffff;
    --surface-soft:#f1f6fb;
    --line:#e3ebf5;
    --text:#243041;
    --muted:#728197;
    --primary:#2f80ed;
    --primary-soft:#eaf3ff;
    --accent:#19a974;
    --danger:#dc3545;
    --shadow:0 18px 45px rgba(35,48,65,.08);
}

body{
    min-height:100vh;
    letter-spacing:0;
    overflow-x:hidden;
}

html{
    width:100%;
    overflow-x:hidden;
}

.app-body,.app-main,.sidebar,.panel,.section-band,.patient-card,.timeline-item,.medicine-row,.study-row,
.content-grid,.form-grid,.grid,.topbar,.panel-title{
    min-width:0;
}

.form-control,.form-select,.btn,.table{
    min-width:0;
}

fieldset{
    min-width:0;
    border:0;
    padding:0;
    margin:0;
}

.d-flex{
    min-width:0;
}

.app-body{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;
    width:280px;
    height:100vh;
    min-height:0;
    overflow-y:auto;
    padding:24px;
    background:rgba(255,255,255,.94);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:28px;
    scrollbar-width:thin;
}

.sidebar-menu{
    display:contents;
}

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    cursor:pointer;
    box-shadow:0 10px 24px rgba(35,48,65,.08);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:.18s ease;
}

.menu-toggle span{
    position:relative;
}

.menu-toggle span::before,
.menu-toggle span::after{
    content:"";
    position:absolute;
    left:0;
}

.menu-toggle span::before{
    top:-6px;
}

.menu-toggle span::after{
    top:6px;
}

.menu-toggle[aria-expanded="true"] span{
    background:transparent;
}

.menu-toggle[aria-expanded="true"] span::before{
    top:0;
    transform:rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span::after{
    top:0;
    transform:rotate(-45deg);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
}

.brand-mark{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    background:linear-gradient(145deg,var(--primary),#64c2ff);
    box-shadow:0 12px 25px rgba(47,128,237,.22);
}

.brand strong{
    display:block;
    font-size:18px;
    line-height:1;
}

.brand small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
}

.sidebar-nav{
    display:grid;
    gap:8px;
}

.nav-link{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:11px 13px;
    border-radius:12px;
    color:#526173;
    font-weight:800;
    transition:.18s ease;
}

.nav-link:hover,.nav-link.active{
    background:var(--primary-soft);
    color:var(--primary);
}

.sidebar-footer{
    margin-top:auto;
    display:grid;
    gap:12px;
}

.user-pill{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.user-pill span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef7f4;
    color:var(--accent);
    font-weight:900;
}

.user-pill strong,.user-pill small{
    display:block;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-pill small{
    color:var(--muted);
}

.logout-link{
    color:var(--muted);
    font-weight:800;
    padding:8px 10px;
}

.app-main{
    grid-column:2;
    min-width:0;
    padding:30px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.topbar h1{
    margin:4px 0 0;
    font-size:30px;
    line-height:1.15;
}

.eyebrow{
    margin:0;
    font-size:12px;
    color:var(--primary);
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.08em;
}

.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow);
}

.panel.flat{
    box-shadow:none;
}

.panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.panel-title h2,.panel-title h3{
    margin:0;
    font-size:18px;
}

.grid{
    display:grid;
    gap:16px;
}

.grid.stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-bottom:18px;
}

.stat-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    box-shadow:0 14px 36px rgba(35,48,65,.06);
}

.stat-card small{
    color:var(--muted);
    font-weight:800;
}

.stat-card strong{
    display:block;
    margin-top:8px;
    font-size:28px;
    color:var(--text);
    overflow-wrap:anywhere;
}

.report-stats .stat-card strong{
    font-size:24px;
}

.med-report-grid{
    display:grid;
    grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
    gap:18px;
    align-items:start;
}

.medicine-chart{
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    background:#fbfdff;
}

.medicine-chart h3{
    margin:0 0 14px;
    font-size:16px;
}

.medicine-chart-row{
    display:grid;
    gap:8px;
}

.medicine-chart-label{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--text);
    font-weight:800;
}

.medicine-chart-label span{
    overflow-wrap:anywhere;
}

.medicine-chart-label strong{
    color:var(--primary);
}

.medicine-chart-track{
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:#eaf0f7;
}

.medicine-chart-bar{
    display:block;
    height:100%;
    min-width:8px;
    border-radius:999px;
    background:linear-gradient(90deg,#2f80ed,#19a974);
}

.content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:18px;
}

.patient-card,.timeline-item,.medicine-row,.study-row{
    border:1px solid var(--line);
    background:#fff;
    border-radius:16px;
    padding:15px;
}

.patient-card{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
}

.patient-card h3{
    margin:0 0 4px;
    font-size:16px;
    overflow-wrap:anywhere;
}

.meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:13px;
}

.chip{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--surface-soft);
    color:#526173;
    font-size:12px;
    font-weight:800;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.form-grid .span-2{
    grid-column:span 2;
}

.section-band{
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    background:#fff;
    margin-bottom:16px;
}

.section-band h2{
    font-size:18px;
    margin:0 0 14px;
}

.agenda-register-prompt{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-color:#ffc2c7;
    background:#fff7f8;
}

.agenda-register-prompt h2{
    margin-bottom:6px;
}

.agenda-register-prompt form{
    margin:0;
}

.consulta-section{
    --consulta-bg:#e5f5ff;
    --consulta-bg-soft:#f4fbff;
    --consulta-border:#a8d4e9;
    --consulta-accent:#3498c5;
    --consulta-heading:#1f5c75;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--consulta-bg),var(--consulta-bg-soft));
    border-color:var(--consulta-border);
    border-left:12px solid var(--consulta-accent);
    box-shadow:0 14px 34px rgba(35,48,65,.045);
}

.consulta-module{
    display:block;
}

.consulta-module-summary{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:-2px 0 16px;
    cursor:pointer;
    list-style:none;
    font-weight:900;
    color:var(--consulta-heading);
}

.consulta-module-summary::-webkit-details-marker{
    display:none;
}

.consulta-module-summary::after{
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:.18s ease;
}

.consulta-module[open] .consulta-module-summary::after{
    transform:rotate(225deg);
}

.consulta-module-summary span{
    font-size:18px;
}

.consulta-module-summary small{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.consulta-module:not([open]){
    padding-bottom:14px;
}

.consulta-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:9px;
    background:var(--consulta-accent);
    opacity:.42;
}

.consulta-section > *{
    position:relative;
}

.consulta-section h2{
    color:var(--consulta-heading);
}

.consulta-section .form-control,
.consulta-section .form-select,
.consulta-section textarea,
.consulta-section .medicine-entry{
    background:rgba(255,255,255,.82);
}

.consulta-section.tone-sky{
    --consulta-bg:#dff2ff;
    --consulta-bg-soft:#f4fbff;
    --consulta-border:#9ccfe8;
    --consulta-accent:#2f9ac8;
    --consulta-heading:#175f80;
}

.consulta-section.tone-mint{
    --consulta-bg:#dcf6ea;
    --consulta-bg-soft:#f4fcf8;
    --consulta-border:#99dabb;
    --consulta-accent:#2f9e6d;
    --consulta-heading:#176b48;
}

.consulta-section.tone-lavender{
    --consulta-bg:#e9e3ff;
    --consulta-bg-soft:#f8f6ff;
    --consulta-border:#bfb2e7;
    --consulta-accent:#7561c7;
    --consulta-heading:#4f3e8a;
}

.consulta-section.tone-amber{
    --consulta-bg:#ffedbf;
    --consulta-bg-soft:#fff8e7;
    --consulta-border:#ddbf6f;
    --consulta-accent:#b98918;
    --consulta-heading:#6d4f0f;
}

.consulta-section.tone-rose{
    --consulta-bg:#ffe1e8;
    --consulta-bg-soft:#fff7f9;
    --consulta-border:#e1a9b8;
    --consulta-accent:#bf5874;
    --consulta-heading:#804053;
}

.consulta-section.tone-teal{
    --consulta-bg:#dff8f2;
    --consulta-bg-soft:#f6fffc;
    --consulta-border:#9ed9cb;
    --consulta-accent:#248f7a;
    --consulta-heading:#176b5d;
}

.consulta-visit-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    gap:14px;
    align-items:start;
}

.consulta-date-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px;
    border:1px solid rgba(47,128,237,.18);
    border-radius:14px;
    background:rgba(255,255,255,.62);
}

.consulta-date-card small{
    display:block;
    margin-bottom:6px;
    color:var(--muted);
    font-weight:900;
}

.input-with-select{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px;
    gap:8px;
}

.temp-helper{
    display:block;
    margin-top:6px;
    font-weight:800;
}

.form-control.temp-low{
    border-color:#60a5fa;
    background:#eff6ff;
    color:#1d4ed8;
}

.form-control.temp-normal{
    border-color:#86d2ac;
    background:#f1fbf6;
    color:#176b48;
}

.form-control.temp-warning{
    border-color:#f2b35e;
    background:#fff7e8;
    color:#8a5a16;
}

.form-control.temp-fever,.form-control.temp-high{
    border-color:#ef7f86;
    background:#fff0f1;
    color:#a41524;
}

.temp-helper.temp-low{color:#1d4ed8;}
.temp-helper.temp-normal{color:#176b48;}
.temp-helper.temp-warning{color:#8a5a16;}
.temp-helper.temp-fever,.temp-helper.temp-high{color:#a41524;}

.textarea-compact{
    min-height:74px;
}

.textarea-large{
    min-height:150px;
}

.diagnosis-module{
    align-items:end;
}

.diagnosis-selected-card{
    min-height:70px;
    padding:12px 14px;
    border:1px solid #bed4e4;
    border-radius:14px;
    background:#fbfdff;
}

.diagnosis-selected-card small,
.diagnosis-selected-card strong,
.diagnosis-selected-card span{
    display:block;
}

.diagnosis-selected-card small{
    color:var(--muted);
    font-weight:900;
}

.diagnosis-selected-card strong{
    margin-top:3px;
    color:#526173;
}

.diagnosis-selected-card span{
    color:var(--muted);
    overflow-wrap:anywhere;
}

.diagnosis-selected-card.is-selected{
    border-color:#86d2ac;
    background:#eefaf4;
}

.diagnosis-selected-card.is-selected strong,
.diagnosis-selected-card.is-selected span{
    color:#176b48;
}

.diagnosis-locked{
    border-color:#86d2ac;
    background:#f1fbf6;
    color:#176b48;
    font-weight:800;
}

.diagnosis-confirmed-row td{
    background:#f1fbf6;
}

.consulta-template-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:12px;
}

.consulta-template-row .btn{
    min-height:38px;
}

.patient-history-section{
    background:#f4fbff;
    border-color:#cfe8f6;
    box-shadow:none;
}

.patient-history-section h2{
    color:#246985;
    margin-bottom:6px;
}

.consulta-form{
    padding-bottom:88px;
}

.consulta-save-bar{
    position:fixed;
    right:30px;
    bottom:18px;
    z-index:35;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px 10px 16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 45px rgba(35,48,65,.16);
    backdrop-filter:blur(10px);
}

.consulta-save-bar .helper-text{
    margin:0;
    white-space:nowrap;
}

.consulta-save-bar .btn{
    min-width:160px;
}

[data-consulta-form] textarea[name="motivo_consulta"],
[data-consulta-form] textarea[name="padecimiento_actual"],
[data-consulta-form] textarea[name="interrogatorio"],
[data-consulta-form] textarea[name="exploracion_fisica"]{
    min-height:92px;
}

[data-consulta-form] textarea.textarea-compact{
    min-height:74px;
}

[data-consulta-form] textarea.textarea-large{
    min-height:150px;
}

.autocomplete{
    position:relative;
}

.autocomplete-results{
    position:absolute;
    z-index:20;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    max-height:260px;
    overflow:auto;
    display:none;
}

.autocomplete-results button{
    width:100%;
    border:0;
    background:#fff;
    text-align:left;
    padding:11px 13px;
    cursor:pointer;
}

.autocomplete-results button:hover,
.autocomplete-results button.active,
.autocomplete-results button[aria-selected="true"]{
    background:var(--primary-soft);
}

.autocomplete-results button.active strong,
.autocomplete-results button[aria-selected="true"] strong{
    color:var(--primary);
}

.autocomplete-results small{
    color:var(--muted);
    font-size:12px;
}

.cie-result{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.cie-chapter-chip{
    flex:0 0 auto;
    min-width:42px;
    padding:4px 8px;
    border-radius:999px;
    background:color-mix(in srgb,var(--cie-color) 14%,#fff);
    color:var(--cie-color);
    font-size:12px;
    font-weight:900;
    text-align:center;
}

.cie-result-text{
    display:grid;
    gap:3px;
    min-width:0;
}

.cie-result-text span{
    overflow-wrap:anywhere;
}

.cie-result-text small{
    display:block;
}

.medicine-entry,.diagnosis-entry{
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fbfdff;
}

.medicine-table,.diagnosis-table{
    margin-bottom:0;
}

.medicine-table th,.medicine-table td,.diagnosis-table th,.diagnosis-table td{
    vertical-align:middle;
}

.doctor-logo-preview{
    width:56px;
    height:56px;
    object-fit:contain;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    padding:6px;
}

.imc-helper{
    display:block;
    margin-top:6px;
}

.timeline{
    position:relative;
    display:grid;
    gap:14px;
}

.timeline-item{
    position:relative;
    padding-left:18px;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-5px;
    top:20px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 5px var(--primary-soft);
}

.login-screen{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(47,128,237,.13), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(25,169,116,.12), transparent 30%),
        var(--bg);
}

.login-card{
    width:min(440px,100%);
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:30px;
    box-shadow:var(--shadow);
}

.install-card{
    width:min(520px,100%);
}

.install-database-row{
    display:grid;
    grid-template-columns:minmax(110px,.7fr) minmax(0,1.5fr);
    gap:16px;
}

.brand-login{
    margin-bottom:24px;
}

.login-card h1{
    margin:0 0 8px;
    font-size:28px;
}

.login-card p{
    color:var(--muted);
    line-height:1.6;
}

.helper-text{
    margin:14px 0 0;
    color:var(--muted);
    font-size:13px;
}

@media (max-width:560px){
    .install-database-row{
        grid-template-columns:1fr;
    }
}

.patient-gate-message{
    display:block;
    margin-top:8px;
    color:#8a5a16;
    font-weight:800;
}

.patient-gate-message.is-ok{
    color:#1f7352;
}

.empty-state{
    padding:28px;
    border:1px dashed #c9d6e5;
    border-radius:16px;
    background:#fbfdff;
    color:var(--muted);
    text-align:center;
}

body.modal-open{
    overflow:hidden;
}

.consulta-preview[hidden]{
    display:none;
}

.consulta-preview{
    position:fixed;
    inset:0;
    z-index:80;
    display:grid;
    place-items:center;
    padding:22px;
    background:rgba(20,31,45,.38);
    backdrop-filter:blur(4px);
}

.consulta-preview-dialog{
    width:min(900px,100%);
    max-height:min(86vh,760px);
    overflow:auto;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    padding:22px;
    box-shadow:0 24px 70px rgba(20,31,45,.24);
}

.consulta-preview-body{
    display:grid;
    gap:14px;
}

.consulta-preview-section{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    background:#fbfdff;
}

.consulta-preview-section h3{
    margin:0 0 12px;
    font-size:16px;
}

.consulta-preview-lines{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.consulta-preview-lines strong{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:12px;
}

.consulta-preview-lines p{
    margin:0;
    color:var(--text);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.consulta-preview-list{
    margin:0;
    padding-left:20px;
}

.consulta-preview-list li{
    margin:0 0 8px;
    overflow-wrap:anywhere;
}

@media (max-width:1040px){
    .app-body{
        grid-template-columns:1fr;
    }
    .sidebar{
        position:relative;
        inset:auto;
        width:auto;
        height:auto;
        min-height:auto;
        overflow:visible;
        border-right:0;
        border-bottom:1px solid var(--line);
        gap:16px;
    }
    .sidebar-nav{
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:thin;
    }
    .nav-link{
        white-space:nowrap;
        flex:0 0 auto;
    }
    .sidebar-footer{
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
    }
    .logout-link{
        justify-self:end;
    }
    .grid.stats,.content-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:720px){
    body{
        background:var(--bg);
    }
    .app-body{
        display:block;
    }
    .sidebar{
        padding:14px;
    }
    .brand{
        gap:10px;
    }
    .brand-mark{
        width:38px;
        height:38px;
        border-radius:12px;
    }
    .brand strong{
        font-size:16px;
    }
    .brand small{
        font-size:11px;
    }
    .sidebar-nav{
        margin-inline:-2px;
        padding-inline:2px;
        scroll-snap-type:x proximity;
    }
    .nav-link{
        min-height:40px;
        padding:9px 11px;
        border-radius:11px;
        font-size:14px;
        scroll-snap-align:start;
    }
    .sidebar-footer{
        grid-template-columns:1fr;
        gap:8px;
    }
    .user-pill{
        padding:8px;
        border-radius:14px;
    }
    .user-pill span{
        width:34px;
        height:34px;
    }
    .logout-link{
        justify-self:start;
        padding:6px 8px;
    }
    .app-main{
        grid-column:auto;
        padding:14px;
    }
    .topbar{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        margin-bottom:16px;
    }
    .topbar .btn{
        width:100%;
    }
    .topbar h1{
        font-size:24px;
        line-height:1.18;
    }
    .eyebrow{
        font-size:11px;
    }
    .panel,.section-band{
        padding:14px;
        border-radius:14px;
        box-shadow:0 12px 28px rgba(35,48,65,.06);
    }
    .panel-title{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }
    .agenda-register-prompt{
        align-items:flex-start;
        flex-direction:column;
    }
    .agenda-register-prompt .d-flex{
        width:100%;
    }
    .agenda-register-prompt .btn{
        flex:1 1 170px;
    }
    .consulta-template-row{
        grid-template-columns:1fr;
    }
    .consulta-visit-header,.consulta-date-card{
        grid-template-columns:1fr;
    }
    .consulta-template-row .btn{
        width:100%;
    }
    .consulta-form{
        padding-bottom:104px;
    }
    .consulta-save-bar{
        left:14px;
        right:14px;
        bottom:12px;
        justify-content:space-between;
        border-radius:14px;
    }
    .consulta-save-bar .btn{
        flex:0 0 auto;
        min-width:150px;
    }
    .panel-title h2,.panel-title h3{
        font-size:17px;
    }
    .panel-title form,.panel-title .d-flex{
        width:100%;
        flex-wrap:wrap;
    }
    .d-flex.gap-2,.d-flex.gap-3{
        flex-wrap:wrap;
    }
    form.d-flex.gap-2 .form-control,form.d-flex.gap-2 .form-select{
        flex:1 1 170px;
    }
    form.d-flex.gap-2 .btn{
        flex:0 0 auto;
    }
    .panel-title .form-control,.panel-title .form-select{
        flex:1 1 150px;
    }
    .panel-title .btn{
        flex:1 1 110px;
    }
    .grid.stats,.content-grid,.form-grid{
        grid-template-columns:1fr;
    }
    .med-report-grid,.consulta-preview-lines{
        grid-template-columns:1fr;
    }
    .consulta-preview{
        padding:12px;
    }
    .consulta-preview-dialog{
        padding:16px;
        border-radius:14px;
    }
    .grid.stats{
        gap:10px;
        margin-bottom:14px;
    }
    .stat-card{
        padding:14px;
        border-radius:14px;
    }
    .stat-card strong{
        font-size:24px;
    }
    .form-grid .span-2{
        grid-column:auto;
    }
    .patient-card{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        border-radius:14px;
    }
    .patient-card > div{
        width:100%;
    }
    .patient-card .d-flex,.timeline-item .d-flex,.medicine-row .d-flex,.study-row .d-flex{
        width:100%;
        flex-wrap:wrap;
    }
    .patient-card form,.timeline-item form{
        flex:1 1 128px;
    }
    .patient-card .btn,.timeline-item .btn,.medicine-row .btn,.study-row .btn{
        flex:1 1 128px;
    }
    .patient-card form .btn,.timeline-item form .btn{
        width:100%;
    }
    .meta{
        font-size:12px;
        gap:6px;
    }
    .chip{
        min-height:24px;
        padding:4px 8px;
    }
    .empty-state{
        padding:22px 14px;
        border-radius:14px;
    }
    .timeline-item{
        padding:14px 14px 14px 18px;
        border-radius:14px;
    }
    .table{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        border-spacing:0 8px;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;
        padding-bottom:6px;
    }
    .table th{
        padding:0 10px;
    }
    .table td{
        padding:12px 10px;
    }
    .login-screen{
        place-items:start center;
        padding:16px;
    }
    .login-card{
        margin-top:10px;
        padding:22px;
        border-radius:18px;
    }
    .login-card h1{
        font-size:25px;
    }
    .autocomplete-results{
        max-height:220px;
    }
    .app-main > form > .btn[type="submit"]{
        width:100%;
    }
}

@media (max-width:520px){
    .app-main{
        padding:12px;
    }
    .sidebar{
        padding:12px;
    }
    .brand{
        align-items:flex-start;
    }
    .grid.stats{
        grid-template-columns:1fr 1fr;
    }
    .stat-card small{
        font-size:12px;
    }
    .stat-card strong{
        font-size:22px;
    }
    .btn{
        min-height:40px;
    }
    .topbar .btn,.panel-title .btn{
        width:100%;
    }
    .form-control,.form-select{
        padding:10px 12px;
    }
    .content-grid{
        gap:12px;
    }
    .section-band{
        margin-bottom:12px;
    }
    .consulta-save-bar{
        align-items:stretch;
        flex-direction:column;
        gap:8px;
        padding:10px;
    }
    .consulta-save-bar .helper-text{
        text-align:center;
        white-space:normal;
    }
    .consulta-save-bar .btn{
        width:100%;
    }
    .medicine-row,.study-row{
        border-radius:14px;
        padding:12px;
    }
    .medicine-row .btn,.study-row .btn{
        flex-basis:100%;
    }
    .patient-card form,.timeline-item form{
        flex-basis:100%;
    }
    .table{
        margin-inline:-2px;
    }
}

@media (max-width:390px){
    .grid.stats{
        grid-template-columns:1fr;
    }
    .patient-card .btn,.timeline-item .btn,.panel-title .btn{
        flex-basis:100%;
    }
    .login-card{
        padding:18px;
    }
}

@media (max-width:1040px){
    .sidebar{
        position:sticky;
        top:0;
        z-index:40;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:12px;
        padding:14px 18px;
    }
    .menu-toggle{
        display:inline-flex;
        justify-self:end;
    }
    .sidebar-menu{
        display:none;
        grid-column:1 / -1;
        width:100%;
    }
    .app-body.menu-open .sidebar-menu{
        display:grid;
        gap:12px;
        padding-top:4px;
    }
    .app-body.menu-open .sidebar-nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        overflow:visible;
        padding:0;
    }
    .app-body.menu-open .nav-link{
        flex:auto;
        white-space:normal;
    }
    .app-body.menu-open .sidebar-footer{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        margin-top:0;
        padding-top:12px;
        border-top:1px solid var(--line);
    }
    .app-body.menu-open .logout-link{
        justify-self:end;
    }
}

@media (max-width:720px){
    .sidebar{
        padding:12px;
    }
    .app-body.menu-open .sidebar-nav{
        grid-template-columns:1fr;
    }
    .app-body.menu-open .sidebar-footer{
        grid-template-columns:1fr;
    }
    .app-body.menu-open .logout-link{
        justify-self:start;
    }
}