@import 'brand.css';

/* =============================================================================
   RESET / BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sp-font-ui);
  font-size: var(--sp-fs-14);
  line-height: var(--sp-lh-normal);
  color: var(--sp-text-1);
  background: var(--sp-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

img { display: block; max-width: 100%; }

/* =============================================================================
   ACCESSIBILITY — skip link
   ============================================================================= */
.sp-skip {
  position: absolute;
  top: -100%;
  left: var(--sp-s-4);
  z-index: 9999;
  background: var(--sp-gold);
  color: #fff;
  font-family: var(--sp-font-ui);
  font-size: var(--sp-fs-12);
  font-weight: 600;
  letter-spacing: var(--sp-ls-wide);
  padding: var(--sp-s-2) var(--sp-s-4);
  border-radius: var(--sp-radius-sm);
  text-decoration: none;
  transition: top var(--sp-dur-fast) var(--sp-ease-out);
}
.sp-skip:focus { top: var(--sp-s-2); outline: 2px solid #fff; outline-offset: 2px; }

/* Layout shell (sidebar, drawer, page header, bottom bar) lives in shell.css. */

/* =============================================================================
   FLASH MESSAGES
   ============================================================================= */
.sp-flash {
  padding: var(--sp-s-3) var(--sp-s-4);
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--sp-blue-tint);
  color: var(--sp-text-2);
  font-size: var(--sp-fs-13);
  margin-bottom: var(--sp-s-4);
}

.sp-flash--success {
  background: var(--sp-green-bg);
  border-color: rgba(31, 122, 77, 0.30);
  color: var(--sp-green);
}

.sp-flash--error {
  background: var(--sp-red-bg);
  border-color: rgba(181, 58, 47, 0.30);
  color: var(--sp-red);
}

.sp-flash--warning {
  background: var(--sp-amber-bg);
  border-color: rgba(138, 100, 23, 0.30);
  color: var(--sp-amber);
}

/* =============================================================================
   UTILITY
   ============================================================================= */
.sp-spacer { flex: 1; }
.sp-row    { display: flex; align-items: center; gap: var(--sp-s-3); }
.sp-mono   { font-family: var(--sp-font-mono); }
.sp-muted  { color: var(--sp-text-3); }
.sp-text-sm { font-size: var(--sp-fs-12); }

/* =============================================================================
   SECTION DIVIDER — within a content area
   ============================================================================= */
.sp-section { margin-top: var(--sp-s-6); }
.sp-section + .sp-section { margin-top: var(--sp-s-7); }

.sp-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-s-3);
  margin-bottom: var(--sp-s-4);
  padding-bottom: var(--sp-s-3);
  border-bottom: 1px solid var(--sp-border);
}

.sp-section-title {
  font-size: var(--sp-fs-13);
  font-weight: 600;
  color: var(--sp-text-2);
  text-transform: uppercase;
  letter-spacing: var(--sp-ls-wider);
}

/* =============================================================================
   SETTINGS / ACCOUNT (ajustes.php, cuenta.php)
   ============================================================================= */
.sp-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-s-5); align-items: start; }
.sp-settings-nav { margin-bottom: var(--sp-s-5); overflow-x: auto; }
.sp-settings-section { margin-bottom: var(--sp-s-5); scroll-margin-top: var(--sp-s-5); }
.sp-rate-form { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: var(--sp-s-3); align-items: end; }
.sp-rate-form .sp-form-group { margin-bottom: 0; }
.sp-settings-gaps { margin-top: var(--sp-s-5); padding-top: var(--sp-s-4); border-top: 1px solid var(--sp-border); }
.sp-settings-gaps .sp-chip { cursor: pointer; background: var(--sp-bg-card); }
.sp-settings-gaps .sp-chip:hover { border-color: var(--sp-gold); color: var(--sp-text-1); }
@media (max-width: 760px) {
  .sp-settings-grid { grid-template-columns: 1fr; }
  .sp-rate-form { grid-template-columns: 1fr 1fr; }
  .sp-rate-form-submit { grid-column: 1 / -1; }
}

/* =============================================================================
   DASHBOARD
   ============================================================================= */
.sp-kpi--link { color: inherit; text-decoration: none; transition: box-shadow var(--sp-dur-fast) var(--sp-ease-out); }
.sp-kpi--link:hover { box-shadow: var(--sp-shadow-md); }
.sp-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-s-5); margin-top: var(--sp-s-5); align-items: start; }
.sp-dash-list { list-style: none; margin: 0; padding: 0; }
.sp-dash-list li + li { border-top: 1px solid var(--sp-border); }
.sp-dash-row { display: flex; align-items: center; gap: var(--sp-s-3); padding: var(--sp-s-3) var(--sp-s-5); color: inherit; text-decoration: none; }
.sp-dash-row:hover { background: var(--sp-blue-tint); }
.sp-dash-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-dash-row-title { display: flex; align-items: center; gap: var(--sp-s-2); flex-wrap: wrap; font-weight: 500; color: var(--sp-text-1); }
.sp-dash-row-sub { font-size: var(--sp-fs-12); color: var(--sp-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dash-row-aside { flex-shrink: 0; font-size: var(--sp-fs-12); color: var(--sp-text-3); font-family: var(--sp-font-mono); }
.sp-dash-row-aside.is-soon { color: var(--sp-amber); font-weight: 600; }
.sp-dash-row-aside.is-late { color: var(--sp-red); font-weight: 600; }
.sp-dash-money { color: var(--sp-text-1); font-weight: 600; }
.sp-dash-empty { margin: 0; padding: var(--sp-s-5); color: var(--sp-text-3); font-size: var(--sp-fs-13); }
@media (max-width: 900px) {
  .sp-dash-grid { grid-template-columns: 1fr; }
  .sp-dash-row { padding: var(--sp-s-3) var(--sp-s-4); }
}