:root{
  --navy: #1a2744; /* Primary dark blue */
  --steel: #3d5a80; /* Secondary blue */
  --gold: #c9a84c; /* Accent gold */
  --white: #ffffff;
  --surface: #f7f8fa; /* Light background for cards/panels */
  --border: #e2e6ed; /* Light border color */
  --text-dark: #1a2744; /* Dark text color */
  --text-mid: #4a5568; /* Medium text color */
  --text-light: #8a96a8; /* Light text color */
  --input-bg: #f5f7fa; /* Input background */
  --input-focus: #ffffff; /* Input focus background */
  --danger: #b85d52; /* Red for errors */
  --green: #5d9475; /* Green for success */
  --orange: #f97316; /* Orange for pending/warnings */
  --line: #dde4ee; /* Lighter border/divider */
  --soft: #f5f7fa; /* Another light background */
  --ink: #182235; /* Very dark text/background */
  --muted: #6b7280; /* Muted text color */
  --sage-light: #e8f3ed; /* Light sage for highlights */

  /* Map old variable names to new standardized ones for compatibility */
  --primary: var(--navy);
  --secondary: var(--steel);
  --accent: var(--gold);
  --success:#28a745;
  --danger:#dc3545;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --border:#e2e8f0;
  --text:#1f2937;
  --muted:#6b7280;
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body{
  margin:0;
  padding:0;
  font-family:Arial,sans-serif;
  background: linear-gradient(180deg, #f8f9fb 0%, #edf1f5 100%);
  min-height: 100vh; /* Asegura que el fondo cubra toda la altura */
  padding: 0 24px 24px;
  color:var(--text);
}

html,
body {
  overflow-x: hidden;
}

body.portal-fixed-footer {
  padding-bottom: 24px;
}

img{
  max-width:100%;
}

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