:root{--gold:#C9A96E;--gold-l:#E8D5B0;--gold-d:#8B6914;--dark:#0A0E14;--d2:#111827;--d3:#1C2333;--d4:#252F3F;--tx:#F0F4F8;--muted:#6B7A8D;--ok:#34D399;--warn:#FBBF24;--err:#F87171;--info:#60A5FA;--bdr:rgba(201,169,110,0.15);}
nav.blue{background:#0066cc;color:#fff;padding:10px 0;display:flex;justify-content:center;}
nav.blue a{color:#fff;margin:0 15px;text-decoration:none;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--dark);color:var(--tx);font-family:'DM Sans',sans-serif;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--d2) 0%,var(--dark) 70%);}
.login-box{background:var(--d2);border:1px solid var(--bdr);border-radius:20px;padding:44px 40px;width:min(420px,calc(100% - 40px));text-align:center;box-shadow:0 24px 64px rgba(0,0,0,0.5);}
.login-logo{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;color:var(--gold);letter-spacing:4px;margin-bottom:6px;}
.login-sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:36px;}
.login-field{text-align:left;margin-bottom:16px;}
.login-field label{font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;display:block;margin-bottom:5px;}
.login-field input{width:100%;background:var(--d3);border:1px solid var(--bdr);border-radius:9px;padding:11px 14px;color:var(--tx);font-size:13px;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s;}
.login-field input:focus{border-color:var(--gold);background:var(--d4);}
.login-btn{width:100%;background:var(--gold);color:var(--dark);border:none;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;margin-top:8px;}
.login-btn:hover{background:var(--gold-l);}
.login-eye{position:absolute;right:10px;top:32px;background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:.5;transition:opacity .15s;}
.login-eye:hover{opacity:1;}
.login-link{color:var(--gold);font-size:11px;text-decoration:none;opacity:.7;transition:opacity .15s;}
.login-link:hover{opacity:1;text-decoration:underline;}
.login-err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--err);padding:10px 14px;border-radius:8px;font-size:12px;margin-bottom:14px;display:none;}
.login-ver{font-size:10px;color:var(--muted);margin-top:20px;}

/* Login responsive */
@media(max-width:767px){
  .login-box{padding:32px 24px;width:calc(100% - 32px);border-radius:16px;}
  .login-logo{font-size:28px;}
  .login-sub{font-size:10px;margin-bottom:28px;}
  .login-field input{padding:13px 14px;font-size:14px;}
  .login-btn{padding:14px;font-size:15px;}
}

/* APP */
.app{display:none;grid-template-columns:260px 1fr;min-height:100vh;transition:grid-template-columns .3s cubic-bezier(.4,0,.2,1);}
.app.sb-collapsed{grid-template-columns:70px 1fr;}

/* SIDEBAR */
.sb{background:var(--d2);border-right:1px solid var(--bdr);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;overflow-x:hidden;width:260px;min-width:260px;transition:width .3s cubic-bezier(.4,0,.2,1),min-width .3s cubic-bezier(.4,0,.2,1);}
.sb.collapsed{width:70px;min-width:70px;}
.sb-logo{padding:22px 18px 16px;border-bottom:1px solid var(--bdr);transition:padding .3s cubic-bezier(.4,0,.2,1);}
.sb-logo h1{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--gold);letter-spacing:2px;white-space:nowrap;transition:opacity .2s ease;}
.sb-logo p{font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;white-space:nowrap;transition:opacity .2s ease;}
.sb.collapsed .sb-logo-text{opacity:0;pointer-events:none;position:absolute;visibility:hidden;}
.sb.collapsed .sb-logo{padding:22px 12px 16px;}
.sb-nav{padding:10px 8px;flex:1;}
.sb-sec{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;padding:10px 10px 5px;white-space:nowrap;overflow:hidden;transition:opacity .2s ease;padding-left:10px;padding-right:10px;}
.sb.collapsed .sb-sec{opacity:0;height:0;padding:0;margin:0;overflow:hidden;}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;margin-bottom:1px;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;color:var(--muted);font-size:12px;position:relative;min-height:40px;}
.sb-item:hover{background:var(--d3);color:var(--tx);}
.sb-item.on{background:rgba(201,169,110,.1);color:var(--gold);border:1px solid var(--bdr);}
.sb-cnt{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:10px;background:var(--d4);flex-shrink:0;transition:opacity .2s ease,visibility .2s ease;}
.sb.collapsed .sb-cnt{opacity:0;pointer-events:none;position:absolute;visibility:hidden;}
.sb.collapsed .sb-label{opacity:0;pointer-events:none;position:absolute;visibility:hidden;}
.sb.collapsed .sb-item{justify-content:center;padding:8px;}
.sb-foot{padding:8px 8px 10px;margin-top:auto;border-top:1px solid var(--bdr);transition:padding .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:4px;}
.sb.collapsed .sb-foot{padding:8px;}
.sb-foot .sb-item{justify-content:flex-start;width:100%;}

