:root {
  color-scheme: light;
  --hv-page: #f4f7fb;
  --hv-surface: #ffffff;
  --hv-ink: #10253d;
  --hv-muted: #647689;
  --hv-line: #dfe7ed;
  --hv-green: #16835d;
  --hv-green-deep: #0e694b;
  --hv-green-soft: #eaf6f0;
  --hv-green-neon: #53dc87;
  --hv-navy: #10253d;
  --hv-navy-deep: #091a2e;
  --hv-navy-soft: #eaf0f7;
  --hv-turquoise: #159b9b;
  --hv-orange: #f47b28;
  --hv-orange-soft: #fff1e5;
  --hv-shadow: 0 16px 42px rgba(18, 38, 58, .07);
  --hv-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background: var(--hv-page);
}

html::before,
html::after {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  content: "";
}

html::before {
  inset: -5%;
  background:
    radial-gradient(ellipse 24% 19% at 18% 26%, rgba(69, 209, 126, .19), rgba(69, 209, 126, .055) 38%, transparent 76%),
    radial-gradient(ellipse 19% 27% at 78% 70%, rgba(244, 123, 40, .18), rgba(244, 123, 40, .052) 42%, transparent 78%),
    radial-gradient(ellipse 31% 18% at 58% 16%, rgba(16, 37, 61, .10), rgba(16, 37, 61, .028) 42%, transparent 78%),
    radial-gradient(ellipse 17% 24% at 42% 70%, rgba(21, 155, 155, .105), rgba(21, 155, 155, .03) 42%, transparent 78%);
  background-size: 120% 120%, 125% 125%, 120% 120%, 130% 125%;
  background-position: 0% 12%, 100% 80%, 50% 0%, 18% 72%;
  filter: blur(26px);
  animation: hv-ambient-clouds 32s ease-in-out infinite;
}

html::after {
  inset: -3%;
  background:
    radial-gradient(ellipse 18% 30% at 82% 32%, rgba(244, 123, 40, .13), rgba(244, 123, 40, .03) 48%, transparent 80%),
    radial-gradient(ellipse 28% 16% at 24% 76%, rgba(83, 220, 135, .13), rgba(83, 220, 135, .03) 48%, transparent 82%),
    radial-gradient(ellipse 20% 23% at 56% 54%, rgba(16, 37, 61, .075), rgba(16, 37, 61, .02) 48%, transparent 82%),
    radial-gradient(ellipse 15% 26% at 43% 24%, rgba(21, 155, 155, .085), rgba(21, 155, 155, .02) 48%, transparent 82%);
  background-size: 125% 130%, 135% 125%, 125% 130%, 130% 130%;
  background-position: 100% 12%, 0% 90%, 72% 25%, 22% 8%;
  filter: blur(36px);
  opacity: .72;
  animation: hv-soft-shadows 41s ease-in-out infinite;
}

body {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: var(--hv-ink) !important;
  background: transparent !important;
  font-family: var(--hv-font) !important;
}

body * {
  font-family: var(--hv-font) !important;
}

body > * {
  position: relative;
  z-index: 1;
}

@keyframes hv-ambient-clouds {
  0%, 100% { background-position: 0% 12%, 100% 80%, 50% 0%, 18% 72%; background-size: 120% 120%, 125% 125%, 120% 120%, 130% 125%; transform: translate3d(-2vw, 1vh, 0) rotate(-1deg) scale(1); opacity: .72; }
  27% { background-position: 42% 0%, 72% 100%, 18% 34%, 64% 42%; background-size: 138% 126%, 112% 142%, 135% 112%, 112% 138%; transform: translate3d(1vw, -2vh, 0) rotate(1deg) scale(1.025); opacity: .9; }
  56% { background-position: 100% 64%, 14% 32%, 82% 78%, 100% 0%; background-size: 110% 140%, 139% 112%, 114% 136%, 142% 110%; transform: translate3d(3vw, 1vh, 0) rotate(-1.5deg) scale(.99); opacity: .66; }
  79% { background-position: 34% 100%, 0% 18%, 28% 100%, 48% 12%; background-size: 132% 114%, 118% 134%, 130% 118%, 116% 140%; transform: translate3d(-1vw, 2vh, 0) rotate(1deg) scale(1.035); opacity: .86; }
}

