/* style.css */

:root { --bg:#111; --fg:#f6f6f6; --muted:#9aa0a6; --card:#1b1b1b; --accent:#e0e0e0; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a { color: #8ab4f8; text-decoration: none; }
.container { padding: 16px; max-width: 95%; margin: 0 auto; }
.topbar { display:flex; align-items:center; justify-content: space-between; padding:10px 12px; background:#181818; position:sticky; top:0; z-index:100; border-bottom:1px solid #2a2a2a; }
.topbar__left { display:flex; align-items:center; gap:8px; }
.topbar__right a, .topbar__right .user { margin-left:10px; font-size:14px; }
.logo { border-radius: 6px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background:var(--card); border:1px solid #2a2a2a; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.card img { width:100%; height:140px; object-fit:cover; border-radius:8px; background:#222; }
.card h3 { margin:0; font-size:16px; }
.card p { margin:0; color:var(--muted); font-size: 13px; }
.row { display:flex; align-items:center; justify-content: flex-start; gap:8px; flex-wrap:wrap; }
.qty { width:80px; }
.btn { display:inline-block; padding:10px 14px; background:#2a2a2a; border:1px solid #3a3a3a; color:var(--fg); border-radius:10px; cursor:pointer; }
.btn.primary { background:#2962ff; border-color:#2962ff; }
.btn.danger { background:#b00020; border-color:#b00020; }
input, select, textarea { width:100%; padding:10px; border-radius:10px; border:1px solid #3a3a3a; background:#1b1b1b; color:var(--fg); }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #2a2a2a; padding:10px; text-align:left; }
.total { font-weight:bold; text-align:right; }
.footer { text-align:center; color:var(--muted); padding:20px; }
.alert { background:#1e2a1e; border:1px solid #2c3c2c; padding:10px; border-radius:10px; margin-bottom:12px; }
.alert.err { background:#3b1c1c; border-color:#5a2a2a; }
.badge { padding:4px 8px; border-radius:999px; font-size:12px; background:#333; border:1px solid #444; }
.badge.sent { background:#263238; }
.badge.confirmed { background:#1b5e20; }
.badge.ordered_to_supplier { background:#4e342e; }
.badge.delivered { background:#37474f; }
.badge.received { background:#1b5e20; }
.badge.canceled { background:#b00020; }
.print-btn { position: sticky; top: 70px; z-index: 50; }
@media print {
  .topbar, .footer, .print-btn { display:none !important; }
  body { background: #fff; color:#000; }
  .card, .table { border-color:#000; }
}
/* Force action buttons in tables to align in one line */
.table td.actions-cell,
td.actions-cell {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
}
/* Keep buttons compact */
.table td.actions-cell .btn,
td.actions-cell .btn {
  flex: 0 0 auto;
}

/* Botones compactos y variantes */
.btn.sm { padding: 6px 10px; font-size: 0.92rem; border-radius: 8px; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,0.24); }
.btn.icon { padding: 0 10px; display:inline-flex; align-items:center; justify-content:center; }
.btn .material-symbols-rounded { vertical-align: middle; font-size: 20px; line-height: 1; }

/* Etiqueta opcional que se puede ocultar en móvil */
.btn .btn-label { margin-left: 6px; }


/* On narrow mobile screens, allow wrap if needed */
@media (max-width: 480px) {
  .table td.actions-cell,
  td.actions-cell {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* Fix admin action buttons to stay in one line */
td.actions-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

td.actions-cell form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

td.actions-cell .btn {
  flex: 0 0 auto;
}

/* === Ajustes globales mobile-first === */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* elimina “paneles” laterales en móvil */
}

/* Evita imágenes que ensanchan el layout */
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Asegura que las cards ocupen 100% en móvil,
   incluso si llevan inline style con max-width */
@media (max-width: 640px) {
  .card { width: 100%; max-width: none !important; }
  .card[style*="max-width"] { max-width: 100% !important; }
}

/* Filas y espaciados coherentes */
.row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones más cómodos en pantallas pequeñas */
.btn { line-height: 1; padding: 10px 14px; border-radius: 10px; }

/* Badges legibles */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; }

/* === Tablas responsivas y consistentes === */
.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table th, .table td {
  padding: 8px 10px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* evita saltos feos en móvil */
}

/* Anchos de columnas (desktop y ≥641px) 
   1: Producto (46%)  2: SKU (18%)  3: Cant (12%)  4: Precio (12%)  5: Subtotal (12%) */
@media (min-width: 641px) {
  .table th:nth-child(1), .table td:nth-child(1) { width: 46%; }
  .table th:nth-child(2), .table td:nth-child(2) { width: 18%; }
  .table th:nth-child(3), .table td:nth-child(3) { width: 12%; text-align: right; }
  .table th:nth-child(4), .table td:nth-child(4) { width: 12%; text-align: right; }
  .table th:nth-child(5), .table td:nth-child(5) { width: 12%; text-align: right; font-weight: 600; }
}

/* En móvil escondemos SKU para ganar aire; 
   estrechamos celdas numéricas y reducimos padding */
@media (max-width: 640px) {
  .table th, .table td { padding: 8px; }
  .table th:nth-child(3), .table td:nth-child(3),
  .table th:nth-child(4), .table td:nth-child(4),
  .table th:nth-child(5), .table td:nth-child(5) { text-align: right; }
}

/* Evita scroll lateral si algún texto es larguísimo */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tipos y títulos más compactos en móvil */
@media (max-width: 640px) {
  h1 { font-size: 1.25rem; margin: 10px 0; }
  h2 { font-size: 1.125rem; }
  h3 { font-size: 1rem; }
}

/* Botonera inferior: wrap limpio en móvil */
@media (max-width: 480px) {
  .row a.btn { flex: 1 1 auto; text-align: center; }
}

/* Estilo para tarjeta de invetario */
.inventory-counted {
    border-color: #1b5e20;
    background: rgba(27, 94, 32, 0.1);
}