/* Topbar 3-column layout with centered user (Gemini style) */
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--d2);border-bottom:1px solid var(--bdr);padding:12px 24px;position:sticky;top:0;z-index:50;}
.tb-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.tb-c{display:flex;align-items:center;justify-content:center;flex:1;}
.tb-r{display:flex;align-items:center;gap:7px;flex:1;justify-content:flex-end;}
.tb-title{font-family:'Cormorant Garamond',serif;font-size:20px;}
.tb-sub{font-size:10px;color:var(--muted);margin-top:1px;}

/* Topbar user pill (Gemini style — centered) */
.tb-user{display:flex;align-items:center;gap:8px;}
.tb-user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;color:#fff;flex-shrink:0;}
.tb-user-info{line-height:1.3;text-align:center;}
.tb-user-name{font-size:12px;font-weight:500;white-space:nowrap;}
.tb-user-clinic{font-size:9px;color:var(--muted);white-space:nowrap;}

/* Sidebar collapse floating toggle (desktop only) — sits on the edge like a chat sidebar */
.sb-collapse-floating{display:none;position:fixed;top:50%;left:260px;transform:translateY(-50%);background:var(--d2);border:1px solid var(--bdr);border-left:none;color:var(--muted);width:18px;height:44px;border-radius:0 8px 8px 0;cursor:pointer;z-index:100;padding:0;transition:left .3s cubic-bezier(.4,0,.2,1),color .15s;align-items:center;justify-content:center;}
.sb-collapse-floating:hover{color:var(--gold);background:var(--d3);}
.sb-collapse-floating .sb-collapse-icon{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:10px;line-height:1;}
.app.sb-collapsed .sb-collapse-floating{left:70px;}
.app.sb-collapsed .sb-collapse-floating .sb-collapse-icon{transform:rotate(180deg);}

/* Tooltip for collapsed sidebar */
.sb-item::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--d4);color:var(--tx);padding:5px 10px;border-radius:6px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;z-index:300;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.sb-item:hover::after{opacity:1;visibility:visible;}
.sb.collapsed .sb-item::after{opacity:0;visibility:hidden;}
.sb.collapsed .sb-item:hover::after{opacity:1;visibility:visible;}
/* No tooltip on active state to avoid noise */
.sb-item.on::after{display:none;}

/* Sidebar logo tooltip */
.sb-logo::after{content:'CHACONIO';position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--d4);color:var(--gold);padding:5px 10px;border-radius:6px;font-size:12px;font-family:'Cormorant Garamond',serif;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:300;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.sb.collapsed .sb-logo:hover::after{opacity:1;visibility:visible;}

/* MAIN */
.main{display:flex;flex-direction:column;min-width:0;}
.btn{padding:6px 16px;border-radius:7px;font-size:11px;font-weight:500;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .2s;display:inline-flex;align-items:center;gap:5px;}
.btn-g{background:var(--gold);color:var(--dark);}
.btn-g:hover{background:var(--gold-l);}
.btn-gh{background:transparent;color:var(--muted);border:1px solid var(--bdr);}
.btn-gh:hover{border-color:var(--gold);color:var(--gold);}
.btn-ok{background:rgba(52,211,153,.1);color:var(--ok);border:1px solid rgba(52,211,153,.2);}
.btn-icon{background:transparent;border:none;cursor:pointer;padding:2px 4px;font-size:14px;opacity:.7;transition:opacity .2s;}.btn-icon:hover{opacity:1;}
.content{flex:1;padding:22px;}
.pg{display:none;}
.pg.on{display:block;animation:fu .2s ease;}
@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.stat{background:var(--d2);border:1px solid var(--bdr);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden;}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);}
.stat-l{font-size:9px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.stat-v{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold);line-height:1;}
.stat-s{font-size:10px;color:var(--muted);margin-top:3px;}

/* Dashboard grid: citas + pagos side-by-side on desktop, stacked on mobile */
.dash-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;}

/* Reportes charts grid */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}

/* Search inputs */
.search-input{width:300px;}

/* CARDS Y TABLAS */
.card{background:var(--d2);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin-bottom:14px;}
.card-hd{padding:12px 18px;background:var(--d3);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-family:'Cormorant Garamond',serif;font-size:15px;}
.card-body{padding:16px;}
  .tbl-wrap{background:var(--d2);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;overflow-x:auto;}
  .tbl-wrap table{min-width:740px;}
  .table{width:100%;border-collapse:collapse;}
  .table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);}
  table{width:100%;border-collapse:collapse;}
  thead{background:var(--d3);}
  th{padding:8px 14px;text-align:left;font-size:9px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--bdr);}
  td{padding:10px 14px;font-size:12px;border-bottom:1px solid rgba(201,169,110,.04);}
  tr:last-child td{border-bottom:none;}
  tr:hover td{background:rgba(201,169,110,.02);}

  .modal{width:min(100%,700px);max-width:100%;margin:0 auto;}

  .fgrid.c2{grid-template-columns:1fr 1fr;}
  .fgrid.c3{grid-template-columns:1fr 1fr 1fr;}
  .fgrid.c4{grid-template-columns:1fr 1fr 1fr 1fr;}

  /* BADGES */
.b{display:inline-flex;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;}
.b-ok{background:rgba(52,211,153,.1);color:var(--ok);}
.b-warn{background:rgba(251,191,36,.1);color:var(--warn);}
.b-err{background:rgba(248,113,113,.1);color:var(--err);}
.b-gold{background:rgba(201,169,110,.1);color:var(--gold);}
.b-muted{background:rgba(107,122,141,.1);color:var(--muted);}

/* FORMS */
.fg{display:flex;flex-direction:column;gap:4px;}
.fgrid{display:grid;gap:12px;}
.fgrid.c2{grid-template-columns:1fr 1fr;}
.fgrid.c3{grid-template-columns:1fr 1fr 1fr;}
.fgrid.c4{grid-template-columns:1fr 1fr 1fr 1fr;}
.fgrid.c5{grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
.fg.s2{grid-column:span 2;}
.fg.s3{grid-column:span 3;}
.fg.s4{grid-column:span 4;}
label{font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;}
input,select,textarea{background:var(--d3);border:1px solid var(--bdr);border-radius:7px;padding:8px 10px;color:var(--tx);font-size:12px;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--gold);}
input::placeholder,textarea::placeholder{color:var(--muted);}
textarea{resize:vertical;min-height:80px;line-height:1.6;}
select option{background:var(--d3);}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.overlay.on{display:flex;}
.modal{background:var(--d2);border:1px solid var(--bdr);border-radius:14px;width:600px;max-height:88vh;overflow-y:auto;}
.modal-hd{padding:16px 22px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--d2);}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:18px;}
.modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;}
.modal-body{padding:18px 22px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--bdr);display:flex;gap:8px;justify-content:flex-end;}

/* ALERT */
.alert{padding:9px 13px;border-radius:8px;font-size:11px;margin-bottom:12px;line-height:1.5;}
.alert-err{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:var(--err);}
.alert-ok{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);color:var(--ok);}
.alert-info{background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);color:var(--info);}