@keyframes hv-soft-shadows {
  0%, 100% { background-position: 100% 12%, 0% 90%, 72% 25%, 22% 8%; background-size: 125% 130%, 135% 125%, 125% 130%, 130% 130%; transform: translate3d(2vw, -1vh, 0) rotate(1deg) scale(1); opacity: .62; }
  24% { background-position: 52% 74%, 42% 0%, 12% 62%, 88% 42%; background-size: 142% 116%, 118% 138%, 137% 116%, 114% 142%; transform: translate3d(-2vw, 2vh, 0) rotate(-1deg) scale(1.035); opacity: .82; }
  53% { background-position: 0% 38%, 100% 28%, 88% 100%, 34% 82%; background-size: 116% 142%, 144% 116%, 118% 138%, 140% 115%; transform: translate3d(-3vw, -1vh, 0) rotate(1.4deg) scale(.985); opacity: .55; }
  78% { background-position: 66% 0%, 24% 76%, 32% 14%, 100% 100%; background-size: 136% 118%, 116% 140%, 132% 119%, 118% 136%; transform: translate3d(1vw, -2vh, 0) rotate(-.8deg) scale(1.025); opacity: .78; }
}

::selection { color: #123047; background: #ffd1aa; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(21, 155, 155, .35);
  outline-offset: 2px;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.settings-link,
.back-button,
.module-action {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:hover:not(:disabled),
.settings-link:hover,
.back-button:hover {
  transform: translateY(-2px) scale(1.035);
}

button:active:not(:disabled),
.settings-link:active,
.back-button:active,
.module-action:active {
  transform: translateY(0) scale(.98);
}

input, select, textarea {
  color: var(--hv-ink);
  border-color: var(--hv-line) !important;
  border-radius: 12px !important;
  background-color: var(--hv-surface) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--hv-turquoise) !important;
  box-shadow: 0 0 0 4px rgba(21, 155, 155, .11) !important;
  outline: 0;
}

.primary-button,
.submit-btn,
#loginBtn,
.top-actions button,
#linkRegistro,
#linkPanel {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: linear-gradient(110deg, var(--hv-navy-deep), var(--hv-navy)) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(9, 26, 46, .19), inset 3px 0 0 rgba(244, 123, 40, .9);
}

.primary-button:hover,
.submit-btn:hover,
#loginBtn:hover,
.top-actions button:hover,
#linkRegistro:hover,
#linkPanel:hover {
  background: linear-gradient(110deg, var(--hv-navy), #173957) !important;
  box-shadow: 0 10px 24px rgba(9, 26, 46, .23), 0 0 15px rgba(83, 220, 135, .12), inset 3px 0 0 var(--hv-green-neon);
  transform: translateY(-2px) scale(1.035);
}

.module-action#linkRegistro,
.module-action#linkPanel {
  border: 1px solid rgba(16, 37, 61, .11) !important;
  background: rgba(248, 250, 252, .94) !important;
  color: var(--hv-navy) !important;
  box-shadow: 0 3px 9px rgba(16, 37, 61, .045) !important;
}

.module-action#linkRegistro:hover,
.module-action#linkPanel:hover {
  border-color: rgba(21, 155, 155, .34) !important;
  background: #fff !important;
  color: var(--hv-green-deep) !important;
  box-shadow: 0 7px 16px rgba(16, 37, 61, .08) !important;
  transform: translateY(-2px) scale(1.02);
}

.secondary-button,
.small-button,
.secondary-action {
  border: 1px solid var(--hv-line) !important;
  background: #f7fafb !important;
  color: var(--hv-ink) !important;
}

.export-actions button,
.table-header button {
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: var(--hv-navy) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 rgba(244, 123, 40, .8);
}

.export-actions button:hover,
.table-header button:hover {
  background: #173957 !important;
  transform: translateY(-2px) scale(1.035);
}

.secondary-button:hover,
.small-button:hover,
.secondary-action:hover {
  border-color: rgba(21, 155, 155, .45) !important;
  background: var(--hv-green-soft) !important;
}

