/* ============================================================
   Distriperfumes Elian — estilos base (responsive PC/celular)
   Los colores vienen de la BD vía variables --primario/--secundario
   inyectadas en cada página.
   ============================================================ */
:root {
  --primario:   #732057;
  --secundario: #450330;
  --tinte:      #f6eaf0;
  --texto:      #2b2230;
  --gris:       #6b6572;
  --linea:      #e7dde4;
  --blanco:     #ffffff;
  --ok:         #2e7d5b;
  --error:      #b3261e;
  --radio:      12px;
  --sombra:     0 4px 20px rgba(69, 3, 48, .08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--texto); background: var(--tinte); }
h1,h2,h3 { margin: 0 0 .4rem; }
a { color: var(--primario); }

/* ---------- Botones y campos ---------- */
button { cursor: pointer; font: inherit; }
.btn {
  background: var(--primario); color: #fff; border: 0;
  padding: .7rem 1.2rem; border-radius: var(--radio); font-weight: 600;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--primario); border: 1px solid var(--linea); }
.btn-sm { background: var(--tinte); color: var(--primario); border: 1px solid var(--linea);
  padding: .35rem .7rem; border-radius: 8px; font-weight: 600; font-size: .85rem; }
.btn-sm:hover { background: #efdfe8; }

label { display: block; font-size: .82rem; color: var(--gris); margin: .8rem 0 .25rem; font-weight: 600; }
input, select {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--linea);
  border-radius: 10px; font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--primario), var(--secundario));
  padding: 1.5rem;
}
.login-card {
  width: 100%; max-width: 380px; background: #fff;
  border-radius: 18px; padding: 2.2rem 2rem; box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.login-logo { display: block; width: 170px; margin: 0 auto 1rem; border-radius: 14px; }
.login-card .sub { text-align: center; color: var(--gris); font-size: .9rem; margin-bottom: 1.2rem; }
.login-card .btn { width: 100%; margin-top: 1.4rem; padding: .8rem; }
.login-msg { color: var(--error); font-size: .85rem; text-align: center; min-height: 1.2em; margin-top: .8rem; }

/* ============================================================
   APP: barra lateral + contenido
   ============================================================ */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--primario); color: #fff; padding: 1.4rem 1rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.sidebar__logo { width: 130px; margin: 0 auto 1.6rem; display: block; }
.nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: transparent; border: 0; color: #fff; text-align: left;
  padding: .7rem .85rem; border-radius: 10px; font-size: .95rem; opacity: .85;
}
.nav-item:hover { background: rgba(255,255,255,.12); opacity: 1; }
.nav-item.activo { background: rgba(255,255,255,.18); opacity: 1; font-weight: 600; }
.sidebar__pie { margin-top: auto; font-size: .78rem; opacity: .7; padding-top: 1rem; }

.topbar {
  display: none; align-items: center; justify-content: space-between;
  background: var(--primario); color: #fff; padding: .8rem 1rem;
}
.topbar img { height: 34px; }
.hamburguesa { background: transparent; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; }

.contenido { padding: 1.6rem 1.8rem; }
.contenido__head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem; gap: 1rem; flex-wrap: wrap; }
.usuario-chip { font-size: .85rem; color: var(--gris); }
.usuario-chip b { color: var(--texto); }

.card { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.card h2 { font-size: 1.05rem; color: var(--primario); }
.card .desc { color: var(--gris); font-size: .88rem; margin-bottom: 1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }

/* ---------- Vistas ---------- */
.vista { display: none; }
.vista.activa { display: block; }

/* ---------- Tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris); padding: .6rem .5rem; border-bottom: 2px solid var(--linea); }
.tabla td { padding: .7rem .5rem; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.pill { font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; text-transform: capitalize; }
.pill--administrador { background: #f3d9e8; color: var(--secundario); }
.pill--vendedor      { background: #dce8f7; color: #1d4e89; }
.pill--auxiliar      { background: #e5e2ef; color: #4a3f7a; }
.estado.on  { color: var(--ok); font-weight: 600; }
.estado.off { color: var(--gris); }
.cargando, .vacio, .error { color: var(--gris); padding: 1rem 0; }
.error { color: var(--error); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(43,0,30,.45);
  display: none; place-items: center; padding: 1rem; z-index: 50; }
.modal.abierto { display: grid; }
.modal__caja { background: #fff; border-radius: 16px; padding: 1.6rem; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal__caja h3 { color: var(--primario); }
.modal__acciones { display: flex; gap: .7rem; justify-content: flex-end; margin-top: 1.4rem; }
.check-linea { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.check-linea input { width: auto; }
.check-linea label { margin: 0; }

/* ---------- Filtros / KPIs / totales ---------- */
.filtros { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.filtros > div { flex: 0 0 auto; }
.filtros label { margin-top: 0; }

.cards-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kpi { padding: 1.1rem 1.3rem; margin-bottom: 0; }
.kpi-label { font-size: .8rem; color: var(--gris); font-weight: 600; }
.kpi-valor { font-size: 1.7rem; font-weight: 700; color: var(--primario); margin: .2rem 0; }
.kpi-sub { font-size: .78rem; color: var(--gris); }

.tot-mini { margin-left: auto; width: 260px; margin-top: 1rem; font-size: .92rem; }
.tot-mini div { display: flex; justify-content: space-between; padding: .25rem 0; }
.tot-mini .grande { font-size: 1.1rem; font-weight: 700; color: var(--primario);
  border-top: 2px solid var(--linea); padding-top: .4rem; margin-top: .2rem; }
.modal__caja h4 { color: var(--primario); margin: 0 0 .3rem; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 20px);
  background: var(--texto); color: #fff; padding: .8rem 1.2rem; border-radius: 10px;
  font-size: .9rem; opacity: 0; transition: all .3s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--error); }
.toast--ok    { background: var(--ok); }

/* ============================================================
   RESPONSIVE — celular
   ============================================================ */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .topbar { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 40;
    transform: translateX(-100%); transition: transform .25s;
  }
  body.menu-abierto .sidebar { transform: translateX(0); }
  body.menu-abierto::after {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39;
  }
  .contenido { padding: 1.1rem; }
  .grid-2 { grid-template-columns: 1fr; }

  /* Tabla en tarjetas */
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { background: #fff; border-radius: 10px; box-shadow: var(--sombra);
    margin-bottom: .8rem; padding: .4rem .8rem; }
  .tabla td { border: 0; display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; border-bottom: 1px solid var(--linea); }
  .tabla td:last-child { border-bottom: 0; }
  .tabla td::before { content: attr(data-l); color: var(--gris); font-size: .78rem;
    font-weight: 600; text-transform: uppercase; }
}