/* =========================================================
   CAMISETEALO — MODO OSCURO TOTAL, RESPONSIVE FLUIDO & ALTO CONTRASTE
   ========================================================= */

:root{
  --c-bg: #0B0B0C;
  --c-bg-card: #141519;
  --c-bg-card-hover: #1c1e24;
  --c-border: #23262D;
  --c-border-hover: #3FB6E8;
  --c-text: #FFFFFF;
  --c-text-muted: #D1D5DB;
  --c-sky: #3FB6E8;
  --c-sky-dark: #1A8CBF;
  --c-accent-glow: rgba(63, 182, 232, 0.2);
}

*{
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body{
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
  font-family: 'Barlow', sans-serif;
  overflow-x: hidden !important;
  width: 100%;
}

.font-display{
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  letter-spacing: .03em;
}

.text-sky{ color: var(--c-sky) !important; }
.bg-sky{ background-color: var(--c-sky) !important; }
.bg-dark-card{ background-color: var(--c-bg-card); }
.border-dark{ border-color: var(--c-border); }

/* BARRA SUPERIOR PROMO / ANNOUNCEMENT BAR */
.announcement-bar {
  background: linear-gradient(90deg, #101216 0%, #172430 50%, #101216 100%);
  border-bottom: 1px solid rgba(63,182,232,0.3);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.announcement-bar strong {
  color: var(--c-sky);
}

/* Logo Aestetik Circular */
.brand-logo{
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 14px rgba(63, 182, 232, 0.35);
  display: block;
}

/* HERO CANVAS */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-wrapper {
  position: relative;
  background: radial-gradient(circle at 50% 30%, #161a22 0%, #0B0B0C 75%);
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
}

/* Tarjetas de Producto - Diseño Limpio Sin Badges Feos */
.product-card{
  background: var(--c-bg-card) !important;
  border: 1px solid var(--c-border) !important;
  color: #FFFFFF !important;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), border-color .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover{
  transform: translateY(-4px);
  border-color: var(--c-sky) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 20px var(--c-accent-glow);
}
.product-card img{
  background: #0d0e11;
  width: 100%;
}

/* Selector de talles en modo oscuro CON ALTO CONTRASTE */
.surprise-size-btn, .size-btn {
  background-color: #1c1f26 !important;
  color: #FFFFFF !important;
  border: 1px solid #3b404d !important;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  padding: 6px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
  text-align: center;
}
.surprise-size-btn:hover, .size-btn:hover {
  border-color: var(--c-sky) !important;
  color: var(--c-sky) !important;
  background-color: #262b36 !important;
}
.surprise-size-btn.selected, .size-btn.selected,
.surprise-size-btn.bg-sky, .size-btn.bg-sky {
  background-color: var(--c-sky) !important;
  color: #000000 !important;
  border-color: var(--c-sky) !important;
  font-weight: bold !important;
}

/* Tablas en modo oscuro - TEXTO 100% VISIBLE (BLANCO BRILLANTE Y CELESTE) */
.size-table {
  background-color: #141519 !important;
  border-collapse: collapse;
  width: 100%;
}
.size-table thead tr {
  background-color: #1b1e26 !important;
  border-bottom: 2px solid var(--c-sky) !important;
}
.size-table th {
  color: #FFFFFF !important;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding: 12px 14px;
}
.size-table tbody tr {
  background-color: #141519 !important;
  border-bottom: 1px solid #282c37 !important;
}
.size-table tbody tr:nth-child(even) {
  background-color: #181a20 !important;
}
.size-table td {
  color: #F3F4F6 !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 14px;
  text-align: center;
}

/* Botones */
.btn-primary{
  background: var(--c-sky);
  color: #0B0B0C !important;
  font-family: 'Anton', sans-serif;
  letter-spacing: .04em;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.btn-primary:hover{
  background: #62c7f2;
  color: #000000 !important;
  box-shadow: 0 0 18px rgba(63,182,232,0.5);
  transform: translateY(-1px);
}
.btn-primary:active{ transform: scale(0.98); }

.btn-outline{
  border: 2px solid rgba(255,255,255,0.8);
  color: #FFFFFF !important;
  font-family: 'Anton', sans-serif;
  letter-spacing: .04em;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline:hover{
  border-color: var(--c-sky);
  color: var(--c-sky) !important;
  background: rgba(63,182,232,0.08);
}
.btn-primary:disabled, .btn-outline:disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn-dark{
  background: #1e2026;
  border: 1px solid #323640;
  color: #fff !important;
  font-family: 'Anton', sans-serif;
  letter-spacing: .03em;
  transition: all .18s ease;
}
.btn-dark:hover{
  background: #2a2d36;
  border-color: var(--c-sky);
}

/* Inputs en modo oscuro */
input, textarea, select {
  background-color: #141519 !important;
  color: #FFFFFF !important;
  border: 1px solid #282B33 !important;
  border-radius: 8px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--c-sky) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(63,182,232,0.2) !important;
}

/* Validación error */
.input-error {
  border-color: #EF4444 !important;
  background-color: #241416 !important;
}
.error-msg {
  color: #F87171;
  font-size: 0.78rem;
  margin-top: 0.35rem;
  font-weight: 500;
}

/* Scrollbar dark */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: #0B0B0C; }
::-webkit-scrollbar-thumb{ background: #2A2D35; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--c-sky); }

/* Tweet Feed */
.tweet-card {
  background: #141519;
  border: 1px solid #23262D;
  border-radius: 12px;
  padding: 18px;
  transition: border-color .18s ease;
}
.tweet-card:hover {
  border-color: #353945;
}
.tweet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0B0B0C;
  color: #3FB6E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  border: 2px solid rgba(63, 182, 232, 0.4);
}

.spinner{
  width: 20px; height: 20px;
  border: 2px solid rgba(63,182,232,.2);
  border-top-color: var(--c-sky);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Toast */
#toast-container{ position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 999; display:flex; flex-direction:column; gap:.5rem; }
.toast{
  background: #1A1C22;
  color: #FFFFFF;
  border-left: 4px solid var(--c-sky);
  padding: 0.85rem 1.2rem;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
  animation: toast-in .2s ease;
  max-width: 340px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.toast.error{ border-left-color: #EF4444; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }

/* RESPONSIVE FLUIDO */
@media (max-width: 640px) {
  .hero-title { font-size: 2.75rem !important; }
}

/* Botón "PANEL ADMIN" del header de escritorio: oculto siempre por defecto,
   y solo se muestra en pantallas grandes (lg) cuando auth.js le agrega la
   clase "is-admin". Antes dependía de sacarle "hidden" a mano, lo que lo
   dejaba visible también en mobile y apretaba el resto de los íconos. */
.admin-link-desktop { display: none; }
@media (min-width: 1024px) {
  .admin-link-desktop.is-admin { display: inline-block; }
}

/* Botón "PANEL ADMIN" de mobile: un botón normal y siempre visible en la
   barra superior (no depende de abrir el menú hamburguesa/desplegable).
   Mismo patrón que el de escritorio: oculto por defecto, visible solo por
   debajo de 1024px y solo si auth.js le agregó la clase "is-admin". */
.admin-link-mobile { display: none; }
@media (max-width: 1023px) {
  .admin-link-mobile.is-admin { display: flex; align-items: center; justify-content: center; }
}

/* =========================================================
   FIX DE CONTRASTE — el sitio es 100% modo oscuro, así que
   los grises "oscuros" de Tailwind (pensados para fondo claro)
   se ven casi ilegibles sobre el fondo negro. Los reemplazamos
   por grises claros manteniendo la jerarquía entre ellos.
   No afecta a los bloques con fondo claro (ej: bg-white),
   que ya fuerzan su propio color de texto oscuro.
   ========================================================= */
.text-gray-500{ color:#B9BEC7 !important; }
.text-gray-600{ color:#C7CBD1 !important; }
.text-gray-700{ color:#D6D9DE !important; }
.text-gray-800{ color:#E7E9EC !important; }
.text-gray-900{ color:#F5F6F7 !important; }

.bg-white .text-gray-500,
.bg-white .text-gray-600,
.bg-white .text-gray-700,
.bg-white .text-gray-800,
.bg-white .text-gray-900,
.bg-gray-50 .text-gray-500,
.bg-gray-50 .text-gray-600,
.bg-gray-50 .text-gray-700,
.bg-gray-50 .text-gray-800,
.bg-gray-50 .text-gray-900,
[class*="bg-gray-50"] .text-gray-500,
[class*="bg-gray-50"] .text-gray-600,
[class*="bg-gray-50"] .text-gray-700,
[class*="bg-gray-50"] .text-gray-800,
[class*="bg-gray-50"] .text-gray-900,
[class*="bg-amber-50"] .text-gray-600,
[class*="bg-amber-50"] .text-gray-700{
  color:#374151 !important;
}

/* Etiqueta verde de regalo en el carrito */
.gift-tag{
  display:inline-block;
  background:#16a34a;
  color:#ffffff !important;
  font-weight:700;
  font-size:0.65rem;
  letter-spacing:.05em;
  padding:2px 8px;
  border-radius:999px;
  text-transform:uppercase;
}

/* Cartelito de "faltan X para el regalo" en el carrito */
.gift-progress-banner{
  background: rgba(22,163,74,0.12);
  border: 1px solid rgba(22,163,74,0.4);
  color: #4ade80;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.35;
}

/* Sub-cartelito, más chico y celeste, para el progreso de envío gratis en CABA */
.shipping-progress-note{
  color: var(--c-sky);
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.3;
  opacity: 0.9;
}

/* Barra de progreso del estado del pedido (vista del comprador) */
.order-progress-track{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#23262D;
  overflow:hidden;
}
.order-progress-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--c-sky-dark), var(--c-sky));
  transition: width .4s ease;
}
.order-progress-steps{
  display:flex;
  justify-content:space-between;
  font-size:0.65rem;
  color:#9CA3AF;
  margin-top:6px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
/* Order progress steps */
.order-progress-steps span.done{ color: var(--c-sky); font-weight:700; }

/* Zona de arrastrar y soltar imágenes (admin + "a tu gusto") */
.dropzone{
  border: 2px dashed #323640;
  background: rgba(63,182,232,0.03);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.dropzone-active{
  border-color: var(--c-sky);
  background: rgba(63,182,232,0.08);
}