.back-button {
  border: 1px solid var(--hv-line);
  background: rgba(255, 255, 255, .88) !important;
  color: var(--hv-ink) !important;
  box-shadow: 0 5px 16px rgba(18, 38, 58, .06);
  animation: hv-control-accent 10s ease-in-out infinite;
}

.back-button:hover { background: var(--hv-green-soft) !important; }

.login-panel,
.info-panel,
.form-box,
.tab-panel,
.brand-top,
.catalog-row,
.user-row,
#registrationCard,
#dashboardCard,
.same-password-dialog,
.settings-dialog,
.recovery-dialog,
#kpis > div,
#incomeDetails,
#unitsDetails,
#pieDetails {
  border-color: var(--hv-line) !important;
  background-color: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--hv-shadow) !important;
}

.login-panel, .info-panel, .form-box, .tab-panel { border-radius: 22px !important; }

#incomeSection,
#unitsSection,
#pieSection,
#insightSection,
#tableSection,
.export-box {
  margin: 18px 0;
  padding: clamp(16px, 2.7vw, 24px);
  border: 1px solid var(--hv-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(18, 38, 58, .045);
}

#incomeSection h3,
#unitsSection h3,
#pieSection h3,
#insightSection h3,
#tableSection h3,
.export-box h3 {
  margin-top: 0;
  color: var(--hv-ink) !important;
  font-size: 17px;
  letter-spacing: -.02em;
}

#kpis > div {
  position: relative;
  overflow: hidden;
  border-radius: 17px !important;
  box-shadow: 0 10px 24px rgba(18, 38, 58, .06) !important;
}

#kpis > div:nth-child(4n + 1) { border-top: 3px solid var(--hv-green) !important; }
#kpis > div:nth-child(4n + 2) { border-top: 3px solid var(--hv-turquoise) !important; }
#kpis > div:nth-child(4n + 3) { border-top: 3px solid var(--hv-orange) !important; }
#kpis > div:nth-child(4n + 4) { border-top: 3px solid #8b9caf !important; }

