/* static/css/chillit-theme.css
   Tema sobrio/profesional tipo SaaS para pagos/facturación.
*/

:root{
  /* Marca (mantén azul, baja el “neón”) */
  --chillit-primary: #0A66FF;
  --chillit-primary-2: #0A66FF; /* 👈 ya no usamos gradiente */
  --chillit-dark: #0B1220;
  --chillit-ink: #0F172A;      /* slate-900 */
  --chillit-muted: #64748B;    /* slate-500 */
  --chillit-surface: #FFFFFF;  /* 👈 más limpio */
  --chillit-surface-2: #F8FAFC;/* slate-50 */
  --chillit-border: rgba(15,23,42,.10);
  --chillit-shadow: 0 10px 24px rgba(15,23,42,.08);
  --chillit-shadow-soft: 0 6px 16px rgba(15,23,42,.06);
  --chillit-radius: 18px;
}

/* ===== Fondo (menos colorido) ===== */
html, body{ height: 100%; }

body{
  color: var(--chillit-ink);
  background: linear-gradient(180deg, #F8FAFC 0%, #F3F6FB 55%, #EEF2F8 100%);
}

/* ===== Tipografía ===== */
h1,h2,h3,h4{
  letter-spacing: -0.02em;
}
.lead, .text-muted{
  color: var(--chillit-muted) !important;
}

/* ===== Cards / Contenedores ===== */
.ch-card{
  background: var(--chillit-surface);
  border: 1px solid var(--chillit-border);
  border-radius: var(--chillit-radius);
  box-shadow: var(--chillit-shadow);
}

.ch-card--soft{
  background: var(--chillit-surface-2);
  border: 1px solid var(--chillit-border);
  border-radius: var(--chillit-radius);
  box-shadow: var(--chillit-shadow-soft);
}

/* Por si usas blur en HTML: lo neutralizamos */
.ch-card, .ch-card--soft{
  backdrop-filter: none;
}

/* ===== Header marca ===== */
.ch-header{
  display:flex;
  align-items:center;
  gap: 12px;
}

.ch-logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(10,102,255,.08);
  border: 1px solid var(--chillit-border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ch-logo img{ width: 70%; height: auto; }

/* ===== Botones (más corporativo) ===== */
.btn{
  border-radius: 14px !important;
  font-weight: 650;
  letter-spacing: .01em;
}

.btn-primary{
  background: var(--chillit-primary);
  border: 1px solid rgba(10,102,255,.25);
  box-shadow: 0 10px 20px rgba(10,102,255,.16);
}

.btn-primary:hover{
  filter: brightness(.97);
  transform: translateY(-1px);
}

.btn-outline-primary{
  border-color: rgba(10,102,255,.35);
  color: var(--chillit-primary);
}

.btn-outline-primary:hover{
  background: rgba(10,102,255,.06);
  border-color: rgba(10,102,255,.55);
  color: var(--chillit-primary);
}

.btn-link{
  color: var(--chillit-primary);
  text-decoration: none;
  font-weight: 650;
}

.btn-link:hover{ text-decoration: underline; }

/* ===== Inputs ===== */
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  padding: .72rem .9rem;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(10,102,255,.55);
  box-shadow: 0 0 0 .2rem rgba(10,102,255,.12);
}

.form-label{
  font-weight: 650;
  color: var(--chillit-ink);
}

/* ===== Badges / Alerts ===== */
.ch-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(10,102,255,.06);
  border: 1px solid rgba(10,102,255,.14);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(10,102,255,.95);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ch-dot{
  width: 6px;
  height: 6px;
  background: var(--chillit-primary);
  border-radius: 50%;
  display: inline-block;
}

.alert{
  border-radius: 16px;
  border: 1px solid var(--chillit-border);
}

/* ===== Detalles ===== */
hr{
  border-color: rgba(15,23,42,.10);
  opacity: 1;
}

.small-hint{
  font-size: .92rem;
  color: var(--chillit-muted);
}

.ch-pill{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--chillit-border);
  background: rgba(255,255,255,.85);
}

/* Mobile */
@media (max-width: 576px){
  .ch-card{ border-radius: 16px; }
  .btn{ width: 100%; }
}

/* ===== Intro.js (mantener pro) ===== */
.introjs-tooltip {
  border-radius: var(--chillit-radius);
  box-shadow: var(--chillit-shadow);
  border: 1px solid var(--chillit-border);
  padding: 10px;
  min-width: 300px;
}

.introjs-tooltiptitle {
  font-weight: 900;
  color: var(--chillit-ink);
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.introjs-tooltiptext {
  color: var(--chillit-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.introjs-button {
  border-radius: 12px !important;
  text-shadow: none !important;
  font-weight: 650 !important;
  padding: 0.55rem 1rem !important;
  transition: all 0.2s;
}

.introjs-nextbutton {
  background: var(--chillit-primary) !important;
  color: white !important;
  border: 1px solid rgba(10,102,255,.25) !important;
}

.introjs-prevbutton {
  background: white !important;
  color: var(--chillit-muted) !important;
  border: 1px solid var(--chillit-border) !important;
}

.introjs-helperLayer {
  background: rgba(10,102,255,.04) !important;
  border: 2px solid rgba(10,102,255,.55);
  border-radius: var(--chillit-radius);
}
/* ===== Intro.js: arreglar "Saltar" gigante ===== */
.introjs-tooltip-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.introjs-skipbutton{
  font-size: 0.85rem !important;     /* más chico */
  font-weight: 700 !important;
  padding: 6px 10px !important;      /* menos padding */
  line-height: 1.1 !important;
  border-radius: 10px !important;
  color: var(--chillit-muted) !important;
  background: transparent !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  text-decoration: none !important;
}

.introjs-skipbutton:hover{
  background: rgba(11,18,32,.04) !important;
  color: var(--chillit-ink) !important;
  border-color: rgba(11,18,32,.18) !important;
}

/* opcional: título un poco más compacto */
.introjs-tooltiptitle{
  font-size: 1.05rem !important;
  margin: 0 !important;
}
/* Evita que estilos globales agranden cosas dentro del tooltip */
.introjs-tooltip a{
  font-size: inherit !important;
  font-weight: inherit !important;
}