:root{
    --violet-900:#2D1B4E;
    --violet-800:#3A2361;
    --violet-700:#4C3575;
    --violet-600:#5F4590;
    --violet-500:#8467C7;
    --violet-200:#D9CFF0;
    --violet-100:#EDE8F7;
    --lavender-50:#F8F6FC;
    --gold-500:#C9A15A;
    --gold-100:#F5EBD6;
    --ink-900:#241B36;
    --ink-600:#5B5270;
    --ink-400:#8B84A0;
    --line:#E4DEF0;
    --white:#FFFFFF;
    --danger:#B4485F;
    --danger-bg:#F8E9EC;
    --success:#3F7D5C;
    --success-bg:#E7F1EA;
    --slate:#3F5170;
    --slate-bg:#E7EAF3;
    --rose:#A34869;
    --rose-bg:#F7E4EC;
    --sky:#2F5F8F;
    --sky-bg:#E3EEFB;
    --mint:#2E7D5B;
    --mint-bg:#E1F0EA;
    --radius-sm:6px;
    --radius-md:10px;
    --sidebar-w:232px;
    --sidebar-w-collapsed:72px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--lavender-50);
    color:var(--ink-900);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Fraunces', serif; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  input, select{ font-family:inherit; font-size:14px; }

  /* ---------- Layout ---------- */
  .app{ display:flex; min-height:100vh; }

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:var(--sidebar-w);
    background:var(--violet-900);
    color:var(--violet-200);
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    transition:width .2s ease;
  }
  .sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
  .sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:22px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .brand-mark{
    width:34px; height:34px; border-radius:9px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand-text{ overflow:hidden; white-space:nowrap; }
  .brand-text .name{ font-family:'Fraunces', serif; font-size:15px; color:#fff; font-weight:500; }
  .brand-text .sub{ font-size:11px; color:var(--violet-200); opacity:.75; }
  .sidebar.collapsed .brand-text{ display:none; }

  .nav-section{ padding:14px 12px; overflow-y:auto; flex:1; }
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    color:var(--violet-200);
    font-size:13.5px;
    font-weight:500;
    margin-bottom:2px;
    position:relative;
    white-space:nowrap;
    overflow:hidden;
    width:100%;
    text-align:left;
  }
  .nav-item .ic{ width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .nav-item .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  .nav-item.active{ background:var(--violet-700); color:#fff; }
  .nav-item.disabled{ opacity:.35; cursor:not-allowed; pointer-events:none; }
  .nav-item.active::before{
    content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
    background:var(--gold-500); border-radius:2px;
  }
  .sidebar.collapsed .nav-item span.label{ display:none; }
  .sidebar.collapsed .nav-item{ justify-content:center; }

  .sidebar-foot{
    padding:14px 12px; border-top:1px solid rgba(255,255,255,0.08);
  }
  .collapse-btn{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 12px; border-radius:var(--radius-sm); color:var(--violet-200); font-size:13px;
  }
  .collapse-btn:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  .collapse-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; transition:transform .2s; flex-shrink:0; }
  .sidebar.collapsed .collapse-btn svg{ transform:rotate(180deg); }
  .sidebar.collapsed .collapse-btn .label{ display:none; }

  /* ---------- Main ---------- */
  .main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .topbar{
    height:64px; background:var(--white); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; flex-shrink:0;
  }
  .topbar-title h1{ font-size:19px; font-weight:600; color:var(--ink-900); }
  .topbar-title .date{ font-size:12px; color:var(--ink-400); margin-top:1px; }
  .topbar-right{ display:flex; align-items:center; gap:18px; }
  .icon-btn{
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--ink-600); position:relative;
  }
  .icon-btn:hover{ background:var(--violet-100); color:var(--violet-700); }
  .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .icon-btn .dot{
    position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
    background:var(--gold-500); border:1.5px solid var(--white);
  }
  .user-chip{ display:flex; align-items:center; gap:10px; padding-left:16px; border-left:1px solid var(--line); }
  .avatar{
    width:34px; height:34px; border-radius:50%; background:var(--violet-700); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
    font-family:'Fraunces', serif;
  }
  .user-chip .who .n{ font-size:13px; font-weight:600; color:var(--ink-900); }
  .user-chip .who .r{ font-size:11.5px; color:var(--ink-400); }
  .user-switch-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); right:0; width:260px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 14px 34px rgba(45,27,78,0.18);
    z-index:250; overflow:hidden;
  }
  .user-switch-dropdown.open{ display:block; }
  .user-switch-dropdown .usd-head{
    padding:10px 14px; font-size:11px; font-weight:700; color:var(--ink-400); text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid var(--line);
  }
  .usd-item{
    display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; text-align:left; border:none; background:none;
  }
  .usd-item:hover{ background:var(--violet-100); }
  .usd-item.active{ background:var(--violet-100); }
  .usd-item .usd-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--violet-700); color:#fff; display:flex; align-items:center;
    justify-content:center; font-size:11.5px; font-weight:700; font-family:'Fraunces', serif; flex-shrink:0;
  }
  .usd-item .usd-name{ font-size:12.5px; font-weight:600; color:var(--ink-900); }
  .usd-item .usd-branch{ font-size:11px; color:var(--ink-400); }

  .content{ flex:1; padding:24px 28px 40px; overflow-y:auto; }

  /* ---------- Module tabs ---------- */
  /* ---------- Home toolbar (doctor filter) ---------- */
  .home-toolbar{
    display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:16px;
  }
  .doctor-filter{ display:flex; align-items:center; gap:8px; }
  .doctor-filter label{ font-size:12.5px; color:var(--ink-400); font-weight:500; }
  .doctor-filter select{
    padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-900);
    background:var(--white); font-size:13px; min-width:200px;
  }
  .doctor-filter select:hover{ border-color:var(--violet-500); }

  .module-tabs{
    display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px;
  }

  /* ---------- KPI chips (Citas del día) ---------- */
  .kpi-chip-row{ display:flex; gap:8px; margin-bottom:16px; }
  .kpi-chip{
    display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:20px;
    border:1px solid var(--line); background:var(--white); font-size:12.5px; color:var(--ink-600); font-weight:500;
  }
  .kpi-chip .val{ font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--ink-900); }
  .kpi-chip.kpi-concluidas .val{ color:var(--slate); }
  .kpi-chip.kpi-canceladas .val{ color:var(--danger); }
  .kpi-chip.kpi-total .val{ color:var(--violet-700); }
  .kpi-chip .dotk{ width:7px; height:7px; border-radius:50%; }
  .kpi-chip.kpi-concluidas .dotk{ background:var(--slate); }
  .kpi-chip.kpi-canceladas .dotk{ background:var(--danger); }
  .kpi-chip.kpi-total .dotk{ background:var(--violet-700); }

  /* ---------- KPI card (Citas incompletas) ---------- */
  .kpi-card{
    display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:18px; width:fit-content;
  }
  .kpi-card.compact{ padding:10px 16px; margin-bottom:0; }
  .kpi-card.compact .icon-wrap{ width:36px; height:36px; }
  .kpi-card.compact .num{ font-size:20px; }
  .kpi-card .icon-wrap{
    width:42px; height:42px; border-radius:10px; background:var(--danger-bg); color:var(--danger);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .kpi-card .icon-wrap svg{ width:20px; height:20px; stroke:currentColor; fill:none; }
  .kpi-card .num{ font-family:'Fraunces', serif; font-size:26px; font-weight:600; color:var(--ink-900); line-height:1; }
  .kpi-card .lbl{ font-size:12px; color:var(--ink-400); margin-top:3px; }

  /* ---------- Modal (Nueva tarea) ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(36,27,54,0.45); display:none; align-items:center; justify-content:center;
    z-index:100; padding:24px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-overlay.nested-overlay{ z-index:200; }
  .modal-box{
    background:var(--white); border-radius:var(--radius-md); width:100%; max-width:640px; max-height:90vh;
    overflow-y:auto; box-shadow:0 20px 50px rgba(45,27,78,0.25);
  }
  .modal-box.wide{ max-width:840px; }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between; padding:20px 24px;
    position:sticky; top:0; z-index:1;
    background:linear-gradient(135deg, var(--violet-700), var(--violet-900)); color:#fff;
  }
  .modal-head h2{ font-size:18px; font-weight:600; color:#fff; }
  .modal-close{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8);
  }
  .modal-close:hover{ background:rgba(255,255,255,0.16); color:#fff; }
  .modal-close svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
  .modal-body{ padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
  .form-row{ display:flex; gap:14px; }
  .form-field{ flex:1; display:flex; flex-direction:column; gap:6px; }
  .form-field label{ font-size:12.5px; font-weight:600; color:var(--ink-600); }
  .form-field input[type=text], .form-field select, .form-field textarea{
    padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-900); font-size:13.5px;
    background:var(--white); width:100%;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{
    outline:none; border-color:var(--violet-500); box-shadow:0 0 0 3px var(--violet-100);
  }
  .form-field textarea{ resize:vertical; min-height:90px; font-family:inherit; }
  .file-drop{
    border:1.5px dashed var(--violet-200); border-radius:var(--radius-sm); padding:18px; text-align:center;
    color:var(--ink-400); font-size:12.5px; cursor:pointer; background:var(--lavender-50);
  }
  .file-drop:hover{ border-color:var(--violet-500); color:var(--violet-700); }
  .file-drop svg{ width:20px; height:20px; stroke:currentColor; fill:none; margin-bottom:6px; }
  .file-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .file-chip{
    display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:16px; background:var(--violet-100);
    color:var(--violet-700); font-size:12px; font-weight:500;
  }
  .file-chip svg{ width:13px; height:13px; stroke:currentColor; fill:none; }
  .modal-foot{
    display:flex; justify-content:flex-end; gap:10px; padding:16px 24px;
    position:sticky; bottom:0; background:var(--violet-100); border-top:1px solid var(--violet-200);
  }
  .btn-secondary{
    padding:10px 18px; border-radius:var(--radius-sm); border:1px solid var(--line); color:var(--ink-600);
    font-size:13px; font-weight:600; background:var(--white);
  }
  .btn-secondary:hover{ border-color:var(--ink-400); }
  .btn-primary{
    padding:10px 18px; border-radius:var(--radius-sm); border:1px solid var(--violet-700); color:#fff;
    font-size:13px; font-weight:600; background:var(--violet-700);
  }
  .btn-primary:hover{ background:var(--violet-800); }
  .new-task-btn{
    display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-sm);
    background:var(--violet-700); color:#fff; font-size:12.5px; font-weight:600;
  }
  .new-task-btn:hover{ background:var(--violet-800); }
  .new-task-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
  .task-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

  /* ---------- Scheduling module (menú lateral) ---------- */
  .scheduling-grid-wrap{
    overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); margin-top:18px;
  }
  .scheduling-grid-table{ width:100%; border-collapse:collapse; min-width:760px; }
  .scheduling-grid-table th{
    background:var(--lavender-50); padding:12px 8px; font-size:12px; color:var(--ink-600); font-weight:600;
    text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  }
  .scheduling-grid-table th:first-child{ width:66px; }
  .scheduling-grid-table td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; }
  .scheduling-grid-table td:last-child, .scheduling-grid-table th:last-child{ border-right:none; }
  .sched-time-cell{
    width:66px; font-size:11px; color:var(--ink-400); font-weight:600; text-align:right; padding-right:10px !important;
    background:var(--lavender-50); white-space:nowrap;
  }
  .sched-cell{ height:36px; cursor:pointer; position:relative; transition:filter .1s ease; }
  .sched-cell.empty{ background:var(--white); }
  .sched-cell.empty:hover{ background:var(--violet-100); }
  .sched-cell.dim{ opacity:.3; }
  .sched-cell-inner{
    height:100%; display:flex; align-items:center; padding:0 8px; font-size:11px; font-weight:600;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .sched-cat-confirmada{ background:var(--violet-100); color:var(--violet-700); }
  .sched-cat-no-confirmada{ background:var(--gold-100); color:#8a6a29; }
  .sched-cat-incompleta{ background:var(--rose-bg); color:var(--rose); }
  .sched-cat-oportunidad{ background:var(--sky-bg); color:var(--sky); }
  .sched-cat-cita-web{ background:var(--mint-bg); color:var(--mint); }
  .sched-cat-cancelada{ background:var(--danger-bg); color:var(--danger); text-decoration:line-through; }
  .sched-cat-reagendada{ background:var(--slate-bg); color:var(--slate); }

  .grid-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
  .legend-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-600); font-weight:500; }
  .legend-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

  .tag-choice{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag-option{
    padding:7px 13px; border-radius:20px; border:1px solid var(--line); font-size:12px; color:var(--ink-600);
    background:var(--white); font-weight:500;
  }
  .tag-option:hover{ border-color:var(--violet-500); color:var(--violet-700); }
  .tag-option.selected{ background:var(--violet-700); border-color:var(--violet-700); color:#fff; }

  /* ---------- Patients module (menú lateral) ---------- */
  .patient-kpi-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:22px;
  }
  .patient-kpi-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px;
  }
  .patient-kpi-card .ind-label{ font-size:12px; color:var(--ink-400); font-weight:500; margin-bottom:6px; }
  .patient-kpi-card .ind-value{ font-family:'Fraunces', serif; font-size:22px; font-weight:600; color:var(--ink-900); }

  .back-link{
    display:inline-flex; align-items:center; gap:6px; color:var(--violet-700); font-size:13px; font-weight:600;
    margin-bottom:18px;
  }
  .back-link:hover{ text-decoration:underline; }
  .back-link svg{ width:15px; height:15px; stroke:currentColor; fill:none; }

  .patient-header-card{
    display:flex; align-items:center; gap:18px; padding:20px 22px; background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-md); margin-bottom:22px; flex-wrap:wrap;
  }
  .patient-header-avatar{
    width:58px; height:58px; border-radius:50%; background:var(--violet-700); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700;
    font-family:'Fraunces', serif; flex-shrink:0;
  }
  .patient-header-info{ flex:1; min-width:200px; }
  .patient-header-info .pname{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:var(--ink-900); }
  .patient-header-info .pmeta{ font-size:12.5px; color:var(--ink-400); margin-top:2px; }
  .patient-header-fields{
    display:flex; gap:26px; flex-wrap:wrap; padding-left:18px; border-left:1px solid var(--line);
  }
  .patient-header-fields .field{ font-size:12px; }
  .patient-header-fields .field .k{ color:var(--ink-400); margin-bottom:2px; }
  .patient-header-fields .field .v{ color:var(--ink-900); font-weight:600; }

  .patient-summary-cards{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:24px;
  }

  .doc-card-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;
  }
  .doc-card{
    border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:12px;
    background:var(--white);
  }
  .doc-card-icon{
    width:40px; height:40px; border-radius:10px; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center;
  }
  .doc-card-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .doc-card-title{ font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--ink-900); }
  .doc-card-desc{ font-size:12.5px; color:var(--ink-400); flex:1; }

  .alert-card{
    display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md); margin-bottom:10px;
    border:1px solid var(--rose-bg);
  }
  .alert-card.alta{ background:var(--danger-bg); border-color:var(--danger-bg); }
  .alert-card.media{ background:var(--gold-100); border-color:var(--gold-100); }
  .alert-card.baja{ background:var(--violet-100); border-color:var(--violet-100); }
  .alert-card .aicon{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .alert-card.alta .aicon{ background:var(--danger); color:#fff; }
  .alert-card.media .aicon{ background:var(--gold-500); color:#fff; }
  .alert-card.baja .aicon{ background:var(--violet-700); color:#fff; }
  .alert-card .aicon svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
  .alert-card .atext .atitle{ font-size:13px; font-weight:600; color:var(--ink-900); }
  .alert-card .atext .adetail{ font-size:12.5px; color:var(--ink-600); margin-top:2px; }

  .comment-item{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); margin-bottom:10px; }
  .comment-item .chead{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-400); margin-bottom:6px; }
  .comment-item .chead .cauthor{ font-weight:600; color:var(--ink-700); }
  .comment-item .ctext{ font-size:13px; color:var(--ink-900); line-height:1.55; }

  .add-comment-box{ display:flex; gap:10px; margin-top:16px; align-items:flex-start; }
  .add-comment-box textarea{ flex:1; }
  .patients-table-row{ cursor:pointer; }

  /* ---------- Seguimiento de receta (línea de tiempo) ---------- */
  .seguimiento-track{ display:flex; align-items:flex-start; margin:10px 0 18px; overflow-x:auto; padding-bottom:4px; }
  .seg-step{ flex:1; min-width:84px; text-align:center; position:relative; padding-top:14px; }
  .seg-step .seg-line{
    position:absolute; top:28px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0;
  }
  .seg-step:first-child .seg-line{ display:none; }
  .seg-step.done .seg-line{ background:var(--violet-700); }
  .seg-dot{
    width:26px; height:26px; border-radius:50%; background:var(--white); color:var(--ink-400);
    display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:11.5px; font-weight:700;
    border:2px solid var(--line); position:relative; z-index:1;
  }
  .seg-step.done .seg-dot{ background:var(--violet-700); color:#fff; border-color:var(--violet-700); }
  .seg-step.current .seg-dot{ background:var(--gold-500); color:#fff; border-color:var(--gold-500); }
  .seg-label{ font-size:10.5px; color:var(--ink-600); font-weight:600; line-height:1.3; padding:0 4px; }
  .seg-date{ font-size:9.5px; color:var(--ink-400); margin-top:3px; }
  .seg-status-badge{
    display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
    background:var(--violet-100); color:var(--violet-700); white-space:nowrap;
  }

  /* ---------- Reports module (menú lateral) ---------- */
  .reports-section{ margin-bottom:32px; }
  .reports-section h2{
    font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--ink-900); margin-bottom:4px;
  }
  .reports-section .section-sub{ font-size:12.5px; color:var(--ink-400); margin-bottom:16px; }
  .report-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
  .report-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;
    display:flex; flex-direction:column; gap:10px;
  }
  .report-card .rc-icon{
    width:36px; height:36px; border-radius:9px; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center;
  }
  .report-card .rc-icon svg{ width:17px; height:17px; stroke:currentColor; fill:none; }
  .report-card .rc-title{ font-family:'Fraunces', serif; font-size:14.5px; font-weight:600; color:var(--ink-900); }
  .report-card .rc-desc{ font-size:12.5px; color:var(--ink-600); line-height:1.5; flex:1; }
  .report-card .rc-generate{
    align-self:flex-start; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--violet-700);
    color:var(--violet-700); font-size:12px; font-weight:600; background:var(--white);
  }
  .report-card .rc-generate:hover{ background:var(--violet-700); color:#fff; }

  .report-gen-success{
    display:none; margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--success-bg);
    color:var(--success); font-size:12.5px; font-weight:600;
  }
  .report-gen-success.show{ display:block; }

  /* ---------- Product catalog (Inventory) ---------- */
  .catalog-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
  .catalog-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;
    display:flex; flex-direction:column; gap:10px;
  }
  .catalog-card .cc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .catalog-card .cc-icon{
    width:38px; height:38px; border-radius:9px; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .catalog-card .cc-icon svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .catalog-card .cc-name{ font-family:'Fraunces', serif; font-size:14.5px; font-weight:600; color:var(--ink-900); }
  .catalog-card .cc-brand{ font-size:11.5px; color:var(--ink-400); margin-top:1px; }
  .catalog-card .cc-desc{ font-size:12.5px; color:var(--ink-600); line-height:1.5; flex:1; }
  .catalog-card .cc-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
  .catalog-card .cc-price{ font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--violet-700); }
  .catalog-card .cc-sku{ font-size:10.5px; color:var(--ink-400); }

  /* ---------- Settings module (menú lateral) ---------- */
  .settings-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 24px;
    margin-bottom:20px; max-width:720px;
  }
  .settings-card h3{
    font-family:'Fraunces', serif; font-size:15.5px; font-weight:600; color:var(--ink-900); margin-bottom:16px;
  }
  .settings-card .form-row, .settings-card .form-field{ margin-bottom:14px; }
  .settings-card input:disabled{ background:var(--lavender-50); color:var(--ink-400); }

  /* ---------- Audiometría (expediente del paciente) ---------- */
  .audio-date-banner{
    font-size:12.5px; color:var(--ink-400); margin-bottom:16px;
  }
  .audio-ear-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width: 720px){ .audio-ear-grid{ grid-template-columns:1fr; } }
  .audio-ear-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  }
  .audio-ear-head{
    padding:12px 16px; background:var(--violet-100); color:var(--violet-700);
    font-family:'Fraunces', serif; font-weight:600; font-size:14px;
  }
  .audio-section{ padding:14px 16px; border-bottom:1px solid var(--line); }
  .audio-section:last-child{ border-bottom:none; }
  .audio-section h4{ font-size:11.5px; font-weight:700; color:var(--ink-400); text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
  .audio-freq-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .audio-freq-table th{ text-align:center; color:var(--ink-400); font-weight:600; padding:4px 2px; }
  .audio-freq-table td{ text-align:center; color:var(--ink-900); font-weight:600; padding:4px 2px; }
  .audio-freq-table td:first-child, .audio-freq-table th:first-child{ text-align:left; color:var(--ink-600); font-weight:500; }
  .audio-field-list{ display:flex; flex-direction:column; gap:7px; }
  .audio-field-list .af{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
  .audio-field-list .af .k{ color:var(--ink-400); }
  .audio-field-list .af .v{ color:var(--ink-900); font-weight:600; text-align:right; }
  .audio-summary-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .audio-freq-input-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
  .audio-freq-input-grid label{ font-size:10px; color:var(--ink-400); display:block; margin-bottom:3px; }
  .audio-freq-input-grid input{ width:100%; padding:6px; border:1px solid var(--line); border-radius:5px; font-size:12px; text-align:center; }
  .audio-aparato-toggle{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-600); margin-bottom:12px; }
  .audio-aparato-toggle input{ width:auto; }

  /* ---------- Vertical tabs layout (expediente del paciente) ---------- */
  .pd-body-layout{ display:flex; gap:26px; align-items:flex-start; }
  .pd-body-layout .module-tabs{
    flex-direction:column; border-bottom:none; margin-bottom:0; gap:2px;
    border-right:1px solid var(--line); padding-right:16px; width:172px; flex-shrink:0;
  }
  .pd-body-layout .mtab{
    text-align:left; padding:9px 12px; border-bottom:none; border-left:2px solid transparent;
    margin-bottom:0; border-radius:6px; white-space:nowrap;
  }
  .pd-body-layout .mtab:hover{ background:var(--violet-100); }
  .pd-body-layout .mtab.active{ background:var(--violet-100); border-left-color:var(--violet-700); border-bottom:none; }
  .pd-body-layout .mtab{ display:flex; align-items:center; gap:9px; }
  .mtab-icon{ display:flex; flex-shrink:0; }
  .mtab-icon svg{ width:14px; height:14px; stroke:currentColor; fill:none; }
  .pd-body-layout > .panel{ flex:1; min-width:0; }

  /* ---------- Patient header fields with icons ---------- */
  .patient-header-fields{ display:flex; flex-wrap:wrap; gap:14px 24px; }
  .patient-header-fields .field{ display:flex; align-items:flex-start; gap:8px; }
  .patient-header-fields .field-icon{
    width:26px; height:26px; border-radius:7px; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .patient-header-fields .field-icon svg{ width:13px; height:13px; stroke:currentColor; fill:none; }

  /* ---------- Login screen ---------- */
  .login-screen{
    position:fixed; inset:0; z-index:500;
    background:linear-gradient(155deg, var(--violet-900), var(--violet-700) 55%, var(--violet-600));
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .login-card{
    background:var(--white); border-radius:16px; width:100%; max-width:420px;
    padding:40px 36px 32px; box-shadow:0 30px 70px rgba(20,10,40,0.35);
  }
  .login-logo-wrap{
    width:112px; height:112px; border-radius:14px; overflow:hidden; margin:0 auto 22px;
    box-shadow:0 8px 20px rgba(45,27,78,0.18);
  }
  .login-logo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .login-title{ text-align:center; font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:var(--ink-900); }
  .login-subtitle{ text-align:center; font-size:12.5px; color:var(--ink-400); margin-top:4px; margin-bottom:26px; }
  .login-form .form-field{ margin-bottom:16px; }
  .login-form label{ font-size:12.5px; font-weight:600; color:var(--ink-600); display:block; margin-bottom:6px; }
  .login-form input{
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink-900);
  }
  .login-form input:focus{ outline:none; border-color:var(--violet-500); box-shadow:0 0 0 3px var(--violet-100); }
  .login-row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .login-remember{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-600); }
  .login-forgot{ font-size:12.5px; color:var(--violet-700); font-weight:600; }
  .login-forgot:hover{ text-decoration:underline; }
  .login-submit{
    width:100%; padding:12px; border-radius:var(--radius-sm); background:var(--violet-700); color:#fff;
    font-size:13.5px; font-weight:600; border:1px solid var(--violet-700);
  }
  .login-submit:hover{ background:var(--violet-800); }
  .login-error{
    display:none; background:var(--danger-bg); color:var(--danger); font-size:12px; font-weight:600;
    padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:16px;
  }
  .login-error.show{ display:block; }
  .login-footer{ text-align:center; font-size:11px; color:var(--ink-400); margin-top:22px; }
  .app{ display:none; }
  .app.visible{ display:flex; }

  /* ---------- Dashboard indicators ---------- */
  .indicator-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-top:22px;
  }
  .indicator-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;
    text-align:left; transition:box-shadow .15s ease, border-color .15s ease, transform .1s ease;
  }
  .indicator-card:hover{ border-color:var(--violet-500); box-shadow:0 6px 18px rgba(45,27,78,0.12); transform:translateY(-1px); }
  .indicator-card .ind-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .indicator-card .ind-icon{
    width:38px; height:38px; border-radius:9px; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center;
  }
  .indicator-card .ind-icon svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .indicator-card .ind-label{ font-size:12px; color:var(--ink-400); font-weight:500; margin-bottom:6px; }
  .indicator-card .ind-value{ font-family:'Fraunces', serif; font-size:23px; font-weight:600; color:var(--ink-900); }
  .indicator-card .ind-link{ font-size:11.5px; color:var(--violet-700); font-weight:600; margin-top:10px; }

  .indicator-table-section{ margin-bottom:4px; }
  .indicator-table-section h3{ font-size:13px; font-weight:600; color:var(--ink-600); margin-bottom:8px; }
  .indicator-table-section .data-table{ font-size:12.5px; }
  .indicator-table-section .data-table th, .indicator-table-section .data-table td{ padding:9px 14px; }

  .summary-tables-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px;
  }
  .summary-tables-grid.single-col{ grid-template-columns:1fr; }
  @media (max-width: 880px){ .summary-tables-grid{ grid-template-columns:1fr; } }
  .summary-section h3{
    font-family:'Fraunces', serif; font-size:15.5px; font-weight:600; color:var(--ink-900); margin-bottom:10px;
  }
  .summary-section .data-table td:first-child, .summary-section .data-table th:first-child{ font-weight:600; }
  .summary-section .data-table tfoot td{
    font-weight:700; color:var(--violet-700); background:var(--violet-100); border-top:1px solid var(--violet-200);
  }
  .mtab{
    padding:10px 16px 12px; font-size:13.5px; font-weight:500; color:var(--ink-400);
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .mtab:hover{ color:var(--violet-700); }
  .mtab.active{ color:var(--violet-700); border-bottom-color:var(--violet-700); font-weight:600; }

  .panel{ display:none; }
  .panel.active{ display:block; }

  /* ---------- Section header w/ controls ---------- */
  .section-controls{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    margin-bottom:20px;
  }
  .day-nav{ display:flex; align-items:center; gap:10px; }
  .day-nav-btn{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--line); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center; background:var(--white);
  }
  .day-nav-btn:hover{ background:var(--violet-100); border-color:var(--violet-200); }
  .day-nav-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
  .day-label{ min-width:190px; text-align:center; }
  .day-label .d1{ font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--ink-900); text-transform:capitalize; }
  .day-label .d2{ font-size:11.5px; color:var(--ink-400); }
  .today-btn{
    padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--violet-700); color:var(--violet-700);
    font-size:12.5px; font-weight:600; background:var(--white);
  }
  .today-btn:hover{ background:var(--violet-700); color:#fff; }

  .schedule-controls-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .kpi-chip-row.inline{ margin-bottom:0; }

  .quick-range{ display:flex; gap:6px; flex-wrap:wrap; }
  .qr-btn{
    padding:7px 13px; border-radius:20px; border:1px solid var(--line); font-size:12.5px; color:var(--ink-600);
    background:var(--white); font-weight:500;
  }
  .qr-btn:hover{ border-color:var(--violet-500); color:var(--violet-700); }
  .qr-btn.active{ background:var(--violet-700); border-color:var(--violet-700); color:#fff; }

  .date-range-inputs{ display:flex; align-items:center; gap:8px; }
  .date-range-inputs label{ font-size:11.5px; color:var(--ink-400); display:block; margin-bottom:3px; }
  .date-range-inputs input[type=date]{
    padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-900); font-size:13px;
    background:var(--white);
  }
  .date-range-inputs .to{ color:var(--ink-400); font-size:12px; padding-top:16px; }
  .incomplete-right-group{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

  .toolbar-row{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px;
  }

  /* ---------- Schedule (Citas del día) ---------- */
  .schedule{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  }
  .slot{
    display:flex; border-bottom:1px solid var(--line);
  }
  .slot:last-child{ border-bottom:none; }
  .slot-time{
    width:88px; flex-shrink:0; padding:16px; font-size:12.5px; color:var(--ink-400); font-weight:600;
    border-right:1px solid var(--line); background:var(--lavender-50);
  }
  .slot-body{ flex:1; padding:10px 16px; display:flex; flex-direction:column; gap:8px; }
  .slot.empty .slot-body{ display:flex; align-items:center; padding:16px; color:var(--ink-400); font-size:12.5px; font-style:italic; }
  .appt-card{
    display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--lavender-50);
  }
  .appt-time{ font-size:12px; color:var(--ink-400); width:44px; flex-shrink:0; font-weight:600; }
  .appt-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex-shrink:0;
    font-family:'Fraunces', serif;
  }
  .appt-info{ flex:1; min-width:0; }
  .appt-info .name{ font-size:13.5px; font-weight:600; color:var(--ink-900); }
  .appt-info .meta{ font-size:12px; color:var(--ink-400); }
  .status-badge{
    padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0;
  }
  .status-confirmada{ background:var(--success-bg); color:var(--success); }
  .status-pendiente{ background:var(--gold-100); color:#8a6a29; }
  .status-cancelada{ background:var(--danger-bg); color:var(--danger); }
  .status-en-curso{ background:var(--violet-100); color:var(--violet-700); }
  .status-concluida{ background:var(--slate-bg); color:var(--slate); }
  .status-pagado{ background:var(--success-bg); color:var(--success); }
  .status-parcial{ background:var(--sky-bg); color:var(--sky); }
  .status-vencido{ background:var(--danger-bg); color:var(--danger); }

  /* ---------- Table (Citas incompletas) ---------- */
  .data-table{
    width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
    overflow:hidden;
  }
  .data-table thead th{
    text-align:left; font-size:11.5px; color:var(--ink-400); font-weight:600; padding:12px 16px;
    background:var(--lavender-50); border-bottom:1px solid var(--line);
  }
  .data-table tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-900); vertical-align:middle; }
  .data-table tbody tr:last-child td{ border-bottom:none; }
  .data-table tbody tr:hover{ background:var(--lavender-50); }
  .patient-cell{ display:flex; align-items:center; gap:10px; }
  .patient-cell .mini-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--violet-100); color:var(--violet-700);
    display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
    font-family:'Fraunces', serif; flex-shrink:0;
  }
  .missing-tag{
    display:inline-block; padding:3px 9px; border-radius:5px; background:var(--danger-bg); color:var(--danger);
    font-size:11px; font-weight:600; margin:2px 4px 2px 0;
  }
  .link-action{ color:var(--violet-700); font-weight:600; font-size:12.5px; }
  .link-action:hover{ text-decoration:underline; }
  .link-action svg{ width:12px; height:12px; stroke:currentColor; fill:none; vertical-align:-2px; margin-right:4px; }

  /* ---------- Tasks ---------- */
  .subtabs{ display:flex; gap:6px; margin-bottom:18px; background:var(--violet-100); padding:4px; border-radius:9px; width:fit-content; }
  .stab{
    padding:8px 16px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--violet-700);
  }
  .stab.active{ background:var(--white); box-shadow:0 1px 2px rgba(45,27,78,0.12); }
  .stab .count{ opacity:.6; font-weight:500; }

  .task-list{ display:flex; flex-direction:column; gap:10px; }
  .task-card{
    display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius-md);
  }
  .task-check{
    width:20px; height:20px; border-radius:5px; border:1.5px solid var(--violet-200); flex-shrink:0; margin-top:1px;
  }
  .task-check.done{ background:var(--success); border-color:var(--success); }
  .task-body{ flex:1; min-width:0; }
  .task-body .t{ font-size:13.5px; font-weight:600; color:var(--ink-900); margin-bottom:3px; }
  .task-body .t.done-text{ text-decoration:line-through; color:var(--ink-400); }
  .task-body .meta{ font-size:12px; color:var(--ink-400); display:flex; gap:12px; flex-wrap:wrap; }
  .priority-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
  .p-alta{ background:var(--danger); }
  .p-media{ background:var(--gold-500); }
  .p-baja{ background:var(--ink-400); }
  .due-chip{
    padding:5px 11px; border-radius:16px; font-size:11.5px; font-weight:600; flex-shrink:0; white-space:nowrap;
  }
  .due-today{ background:var(--gold-100); color:#8a6a29; }
  .due-ok{ background:var(--violet-100); color:var(--violet-700); }
  .due-overdue{ background:var(--danger-bg); color:var(--danger); }

  .empty-state{
    text-align:center; padding:60px 20px; color:var(--ink-400);
  }
  .empty-state .serif{ font-size:16px; color:var(--ink-600); margin-bottom:6px; }
  .empty-state p{ font-size:12.5px; }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:var(--violet-200); border-radius:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }

  /* ---------- Mobile menu button / sidebar backdrop (hidden on desktop) ---------- */
  .mobile-menu-btn{ display:none; }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(20,10,35,0.5); z-index:399;
  }
  .sidebar-backdrop.show{ display:block; }

  /* Let module tab bars scroll instead of overflowing the page */
  .module-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .module-tabs::-webkit-scrollbar{ display:none; }

  /* ================= RESPONSIVE: TABLET / MOBILE ================= */
  @media (max-width: 860px){
    .modal-box.wide{ max-width:94vw; }
  }

  @media (max-width: 768px){
    body{ font-size:13.5px; }

    .mobile-menu-btn{ display:flex; }

    .sidebar{
      position:fixed; top:0; bottom:0; left:0; width:248px;
      transform:translateX(-100%); transition:transform .25s ease; z-index:400;
    }
    .sidebar.mobile-open{ transform:translateX(0); }
    .sidebar.collapsed{ width:248px; }
    .sidebar.collapsed .brand-text, .sidebar.collapsed .nav-item span.label, .sidebar.collapsed .collapse-btn .label{
      display:block;
    }
    .sidebar-foot{ display:none; }

    .main{ width:100%; min-width:0; }

    .topbar{ padding:0 14px; height:58px; }
    .topbar-title h1{ font-size:16px; }
    .topbar-title .date{ display:none; }
    .topbar-right{ gap:8px; }
    .user-chip .who{ display:none; }
    .user-chip{ padding-left:8px; }
    .icon-btn{ width:32px; height:32px; }

    .content{ padding:16px 14px 32px; }

    /* Data tables: allow horizontal scroll instead of breaking layout */
    .data-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .data-table thead, .data-table tbody{ display:table; width:100%; }
    .data-table th, .data-table td{ white-space:nowrap; }

    .scheduling-grid-table{ min-width:640px; }

    /* Stack form rows */
    .form-row{ flex-direction:column; gap:0; }
    .form-row .form-field{ max-width:none !important; }

    /* Modals: near full-width, tighter padding */
    .modal-overlay{ padding:10px; }
    .modal-box, .modal-box.wide{ max-width:100%; }
    .modal-head, .modal-foot{ padding:16px 16px; }
    .modal-body{ padding:16px; }
    .modal-foot{ flex-wrap:wrap; }

    /* Patient detail modal: vertical tabs become a horizontal scroll strip */
    .pd-body-layout{ flex-direction:column; gap:14px; }
    .pd-body-layout .module-tabs{
      flex-direction:row; width:100%; border-right:none; padding-right:0;
      border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:0;
    }
    .pd-body-layout .mtab{ flex-shrink:0; border-left:none; border-bottom:2px solid transparent; }
    .pd-body-layout .mtab.active{ border-left:none; border-bottom-color:var(--violet-700); background:var(--violet-100); }
    .patient-header-card{ padding:16px; }
    .patient-header-fields{ gap:12px 16px; }

    /* Home / module tab bars */
    .mtab{ padding:9px 12px 10px; font-size:12.5px; white-space:nowrap; }

    .section-controls{ flex-wrap:wrap; gap:12px; }
    .day-label{ min-width:0; }
    .schedule-controls-right{ width:100%; justify-content:space-between; }

    .kpi-chip-row{ flex-wrap:wrap; }
    .indicator-grid, .patient-kpi-grid, .report-card-grid, .catalog-card-grid{ grid-template-columns:1fr 1fr; }
    .summary-tables-grid{ grid-template-columns:1fr; }

    .toolbar-row{ flex-wrap:wrap; gap:10px; }
    .incomplete-right-group{ width:100%; justify-content:space-between; }
    .date-range-inputs{ flex-wrap:wrap; }

    .login-card{ padding:32px 22px 26px; }

    .audio-freq-input-grid{ grid-template-columns:repeat(3, 1fr); }
  }

  @media (max-width: 420px){
    .indicator-grid, .patient-kpi-grid, .report-card-grid, .catalog-card-grid{ grid-template-columns:1fr; }
    .patient-header-card{ flex-direction:column; align-items:flex-start; }
    .patient-header-fields{ border-left:none; padding-left:0; padding-top:14px; border-top:1px solid var(--line); width:100%; }
    .login-card{ padding:26px 18px 22px; }
    .login-logo-wrap{ width:88px; height:88px; }
  }