/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  background-color: #000;        /* Fondo oscuro principal */
  color: #fff;                   /* Texto principal en blanco */
  margin: 0;
  padding: 0;
  text-align: center;            /* Centrado de texto global por simplicidad */
}

/* Encabezado y navegación */
header {
  background-color: #1e1e1e;     /* Fondo ligeramente más claro para header */
  padding: 1em;
  text-align: center;
}
/* Logo en header: centrado y con límites en móvil */
header img.logo{
  display: block;
  margin: 0 auto .6em;     /* encima del botón y con separación */
  height: auto;
  max-width: 95vw;         /* nunca se sale en móvil */
}


/* INICIO: Logo arriba y ~30% más pequeño que antes */
header .hero-logo{
  display: block;
  margin: 0 auto .6em;          /* separa del botón que va debajo */
  width: min(51vw, 288px);
  height: auto;
}
/* FIN: Logo arriba y ~30% más pequeño */
/* Ajuste específico para tablets: logo un poco más pequeño */
@media (min-width: 600px) and (max-width: 1024px) {
  header .hero-logo{
    width: 220px;   /* puedes bajar a 200px si quieres aún más pequeño */
  }
}


/* Tamaño del logo cuando está directamente en el <header> */
header img.logo {
  height: 44px;      /* Ajusta aquí si lo quieres un poco mayor/menor */
  width: auto;
  vertical-align: middle;
  margin-right: .5em;
}

@media (max-width:600px){
  header img.logo { height: 36px; }  /* un pelín más pequeño en móvil */
}

.site-title {
  font-size: 2.4em;
  font-weight: 900;
  color: #fff;
  margin: 0 0 0.5em;
  text-shadow: none;
  letter-spacing: 1px;
}
/* Logo dentro del título */
.site-title img.logo{
  height: 44px;
  width: auto;
  vertical-align: middle;
  margin-right: .35em;
}
@media (max-width:600px){
  .site-title img.logo{ height: 36px; }
}

header button {
  background-color: #13c4a3;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.5em 1em;            /* Botones de nav: tamaño estándar */
  cursor: pointer;
  margin-right: 0.5em;           /* Espacio a la derecha entre botones */
  font-weight: bold;
  transition: background 0.3s ease;
}
header button:last-child {
  margin-right: 0;               /* Sin margen después del último botón nav */
}

/* Secciones principales */
section {
  max-width: 500px;              /* Ancho máximo centrado para contenido */
  margin: 2em auto;
  padding: 2em 1em;             /* Padding balanceado (más espacio vertical) */
  text-align: center;
}

/* INICIO AÑADIDO: texto formal en "Sobre Beriloom" */
#about {
  text-align: left;             /* el título y el contenido dejan de ir centrados */
}

/* Párrafos y viñetas justificados como en un libro */
#about p,
#about li {
  text-align: justify;
}

/* Un poco de sangría para las listas */
#about ul {
  padding-left: 1.5em;
}
/* FIN AÑADIDO */

/* Títulos de sección (h2) */
section h2 {
  margin: 0 0 0.5em;            /* Separación debajo del título */
}

/* Formularios y elementos de formulario */
label {
  display: block;
  margin: 1em 0 0.5em;          /* Separación del elemento anterior y del campo */
  font-weight: normal;
  color: #ffffff;
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-bottom: 1em;
  padding: 0.5em;
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #333;       /* Borde sutil para delimitar el campo */
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
}
input::placeholder, textarea::placeholder {
  color: #999;                  /* Color tenue para textos placeholder */
}
button {
  /* Los botones por defecto serán inline-block (no width 100%) */
  background-color: #13c4a3;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.4em 0.8em;         /* Botones más delgados */
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  transition: background 0.3s ease;
}
button:hover {
  background-color: #0fa58b;
}

/* Espaciado entre botones adyacentes (en línea) */
button + button {
  margin-top: 0.5em;
}


