/* Pulido visual sobrio y responsive previo a producción. */
:root { --surface:#fff; --surface-soft:#f7f9f8; --focus:rgba(7,94,84,.2); }
body { -webkit-font-smoothing:antialiased; }
.card, .feature-card, .pricing-card, .stat-card, .summary-card, .card-panel { box-shadow:0 2px 10px rgba(16,24,40,.055); }
.form-control, .form-select { min-height:42px; border-color:#d6dce0; border-radius:7px; }
.form-control:focus, .form-select:focus { border-color:var(--secondary); box-shadow:0 0 0 .2rem var(--focus); }
.btn { border-radius:7px; font-weight:600; }
.content-header { position:sticky; top:0; z-index:20; }
.content-header h1 { margin:0; font-size:clamp(1.35rem,2vw,1.8rem); }
.sidebar { position:relative; z-index:1040; box-shadow:2px 0 12px rgba(0,0,0,.08); }
.sidebar-brand { min-height:78px; display:flex; flex-direction:column; justify-content:center; }
.sidebar-logo { max-height:48px; object-fit:contain; object-position:left center; }
.sidebar-nav { overflow-y:auto; scrollbar-width:thin; }
.sidebar-nav a { min-height:43px; border-left:3px solid transparent; }
.sidebar-nav a:hover { background:rgba(255,255,255,.1); }
.sidebar-nav a.active { border-left-color:var(--accent); background:rgba(255,255,255,.15); }
.brand-logo-login { display:block; width:min(220px,70%); max-height:74px; object-fit:contain; margin:0 auto 12px; }
.login-page { min-height:100vh; background:linear-gradient(145deg,#eef6f3 0%,#f7f8fa 55%,#fff 100%); }
.login-page .login-card { max-width:780px; }
.login-page .card { border:0; border-radius:14px; box-shadow:0 12px 36px rgba(16,24,40,.1)!important; }
.login-page .nav-pills { padding:4px; background:#eef2f1; border-radius:9px; }
.login-page .nav-pills .nav-link { color:#475467; border-radius:7px; }
.login-page .nav-pills .nav-link.active { color:#fff; background:var(--primary); }
.navbar-logo { max-width:190px; object-fit:contain; }
.mobile-sidebar-toggle { display:none; position:fixed; top:12px; left:12px; z-index:1060; width:42px; height:42px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--primary); box-shadow:0 3px 12px rgba(0,0,0,.12); align-items:center; justify-content:center; }
.mobile-sidebar-overlay { display:none; position:fixed; inset:0; z-index:1035; background:rgba(15,23,42,.45); opacity:0; transition:opacity .2s; }
@media (max-width:767.98px) {
  body.sidebar-open { overflow:hidden; }
  .app-layout { min-height:100vh; height:auto; }
  .app-layout > .sidebar, .app-layout > div > .sidebar { position:fixed; inset:0 auto 0 0; width:min(286px,86vw); min-width:0; height:100dvh; transform:translateX(-105%); transition:transform .22s ease; }
  body.sidebar-open .app-layout > .sidebar, body.sidebar-open .app-layout > div > .sidebar { transform:translateX(0); }
  .sidebar-brand { padding:16px; }
  .sidebar-logo { width:170px; max-height:52px; }
  .sidebar-brand small, .sidebar-section-label, .sidebar-footer .user-name, .sidebar-footer #planBadge, .sidebar-footer .progress { display:block!important; }
  .sidebar-nav a { justify-content:flex-start; padding:10px 16px; font-size:.9rem; }
  .sidebar-nav a .material-symbols-outlined { width:24px; font-size:1.2rem; }
  .sidebar-footer { padding:12px 16px; }
  .sidebar-footer button { font-size:.8rem; }
  .sidebar-footer button::after { content:none; }
  .mobile-sidebar-toggle { display:flex; }
  .mobile-sidebar-overlay { display:block; pointer-events:none; }
  body.sidebar-open .mobile-sidebar-overlay { opacity:1; pointer-events:auto; }
  .main-content { width:100%; min-width:0; }
  .content-header { min-height:66px; padding:12px 14px 12px 66px; align-items:flex-start; gap:10px; }
  .content-body { padding:16px 12px; }
  .table-responsive { border:1px solid var(--border); border-radius:8px; }
  .login-card { padding:22px 0; }
  .login-page .container { padding-left:14px; padding-right:14px; }
  .hero { padding:4.5rem 0 3.5rem!important; }
  .hero-title { font-size:clamp(2rem,10vw,3rem)!important; }
  .navbar-logo { width:145px; height:auto; }
}