/* ══════════════════════════════════════════════════════════
   ARES GOURMET — Componentes compartidos
   Botones, modales, tablas, formularios, tarjetas
   ══════════════════════════════════════════════════════════ */

/* ── BOTONES ── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem; border:none; border-radius:var(--r-md);
  font-family:var(--font-base); font-weight:700; font-size:.88rem;
  cursor:pointer; transition:all .2s; text-decoration:none;
}
.btn-primary { background:var(--azul); color:white; }
.btn-primary:hover { background:var(--azul-d); }
.btn-success { background:var(--verde); color:white; }
.btn-danger  { background:var(--rojo); color:white; }
.btn-warning { background:var(--amarillo); color:white; }
.btn-secondary { background:var(--gris-bg); color:var(--suave); border:1.5px solid var(--borde); }

/* ── MODALES ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:var(--z-modal); animation:fadeIn .2s ease;
}
.modal-card {
  background:var(--blanco); border-radius:var(--r-xl);
  padding:var(--space-xl) var(--space-lg);
  width:92%; max-width:380px;
  text-align:center; box-shadow:var(--shadow-lg);
  animation:popIn .2s ease;
}
.modal-title { font-size:1.2rem; font-weight:900; margin-bottom:var(--space-xs); }
.modal-sub { font-size:.8rem; color:var(--suave); margin-bottom:var(--space-md); }

/* ── TARJETAS DE ESTADÍSTICAS ── */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--space-md); margin-bottom:var(--space-md);
}
.stat-card {
  background:var(--blanco); padding:var(--space-md);
  border-radius:var(--r-lg); border:1.5px solid var(--borde);
  text-align:center;
}
.stat-card .ico { font-size:1.4rem; margin-bottom:var(--space-xs); }
.stat-card .num { font-size:2rem; font-weight:900; line-height:1; }
.stat-card .lbl {
  font-size:.7rem; color:var(--suave); margin-top:var(--space-xs);
  text-transform:uppercase; letter-spacing:.05em; font-weight:700;
}

/* Colores de números */
.num.verde { color:var(--verde); }
.num.naranja { color:var(--naranja); }
.num.rojo { color:var(--rojo); }
.num.azul { color:var(--azul); }
.num.amarillo { color:var(--amarillo); }

/* ── TABLAS ── */
.tabla-wrap {
  background:var(--blanco); border-radius:var(--r-lg);
  border:1.5px solid var(--borde); overflow-x:auto; overflow-y:hidden;
  margin-bottom:var(--space-md);
}
.tabla-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-sm) var(--space-md);
  background:var(--superficie-2); border-bottom:1.5px solid var(--borde);
}
.tabla-titulo { font-weight:800; font-size:.95rem; }
.tabla-wrap table { width:100%; border-collapse:collapse; font-size:.85rem; }
.tabla-wrap thead th {
  background:var(--superficie-3); padding:var(--space-sm);
  text-align:left; font-size:.65rem;
  letter-spacing:.08em; color:var(--suave);
  font-weight:700; text-transform:uppercase;
  border-bottom:2px solid var(--borde);
}
.tabla-wrap tbody td {
  padding:var(--space-sm); border-bottom:1px solid var(--borde-suave);
}
.tabla-wrap tbody tr:hover { background:var(--superficie-hover); }

/* ── FORMULARIOS ── */
.form-grupo { margin-bottom:var(--space-md); }
.form-grupo label {
  display:block; font-size:.75rem; font-weight:700;
  color:var(--suave); margin-bottom:var(--space-xs);
  text-transform:uppercase; letter-spacing:.05em;
}
.form-grupo input, .form-grupo select, .form-grupo textarea {
  width:100%; padding:.6rem .8rem;
  border:1.5px solid var(--borde); border-radius:var(--r-md);
  font-family:var(--font-base); font-size:.9rem;
  outline:none; transition:border-color .2s;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus {
  border-color:var(--azul);
}

/* ── BADGES ── */
.badge {
  display:inline-block; padding:.2rem .6rem;
  border-radius:var(--r-md); font-size:.72rem;
  font-weight:700; letter-spacing:.03em;
}
.badge-verde { background:var(--verde-bg); color:var(--verde-d); }
.badge-naranja { background:var(--naranja-bg); color:var(--naranja-d); }
.badge-rojo { background:var(--rojo-bg); color:var(--rojo-d); }
.badge-azul { background:var(--azul-bg); color:var(--azul-d); }
.badge-n { background:var(--neutral-bg); color:var(--suave); }

/* ── MENSAJES ── */
.msg {
  padding:.6rem 1rem; border-radius:var(--r-md);
  font-size:.85rem; font-weight:600;
  margin-top:var(--space-sm); display:none;
}
.msg.ok { background:var(--verde-bg); color:var(--verde-d); display:block; }
.msg.err { background:var(--rojo-bg); color:var(--rojo-d); display:block; }
.msg.warn { background:var(--naranja-bg); color:var(--naranja-d); display:block; }

/* ── RESPONSIVO BÁSICO ── */
@media (max-width:700px) {
  .stats-grid {
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-sm);
  }
  .stat-card { padding:var(--space-sm); }
  .stat-card .num { font-size:1.5rem; }
  .stat-card .ico { font-size:1.2rem; }
  .stat-card .lbl { font-size:.6rem; }
  .tabla-wrap { font-size:.78rem; }
  .tabla-wrap thead th { padding:.4rem; font-size:.6rem; }
  .tabla-wrap tbody td { padding:.4rem; font-size:.75rem; }
}