/* ===== TEMA MEDIBIX v2 - SOLO APARIENCIA ===== */
/* NO se tocan: altura de celdas de agenda (52px), ancho del menu, posiciones, z-index, display */
body{background:radial-gradient(circle at 85% 0%,#dbeafe 0%,rgba(219,234,254,0) 45%),linear-gradient(180deg,#eef4fb 0%,#f6f9fd 100%);background-attachment:fixed}
#login-page{background:radial-gradient(circle at 20% 20%,#38bdf8 0%,rgba(56,189,248,0) 40%),linear-gradient(135deg,#0b1f3a,#1d4ed8)}
.login-box{border-radius:22px;box-shadow:0 30px 80px rgba(2,6,23,.45)}
.btn-login{background:linear-gradient(135deg,#0ea5e9,#2563eb);border-radius:12px;box-shadow:0 8px 20px rgba(37,99,235,.4)}
.sidebar{background:linear-gradient(180deg,#0a1a33 0%,#0f2b52 60%,#123a6b 100%);box-shadow:6px 0 24px rgba(15,23,42,.25)}
.sidebar-logo h2{background:linear-gradient(90deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:22px;letter-spacing:1px}
.sidebar-logo p{color:#93c5fd}
.nav-item{margin:3px 10px;border-radius:12px;border-left:3px solid transparent;color:#cbd5e1;font-weight:500;transition:all .2s}
.nav-item:hover{background:rgba(56,189,248,.14);color:#fff;transform:translateX(3px)}
.nav-item.active{background:linear-gradient(90deg,#0ea5e9,#2563eb);color:#fff;border-left-color:transparent;box-shadow:0 6px 16px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-logout{background:linear-gradient(135deg,#fb7185,#e11d48);border-radius:10px;box-shadow:0 6px 14px rgba(225,29,72,.4)}
.page-header{background:linear-gradient(90deg,#ffffff 0%,#f0f7ff 100%);box-shadow:0 4px 18px rgba(15,23,42,.07);border-bottom:none}
.page-header h1{color:#0b2545;font-weight:800;font-size:22px;letter-spacing:-.3px}
.page-header h1::after{content:"";display:block;width:42px;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#0ea5e9,#2563eb)}
.btn{border-radius:10px;font-weight:600;box-shadow:0 3px 0 rgba(15,23,42,.12),0 6px 14px rgba(15,23,42,.10);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(15,23,42,.12),0 10px 20px rgba(15,23,42,.14);filter:brightness(1.06)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(15,23,42,.12),0 3px 8px rgba(15,23,42,.10)}
.btn-primary{background:linear-gradient(135deg,#38bdf8,#2563eb)}
.btn-success{background:linear-gradient(135deg,#34d399,#059669)}
.btn-danger{background:linear-gradient(135deg,#fb7185,#dc2626)}
.btn-warning{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.btn-secondary{background:linear-gradient(180deg,#ffffff,#f1f5f9);color:#0f172a;box-shadow:inset 0 0 0 1px #dbe3ee,0 3px 0 rgba(15,23,42,.06)}
.agenda-top{border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.08);background:linear-gradient(180deg,#ffffff,#f8fbff)}
.medico-tab{border-radius:999px;font-weight:600;box-shadow:0 2px 6px rgba(15,23,42,.08);transition:transform .15s,box-shadow .15s}
.medico-tab:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(15,23,42,.14)}
.cal-wrap{border-radius:18px;box-shadow:0 12px 32px rgba(15,23,42,.10);border:1px solid #e3ebf5}
.cal-header{background:linear-gradient(180deg,#ffffff,#f5f9ff)}
.cal-header .ch-dia .cd-nom{color:#3b82f6;letter-spacing:1px}
.cal-header .ch-dia .cd-num{color:#0b2545;font-size:20px}
.cal-header .ch-dia.hoy{background:linear-gradient(180deg,#dbeafe,#bfdbfe);box-shadow:inset 0 -4px 0 #2563eb}
.cal-header .ch-dia.hoy .cd-nom,.cal-header .ch-dia.hoy .cd-num{color:#1d4ed8}
.cal-hora{color:#64748b;background:#f7faff}
.cal-cell:hover{background:#eaf3ff}
.cal-cell.fuera,.cal-cell.fuera:hover{background:#e4e9f0}
.cal-cell.bloqueado,.cal-cell.bloqueado:hover{background:#d3dbe6}
.cita-chip{border-radius:12px;border-left:4px solid rgba(255,255,255,.55)!important;box-shadow:0 6px 14px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.35);background-image:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%)!important;text-shadow:0 1px 1px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s,filter .15s}
.cita-chip:hover{filter:brightness(1.08);transform:translateY(-2px)!important;box-shadow:0 12px 24px rgba(15,23,42,.28)}
.blq-chip{border-radius:10px;background:#e3e8ef;box-shadow:inset 0 0 0 1px #d3dae4}
.btn-calc{background:linear-gradient(135deg,#475569,#1e293b);color:#fff}
.cita-card{border-radius:16px;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.cita-card:hover{box-shadow:0 14px 30px rgba(15,23,42,.14)}
.badge{box-shadow:0 1px 3px rgba(15,23,42,.10)}
.tabla{border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.tabla th{background:linear-gradient(180deg,#f0f6ff,#e6efff);color:#1e3a8a}
.tabla tr:hover td{background:#eef6ff}
.modal-overlay{background:rgba(10,26,51,.55);backdrop-filter:blur(4px)}
.modal{border-radius:20px;box-shadow:0 40px 90px rgba(2,6,23,.45)}
.modal-header{background:linear-gradient(90deg,#ffffff,#eef6ff)}
.modal-header h2{color:#0b2545;font-weight:800}
.msec h3{color:#1d4ed8}
.ff input,.ff select,.ff textarea{border-radius:10px;background:#fbfdff}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.sidebar-logo img{height:42px!important;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.7))}
.sidebar-logo img{display:none!important}
.sidebar-nav::after{content:"";display:block;height:240px;width:92%;margin:20px auto 10px;background:url("https://res.cloudinary.com/dasrkfgpq/image/upload/v1792899160/376755093_817150127082271_5330191949305520125_n_isqlpe-Photoroom_c2iqgb.png") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.6))}
/* ===== CELULAR (solo pantallas menores a 768px; en computadora no aplica) ===== */
@media (max-width:768px){
  #app{flex-direction:column}
  .sidebar{position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;z-index:50}
  .sidebar-logo{padding:8px 12px;border-bottom:none;flex-shrink:0}
  .sidebar-logo p{display:none}
  .sidebar-logo h2{font-size:17px}
  .sidebar-nav{display:flex;flex:1;padding:6px 0;overflow-x:auto}
  .sidebar-nav::after{display:none}
  .nav-item{white-space:nowrap;padding:8px 12px;margin:0 3px;border-left:none}
  .sidebar-footer{padding:6px 10px;border-top:none;flex-shrink:0}
  .sidebar-footer p,.sidebar-footer strong{display:none}
  .btn-logout{width:auto;padding:6px 10px}
  .main{margin-left:0;min-height:auto}
  .page-header{position:static;flex-wrap:wrap;gap:8px;padding:12px}
  .page-header > div{flex-wrap:wrap}
  .page-header h1{font-size:18px}
  .page-body{padding:12px}
  .medico-tabs{flex-wrap:nowrap;overflow-x:auto}
  .cal-wrap{max-height:calc(100vh - 230px)}
  .modal-overlay{padding:0}
  .modal{max-width:100%;max-height:100vh;height:100vh;border-radius:0}
  .form-row,.form-row3{grid-template-columns:1fr}
  .tabla{display:block;overflow-x:auto;white-space:nowrap}
}
/* ===== FACTURACION: solo apariencia; la seleccion se marca MAS fuerte ===== */
.srv-item,.pago-btn,.fact-btn{box-shadow:0 3px 0 rgba(15,23,42,.08),0 4px 10px rgba(15,23,42,.06);transition:transform .15s,box-shadow .15s}
.srv-item:hover,.pago-btn:hover,.fact-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(15,23,42,.08),0 8px 16px rgba(15,23,42,.10)}
.srv-item.sel,.pago-btn.sel,.fact-btn.sel{border-color:#2563eb!important;background:#dbeafe!important;box-shadow:0 0 0 3px rgba(37,99,235,.25),0 3px 0 rgba(37,99,235,.35);position:relative}
.srv-item.sel::after,.pago-btn.sel::after,.fact-btn.sel::after{content:"\2713";position:absolute;top:3px;right:6px;font-size:12px;font-weight:800;color:#2563eb}
.total-box{background:linear-gradient(135deg,#0ea5e9,#2563eb);box-shadow:0 10px 24px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.3)}
@media (max-width:768px){
  .modal-body{padding:14px}
  .servicios-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:200px}
  .srv-item{padding:7px}
  .srv-item .sn{font-size:10px}
  .srv-item .sp{font-size:12px}
  .total-box{padding:12px;margin:10px 0}
  .total-box .ta{font-size:26px}
  .pago-btn{padding:8px 4px}
  .pago-btn .pi{font-size:18px}
  .fact-btn{padding:8px;font-size:12px}
}
/* ===== CELULAR: ajustes de agenda y ventana de atencion ===== */
@media (max-width:768px){
  .cal-grid{min-width:536px!important}
  .cal-grid,.cal-header,.cal-row{grid-template-columns:46px repeat(7,minmax(70px,1fr))!important}
  .cal-hora,.cal-header .ch-hora{min-width:0!important;font-size:10px;padding-left:2px;padding-right:4px}
  .cal-header .ch-dia{padding:8px 2px}
  .cal-header .ch-dia .cd-num{font-size:16px}
  .modal{overflow-x:hidden}
  #modal-body [style*="justify-content:space-between"]{flex-wrap:wrap;gap:8px}
  #modal-body [style*="display:flex;gap:6px"],#modal-body [style*="display:flex;gap:8px"]{flex-wrap:wrap}
}
/* ===== CELULAR: ventana sin salirse de la pantalla, X visible ===== */
@media (max-width:768px){
  .modal-overlay{align-items:stretch}
  .modal{height:100%!important;max-height:100%!important}
  .modal-header{padding:12px 14px}
  .modal-close{font-size:30px;padding:2px 12px;color:#0b2545}
}