/* LOADING */
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted);gap:10px;font-size:13px;}
.spin{width:20px;height:20px;border:2px solid var(--bdr);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* EMPTY */
.empty{text-align:center;padding:40px;color:var(--muted);}
.empty-icon{font-size:40px;opacity:.2;margin-bottom:10px;}
.empty-txt{font-size:13px;}

/* PROGRESS */
.prog-bar{background:var(--d4);border-radius:6px;height:6px;overflow:hidden;}
.prog-fill{height:6px;border-radius:6px;transition:width .5s;}

/* BOTTOM NAV (Mobile) */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(17,24,39,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--bdr);z-index:150;padding:0;padding-bottom:env(safe-area-inset-bottom,0);align-items:stretch;}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px calc(6px + env(safe-area-inset-bottom, 0px));min-height:56px;background:none;border:none;cursor:pointer;color:var(--muted);transition:color .2s ease;position:relative;}
.bottom-nav-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gold);border-radius:1px;transition:width .2s ease;}
.bottom-nav-item.on{color:var(--gold);}
.bottom-nav-item.on::before{width:24px;}
.bottom-nav-icon{font-size:20px;line-height:1;}
.bottom-nav-label{font-size:9px;font-weight:500;letter-spacing:.3px;}

/* iOS safe area for mobile content */
.content{padding:22px;padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));}

/* AGENDA — Calendario mensual */
.agenda-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.agenda-nav .nav-arrows{display:flex;gap:6px;}
.agenda-nav .nav-lbl{font-family:'Cormorant Garamond',serif;font-size:15px;min-width:200px;text-align:center;color:var(--tx);}
.agenda-nav .spacer{flex:1;}

/* Month grid */
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;}
.cal-mheader{background:var(--d3);padding:8px 4px;text-align:center;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.cal-mday{background:var(--d2);min-height:60px;padding:6px 4px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;align-items:center;}
.cal-mday:hover{background:rgba(201,169,110,.06);}
.cal-mday.today{background:rgba(201,169,110,.08);}
.cal-mday.today .cal-mday-num{color:var(--gold);font-weight:700;}
.cal-mday.selected{background:rgba(201,169,110,.15);outline:2px solid var(--gold);outline-offset:-2px;border-radius:0;}
.cal-mday.selected .cal-mday-num{color:var(--gold);font-weight:700;}
.cal-mday-other{background:var(--d1);cursor:default;}
.cal-mday-num{font-size:13px;font-weight:500;color:var(--tx);margin-bottom:2px;}

/* Dots */
.cal-mdots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.cal-mdot{width:7px;height:7px;border-radius:50%;background:var(--gold);}
.cal-mdot.tipo-valoracion{background:var(--info);}
.cal-mdot.tipo-tratamiento{background:var(--ok);}
.cal-mdot.tipo-control{background:var(--gold);}
.cal-mdot.tipo-urgencia{background:var(--err);}
.cal-mdot-more{font-size:8px;color:var(--muted);}

/* Day detail (below calendar) */
.cal-day-detail{margin-top:18px;}
.cal-day-detail-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.cal-day-detail-title{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--tx);}
.cal-day-list{display:flex;flex-direction:column;gap:6px;}
.cal-day-item{display:flex;align-items:center;gap:12px;background:var(--d3);border-left:4px solid var(--gold);border-radius:6px;padding:10px 14px;cursor:pointer;transition:background .15s;}
.cal-day-item:hover{background:var(--d4);}
.cal-day-item.tipo-valoracion{border-left-color:var(--info);}
.cal-day-item.tipo-tratamiento{border-left-color:var(--ok);}
.cal-day-item.tipo-control{border-left-color:var(--gold);}
.cal-day-item.tipo-urgencia{border-left-color:var(--err);}
.cal-day-item-hora{font-size:11px;font-weight:600;color:var(--gold);min-width:50px;}
.cal-day-item-info{flex:1;min-width:0;}
.cal-day-item-pac{font-size:13px;color:var(--tx);font-weight:500;}
.cal-day-item-tipo{font-size:10px;color:var(--muted);}
.cal-day-item-estado{flex-shrink:0;}

