/* industrias1911 · capa visual sobre el catálogo (React + Tailwind compilado)
   Convierte la tienda a negro/verde sin tocar la lógica del carrito ni el checkout. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --c-bg: #080808;
  --c-card: #141414;
  --c-card-2: #1c1c1c;
  --c-line: #262626;
  --c-text: #f5f5f5;
  --c-muted: #a3a3a3;
  --c-green: #00843D;
  --c-green-2: #06a04d;
  --c-accent: #2ee36f;
}

html, body { background: var(--c-bg) !important; color: var(--c-text); }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
#root { min-height: 100vh; }

/* Encabezados con la tipografía de cancha */
h1, h2 {
  font-family: "Oswald", "Inter", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
h1 { font-weight: 700 !important; }
h2 { font-weight: 600 !important; color: #fff; }
h3 { color: #fff; }

/* Fondos claros del tema viejo → oscuros */
.bg-gray-50, .bg-gray-100, .bg-slate-50 { background-color: var(--c-bg) !important; }
.bg-white { background-color: var(--c-card) !important; color: var(--c-text); }
.bg-gray-200 { background-color: var(--c-card-2) !important; color: var(--c-text); }
.bg-gradient-to-br { background-image: none !important; background-color: var(--c-bg) !important; }
.from-slate-50, .via-gray-50, .to-slate-100 { --tw-gradient-from: var(--c-bg); --tw-gradient-to: var(--c-bg); }

/* Textos grises del tema viejo */
.text-gray-900, .text-gray-800, .text-slate-700, .text-slate-800 { color: #fff !important; }
.text-gray-700, .text-slate-600 { color: #e5e5e5 !important; }
.text-gray-600, .text-gray-500 { color: var(--c-muted) !important; }
.text-gray-400 { color: #737373 !important; }
.text-black { color: #fff !important; }

/* Bordes, divisores y sombras */
.border, .border-t, .border-b, .border-l, .border-r,
.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400 { border-color: var(--c-line) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]), .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-line) !important; }
.shadow, .shadow-md, .shadow-lg, .shadow-xl {
  --tw-shadow: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
}
.hover\:bg-gray-100:hover, .hover\:bg-gray-50:hover { background-color: #262626 !important; }
.hover\:border-gray-300:hover { border-color: #404040 !important; }

/* Barra de navegación */
nav.bg-black, nav.rounded-xl, nav.rounded-2xl {
  background: rgba(8, 8, 8, .85) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 20px !important;
}
nav .text-white.font-semibold {
  font-family: "Oswald", sans-serif;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 18px;
}
nav .text-white\/90 { font-weight: 600; }
nav .bg-rose-500 { background-color: var(--c-accent) !important; color: #000 !important; }

/* Menú desplegable */
.border-neutral-800 { border-color: var(--c-line) !important; background-color: var(--c-card) !important; }

/* Tarjetas de producto: más grandes, con foto protagonista */
.grid.grid-cols-2 {
  gap: 14px !important;
}
@media (min-width: 640px) { .grid.grid-cols-2 { gap: 18px !important; } }
.grid > .relative.bg-white.rounded-xl {
  max-width: none !important;
  border: 1px solid var(--c-line);
  border-radius: 18px !important;
  padding: 12px !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.grid > .relative.bg-white.rounded-xl:hover {
  transform: translateY(-3px);
  border-color: #2f7a4c;
  --tw-shadow: 0 24px 50px -24px rgba(0,132,61,.55) !important;
}
.grid > .relative.bg-white.rounded-xl > .relative.mx-auto {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #1f1f1f !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}
.grid > .relative.bg-white.rounded-xl h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff;
  min-height: 2.6em;
}
.grid > .relative.bg-white.rounded-xl .text-\[\#00843D\] {
  color: #fff !important;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 600;
}
.grid > .relative.bg-white.rounded-xl .line-through { color: #737373 !important; font-size: 13px; }
.grid > .relative.bg-white.rounded-xl .text-green-600 { color: var(--c-accent) !important; }

/* Botones de compra: verde Chicago, grandes, con presencia */
.bg-\[\#00843D\] {
  background-color: var(--c-green) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 12px !important;
  min-height: 44px;
  box-shadow: 0 10px 28px -12px rgba(0,132,61,.7);
  transition: background .15s ease, transform .12s ease;
}
.bg-\[\#00843D\]:hover { background-color: var(--c-green-2) !important; opacity: 1 !important; transform: translateY(-1px); }
.hover\:bg-\[\#006B32\]:hover { background-color: var(--c-green-2) !important; }
.text-\[\#00843D\] { color: var(--c-accent) !important; }
.border-\[\#00843D\] { border-color: var(--c-green) !important; }
.focus\:ring-\[\#00843D\]:focus { --tw-ring-color: var(--c-green); }
.bg-gray-600 { background-color: #2a2a2a !important; border: 1px solid #3a3a3a; }
.hover\:bg-gray-700:hover { background-color: #333 !important; }
.bg-black { background-color: #0d0d0d !important; }

/* Flechas de la galería */
.group\/img button { background: rgba(0,0,0,.6) !important; color: #fff !important; }

/* Carrito y checkout */
.rounded.border { border-color: #3a3a3a !important; color: #fff; }
.text-red-600 { color: #f87171 !important; }
.text-rose-600 { color: #fb7185 !important; }
.hover\:bg-rose-50:hover { background-color: #2a1215 !important; }

/* Campos de formulario del catálogo (login viejo, perfil, checkout, admin) */
input, textarea, select {
  background-color: #222 !important;
  color: #fff !important;
  border-color: #333 !important;
}
input::placeholder, textarea::placeholder { color: #737373; }
input:focus, textarea:focus, select:focus { border-color: var(--c-green) !important; }
.bg-blue-50\/50, .bg-blue-50 { background-color: #0f2a1a !important; }
.rounded-xl.bg-gray-200, .bg-gray-100.rounded-lg { background-color: #1f1f1f !important; }

/* Mensajes */
.bg-red-50 { background-color: #2a0f0f !important; border-color: #7f1d1d !important; }
.text-red-700 { color: #fca5a5 !important; }
.bg-green-50 { background-color: #0b2416 !important; }
.text-green-700, .text-green-600 { color: #86efac !important; }
.bg-yellow-50, .bg-amber-50 { background-color: #2a230f !important; }
.text-yellow-800, .text-amber-800 { color: #fde68a !important; }

/* Admin de artículos: cada fila se ve, y la ventana de editar se lee fácil */
button.bg-gray-100.rounded-xl {
  background: #1c1c1c !important;
  border: 1px solid #333 !important;
  border-radius: 16px !important;
  color: #fff !important;
}
button.bg-gray-100.rounded-xl:hover,
button.bg-gray-100.rounded-xl:focus {
  background: #242424 !important;
  border-color: #2f7a4c !important;
}
[role="dialog"] > .bg-white {
  background: #141414 !important;
  border: 1px solid #2f2f2f;
  border-radius: 20px !important;
}
[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select {
  min-height: 48px;
  border-radius: 12px !important;
  font-size: 16px;
}
[role="dialog"] button.m-3 { margin: 0 !important; min-height: 48px; }

/* Cada artículo en su tarjeta, separado del siguiente */
.flex.flex-col.gap-2 > .w-full.flex.items-stretch {
  margin: 0 0 14px !important;
  padding: 8px !important;
  background: #161616 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 18px !important;
}
button.bg-gray-100.rounded-xl h3::after {
  content: "Editar";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #00843D;
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* El error queda adelante, grande, sobre la ventana */
[role="dialog"] p.text-red-600 {
  position: fixed;
  z-index: 300;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  padding: 16px 18px;
  background: #3f1212;
  color: #fff !important;
  border: 2px solid #ef4444;
  border-radius: 16px;
  font-size: 17px !important;
  font-weight: 700;
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
}
.admin-alert {
  position: fixed;
  z-index: 300;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  margin: 0;
  padding: 16px 18px;
  background: #3f1212;
  color: #fff !important;
  border: 2px solid #ef4444;
  border-radius: 16px;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
}

/* Scroll más fino, cosa de app */
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }