@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  --bg: #f4f8fc;
  --bg-soft: #eaf2fb;
  --surface: #ffffff;
  --surface-soft: #f7fbff;
  --text: #10233f;
  --text-muted: #64748b;
  --border: #d8e6f5;
  --border-strong: #b9d1ec;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #0ea5e9;
  --danger: #dc2626;
  --ok: #059669;
  --warning: #b45309;
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text) !important;
  font-family: "Manrope", "Segoe UI", sans-serif !important;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% -10%, rgba(37, 99, 235, 0.13) 0%, transparent 34%),
    radial-gradient(circle at 98% 0%, rgba(14, 165, 233, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, var(--bg) 58%, #e8f1f9 100%) fixed !important;
}

body::before {
  display: none !important;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

.top,
.header,
.app-header {
  gap: 12px;
}

.app-header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}

.title,
.h,
h1,
h2,
h3,
.page-title,
.reports-title,
.act-tile-title,
.suc-name,
.app-brand-text {
  color: var(--text) !important;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: -0.012em;
}

.title span,
.page-title span,
.app-brand-text span {
  color: var(--primary) !important;
}

.small,
.meta,
.muted,
label,
.page-meta,
.kpi-sub,
.act-tile-desc,
.td-id,
.rep-empty {
  color: var(--text-muted) !important;
}

.card,
.kpi,
.item,
.pill,
.tile,
.stat-card,
.filter-card,
.map-card,
.stats-panel,
.table-card,
.form-card,
.list-card,
.report-table,
.suc-card,
.empty-suc,
.act-tile,
.reports-card,
.box,
.panel,
.login-card,
.report-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text) !important;
}

.card,
.kpi,
.item,
.tile,
.stat-card,
.filter-card,
.map-card,
.stats-panel,
.suc-card,
.act-tile,
.reports-card {
  animation: riseIn 320ms ease both;
}

.tag,
.badge,
.pill,
.badge-role,
.user-chip,
.suc-folio-tag {
  background: #eef6ff !important;
  border-color: #cfe0f5 !important;
  color: #1e3a5f !important;
}

.ok,
.flash.ok,
.alert-clear {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}

.err,
.flash.err {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #be123c !important;
}

button,
.btn,
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
}

button:hover,
.btn:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.26) !important;
}

button.secondary,
.btn2,
.btn-secondary,
.btn-h {
  background: #ffffff !important;
  color: var(--primary-strong) !important;
  border: 1px solid #cbdcf0 !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
}

button.secondary:hover,
.btn2:hover,
.btn-secondary:hover,
.btn-h:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #0f3ea8 !important;
}

.pwa-install {
  display: none;
}

input,
select,
textarea {
  width: 100%;
  border-radius: 12px !important;
  border: 1px solid #cbdcf0 !important;
  background: #ffffff !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
}

input[type="file"] {
  padding: 6px !important;
}

input[type="file"]::file-selector-button {
  margin-right: 10px;
  background: #eff6ff;
  color: var(--primary-strong);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

select option {
  background: #ffffff;
  color: var(--text);
}

a {
  color: var(--primary);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-bottom: 1px solid #e5edf7 !important;
}

th {
  color: #527094 !important;
  background: #f8fbff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tr:hover,
.clickrow:hover,
table.rep-table tbody tr:hover {
  background: #f1f7ff !important;
}

.kpi {
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.kpi-label,
.sec-label {
  color: #2563eb !important;
}

.kpi-value,
.suc-stat-val,
.suc-monto-val,
.td-date,
.td-monto {
  color: var(--text) !important;
}

.kpi-value.green,
.suc-stat-val.green {
  color: var(--ok) !important;
}

.kpi-value.red,
.suc-stat-val.red {
  color: var(--danger) !important;
}

.kpi-bar,
.suc-progress-bar {
  background: #e2eaf5 !important;
}

.kpi-bar-fill,
.suc-progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

.act-tile {
  color: var(--text) !important;
}

.act-tile:hover,
.act-tile.primary:hover {
  background: #f8fbff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 22px 48px rgba(37, 99, 235, 0.13) !important;
}

.act-tile.primary {
  background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%) !important;
  border-color: #9fc5ff !important;
}

.reports-header {
  background: linear-gradient(180deg, #f8fbff, #eef6ff) !important;
  border-bottom: 1px solid var(--border) !important;
}

.login-wrap {
  background:
    radial-gradient(circle at 12% -10%, rgba(37, 99, 235, 0.14) 0%, transparent 34%),
    radial-gradient(circle at 92% 105%, rgba(14, 165, 233, 0.12) 0%, transparent 34%),
    linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%) !important;
}

.login-card,
.welcome-card,
.gps-cta,
.report-card,
.form-section,
.section-card,
.module-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text) !important;
}

.login-brand-icon,
.app-brand-icon,
.report-title-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
}

.login-brand-name,
.welcome-greeting,
.gps-cta-title,
.tile-label,
.report-title,
.page-top h1,
.page-title h1,
.stat-value,
.rt-prov,
.td-proveedor,
.saldos-title,
.td-name,
.td-num,
.tfoot-num {
  color: var(--text) !important;
}

.login-brand-name span {
  color: var(--primary) !important;
}

.login-brand-sub,
.login-note,
.gps-cta-sub,
.tile-desc,
.stat-label,
.td-suc,
.td-folios,
.suc-progress-label,
.suc-stat-lbl,
.suc-monto-label {
  color: var(--text-muted) !important;
}

.login-divider,
.form-divider,
.sec-label::after {
  background: #d8e6f5 !important;
}

.module-tile,
.mod-tile {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}

.module-tile:hover,
.mod-tile:hover,
.tile:hover {
  background: #f8fbff !important;
  border-color: #93c5fd !important;
}

.field-input,
.toolbar input,
.toolbar select {
  background: #ffffff !important;
  border-color: #cbdcf0 !important;
  color: var(--text) !important;
}

.field-input option,
select.field-input option {
  background: #ffffff !important;
  color: var(--text) !important;
}

.day-btn.active {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

#map {
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
}

.backdrop {
  background: rgba(15, 23, 42, 0.32) !important;
}

#modalAlertas > div,
.modal,
.dialog {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text) !important;
}

@media (max-width: 820px) {
  .wrap {
    padding: 14px;
  }

  .btn,
  button {
    width: 100%;
    text-align: center;
  }

  .btnrow {
    width: 100%;
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}