.registros-panel { border-color: var(--hv-line) !important; box-shadow: var(--hv-shadow) !important; }
.registro-item { border-color: #edf1f4 !important; }
.table-header { margin-top: 0 !important; }

.login-title,
.info-title,
.brand-left h2,
#tituloDashboard,
#tituloSistema,
#registrationCard h2,
#dashboardCard h2,
.page-header h1 {
  color: var(--hv-ink) !important;
  letter-spacing: -.035em;
}

.login-subtitle,
.info-text,
.info-card-text,
.brand-left p,
.brand-right p,
#subtituloDashboard,
#subtituloSistema,
.kpi-label,
.kpi-secondary,
.login-help {
  color: var(--hv-muted) !important;
}

.hv-footer {
  box-sizing: border-box;
  width: min(100%, 1040px);
  margin: 12px auto 0;
  padding: 6px 0 1px;
  border-top: 1px solid rgba(16, 37, 61, .1);
  color: var(--hv-muted);
  line-height: 1;
}
.hv-footer-window { position: relative; width: 100%; height: 88px; overflow: hidden; direction: ltr; }
.hv-footer-entrance { position: absolute; inset: 0; animation: hv-footer-enter var(--hv-footer-entry-duration, 12s) linear both; }
.hv-footer-track { position: absolute; top: 50%; left: 0; display: flex; width: max-content; align-items: center; transform: translate(0, -50%); will-change: transform; animation: hv-footer-loop var(--hv-footer-duration, 60s) linear infinite; animation-delay: var(--hv-footer-entry-duration, 12s); }
.hv-footer-sequence { --hv-footer-gap: 36px; box-sizing: content-box; display: flex; flex: 0 0 auto; width: max-content; align-items: center; gap: var(--hv-footer-gap); padding-right: var(--hv-footer-gap); white-space: nowrap; }
.hv-footer-message { display: block; flex: 0 0 auto; width: max-content; margin: 0; color: var(--hv-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hv-footer-message a { color: var(--hv-navy); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(16, 37, 61, .38); text-underline-offset: 2px; }
.hv-footer-message a:hover { color: var(--hv-orange); text-decoration-color: currentColor; }
.hv-footer-sequence > a { box-sizing: border-box; display: grid; flex: 0 0 auto; width: 144px; height: 80px; padding: 3px 8px; place-items: center; overflow: hidden; border: 1px solid rgba(16, 37, 61, .1); border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(16, 37, 61, .1); transition: opacity .2s ease, filter .2s ease; opacity: .96; }
.hv-footer-sequence > a:hover { opacity: 1; filter: brightness(1.04); }
.hv-footer-sequence img { display: block; width: 128px; height: 72px; object-fit: contain; transform-origin: center; }
.hv-footer-sequence .hv-logo-holding { transform: scale(1.4); }
.hv-footer-sequence .hv-logo-studio { transform: scale(1.55); }
.home-shell .hv-footer { margin-top: auto; }

@keyframes hv-footer-loop {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}

@keyframes hv-footer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 650px) {
  .hv-footer { margin-top: 10px; padding-top: 4px; }
  .hv-footer-window { height: 68px; }
  .hv-footer-sequence { --hv-footer-gap: 24px; }
  .hv-footer-sequence > a { width: 116px; height: 60px; padding: 2px 6px; border-radius: 10px; }
  .hv-footer-sequence img { width: 102px; height: 56px; }
  .hv-footer-message { font-size: 11px; }
}

.info-badge, .brand-badge {
  background: var(--hv-ink) !important;
  box-shadow: inset -3px 0 0 var(--hv-orange);
}

.info-card, .dialog-note, .empty-state {
  border-color: var(--hv-line) !important;
  background-color: #f8fbfc !important;
}

.tab-button.active {
  color: var(--hv-navy) !important;
  border-bottom-color: var(--hv-green-neon) !important;
  box-shadow: inset 0 -2px 0 rgba(83, 220, 135, .28);
}

.state-pill, .user-status {
  background: var(--hv-green-soft) !important;
  color: var(--hv-green-deep) !important;
}

.settings-link {
  border-color: rgba(244, 123, 40, .28);
  color: var(--hv-navy) !important;
  box-shadow: 0 5px 18px rgba(244, 123, 40, .12), inset 2px 0 0 rgba(244, 123, 40, .55);
  animation: hv-control-accent 10s ease-in-out -5s infinite;
}

.settings-link:hover { background-color: var(--hv-green-soft) !important; }

.top-actions button {
  animation: hv-control-accent 10s ease-in-out -2.5s infinite;
}

@keyframes hv-control-accent {
  0%, 100% {
    border-color: rgba(244, 123, 40, .2);
    box-shadow: 0 5px 16px rgba(244, 123, 40, .07), inset 2px 0 0 rgba(244, 123, 40, .35);
  }
  50% {
    border-color: rgba(83, 220, 135, .35);
    box-shadow: 0 6px 19px rgba(83, 220, 135, .11), inset 2px 0 0 rgba(83, 220, 135, .42);
  }
}

.settings-dialog::backdrop, .recovery-dialog::backdrop, .same-password-dialog::backdrop {
  background: rgba(18, 38, 58, .55) !important;
  backdrop-filter: blur(5px);
}

#total { border-color: var(--hv-turquoise) !important; }

.success-box {
  border: 1px solid var(--hv-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--hv-shadow) !important;
}

.success-icon { background: var(--hv-green-soft) !important; color: var(--hv-green-deep) !important; }
.success-title { color: var(--hv-ink) !important; }
.success-text { color: var(--hv-muted) !important; }
.success-icon { box-shadow: 0 0 0 8px var(--hv-orange-soft); }
.success-modal.active .success-icon { animation: hv-success-pop .42s cubic-bezier(.2,.8,.2,1) both; }

@keyframes hv-success-pop {
  from { transform: scale(.82); box-shadow: 0 0 0 2px var(--hv-orange-soft); }
  to { transform: scale(1); box-shadow: 0 0 0 8px var(--hv-orange-soft); }
}

#loadingScreen { background: rgba(244, 247, 251, .96) !important; backdrop-filter: blur(12px); }
.loading-box {
  padding: 28px 24px;
  border: 1px solid var(--hv-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--hv-shadow);
}
.loading-logo { color: var(--hv-ink) !important; }
#loadingProgress { background: linear-gradient(90deg, var(--hv-green), var(--hv-turquoise), var(--hv-orange)) !important; }