/* Core palette (BOCIMEX) */
:root {
  --primary: #D71920;
  --secondary: #FFC107;
  --accent: #111111;
  --background: #F4F4F4;
}

/* Print settings */
@page {
  size: letter;
  margin: 1cm;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--accent);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.site-header {
  background: linear-gradient(90deg, var(--primary), #b31319);
  color: #fff;
  padding: 0.5cm;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header h1 {
  margin: 0;
  font-size: 18pt;
  letter-spacing: 0.5px;
}
.header-actions {
  display: flex;
  gap: 0.4cm;
}
.btn {
  border: 0.05cm solid transparent;
  background: #fff;
  color: var(--primary);
  padding: 0.2cm 0.5cm;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(17,17,17,0.1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary {
  background: var(--secondary);
  color: var(--accent);
  border-color: var(--secondary);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(17,17,17,0.18); }
.btn:active { transform: translateY(0); }

.container {
  max-width: 20.5cm; /* page width (21.59cm) minus margins */
  margin: 0 auto;
  padding: 0.5cm;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5cm, 1fr));
  gap: 0.5cm;
}

.product-card {
  display: grid;
  grid-template-columns: 5cm 1fr;
  column-gap: 0.5cm;
  padding: 0.3cm;
  background: #ffffff;
  border: 0.05cm solid var(--accent);
  box-shadow: 0 0.1cm 0.2cm rgba(17, 17, 17, 0.08);
  break-inside: avoid;
  animation: fadeInUp .4s ease both;
}

.left { display: flex; flex-direction: column; }
.right { display: flex; flex-direction: column; justify-content: flex-start; }

.image-box {
  width: 5cm;
  height: 5cm;
  border: 0.05cm solid var(--accent);
  background: transparent;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

.code-box {
  margin-top: 0.2cm;
  height: 1.0cm;
  border: 0.05cm solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12pt;
  color: var(--accent);
  background: var(--background);
}

.price-box {
  border: 0.05cm solid var(--accent);
  padding: 0.2cm;
  height: 2.4cm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1cm;
}
.price-box + .price-box { margin-top: 0.3cm; }

.price-box.venta {
  background: linear-gradient(180deg, #ffe08a, var(--secondary));
}
.price-box.mayoreo.empty {
  background: transparent;
}
.price-label {
  font-size: 12pt;
  font-weight: 700;
  color: var(--accent);
}
.price-value {
  font-size: 16pt;
  font-weight: 700;
  color: var(--accent);
}

.admin-actions { display: flex; gap: 0.2cm; margin-top: 0.2cm; }
.admin-link { border: 0.05cm solid var(--accent); padding: 0.15cm 0.3cm; text-decoration: none; font-weight: 700; color: var(--accent); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.admin-link:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(17,17,17,0.12); }
.admin-link.primary { background: var(--secondary); border-color: var(--secondary); }
.admin-link.delete { background: var(--primary); color: #fff; border-color: var(--primary); }
.admin-link.print { background: #fff; border-color: var(--accent); }

.site-footer {
  padding: 0.5cm;
  text-align: center;
  color: #666;
}

/* Screen responsiveness */
@media screen {
  .container { max-width: 1200px; padding: 16px; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media screen and (min-width: 900px) {
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 1200px) {
  .catalog-grid { grid-template-columns: repeat(4, 1fr); }
}
@media screen {
  .product-card { grid-template-columns: 160px 1fr; column-gap: 16px; padding: 12px; }
  .image-box { width: 160px; height: 160px; }
  .code-box { height: auto; padding: 6px; font-size: 14px; }
  .price-box { height: auto; padding: 10px; }
  .price-label { font-size: 14px; }
  .price-value { font-size: 18px; }
}

/* Modal styles */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 20px 40px rgba(17,17,17,0.25);
  width: 96%;
  max-width: 640px;
  padding: 16px;
  animation: zoomIn .2s ease both;
}
.modal-header { font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; }
.show { display: flex; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Print-only adjustments */
@media print {
  .no-print { display: none !important; }
  body { background: #ffffff; }
  .container { padding: 0; }
  .product-card { box-shadow: none; }
}