:root{
  --madbe-bg:#f4f7fb;
  --madbe-sidebar:#172033;
  --madbe-sidebar-hover:#263653;
  --madbe-primary:#3867d6;
  --madbe-text:#1f2937;
}
*{box-sizing:border-box}
html,body{min-height:100%;width:100%;margin:0;overflow-x:hidden}
body{background:var(--madbe-bg);color:var(--madbe-text)}
a{word-break:break-word}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea{max-width:100%}

.app-shell{display:flex;min-height:100vh;width:100%}
.sidebar{
  width:240px;
  min-width:240px;
  min-height:100vh;
  background:var(--madbe-sidebar);
  position:sticky;
  top:0;
  align-self:flex-start;
  transition:transform .25s ease;
  z-index:1040;
  padding:1rem;
}
.sidebar a{display:block;color:#dce5f7;text-decoration:none;padding:12px 14px;border-radius:10px;margin-bottom:6px;font-weight:500}
.sidebar a:hover,.sidebar a:focus{background:var(--madbe-sidebar-hover);color:#fff}
.sidebar-mobile-header{display:none;margin-bottom:.75rem;text-align:right}
.content{min-height:100vh;flex:1;max-width:100%;width:calc(100% - 240px);padding:1.5rem}
.mobile-topbar{display:none;background:#fff;border-bottom:1px solid #e8edf5;position:sticky;top:0;z-index:1030;padding:.75rem 1rem}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1035}
.card{border:0;border-radius:18px;box-shadow:0 8px 25px rgba(20,30,50,.08)}
.btn{border-radius:10px}
.question{border-bottom:1px solid #e8edf5;padding:14px 0}
.question label{display:block;margin-bottom:.5rem}
.section-title{background:#edf3ff;border-left:5px solid var(--madbe-primary);padding:12px;border-radius:10px}
.login-box{max-width:420px;margin:7vh auto;padding:0 1rem}
.badge-risk{font-size:.9rem}
.table{vertical-align:middle;margin-bottom:0}
.table thead{background:#edf3ff}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.actions-wrap{display:flex;gap:.5rem;flex-wrap:wrap}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.form-control,.form-select{min-height:42px}

@media (max-width: 1199.98px){
  .sidebar{width:220px;min-width:220px}
  .content{width:calc(100% - 220px);padding:1.25rem}
}
@media (max-width: 991.98px){
  .app-shell{display:block;min-height:100vh}
  .mobile-topbar{display:flex;align-items:center;justify-content:flex-start}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    min-height:100vh;
    width:min(82vw, 285px);
    min-width:0;
    transform:translateX(-105%);
    overflow-y:auto;
    box-shadow:8px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.show{transform:translateX(0)}
  .sidebar-overlay.show{display:block}
  .sidebar-mobile-header{display:block}
  .content{width:100%;padding:1rem}
  .page-heading{align-items:stretch;flex-direction:column}
  .page-heading .btn,.page-heading .actions-wrap{width:100%}
  .page-heading .btn{display:block}
  .card{border-radius:14px}
  .login-box{margin:4vh auto}
  .desktop-only{display:none!important}
  .row>[class*='col-']{margin-bottom:.75rem}
}
@media (max-width: 575.98px){
  h1,.h1{font-size:1.75rem}
  h2,.h2{font-size:1.45rem}
  h3,.h3{font-size:1.25rem}
  .mobile-topbar{padding:.6rem .75rem}
  .content{padding:.75rem}
  .card{padding:1rem!important;border-radius:12px}
  .btn{width:100%;margin-bottom:.35rem}
  .menu-btn{width:auto;margin-bottom:0}
  .actions-wrap{display:grid;grid-template-columns:1fr;gap:.35rem}
  .table{font-size:.9rem;min-width:650px}
  .table th,.table td{white-space:nowrap}
  .question{padding:12px 0}
  .section-title{font-size:1rem}
  .login-box .card{padding:1.25rem!important}
  .form-check{margin-bottom:.4rem}
  .form-check-inline{display:block;margin-right:0}
  .container,.container-fluid{padding-left:.75rem;padding-right:.75rem}
}
@media print{
  .sidebar,.mobile-topbar,.sidebar-overlay,.btn{display:none!important}
  .content{padding:0!important;width:100%!important}
  .card{box-shadow:none;border:1px solid #ddd}
  .app-shell{display:block}
}

/* Mejoras visuales para formularios de pacientes */
.patient-card{
  max-width:980px;
  margin:0 auto;
}
.patient-form .form-label{
  font-weight:600;
  color:#334155;
  margin-bottom:.4rem;
}
.patient-form .form-control{
  border:1px solid #d9e2ef;
  border-radius:12px;
  padding:.7rem .85rem;
  background:#fbfdff;
}
.patient-form .form-control:focus{
  border-color:var(--madbe-primary);
  box-shadow:0 0 0 .2rem rgba(56,103,214,.12);
  background:#fff;
}
.form-actions{
  display:flex;
  gap:.75rem;
  justify-content:flex-end;
  padding-top:.5rem;
}

@media (max-width: 575.98px){
  .patient-card{
    margin:0;
  }
  .patient-form{
    gap:.25rem 0;
  }
  .patient-form .form-label{
    font-size:.92rem;
  }
  .patient-form .form-control{
    min-height:46px;
    font-size:1rem;
  }
  .form-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .form-actions .btn{
    width:100%;
    margin-bottom:0;
  }
}

/* Dashboard responsivo */
.dashboard-stats .stat-card{
  min-height:125px;
  display:flex;
  justify-content:center;
}
.dashboard-chart-card{
  overflow:hidden;
}
.chart-container{
  position:relative;
  width:100%;
  height:340px;
}
@media (max-width: 575.98px){
  .dashboard-stats .stat-card{
    min-height:105px;
  }
  .chart-container{
    height:280px;
  }
  .dashboard-chart-card{
    padding:1rem!important;
  }
}

/* Paginación responsiva */
.pagination{
  gap:.25rem;
}
.page-link{
  border-radius:10px!important;
  margin:0 .1rem;
}
@media (max-width: 575.98px){
  .pagination{
    justify-content:center!important;
  }
  .page-link{
    padding:.45rem .65rem;
    font-size:.9rem;
  }
  .input-group{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .input-group>.form-control,
  .input-group>.btn{
    width:100%;
    border-radius:10px!important;
    margin:0;
  }
}