/* Keep old week-view classes for dashboard mini-view */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;}
.cal-header{background:var(--d3);padding:8px 4px;text-align:center;font-size:9px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.cal-header.today{color:var(--gold);}
.cal-body{background:var(--d2);min-height:100px;padding:6px;}
.cal-body.today{background:rgba(201,169,110,.04);}
.cal-cita{background:var(--d3);border-left:3px solid var(--gold);border-radius:4px;padding:4px 6px;margin-bottom:3px;cursor:pointer;transition:background .15s;}
.cal-cita:hover{background:var(--d4);}
.cal-cita .cal-cita-hora{font-size:9px;font-weight:600;color:var(--gold);}
.cal-cita .cal-cita-pac{font-size:10px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-cita .cal-cita-tipo{font-size:8px;color:var(--muted);}
.cal-cita.tipo-valoracion{border-left-color:var(--info);}
.cal-cita.tipo-tratamiento{border-left-color:var(--ok);}
.cal-cita.tipo-control{border-left-color:var(--gold);}
.cal-cita.tipo-urgencia{border-left-color:var(--err);}
.cal-empty{text-align:center;padding:12px 4px;color:var(--muted);font-size:10px;}

@media(max-width:767px){
  .cal-month-grid{font-size:10px;}
  .cal-mheader{font-size:9px;padding:6px 2px;}
  .cal-mday{min-height:44px;padding:4px 2px;}
  .cal-mday-num{font-size:11px;}
  .cal-mdot{width:5px;height:5px;}
  .cal-mdots{gap:2px;}
  .cal-grid{grid-template-columns:repeat(7,1fr);font-size:10px;}
  .cal-header{font-size:8px;padding:4px 2px;}
  .cal-body{min-height:60px;padding:4px;}
  .cal-cita{padding:2px 4px;}
  .cal-cita .cal-cita-pac{font-size:9px;}
  .cal-cita .cal-cita-tipo{display:none;}
  .agenda-nav{flex-wrap:wrap;gap:6px;}
  .agenda-nav .nav-lbl{font-size:13px;min-width:0;order:-1;width:100%;}
  .cal-day-detail-title{font-size:14px;}
  .cal-day-item{padding:8px 10px;}
  .cal-day-item-pac{font-size:11px;}
}

/* ============ PATIENT DETAIL VIEW ============ */
.pac-detail-bar{margin-bottom:14px;}
.pac-detail-top{display:flex;align-items:center;gap:16px;background:var(--d3);border:1px solid var(--bdr);border-radius:12px;padding:18px;margin-bottom:14px;}
.pac-detail-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#C9A96E,#8B6914);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:#fff;flex-shrink:0;}
.pac-detail-info{flex:1;min-width:0;}
.pac-detail-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--tx);line-height:1.2;}
.pac-detail-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.pac-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:20px;}
.pac-chip{background:var(--d3);border:1px solid var(--bdr);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;}
.pac-chip-icon{font-size:16px;}
.pac-chip-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.pac-chip-val{font-size:13px;color:var(--tx);font-weight:500;word-break:break-word;}
.pac-section{background:var(--d2);border:1px solid var(--bdr);border-radius:10px;margin-bottom:10px;overflow:hidden;}
.pac-section-hd{background:var(--d3);padding:10px 14px;font-size:12px;font-weight:600;color:var(--gold);border-bottom:1px solid var(--bdr);}
.pac-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--bdr);}
.pac-field{background:var(--d2);padding:10px 14px;display:flex;flex-direction:column;gap:2px;}
.pac-field-l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.pac-field-v{font-size:13px;color:var(--tx);font-weight:500;word-break:break-word;}

/* ============ RESPONSIVE BREAKPOINTS ============ */

/* DESKTOP: >= 1024px — sidebar visible + collapse toggle */
@media(min-width:1024px){
  .sb-collapse-floating{display:flex;}
  .mobile-menu-toggle{display:none !important;}
  .mobile-menu-overlay{display:none !important;}
}

