/* === Tema medio oscuro SENEAM METAR === */
:root {
  --bg-900: #0b1220;      /* azul muy oscuro */
  --bg-800: #111a2e;
  --bg-700: #17223a;
  --fg-100: #e6edf7;      /* texto principal */
  --fg-300: #c8d3e6;      /* texto suave */

  --primary-500: #1e90ff; /* azul principal */
  --primary-600: #177ae0;

  --accent-500: #2cd3c7;  /* verde agua */
  --accent-600: #23bdb2;

  --warn-400: #ffb878;    /* naranja claro */
  --warn-500: #ffa454;

  --border-300: #24314d;  /* bordes suaves */
  --focus:     #2cd3c7;   /* foco accesible */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Fondo general */
html, body {
  height: 100%;
  background: radial-gradient(1000px 600px at 20% 0%, var(--bg-800) 0%, var(--bg-900) 60%),
              linear-gradient(180deg, var(--bg-900), var(--bg-900));
  color: var(--fg-100);
}

/* Contenedor centrado */
.main-wrap {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
}

/* Tarjetas elegantes */
.card {
  background: linear-gradient(180deg, var(--bg-800), var(--bg-700));
  border: 1px solid var(--border-300);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--fg-100);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-300);
  color: var(--fg-100);
  font-weight: 600;
}
.card-footer {
  background: transparent;
  border-top: 1px solid var(--border-300);
}

/* Tipografía y títulos */
h1,h2,h3 {
  color: var(--fg-100);
  letter-spacing: .2px;
}
.lead {
  color: var(--fg-300);
}

/* Formularios */
.form-label { color: var(--fg-300); }
.form-control, .form-select {
  background-color: var(--bg-800);
  border: 1px solid var(--border-300);
  color: var(--fg-100);
  border-radius: 12px;
}
.form-control::placeholder { color: #9fb1cf; opacity: .75; }
.form-control:focus, .form-select:focus {
  background-color: var(--bg-700);
  color: var(--fg-100);
  border-color: var(--focus);
  box-shadow: 0 0 0 .25rem rgba(44, 211, 199, .15);
}

/* Botones */
.btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}
.btn-primary {
  background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
  border: 1px solid var(--primary-600);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-accent {
  background: linear-gradient(180deg, var(--accent-500), var(--accent-600));
  border: 1px solid var(--accent-600);
  color: #063239;
}
.btn-warning {
  background: linear-gradient(180deg, var(--warn-400), var(--warn-500));
  border: 1px solid var(--warn-500);
  color: #3a2300;
}

/* Chips de ayuda */
.badge-soft {
  background: rgba(44, 211, 199, .15);
  color: var(--accent-500);
  border: 1px solid rgba(44, 211, 199, .3);
  border-radius: 10px;
}

/* Inputs de fecha con ícono */
.input-icon {
  position: relative;
}
.input-icon .bi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8fb4ff;
  pointer-events: none;
}
.input-icon input[type="date"] {
  padding-left: 36px;
}

/* Tablas (si las usas para vistas previas) */
.table {
  --bs-table-bg: var(--bg-800);
  --bs-table-color: var(--fg-100);
  --bs-table-border-color: var(--border-300);
  border-radius: 12px;
  overflow: hidden;
}
.table thead th {
  color: var(--fg-100);
  border-bottom-color: var(--border-300);
}
.table tbody tr:hover {
  background: rgba(30, 144, 255, .05);
}

/* Alertas */
.alert {
  border-radius: 12px;
  border: 1px solid var(--border-300);
}
.alert-info {
  background: rgba(30, 144, 255, .12);
  color: #cfe5ff;
  border-color: rgba(30, 144, 255, .35);
}
.alert-warning {
  background: rgba(255, 164, 84, .12);
  color: #ffe0c9;
  border-color: rgba(255, 164, 84, .35);
}

/* Navbar opcional */
.navbar {
  background: linear-gradient(180deg, var(--bg-800), var(--bg-700));
  border-bottom: 1px solid var(--border-300);
}
.navbar .navbar-brand { color: var(--fg-100); font-weight: 700; }
.navbar .nav-link { color: var(--fg-300); }
.navbar .nav-link:hover { color: #fff; }

/* Footer suave */
.footer {
  color: var(--fg-300);
  border-top: 1px solid var(--border-300);
}

/* Utilidades */
.shadow-soft { box-shadow: var(--shadow); }
.text-soft { color: var(--fg-300); }