/* /assets/css/styles.css */
:root{
  --bg: #0b0b0e;
  --card: #15151b;
  --muted: #9ca3af;
  --text: #f3f4f6;
  --primary: #7c3aed; /* morado */
  --primary-400: #8b5cf6;
  --primary-600: #6d28d9;
  --danger: #ef4444;
  --success: #10b981;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; }
a,button{ cursor:pointer; }

.dp-container{ width:min(1100px, 92%); margin:0 auto; }
.dp-flex{ display:flex; gap:.75rem; }
.dp-between{ justify-content: space-between; }
.dp-center{ align-items: center; }

.dp-header{ position:sticky; top:0; backdrop-filter: blur(6px); background:rgba(11,11,14,.7); border-bottom:1px solid #1f2937; z-index:10; }
.dp-brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.3px; }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--primary); display:inline-block; }
.brand-text{ color:var(--text); }

.dp-nav .nav-btn{
  background: transparent; border: 1px solid transparent; color: var(--text);
  padding:.55rem .8rem; border-radius:.5rem; transition: all .2s ease;
}
.dp-nav .nav-btn:hover{ background:var(--card); border-color:#27272a; }
.dp-nav .nav-btn.active{ background:var(--primary); border-color:var(--primary); }

#app{ padding: 1.5rem 0 4rem; }

.card{
  background:var(--card); border:1px solid #1f2937; border-radius:.75rem; padding:1rem;
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

.grid{ display:grid; gap:1rem; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media(max-width:900px){ .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:640px){ .grid.cols-2,.grid.cols-3{ grid-template-columns: 1fr; } }

.input, .select, .textarea{
  width:100%; padding:.65rem .8rem; border-radius:.5rem; border:1px solid #262b36; background:#0f1116; color:var(--text);
}
.label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.35rem; }

.btn{
  padding:.65rem .9rem; border-radius:.5rem; border:1px solid transparent; background:var(--primary);
  color:white; font-weight:600;
}
.btn.secondary{ background:#23232a; border-color:#2f3340; }
.btn.ghost{ background:transparent; border-color:#2f3340; }
.btn.danger{ background: var(--danger); }
.btn.success{ background: var(--success); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.sm{ padding:.45rem .6rem; font-size:.9rem; }

.table{ width:100%; border-collapse: collapse; }
.table th,.table td{ border-bottom:1px solid #252933; padding:.7rem .6rem; text-align:left; }
.table th{ color:var(--muted); font-weight:500; }

.badge{ padding:.2rem .45rem; border-radius:.35rem; font-size:.75rem; background:#23232a; }
.badge.ok{ background:#173a2f; color:#a7f3d0; }
.badge.warn{ background:#3a1721; color:#fecaca; }

.dp-footer{ border-top:1px solid #1f2937; padding:1.5rem 0; color:var(--muted); }

.modal-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index: 50;
}
.modal{ width:min(560px, 94vw); background:var(--card); border:1px solid #1f2937; border-radius:.75rem; padding:1rem; }
.modal-backdrop.show{ display:flex; }

/* Utilidades */
.muted{ color: var(--muted); }

/* Imágenes */
.prod-img{
  width:100%; height:auto; display:block; border-radius:.5rem; margin-bottom:.5rem; object-fit:cover; max-height:180px;
}
.img-cell{ width:80px; }
.thumb{ width:64px; height:64px; object-fit:cover; border-radius:.4rem; border:1px solid #262b36; }
.actions .btn{ margin-right:.35rem; }

/* Avisos */
.notice{ padding:.65rem .8rem; border-radius:.5rem; }
.notice.ok{ background:#173a2f; color:#a7f3d0; border:1px solid #1e4d3d; }
.notice.err{ background:#3a1721; color:#fecaca; border:1px solid #5c2230; }

/* ==== Fondo de partículas ==== */
#bg-particles{
  position: fixed;
  inset: 0;
  z-index: 0;           /* detrás de todo */
  pointer-events: none; /* no interfiere con clics */
  opacity: .6;          /* sutil */
}
body, .dp-header, #app, .dp-footer{ position: relative; z-index: 1; } /* por encima del canvas */

/* === Owner view: scroll limpio y sin “romper” los encabezados === */
.owner-view .scroll-wrap {
  overflow-y: auto;
  overflow-x: hidden;            /* sin barra horizontal */
  -ms-overflow-style: none;      /* IE/Edge */
  scrollbar-width: none;         /* Firefox */
}
.owner-view .scroll-wrap::-webkit-scrollbar { /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

/* Mantener tablas fluidas pero sin desbordes feos */
.owner-view table.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;            /* respetar contenido */
}

/* No romper títulos (evita que salgan en columna) */
.owner-view table.table th {
  white-space: nowrap;
  word-break: normal;
  font-weight: 600;
}

/* Permitir que el contenido normal sí pueda partir línea si es largo */
.owner-view table.table td {
  white-space: normal;
  word-break: break-word;
}

/* Inputs pequeños ocupan bien el ancho de su celda */
.owner-view .input.sm {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Botones compactos dentro de tablas del Owner */
.owner-view .btn.sm {
  padding: .32rem .55rem;
  font-size: .8rem;
  line-height: 1.1rem;
}

/* Parte inferior (Admins + Vendors) a ancho completo, apilados */
.owner-view .owner-bottom {
  display: block;                /* una sola columna */
}
.owner-view .owner-bottom .card.wide {
  width: 100%;
}