/* ====== Paleta y base ====== */
:root{
  --color-primary:#1e6eff;   /* Azul principal */
  --color-primary-600:#1663e6;
  --color-accent:#ffd23f;    /* Amarillo */
  --color-green:#22c55e;     /* Verde (ok) */
  --color-red:#ef4444;       /* Rojo (error) */
  --color-muted:#6b7280;
  --bg:#f3f5f8;
  --card:#ffffff;
  --ring: rgba(30,110,255,.25);
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Mobile-first: tipografía y fondo */
html { font-size: 16px; }
body{
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ line-height:1.2; margin:0 0 .5rem; }
h5{ color: var(--color-primary); font-weight:700; }

/* Contenedor cómodo en móvil; crece en pantallas grandes */
.container{ max-width: 720px; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px){ .container{ padding-left: 0; padding-right: 0; } }

/* ====== Navbar ====== */
#navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#navbar .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#navbar .btn-logout {
  background: #fff0f0;
  color: var(--color-red);
  border-color: var(--color-red);
}


/* ====== Cards ====== */
.card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
.card p{ color: var(--color-muted); }

/* ====== Botones ====== */
.btn{ border-radius:.9rem; font-weight:600; }
.btn-outline-primary{
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--color-primary);
  --bs-btn-hover-border-color:var(--color-primary);
  --bs-btn-active-bg:var(--color-primary);
  --bs-btn-active-border-color:var(--color-primary);
  border-width:2px; padding:.7rem 1rem;
}
.btn-primary{
  background: var(--color-primary); border-color: var(--color-primary);
  padding:.7rem 1rem;
  box-shadow: 0 8px 18px rgba(30,110,255,.25);
}
.btn-primary:hover{ filter: brightness(.96); }
.btn-accent{
  background: var(--color-accent); color:#111; border:0; border-radius:.9rem; font-weight:600; padding:.7rem 1rem;
  box-shadow: 0 8px 18px rgba(255,210,63,.3);
}

/* Botones de estado (toques verde/rojo en menor volumen) */
.btn-success{ background: var(--color-green); border-color: var(--color-green); color:#fff; }
.btn-danger{  background: var(--color-red);   border-color: var(--color-red);   color:#fff; }

/* ====== Inputs y focus ====== */
.form-control, .form-select{
  border-radius:.75rem; border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.form-control:focus,.form-select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .25rem var(--ring);
}
label.form-label{ font-weight:600; color:#374151; }

/* ====== Chips / Badges ====== */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius: 999px;
  background:#f1f5f9; color:#111; font-size:.85rem; font-weight:600;
}
.badge-soft{
  display:inline-block; padding:.25rem .5rem; border-radius: .65rem; font-weight:600;
}
.badge-soft-primary{ background: rgba(30,110,255,.12); color: var(--color-primary); }
.badge-soft-accent{  background: rgba(255,210,63,.18); color:#9a7b00; }
.badge-soft-green{   background: rgba(34,197,94,.15);  color:#127a3b; }
.badge-soft-red{     background: rgba(239,68,68,.15);  color:#8f1f1f; }

/* ====== Secciones ====== */
.section-title{
  font-weight:800; color: var(--color-primary);
  display:flex; align-items:center; gap:.5rem;
}
.section-title::after{
  content:''; height:3px; flex:1;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 2px;
  opacity:.35;
}

/* ====== Utilidades ====== */
.w-220{ max-width:220px; }
.w-140{ max-width:140px; }
.label-muted{ font-size:.85rem; color: var(--color-muted); }
.d-grid .btn{ letter-spacing:.2px; }

/* ====== Layout móvil (toques de aire) ====== */
@media (max-width: 576px){
  .card{ border-radius: 1rem; }
  .row.g-3 > [class^="col"]{ margin-bottom: .35rem; }
  .btn{ padding:.6rem .9rem; }
}

/* ====== Preferencias de usuario ====== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* utilidades pequeñas y anchos fijos cómodos */
.w-220 {
    max-width: 220px;
}

.w-140 {
    max-width: 140px;
}

.label-muted {
    font-size: .85rem;
    color: #6b7280;
}

.section-title {
    font-weight: 700;
    color: var(--color-primary, #0d6efd);
}

.chip {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: #f1f5f9;
    font-size: .85rem;
}