:root {
  --premium-bg: #f3f6f5;
  --premium-surface: rgba(255, 255, 255, .92);
  --premium-ink: #08242c;
  --premium-muted: #60727a;
  --premium-green: #087e64;
  --premium-green-dark: #075b4c;
  --premium-mint: #74dfbd;
  --premium-border: rgba(8, 36, 44, .09);
  --premium-shadow: 0 24px 70px rgba(4, 33, 40, .14), 0 3px 12px rgba(4, 33, 40, .05);
  --premium-shadow-soft: 0 12px 36px rgba(4, 33, 40, .08);
  --premium-radius: 24px;
}

html { background: var(--premium-bg); }
body { color: var(--premium-ink); background: var(--premium-bg); }
button, input, select, textarea { font: inherit; }
button, input:not([type="checkbox"]):not([type="radio"]), select { min-height: 52px; }
button { -webkit-tap-highlight-color: transparent; }
body[data-centinela-portal="administracion"] .icon-button--inside { height: 36px; min-height: 36px; }

/* Unified access */
.launch-shell { background: #061f28; }
.brand-stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 18% 15%, rgba(116,223,189,.2), transparent 30%),
              radial-gradient(circle at 85% 78%, rgba(27,142,118,.24), transparent 34%),
              linear-gradient(145deg, #062630 0%, #093b43 58%, #06252e 100%);
}
.brand-stage::before, .brand-stage::after {
  content: ""; position: absolute; z-index: -1; border: 1px solid rgba(153,239,213,.16); border-radius: 50%;
}
.brand-stage::before { width: 520px; height: 520px; right: -250px; top: -120px; }
.brand-stage::after { width: 720px; height: 720px; left: -410px; bottom: -500px; }
.brand-message h1 { max-width: 680px; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
.trust-list li { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.045); backdrop-filter: blur(14px); }
.access-stage { background: radial-gradient(circle at 100% 0, #e1f5ee, transparent 34%), #f6f8f7; }
.access-card {
  border: 1px solid rgba(255,255,255,.88); border-radius: 30px; background: rgba(255,255,255,.88);
  box-shadow: var(--premium-shadow); backdrop-filter: blur(22px); padding: clamp(28px, 4vw, 46px);
}
.access-card h2 { color: var(--premium-ink); letter-spacing: -.045em; }
.access-card input { border-radius: 15px; border-color: rgba(8,36,44,.13); background: rgba(247,250,249,.86); }
.access-card input:focus { border-color: var(--premium-green); box-shadow: 0 0 0 4px rgba(8,126,100,.12); outline: none; }
.primary-action { border-radius: 15px; background: linear-gradient(135deg, #0b8f70, #07604f); box-shadow: 0 13px 28px rgba(8,126,100,.24); }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(8,126,100,.3); }

/* Administration */
body[data-centinela-portal="administracion"] { background: radial-gradient(circle at 80% 0, #e5f4ef, transparent 26%), var(--premium-bg); }
body[data-centinela-portal="administracion"] .sidebar {
  background: radial-gradient(circle at 15% 0, rgba(70,188,155,.2), transparent 24%), linear-gradient(180deg, #082a34 0%, #061d25 100%);
  border-right: 1px solid rgba(255,255,255,.08); box-shadow: 16px 0 50px rgba(5,29,36,.08);
}
body[data-centinela-portal="administracion"] .nav-item { border-radius: 14px; min-height: 48px; margin: 3px 10px; color: rgba(235,247,244,.7); }
body[data-centinela-portal="administracion"] .nav-item:hover { background: rgba(255,255,255,.065); color: #fff; }
body[data-centinela-portal="administracion"] .nav-item.is-active,
body[data-centinela-portal="administracion"] .nav-item.active { background: linear-gradient(135deg, rgba(56,190,153,.25), rgba(56,190,153,.1)); color: #fff; box-shadow: inset 3px 0 var(--premium-mint); }
body[data-centinela-portal="administracion"] .workspace { background: transparent; }
body[data-centinela-portal="administracion"] .topbar {
  border-bottom: 1px solid var(--premium-border); background: rgba(246,249,248,.78); backdrop-filter: blur(22px) saturate(135%);
}
body[data-centinela-portal="administracion"] .content { max-width: 1500px; margin-inline: auto; }
body[data-centinela-portal="administracion"] :is(.panel,.metric-card,.card,.filter-panel,.filters-panel,.data-card) {
  border: 1px solid rgba(255,255,255,.8); border-radius: var(--premium-radius); background: var(--premium-surface); box-shadow: var(--premium-shadow-soft);
}
body[data-centinela-portal="administracion"] .metric-card { overflow: hidden; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
body[data-centinela-portal="administracion"] .metric-card::after { content: ""; position: absolute; inset: auto -20px -35px auto; width: 100px; height: 100px; border-radius: 50%; background: rgba(116,223,189,.12); }
body[data-centinela-portal="administracion"] .metric-card:hover { transform: translateY(-3px); box-shadow: var(--premium-shadow); }
body[data-centinela-portal="administracion"] :is(.button-primary,.primary-button,button.primary) { border-radius: 14px; background: linear-gradient(135deg, var(--premium-green), var(--premium-green-dark)); box-shadow: 0 10px 24px rgba(8,126,100,.2); }
body[data-centinela-portal="administracion"] table { border-collapse: separate; border-spacing: 0; }
body[data-centinela-portal="administracion"] thead th { background: #f5f8f7; color: #536870; }
body[data-centinela-portal="administracion"] tbody tr { transition: background .15s ease; }
body[data-centinela-portal="administracion"] tbody tr:hover { background: #f1faf7; }

/* Resident */
body[data-centinela-portal="residente"] { background: radial-gradient(circle at 85% -5%, #daf3ea, transparent 28%), var(--premium-bg); }
body[data-centinela-portal="residente"] .dashboard { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
body[data-centinela-portal="residente"] .topbar { position: sticky; top: 0; z-index: 20; background: rgba(243,246,245,.76); backdrop-filter: blur(22px) saturate(140%); border-bottom-color: transparent; }
body[data-centinela-portal="residente"] .welcome {
  position: relative; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 30px;
  background: radial-gradient(circle at 90% 10%, rgba(116,223,189,.28), transparent 30%), linear-gradient(135deg, #082b35, #086955);
  box-shadow: var(--premium-shadow); padding: clamp(28px, 5vw, 54px);
}
body[data-centinela-portal="residente"] .welcome::after { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; bottom: -220px; border: 40px solid rgba(255,255,255,.07); border-radius: 50%; }
body[data-centinela-portal="residente"] .welcome h1 { color: #fff; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; }
body[data-centinela-portal="residente"] .welcome p { color: rgba(255,255,255,.76); }
body[data-centinela-portal="residente"] .home-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(12px); }
body[data-centinela-portal="residente"] .quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
body[data-centinela-portal="residente"] .quick,
body[data-centinela-portal="residente"] .card { border: 1px solid rgba(255,255,255,.86); border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: var(--premium-shadow-soft); }
body[data-centinela-portal="residente"] .quick { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
body[data-centinela-portal="residente"] .quick:hover { transform: translateY(-4px); border-color: rgba(8,126,100,.2); box-shadow: var(--premium-shadow); }
body[data-centinela-portal="residente"] .quick-icon { background: #e1f6ef; color: var(--premium-green); }
.resident-dock { display: none; }

/* Modern guard */
.modern-gate { background: radial-gradient(circle at 80% 0, #d9f1e9, transparent 28%), var(--premium-bg); }
.modern-gate .topbar { background: linear-gradient(120deg, #072833, #075847); border: 0; box-shadow: 0 12px 34px rgba(5,35,42,.18); }
.modern-gate .tabs { margin: 18px auto 0; width: min(100% - 32px, 1180px); padding: 6px; border: 1px solid var(--premium-border); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: var(--premium-shadow-soft); backdrop-filter: blur(18px); }
.modern-gate .tab { border-radius: 13px; }
.modern-gate .tab-active { background: var(--premium-ink); color: #fff; box-shadow: 0 8px 20px rgba(8,36,44,.18); }
.modern-gate :is(.verify-panel,.statusbar,.operation-bar,.card,.modal-card) { border-radius: 22px; border-color: rgba(255,255,255,.85); box-shadow: var(--premium-shadow-soft); background: rgba(255,255,255,.9); }
.modern-gate .verify-panel { border-left: 5px solid var(--premium-green); }
.modern-gate .button-primary { border-radius: 14px; background: linear-gradient(135deg, var(--premium-green), var(--premium-green-dark)); box-shadow: 0 10px 24px rgba(8,126,100,.2); }
.modern-gate .login-card { border: 1px solid rgba(255,255,255,.85); border-radius: 28px; box-shadow: var(--premium-shadow); background: rgba(255,255,255,.91); backdrop-filter: blur(22px); }

@media (max-width: 900px) {
  body[data-centinela-portal="residente"] .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .launch-shell { background: linear-gradient(180deg, #062c36 0 31%, #f3f7f5 31%); }
  .brand-stage { min-height: 31vh; padding: calc(22px + env(safe-area-inset-top)) 24px 28px; }
  .brand-message h1 { font-size: clamp(2.15rem, 11vw, 3.2rem); }
  .brand-message p, .trust-list { display: none; }
  .access-stage { margin-top: -20px; border-radius: 28px 28px 0 0; padding: 22px 16px calc(28px + env(safe-area-inset-bottom)); }
  .access-card { border-radius: 24px; padding: 26px 22px; }
  body[data-centinela-portal="residente"] .dashboard { padding-inline: 12px; padding-bottom: 100px; }
  body[data-centinela-portal="residente"] .topbar { margin-inline: -12px; padding-inline: 16px; }
  body[data-centinela-portal="residente"] .welcome { border-radius: 25px; padding: 30px 22px; }
  body[data-centinela-portal="residente"] .welcome h1 { font-size: 2.35rem; }
  body[data-centinela-portal="residente"] .quick-grid { gap: 10px; }
  body[data-centinela-portal="residente"] .quick { min-height: 132px; padding: 16px; }
  .resident-dock {
    position: fixed; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; z-index: 80;
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 68px; padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(250,252,251,.9); box-shadow: 0 18px 54px rgba(5,35,42,.24); backdrop-filter: blur(24px) saturate(140%);
  }
  .resident-dock button { min-height: 54px; border: 0; border-radius: 16px; background: transparent; color: #536870; font-weight: 750; }
  .resident-dock .resident-dock__main { margin-top: -24px; background: linear-gradient(135deg, #0b8f70, #07604f); color: #fff; box-shadow: 0 12px 28px rgba(8,126,100,.32); }
  .modern-gate .topbar { border-radius: 0 0 24px 24px; }
  .modern-gate .tabs { position: sticky; top: 8px; z-index: 30; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 520px) {
  .modern-gate .login {
    display: grid; min-height: 100dvh; align-items: center;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    background: radial-gradient(circle at 85% 8%, rgba(96,224,187,.2), transparent 28%), radial-gradient(circle at 5% 92%, rgba(28,132,113,.24), transparent 32%), #062832;
  }
  .modern-gate .login-card { max-width: 420px; padding: 26px 22px 22px; border-radius: 24px; background: rgba(250,252,251,.97); box-shadow: 0 24px 60px rgba(0,18,25,.3); }
  .modern-gate .brand-row { margin-bottom: 25px; }
  .modern-gate .brand-row .brand-logo { width: 154px; max-height: 42px; }
  .modern-gate .modern-eyebrow { font-size: 10px; letter-spacing: .18em; }
  .modern-gate .login-card h1 { margin-top: 7px; font-size: 30px; letter-spacing: -.04em; }
  .modern-gate .login-card > p:not(.compatibility) { margin: 10px 0 20px; font-size: 14px; line-height: 1.45; }
  .modern-gate .login-card label { margin: 16px 0 7px; font-size: 13px; }
  .modern-gate .login-card input { height: 54px; border: 1px solid rgba(8,36,44,.16); border-radius: 14px; background: #f5f8f7; font-size: 16px; box-shadow: inset 0 1px 2px rgba(8,36,44,.04); }
  .modern-gate .login-card input:focus { border-color: var(--premium-green); outline: none; box-shadow: 0 0 0 4px rgba(8,126,100,.14); }
  .modern-gate .login-card input:-webkit-autofill,
  .modern-gate .login-card input:-webkit-autofill:focus { -webkit-text-fill-color: var(--premium-ink); -webkit-box-shadow: 0 0 0 1000px #f5f8f7 inset; transition: background-color 9999s ease-out; }
  .modern-gate .login-card .button-wide { min-height: 56px; margin-top: 22px; border-radius: 15px; font-size: 17px; }
  .modern-gate .login-card a { color: var(--premium-green-dark); font-size: 14px; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .modern-gate .compatibility { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(8,36,44,.08); font-size: 11px; line-height: 1.45; }

  .modern-gate .app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .modern-gate .topbar { min-height: auto; padding: max(13px, env(safe-area-inset-top)) 16px 14px; border-radius: 0 0 22px 22px; }
  .modern-gate .topbar-brand { float: none; display: flex; align-items: center; }
  .modern-gate .topbar-brand .brand-logo { width: 120px; margin-right: 10px; }
  .modern-gate .topbar-brand b { font-size: 11px; }
  .modern-gate .topbar-actions { float: none; display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .modern-gate .topbar-actions::-webkit-scrollbar { display: none; }
  .modern-gate .topbar-actions > * { flex: 0 0 auto; margin: 0; }
  .modern-gate .topbar-actions #refresh, .modern-gate .topbar-actions #sound { display: none; }
  .modern-gate .topbar-actions .connection { padding: 7px 10px; font-size: 11px; }
  .modern-gate .topbar-actions .button { min-height: 38px; padding: 7px 11px; font-size: 12px; }
  .modern-gate .tabs { position: fixed; z-index: 70; inset: auto 10px max(10px, env(safe-area-inset-bottom)); display: grid; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 6px; border-radius: 20px; background: rgba(250,252,251,.95); box-shadow: 0 16px 48px rgba(4,33,40,.26); }
  .modern-gate .tab { min-width: 0; min-height: 54px; margin: 0; padding: 7px 4px; font-size: 12px; }
  .modern-gate .count { min-width: 21px; margin-left: 2px; padding: 2px 5px; font-size: 10px; }
  .modern-gate .statusbar { margin: 14px 12px 0; padding: 14px 16px; border-radius: 18px; }
  .modern-gate .statusbar strong { font-size: 18px; }
  .modern-gate .statusbar span { font-size: 11px; }
  .modern-gate .operation-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 12px 0; padding: 10px; border: 0; }
  .modern-gate .operation-bar .button { width: 100%; min-height: 48px; margin: 0; padding: 8px; font-size: 12px; }
  .modern-gate .operation-bar span { display: none; }
  .modern-gate .verify-panel { margin: 10px 12px 0; padding: 18px 16px 16px; border-left-width: 0; border-top: 4px solid var(--premium-green); }
  .modern-gate .verify-copy { float: none; padding: 0; }
  .modern-gate .verify-copy strong { font-size: 18px; }
  .modern-gate .verify-copy span { font-size: 12px; }
  .modern-gate .verify-controls { float: none; display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 14px; }
  .modern-gate .verify-controls input { width: 100%; height: 54px; font-size: 23px; }
  .modern-gate .verify-controls .button { width: 100%; min-height: 52px; margin: 0; }
  .modern-gate .mobile-primary-action { grid-row: 1; min-height: 58px !important; background: linear-gradient(135deg, #37d4a9, #7be6c4); font-size: 15px; box-shadow: 0 12px 24px rgba(8,126,100,.22); }
  .modern-gate .content { padding: 12px 12px 24px; }
  .modern-gate .record-card { padding: 16px; border-radius: 18px; }
  .modern-gate .card-head h2 { font-size: 18px; }
  .modern-gate .modal { display: flex; align-items: flex-end; padding: 0; }
  .modern-gate .modal-card { width: 100%; max-height: 88dvh; margin: 0; padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .modern-gate .scanner { align-items: flex-end; padding: 0; }
  .modern-gate .scanner-card { max-height: 94dvh; overflow-y: auto; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .modern-gate .video-frame { min-height: 48dvh; }
  .modern-gate .message { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); left: 12px; max-width: none; }
}