/* Estilos específicos de componentes */
.item {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 1em;
  margin-bottom: 1.5em;
  text-align: center;
}
.item h3, .item h4 {
  margin: 0.5em 0;
}
.item p {
  margin: 0.5em 0;
  text-align: left;             /* Texto descriptivo alineado a la izquierda */
}
.item ul {
  display: inline-block;
  text-align: left;
  padding-left: 1em;
  margin: 0.5em 0;
}
.item img {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 0.5em auto;
  border-radius: 5px;
}
.item button {
  margin: 0.5em 0 0.5em 0;     /* Espacio vertical dentro de la tarjeta */
}
.item button:last-of-type {
  background-color: #b02a37;    /* Botón especial (ej. Eliminar) en rojo */
}
.item button:last-of-type:hover {
  background-color: #8b1d29;
}

/* Elementos informativos */
#cartTotal {
  font-weight: bold;
  text-align: center;
  margin-top: 1em;
}
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #13c4a3;
  color: #fff;
  font-size: 1.5em;
  padding: 0.5em 0.8em;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 0 10px #13c4a3;
  z-index: 1000;
  display: none;               /* Aparece solo cuando se hace scroll */
}

/* Sección de opciones de inicio (#homeOptions) */
#homeOptions {
  display: inline-block;
  background-color: #111;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 1.5em 1em;
  margin-top: 2em;
}
#homeOptions button {
  display: block;
  width: 100%;
  margin: 0.5em 0;
  padding: 1em;
  font-size: 1em;
  background-color: #13c4a3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#homeOptions button:hover {
  background-color: #0fa58b;
}

/* Cuadro de búsqueda y selector de orden en listings */
#searchInput, 
#sortSelect, 
#paymentMethod {
  /* Campos específicos: ya cubiertos por input, select generales */
  /* Se incluyen aquí si se requiere estilo adicional específico */
}

/* Estados de enfoque (focus) para accesibilidad */
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;                /* Quitar el contorno azul por defecto */
  box-shadow: 0 0 5px #13c4a3;  /* Resaltar con sombra verde menta */
}
input:focus, select:focus, textarea:focus {
  border-color: #13c4a3;        /* Bordear campos con color de marca al foco */
}

/* Ocultar contenedores vacíos que estorban visualmente */
#homeOptions {
  min-height: 3em;
}

#currentUserDisplay:empty {
  display: none;
}
#navButtons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
}

#navButtons button {
  background-color: #13c4a3;
  color: white;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

#navButtons button:hover {
  background-color: #0fa58b;
}

@media (max-width: 600px) {
  #btnHome {
    font-size: 1.4em;
    padding: 0.8em 1.2em;
  }
}

#cartItemsContainer .item img {
  max-width: 80px;
}
.vendedorNick {
  color: #00dca0; /* mismo verde que los títulos/botones */
  font-weight: bold;
  text-decoration: none;
}
.conversionInfo {
  color: #00dca0; /* Verde menta como el resto del diseño */
  font-weight: bold;
}

.conversionInfo ul {
  list-style: none;
  padding: 0;
  margin: 0.5em 0;
}

.conversionInfo li {
  margin: 0.5em 0;
}

.conversionInfo .recomendado {
  color: #00dca0;
}

#cartItemsContainer button {
  display: inline-block;
  margin-top: 0.5em;
}

a.vendedorNick,
a.vendedorNick:visited,
a.vendedorNick:hover,
a.vendedorNick:active {
  color: #00dca0 !important;
  font-weight: bold;
  text-decoration: none;
}

#payButton {
  width: 100%;
  max-width: 300px;
  margin: 1.5em auto;
  padding: 1em;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #13c4a3;
  color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 10px #13c4a3;
  transition: background 0.3s ease;
}

#payButton:hover {
  background-color: #0fa58b;
}

/* Evitar zoom al enfocar inputs en iOS/Android */
html, body { -webkit-text-size-adjust: 100%; }
input, select, textarea, button { font-size: 16px; }

/* Un poco más de suavidad en móvil */
body { touch-action: manipulation; overscroll-behavior: none; }
/* INICIO: Elevar menú Home tras iniciar sesión */
body.logged-in #home{
  margin-top: .4em;        /* antes 2em por la regla general de section */
  padding-top: .8em;
  border-top: 1px solid #333;  /* línea fina bajo “Usuario” */
}
body.logged-in #homeOptions{
  margin-top: .8em;        /* antes 2em: lo acercamos aún más */
}
/* FIN: Elevar menú Home tras iniciar sesión */