/* TABLET: 768px – 1023px — sidebar drawer overlay, no bottom nav */
@media(max-width:1023px) and (min-width:768px){
  .app{grid-template-columns:1fr;}
  .sb{position:fixed;left:0;top:0;width:280px;height:100vh;height:100dvh;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:240;box-shadow:none;background:var(--d2);}
  .sb.collapsed{width:280px;}
  .app.menu-open .sb{transform:translateX(0);box-shadow:18px 0 40px rgba(0,0,0,.35);}
  .app.menu-open .mobile-menu-overlay{display:block;opacity:1;}
  .sb-collapse-floating{display:none !important;}
  .mobile-menu-toggle{display:inline-flex !important;}
  .bottom-nav{display:none !important;}
  .content{padding:18px 20px 24px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fgrid.c4{grid-template-columns:1fr 1fr 1fr;}
  .fgrid.c3{grid-template-columns:1fr 1fr;}
  .fgrid.c2{grid-template-columns:1fr 1fr;}
  .modal{width:min(90%,600px);max-width:600px;}
  .topbar{padding:12px 20px;}
  .tb-r{gap:6px;}
  .tb-r .btn{padding:6px 12px;font-size:10px;}
  .dash-layout{grid-template-columns:1fr 280px;}
  /* Patient detail tablet */
  .pac-chips{grid-template-columns:repeat(3,1fr);gap:10px;}
  .pac-fields{grid-template-columns:repeat(2,1fr);}
  .pac-detail-name{font-size:19px;}
  .pac-detail-top{padding:16px;}
  /* Tables */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* MOBILE: < 768px — drawer sidebar, bottom nav visible */
@media(max-width:767px){
  .app{grid-template-columns:1fr;}
  .sb{position:fixed;left:0;top:0;width:280px;height:100vh;height:100dvh;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:240;box-shadow:none;background:var(--d2);}
  .sb.collapsed{width:280px;}
  .app.menu-open .sb{transform:translateX(0);box-shadow:18px 0 40px rgba(0,0,0,.35);}
  .app.menu-open .mobile-menu-overlay{display:block;opacity:1;}
  .sb-collapse-floating{display:none !important;}
  .mobile-menu-toggle{display:inline-flex !important;}
  .bottom-nav{display:flex;}
  .content{padding:14px;padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));}
  .stats{grid-template-columns:1fr 1fr;}
  .fgrid.c5{grid-template-columns:1fr 1fr;}
  .fgrid.c4{grid-template-columns:1fr 1fr;}
  .fgrid.c3{grid-template-columns:1fr 1fr;}
  .fgrid.c2{grid-template-columns:1fr;}
  .fgrid .fg.s2,.fgrid .fg.s3,.fgrid .fg.s4{grid-column:span 2;}
  .modal{width:calc(100% - 16px);max-width:100%;margin:0 8px;border-radius:12px;max-height:95vh;max-height:95dvh;}
  .modal-body{padding:14px;}
  .modal-hp{padding:12px 16px;}
  .modal-footer{padding:12px 16px;flex-direction:column;align-items:stretch;gap:8px;}
  .modal-footer .btn{width:100%;padding:10px;font-size:12px;}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:4px;}
  .tb-l{flex:1 1 auto;min-width:0;}
  .tb-c{flex:1 1 100%;order:3;justify-content:center;padding-top:4px;}
  .tb-title{font-size:17px;}
  .tb-r{flex-wrap:wrap;gap:6px;flex:1 1 auto;justify-content:flex-end;}
  .tb-r .btn{padding:6px 10px;font-size:10px;gap:3px;}
  .dash-layout{grid-template-columns:1fr;}
  .charts-grid{grid-template-columns:1fr;}
  .search-input{width:100%;}

  /* Patient detail mobile */
  .pac-detail-top{flex-wrap:wrap;gap:12px;padding:14px;text-align:center;justify-content:center;}
  .pac-detail-info{text-align:center;}
  .pac-detail-name{font-size:17px;}
  .pac-chips{grid-template-columns:repeat(2,1fr);gap:8px;}
  .pac-chip{padding:10px 12px;}
  .pac-chip-val{font-size:12px;}
  .pac-fields{grid-template-columns:1fr;}
  .pac-field{padding:8px 12px;}

  /* Agenda mobile */
  .cal-month-grid{font-size:10px;}
  .cal-mheader{font-size:8px;padding:5px 1px;}
  .cal-mday{min-height:40px;padding:3px 1px;}
  .cal-mday-num{font-size:10px;}
  .cal-mdot{width:5px;height:5px;}
  .cal-mdots{gap:2px;}
  .agenda-nav{gap:6px;}
  .agenda-nav .nav-lbl{font-size:13px;min-width:0;order:-1;width:100%;}
  .cal-day-detail-title{font-size:14px;}
  .cal-day-item{padding:8px 10px;}
  .cal-day-item-pac{font-size:11px;}

  /* Tables: inline card style instead of horizontal scroll */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl-wrap table{min-width:0;font-size:11px;}
  .tbl-wrap th,.tbl-wrap td{padding:8px 6px;font-size:10px;}
  .tbl-wrap th{font-size:8px;}
  /* Presupuestos & Caja: keep action buttons scrollable */
  #pres-wrap table{min-width:680px;}
  #caja-wrap table{min-width:600px;}

  /* Canvas / plantillas on mobile */
  #m-plantilla{width:100% !important;max-width:100% !important;margin:0 !important;max-height:100vh !important;max-height:100dvh !important;border-radius:0 !important;height:100vh !important;height:100dvh !important;top:0 !important;}
  #m-plantilla .modal-hd{flex-wrap:wrap;gap:8px;padding:12px 14px;}
  #m-plantilla .modal-hd input{width:100% !important;}
  #m-plantilla .modal-body > div:last-child{display:none !important;}
  .canvas-row.c3{grid-template-columns:1fr 1fr;}
  .canvas-row.c2{grid-template-columns:1fr;}
  .comp-item{padding:8px 12px;font-size:12px;}
  .canvas-comp{padding:6px 10px;}
  .canvas-comp .comp-label{font-size:8px;}
  .canvas-comp input,.canvas-comp textarea,.canvas-comp select{padding:6px 8px;font-size:12px;}

  /* Dashboard mini-calendar week view */
  .cal-grid{grid-template-columns:repeat(7,1fr);font-size:10px;}
  .cal-header{font-size:8px;padding:4px 2px;}
  .cal-body{min-height:56px;padding:3px;}
  .cal-cita{padding:2px 4px;margin-bottom:2px;}
  .cal-cita .cal-cita-pac{font-size:9px;}
  .cal-cita .cal-cita-tipo{display:none;}
}

