:root{
    /* Paleta basada en el logotipo (marca blanca/monocromática): se ancla
       en un teal profundo tomado como "tinta" del isotipo, con un dorado
       cálido de acento y un coral suave para estados de alerta. */
    --bg:#F2F6F5;
    --surface:#FFFFFF;
    --surface-2:#E8F0EE;
    --ink:#0F2E2B;
    --ink-soft:#456461;
    --muted:#7B928E;
    --line:#DCE7E4;
    --primary:#0B4F4A;
    --primary-dark:#083A36;
    --primary-tint:#DEEEEB;
    --accent:#D6A24A;
    --accent-tint:#FAF0DA;
    --success:#2E8F6E;
    --success-tint:#E3F4EC;
    --warn:#C97C2A;
    --warn-tint:#FBEEDD;
    --danger:#BD4A3E;
    --danger-tint:#FAEAE7;
    --info:#3B6FA8;
    --info-tint:#E6EDF7;
    --radius:10px;
    --shadow:0 1px 2px rgba(15,46,43,.06), 0 8px 24px -12px rgba(15,46,43,.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0; overflow-x:hidden;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
  /* Todo campo de importe (celda, total, o input donde se captura un monto)
     se alinea a la derecha en toda la app, modales e impresiones. */
  .num, th.num{text-align:right;}
  input.num{text-align:right;}
  a{color:inherit;}
  ::selection{background:var(--primary-tint);}

  /* ---- Barras de desplazamiento (modernas, delgadas, en línea con la
     paleta de la app) — Firefox vía scrollbar-width/-color, resto de
     navegadores vía ::-webkit-scrollbar en todo el sistema. ---- */
  *{scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{
    background-color:var(--line); border-radius:100px;
    border:2px solid transparent; background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{background-color:var(--ink-soft); background-clip:padding-box;}
  ::-webkit-scrollbar-corner{background:transparent;}
  /* El menú lateral (navlist) tiene fondo oscuro: su scrollbar necesita
     un tono claro translúcido en vez del tono claro-sobre-claro por
     defecto. */
  .navlist{scrollbar-color:rgba(190,218,214,.35) transparent;}
  .navlist::-webkit-scrollbar-thumb{background-color:rgba(190,218,214,.35);}
  .navlist::-webkit-scrollbar-thumb:hover{background-color:rgba(190,218,214,.6);}

  /* ---- Layout shell ---- */
  #app{display:flex; min-height:100vh;}
  .sidebar{
    width:240px; flex-shrink:0; background:var(--primary-dark);
    color:#EAF4F2; display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:22px 20px 18px 20px;
    border-bottom:1px solid rgba(234,244,242,.12);
  }
  .brand{flex-direction:column; align-items:flex-start; gap:0;}
  .brand-logo-img{width:100%; max-width:190px; height:auto; display:block; margin-bottom:8px;}
  .brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; letter-spacing:.2px;}
  .brand-sub{font-size:10.5px; color:#9CC4BF; margin-top:1px; letter-spacing:.4px; text-transform:uppercase;}
  .topbar-logo{height:26px; width:auto; display:block;}

  nav.navlist{padding:14px 10px; flex:1; overflow-y:auto;}
  .navitem{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:8px; cursor:pointer;
    color:#BEDAD6; font-weight:500; font-size:13.5px;
    margin-bottom:2px; transition:background .12s ease, color .12s ease;
    user-select:none;
  }
  .navitem:hover{background:rgba(234,244,242,.08); color:#fff;}
  .navitem.active{background:var(--accent); color:#2A1D06; font-weight:600;}
  .navitem .ic{width:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .nav-sep{height:1px; background:rgba(234,244,242,.1); margin:10px 6px;}

  /* Iconos de línea (menú lateral y pie de sidebar): tamaño y grosor
     consistentes, heredan el color del texto (currentColor). */
  .ic svg, .nav-ic{width:17px; height:17px; display:block; flex-shrink:0;}
  .sidebar-foot button .ic{display:flex; align-items:center; justify-content:center;}
  .sidebar-foot button .ic svg{width:15px; height:15px;}

  .sidebar-foot{padding:14px 18px 18px; border-top:1px solid rgba(234,244,242,.12); font-size:11px; color:#7FA9A3;}
  .sidebar-foot button{
    background:none; border:1px solid rgba(234,244,242,.25); color:#BEDAD6;
    padding:6px 9px; border-radius:7px; font-size:11px; cursor:pointer; width:100%;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .sidebar-foot button:hover{background:rgba(234,244,242,.08);}

  .main{flex:1; min-width:0; display:flex; flex-direction:column;}
  header.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; background:var(--surface); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:20;
  }
  header.topbar h1{margin:0; font-size:19px; font-weight:700;}
  header.topbar .subt{margin:2px 0 0; color:var(--muted); font-size:12.5px;}
  .top-right{display:flex; align-items:center; gap:10px;}

  .bell-wrap{position:relative;}
  .bell-btn{
    position:relative; width:36px; height:36px; border-radius:9px; border:1px solid var(--line);
    background:var(--surface); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;
  }
  .bell-btn:hover{background:var(--surface-2);}
  .bell-dot{
    position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%;
    background:var(--danger); border:1.5px solid var(--surface);
  }
  .bell-panel{
    position:absolute; right:0; top:44px; width:340px; max-height:400px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
    display:none; z-index:50;
  }
  .bell-panel.open{display:block;}
  .bell-panel h4{margin:0; padding:12px 14px; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); border-bottom:1px solid var(--line);}
  .bell-item{padding:11px 14px; border-bottom:1px solid var(--line); font-size:12.5px;}
  .bell-item:last-child{border-bottom:none;}
  .bell-item .to{color:var(--primary); font-weight:600;}
  .bell-item .when{color:var(--muted); font-size:11px; margin-top:3px;}
  .bell-empty{padding:24px 14px; text-align:center; color:var(--muted); font-size:12.5px;}

  .content{padding:24px 28px 60px; flex:1;}
  .section{display:none;}
  .section.active{display:block;}

  /* ---- Buttons ---- */
  .btn{
    display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px;
    border:1px solid transparent; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit;
    transition:filter .1s ease, background .1s ease;
  }
  .btn:active{filter:brightness(.94);}
  .btn-primary{background:var(--primary); color:#fff;}
  .btn-primary:hover{background:var(--primary-dark);}
  .btn-outline{background:var(--surface); border-color:var(--line); color:var(--ink);}
  .btn-outline:hover{background:var(--surface-2);}
  .btn-ghost{background:transparent; color:var(--ink-soft); padding:7px 10px;}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-danger{background:var(--danger-tint); color:var(--danger);}
  .btn-danger:hover{background:#f6dad5;}
  .btn-sm{padding:6px 10px; font-size:12px;}
  .btn:disabled{opacity:.45; cursor:not-allowed;}

  /* ---- Cards / stats ---- */
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
  .stat-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; box-shadow:var(--shadow);
  }
  .stat-card .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600;}
  .stat-card .val{font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; margin-top:6px;}
  .stat-card .sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .stat-card.accent .val{color:var(--primary);}

  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
    border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap;
  }
  .panel-head h3{margin:0; font-size:15.5px; font-weight:700;}
  .panel-head .desc{font-size:12px; color:var(--muted); margin-top:2px;}
  .panel-body{padding:16px 18px;}
  .panel-body.flush{padding:0;}

  /* ---- Tables ---- */
  table{width:100%; border-collapse:collapse; font-size:13px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
    font-weight:600; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);
    white-space:nowrap;
  }
  tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#FAFCFB;}
  .row-actions{display:flex; gap:6px; justify-content:flex-end;}
  .empty-row td{padding:38px 16px; text-align:center; color:var(--muted);}
  .empty-row .ic{font-size:26px; display:block; margin-bottom:8px;}

  /* Ventana con scroll vertical mostrando ~15 registros a la vez, usada
     en todas las tablas/grids del sistema (Agenda, Pacientes, Doctores,
     Consultorios, Tratamientos, Reportes, Historial, Comisiones, Gastos,
     Corte diario, Presupuestos, Usuarios). */
  .table-scroll-15{max-height:630px; overflow-y:auto;}
  .table-scroll-15 thead th{position:sticky; top:0; z-index:5;}

  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px;
    font-size:11.5px; font-weight:600; white-space:nowrap;
  }
  .b-warn{background:var(--warn-tint); color:var(--warn);}
  .b-success{background:var(--success-tint); color:var(--success);}
  .b-danger{background:var(--danger-tint); color:var(--danger);}
  .b-info{background:var(--info-tint); color:var(--info);}
  .b-muted{background:var(--surface-2); color:var(--ink-soft);}

  /* ---- Forms ---- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:12px; font-weight:600; color:var(--ink-soft);}
  .field .hint{font-size:11px; color:var(--muted);}
  input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=tel], select, textarea{
    font-family:inherit; font-size:13.5px; padding:9px 11px; border-radius:8px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink); width:100%;
  }
  textarea{resize:vertical; min-height:74px;}
  input:focus, select:focus, textarea:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);}
  .filters-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:end;}

  /* ---- Buscador de pacientes (autocompletar) ----
     position:fixed + coordenadas por JS: el campo suele vivir dentro de un
     .panel o .modal-body con overflow:hidden/auto, que recortaría (dejaría
     invisible) un desplegable position:absolute normal. */
  .pb-wrap{position:relative;}
  .pb-list{
    position:fixed; max-height:220px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
    display:none; z-index:400;
  }
  .pb-list.open{display:block;}
  .pb-item{padding:9px 11px; font-size:13px; cursor:pointer;}
  .pb-item:hover, .pb-item.active{background:var(--surface-2);}
  .pb-empty{padding:9px 11px; font-size:12.5px; color:var(--muted);}
  .filters-bar .field{min-width:150px;}

  /* ---- Modal ---- */
  .overlay{
    position:fixed; inset:0; background:rgba(19,43,41,.45); display:none;
    align-items:flex-start; justify-content:center; z-index:100; padding:5vh 16px; overflow-y:auto;
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--surface); border-radius:14px; width:100%; max-width:560px;
    box-shadow:0 24px 60px -12px rgba(19,43,41,.35); animation:pop .14s ease;
  }
  .modal.modal-wide{max-width:801px;} /* 560px + 30% + 10% adicional, p.ej. presupuestos */
  @keyframes pop{from{transform:translateY(6px); opacity:0;} to{transform:translateY(0); opacity:1;}}
  .modal-head{padding:18px 20px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
  .modal-head h3{margin:0; font-size:16.5px;}
  .modal-close{background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted); line-height:1;}
  .modal-body{padding:18px 20px; max-height:66vh; overflow-y:auto;}
  .modal-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
  .calc-box{
    background:var(--primary-tint); border:1px solid #cfe6e2; border-radius:9px; padding:12px 14px; margin-top:4px;
    font-size:12.5px; color:var(--primary-dark);
  }
  .calc-box .line{display:flex; justify-content:space-between; padding:2px 0;}
  .calc-box .line.total{font-weight:700; border-top:1px dashed #b9dbd5; margin-top:5px; padding-top:6px;}

  /* ---- Toast ---- */
  #toast-wrap{position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px;}
  .toast{
    background:var(--ink); color:#EAF4F2; padding:11px 16px; border-radius:9px; font-size:13px;
    box-shadow:var(--shadow); max-width:340px; animation:slidein .15s ease;
  }
  @keyframes slidein{from{transform:translateX(16px); opacity:0;} to{transform:translateX(0); opacity:1;}}

  .empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
  .empty-state .ic{font-size:34px; display:block; margin-bottom:10px;}
  .empty-state h4{margin:0 0 4px; color:var(--ink);}

  .tag-pill{background:var(--surface-2); border-radius:100px; padding:2px 9px; font-size:11.5px; color:var(--ink-soft);}
  .divider{height:1px; background:var(--line); margin:16px 0;}
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

  /* ---- Calendario ---- */
  .cal-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--line);}
  .cal-nav{display:flex; align-items:center; gap:8px;}
  .cal-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; min-width:170px; text-align:center;}
  .seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
  .seg button{border:none; background:var(--surface); padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);}
  .seg button.active{background:var(--primary); color:#fff;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
  .cal-dow{padding:9px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; background:var(--surface-2); border-bottom:1px solid var(--line); text-align:center;}
  .cal-cell{
    min-height:104px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:7px; vertical-align:top; cursor:pointer; transition:background .1s ease;
  }
  .cal-cell:hover{background:#FAFCFB;}
  .cal-cell.other-month{background:#FAFBFB; color:var(--muted);}
  .cal-cell.today{background:var(--primary-tint);}
  .cal-daynum{font-size:12px; font-weight:700; margin-bottom:5px;}
  .cal-chip{
    display:block; font-size:10.5px; padding:2px 6px; border-radius:5px; margin-bottom:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;
  }
  .cal-more{font-size:10.5px; color:var(--muted); font-weight:600; margin-top:2px;}
  .cal-week-cols{display:grid; grid-template-columns:repeat(7,1fr);}
  .cal-week-col{border-right:1px solid var(--line); min-height:300px; padding:8px;}
  .cal-week-col:last-child{border-right:none;}
  .cal-week-head{text-align:center; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line);}
  .cal-week-head .d{font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:700; letter-spacing:.3px;}
  .cal-week-head .n{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin-top:2px;}
  .cal-week-head.today .n{color:var(--primary);}
  .cal-appt{
    background:var(--surface-2); border-radius:7px; padding:6px 8px; margin-bottom:6px; font-size:11.5px; cursor:pointer;
    border-left:3px solid var(--primary);
  }
  .cal-appt:hover{filter:brightness(.97);}
  .cal-appt .t{font-weight:700;}
  .cal-appt .p{color:var(--ink-soft);}
  .cal-empty-day{font-size:11px; color:var(--muted); text-align:center; padding-top:20px;}
  .btn-excel{background:var(--success-tint); color:var(--success);}
  .btn-excel:hover{background:#d1ecdf;}
  #loginBox{max-width:420px; width:100%; overflow:hidden;}
  /* El logotipo es blanco/monocromático (pensado para la sidebar oscura);
     sobre el fondo blanco del modal se perdía, así que aquí lleva su
     propia franja oscura para tener contraste. */
  .login-brand{text-align:center; padding:30px 20px 22px; background:var(--primary-dark); border-radius:14px 14px 0 0;}
  .login-logo{max-width:170px; width:100%; height:auto; display:block; margin:0 auto 14px;}
  .login-brand h3{margin:0; font-size:16.5px; font-weight:700; color:#EAF4F2;}

  /* ---- Responsive: hamburger + off-canvas drawer (mobile) ---- */
  .hamburger-btn{
    display:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--line);
    background:var(--surface); cursor:pointer; font-size:16px; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .hamburger-btn:hover{background:var(--surface-2);}
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(15,46,43,.45); z-index:140;
  }
  .sidebar-backdrop.show{display:block;}

  /* Tables: let each panel body scroll horizontally instead of breaking the page layout */
  .panel-body.flush{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table{min-width:560px;}

  /* ===== Tablet: 681px – 1024px → icon-only sidebar rail ===== */
  @media (max-width:1024px){
    .stat-grid{grid-template-columns:1fr 1fr;}
    .two-col{grid-template-columns:1fr;}
    .sidebar{width:72px;}
    .brand-name,.brand-sub,.navitem span.label{display:none;}
    .brand{align-items:center;}
    .brand-logo-img{max-width:38px;}
    .navitem{justify-content:center; padding:12px 8px;}
    .navitem .ic svg{width:19px; height:19px;}
    .sidebar-foot button .label{display:none;}
    .sidebar-foot button .ic svg{width:16px; height:16px;}
    .content{padding:20px;}
  }

  /* ===== Mobile: ≤680px → off-canvas drawer, stacked layout ===== */
  @media (max-width:680px){
    .hamburger-btn{display:flex;}
    .sidebar{
      position:fixed; top:0; left:0; height:100vh; width:250px; z-index:150;
      transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar .brand-name,.sidebar .brand-sub,.sidebar .navitem span.label{display:block;}
    .sidebar .brand{align-items:flex-start;}
    .sidebar .brand-logo-img{max-width:170px;}
    .sidebar .navitem{justify-content:flex-start; padding:11px 12px;}
    .sidebar .sidebar-foot button{font-size:11px;}
    .sidebar .sidebar-foot button .label{display:inline;}
    .sidebar .sidebar-foot button::before{content:none;}

    .topbar{padding:12px 14px; gap:8px;}
    .topbar > div:first-child{min-width:0; flex:1;}
    .topbar h1{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .topbar .subt{display:none;}
    .topbar-logo{height:22px;}
    .top-right{gap:6px; flex-shrink:0;}
    #userBadgeWrap > div{display:none;} /* hide name/role text, keep logout button */
    .content{padding:14px 14px 40px;}
    .stat-grid{grid-template-columns:1fr 1fr; gap:10px;}
    .stat-card{padding:12px 13px;}
    .stat-card .val{font-size:21px;}
    .panel-head{padding:13px 14px; flex-direction:column; align-items:stretch; gap:8px;}
    .panel-head > div:last-child{display:flex; flex-wrap:wrap; gap:6px;}
    .panel-head > .btn{width:100%; justify-content:center;}
    .panel-head .btn{flex:1; justify-content:center; white-space:nowrap;}
    .panel-body{padding:13px 14px;}
    .filters-bar{gap:8px;}
    .filters-bar .field{min-width:0; flex:1 1 130px;}

    table{min-width:520px; font-size:12.5px;}
    thead th{padding:8px 10px;}
    tbody td{padding:9px 10px;}

    .overlay{padding:0; align-items:flex-end;}
    .modal{max-width:100%; width:100%; border-radius:16px 16px 0 0; max-height:92vh; display:flex; flex-direction:column;}
    .modal-body{max-height:none; flex:1;}
    .form-grid{grid-template-columns:1fr; gap:11px;}

    #loginOverlay{padding:16px; align-items:center;}
    #loginBox{max-width:100%;}

    .cal-toolbar{flex-direction:column; align-items:stretch; gap:10px;}
    .cal-toolbar > div{justify-content:center;}
    .cal-title{min-width:0;}
    .cal-cell{min-height:64px; padding:4px;}
    .cal-daynum{font-size:11px;}
    .cal-chip{font-size:9px; padding:1px 4px;}
    .cal-dow{padding:6px 4px; font-size:9.5px;}
    .cal-week-cols{grid-template-columns:1fr; display:flex; flex-direction:column;}
    .cal-week-col{border-right:none; border-bottom:1px solid var(--line); min-height:0;}
    .cal-week-col:last-child{border-bottom:none;}

    .bell-panel{width:min(320px, 92vw); right:-8px;}
  }

  @media (max-width:400px){
    .stat-grid{grid-template-columns:1fr;}
    .logout-btn .label{display:none;}
    .logout-btn{padding:7px 9px;}
    .top-right{gap:4px;}
    .topbar h1{font-size:14.5px;}
  }