/* static/css/theme_light.css */
:root{
  /* Cielo (tu elección) */
  --sky-1: #9acef8; /* principal */
  --sky-2: #cfe7ff; /* degradado suave */

  /* Superficies y bordes */
  --surface: #ffffff;
  --panel: #ffffff;
  --ring: #cfe2ff;

  /* Tipografía */
  --text: #0b1220;
  --muted: #475569;
  --muted-2: #64748b;

  /* Accentos y estados */
  --primary: #0ea5e9;   /* botones azules suaves */
  --primary-600: #0284c7;
  --success: #22c55e;
  --danger: #ef4444;

  /* Redondeos y sombras */
  --radius: 14px;
  --shadow: 0 8px 24px rgba(2, 8, 23, .08);
}

/* Fondo global cielo */
body.app-sky {
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%) fixed;
  color: var(--text);
}

/* Tarjetas claras */
.card-surface{
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Botones primarios */
.btn-primary{
  background: var(--primary);
  border: 1px solid var(--primary-600);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 12px;
}
.btn-primary:hover{ filter: brightness(1.05); }

/* Capsulita de saldo (clara) */
.ps-badge{
  background: #eef6ff;
  border: 1px solid var(--ring);
  color: #0b1220;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}