.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:230;opacity:0;transition:opacity .3s ease;}

/* Tablet & Mobile: hide desktop-only sidebar collapse button */
@media(max-width:1023px){
  .sb-collapse-floating{display:none !important;}
}

::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--d2);}::-webkit-scrollbar-thumb{background:var(--d4);border-radius:2px;}::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* FORM TABS (patient form) */
.form-tabs{display:flex;gap:4px;padding:0 0 12px;border-bottom:1px solid var(--bdr);flex-wrap:wrap;position:sticky;top:0;background:var(--d2);z-index:1;}
.form-tab{padding:8px 14px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px 6px 0 0;font-size:12px;transition:all .2s;}
.form-tab:hover{background:var(--d3);color:var(--text);}
.form-tab.active{background:var(--d3);color:var(--gold);font-weight:600;border-bottom:2px solid var(--gold);}
.form-tab-content{display:none;padding-top:12px;}
.form-tab-content.active{display:block;}

/* LOGO GALLERY */
.logo-gallery{display:flex;flex-wrap:wrap;gap:12px;}
.logo-gallery-item{position:relative;border:2px solid var(--bdr);border-radius:8px;padding:4px;cursor:pointer;transition:border-color .2s;}
.logo-gallery-item:hover{border-color:var(--gold);}
.logo-gallery-item.active{border-color:var(--gold);}
.logo-gallery-item img{max-width:100px;max-height:80px;border-radius:4px;display:block;}
.logo-gallery-item .check{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;}
.logo-gallery-item .filename{font-size:9px;color:var(--muted);text-align:center;margin-top:4px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logo-dropzone{border:2px dashed var(--bdr);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s;min-width:200px;}
.logo-dropzone:hover,.logo-dropzone.dragover{border-color:var(--gold);}

/* PRINT HEADER (logo + clinic name) — visible only when printing */
.print-header{display:none;align-items:center;gap:16px;padding:16px 0;border-bottom:2px solid #ddd;margin-bottom:16px;}
.print-header img{max-height:50px;}
.print-header .clinic-name{font-size:18px;font-weight:700;color:#333;}
.print-header .clinic-info{font-size:12px;color:#666;}

@media print {
  /* Hide everything except the print document */
  .sb, .topbar, .bottom-nav, .pg, .pg.on,
  .overlay:not(#m-print-pres), #m-print-pres:not(.on),
  .btn, .tb-r, .no-print, .mobile-menu-overlay, .mobile-menu-toggle,
  .modal-hd, .modal-close, .modal-footer,
  .card, .stat, .stats, .dash-layout, .tbl-wrap,
  .pac-detail, .pac-detail-bar, .pac-chips, .pac-section,
  .loading, .empty, .spin, .alert,
  .sb-collapse-floating, #evol-header, #pres-wrap, #caja-wrap,
  .bottom-nav, .mobile-menu-toggle,
  #print-pres-body > *:not(.print-doc),
  .print-doc .no-print { display:none !important; }

  /* Show print modal cleanly */
  #m-print-pres.on {
    display:flex !important; position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    background:#fff !important; z-index:99999 !important;
    align-items:flex-start !important; justify-content:center !important;
    padding:0 !important; margin:0 !important; overflow:visible !important;
  }
  #m-print-pres.on .modal {
    box-shadow:none !important; max-width:100% !important; width:100% !important;
    padding:15mm !important; background:#fff !important; border:none !important;
    border-radius:0 !important; display:block !important;
  }
  #m-print-pres.on .modal-body {
    max-height:none !important; overflow:visible !important; padding:0 !important;
    display:block !important;
  }
  #m-print-pres.on .modal-hd { display:none !important; }

  #app-wrap { display:block !important; }
  .main { display:block !important; margin:0 !important; }
  .content { display:block !important; padding:0 !important; }

  body { background:#fff !important; color:#000 !important; margin:0 !important; padding:0 !important; }

  .print-header { display:flex !important; }
  .print-doc, .print-doc * { visibility:visible !important; }
  .print-doc table { width:100%; border-collapse:collapse; }
  .print-doc th, .print-doc td { border:1px solid #ddd; padding:6px 8px; color:#000; }
  .print-doc th { background:#f5f5f5; font-weight:600; }
}

/* CANVAS EDITOR — Plantillas */
.comp-item{padding:6px 12px;font-size:11px;cursor:grab;color:var(--muted);transition:all .15s;border-left:2px solid transparent;}.comp-item:hover{background:var(--d3);color:var(--tx);border-left-color:var(--gold);}
.comp-item:active{cursor:grabbing;}
.canvas-dropzone{transition:background .2s;}.canvas-dropzone.drag-over{background:rgba(201,169,110,.08) !important;}
.canvas-comp{position:relative;background:var(--d3);border:1px solid var(--bdr);border-radius:8px;margin-bottom:6px;padding:8px 12px;cursor:move;transition:border-color .15s;}
.canvas-comp:hover{border-color:var(--gold);}
.canvas-comp .comp-actions{position:absolute;top:4px;right:4px;display:none;gap:2px;}.canvas-comp:hover .comp-actions{display:flex;}
.canvas-comp .comp-actions button{background:var(--d4);border:none;color:var(--muted);padding:2px 5px;border-radius:4px;cursor:pointer;font-size:10px;}.canvas-comp .comp-actions button:hover{color:var(--tx);}
.canvas-comp .comp-label{font-size:9px;color:var(--gold);font-weight:600;margin-bottom:4px;text-transform:uppercase;}
.canvas-comp input,.canvas-comp textarea,.canvas-comp select{background:var(--d2);border:1px solid var(--bdr);border-radius:4px;padding:4px 8px;color:var(--tx);font-size:11px;width:100%;font-family:'DM Sans',sans-serif;}
.canvas-comp textarea{min-height:32px;resize:vertical;}
.canvas-row{display:grid;gap:6px;}.canvas-row.c2{grid-template-columns:1fr 1fr;}.canvas-row.c3{grid-template-columns:1fr 1fr 1fr;}
.canvas-row>.canvas-comp{margin-bottom:0;}
.canvas-separator{height:1px;background:var(--bdr);margin:8px 0;border-radius:0;}.canvas-separator .comp-actions{display:none !important;}
.canvas-title{font-family:'Cormorant Garamond',serif;color:var(--gold);}.canvas-title h3{font-size:15px;margin:0;}.canvas-title p{font-size:12px;margin:0;color:var(--tx);}
.canvas-field{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.2);border-radius:6px;padding:6px 12px;font-size:11px;color:var(--info);display:inline-flex;align-items:center;gap:6px;}