/* =====================================================================
   LB Subastas — componentes compartidos
   =====================================================================
   Header, footer, botones, formularios, badges, paneles, tablas,
   modales y el botón flotante de WhatsApp.

   Todos los valores salen de tokens.css. Sin literales acá.
   ===================================================================== */

/* =====================================================================
   Header — unificado en todas las pantallas, idéntico con y sin sesión
   (doc 00, "Site header")
   ===================================================================== */

.header-aviso {
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  padding: 8px var(--padding-lateral);
  text-align: center;
}

.header-aviso p {
  font-size: var(--tam-aviso);
  color: var(--texto-aviso);
}

.header {
  border-bottom: 1px solid var(--borde);
  background: var(--blanco);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header__barra {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-cards);
  padding: 16px var(--padding-lateral);
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: var(--alto-logo-header);
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header__nav a {
  font-size: var(--tam-card);
  color: var(--texto);
  font-weight: var(--peso-normal);
  white-space: nowrap;
}

.header__nav a:hover {
  color: var(--verde);
}

/* Ítem activo: negrita + subrayado, para que siempre se sepa dónde se
   está parado dentro del sitio (doc 00). */
.header__nav a[aria-current='page'] {
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--texto);
}

.header__acciones {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header__icono {
  font-size: 18px;
  color: var(--texto-secundario);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.header__icono:hover {
  color: var(--verde);
}

/* Campana de notificaciones. El contador se activa en la Fase 3. */
.header__campana {
  position: relative;
}

.header__campana-contador {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--badge-vivo-texto);
  color: var(--blanco);
  font-size: 11px;
  font-weight: var(--peso-medio);
  line-height: 15px;
  text-align: center;
}

.header__avatar {
  width: var(--alto-avatar);
  height: var(--alto-avatar);
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tam-card);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  flex-shrink: 0;
}

.header__avatar:hover {
  color: var(--blanco);
  opacity: 0.9;
}

.header__hamburguesa {
  display: none;
}

/* Panel de nav en mobile. La nav nunca queda inaccesible: está a un
   toque, detrás del ícono (doc 00, "Mobile: hamburger menu"). */
.header__mobile {
  display: none;
  flex-direction: column;
  gap: var(--gap-medio);
  padding: var(--gap-cards) var(--padding-lateral);
  border-bottom: 1px solid var(--borde);
  background: var(--blanco);
}

.header__mobile.abierto {
  display: flex;
}

.header__mobile a {
  font-size: var(--tam-cuerpo);
  color: var(--texto);
}

.header__mobile a[aria-current='page'] {
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .header__nav {
    display: none;
  }
  .header__hamburguesa {
    display: flex;
  }
}

/* =====================================================================
   Footer
   ===================================================================== */

.footer {
  background: var(--texto);
  padding: var(--padding-lateral);
  margin-top: auto;
}

.footer__contenido {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__marca img {
  height: var(--alto-logo-footer);
  width: auto;
}

.footer__copy {
  font-size: var(--tam-aviso);
  color: var(--texto-footer);
}

.footer__links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__links a {
  font-size: var(--tam-aviso);
  color: var(--texto-footer);
}

.footer__links a:hover {
  color: var(--blanco);
}

/* =====================================================================
   Botón flotante de WhatsApp — visible en todo el sitio público
   (doc 00). Mensaje genérico, sin ID de publicación.
   ===================================================================== */

.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* El flotante lleva el verde de marca de WhatsApp (#25D366), que en
     el diseño es DISTINTO del botón "Consultar por WhatsApp" en línea. */
  background: var(--verde-whatsapp-marca);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--sombra-modal);
  z-index: var(--z-flotante);
}

.whatsapp-flotante:hover {
  color: var(--blanco);
  transform: scale(1.05);
}

/* =====================================================================
   Botones
   ===================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--alto-boton);
  padding: 0 16px;
  border: none;
  border-radius: var(--radio-boton);
  font-size: var(--tam-aviso);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: opacity var(--transicion), background var(--transicion);
}

.boton:hover {
  opacity: 0.9;
}

.boton:disabled {
  /* El diseño no usa opacidad: pinta el botón gris plano. Con opacity
     el color de fondo se mezcla con lo que haya detrás y queda distinto
     según la sección. */
  background: var(--deshabilitado-fondo);
  color: var(--deshabilitado-texto);
  border-color: var(--deshabilitado-fondo);
  cursor: not-allowed;
}

.boton--primario {
  background: var(--verde);
  color: var(--blanco);
}

.boton--primario:hover {
  color: var(--blanco);
}

.boton--secundario {
  background: var(--blanco);
  color: var(--texto);
  border: 1px solid var(--borde);
}

.boton--whatsapp {
  background: var(--verde-whatsapp);
  color: var(--blanco);
}

.boton--whatsapp:hover {
  color: var(--blanco);
}

.boton--texto {
  background: none;
  color: var(--verde-texto);
  padding: 0;
  height: auto;
}

.boton--bloque {
  width: 100%;
}

.boton--grande {
  height: 42px;
  font-size: var(--tam-cuerpo);
}

/* =====================================================================
   Badges
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Era 9px: el texto más chico del sitio, y encima en mayúsculas sobre
     un fondo de color. "EN VIVO" o "FINALIZA HOY" son justamente los
     datos que hay que poder leer de un vistazo. */
  font-size: 11px;
  font-weight: var(--peso-medio);
  padding: 2px 6px;
  border-radius: var(--radio-badge);
  letter-spacing: 0.02em;
}

.badge--destacada {
  background: var(--badge-destacada-fondo);
  color: var(--badge-destacada-texto);
}

.badge--vivo,
.badge--finaliza-hoy {
  background: var(--badge-vivo-fondo);
  color: var(--badge-vivo-texto);
}

.badge--clasificado {
  background: var(--badge-clasificado-fondo);
  color: var(--badge-clasificado-texto);
}

.badge--neutro {
  background: var(--fondo);
  color: var(--texto-secundario);
}

/* =====================================================================
   Paneles y formularios
   ===================================================================== */

.panel {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  padding: 22px;
}

/*
  Bloque ancho de sección (Nosotros, Vender).

  En el diseño NO es blanco como las cards chicas: es #F3F3F2, con radio
  12px y más aire. Son dos componentes distintos que se parecen.
*/
.panel--suave {
  background: var(--fondo-panel-suave);
  border-color: transparent;
  border-radius: 12px;
  padding: 36px 24px;
}

.panel__titulo {
  font-size: var(--tam-seccion);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  margin-bottom: var(--gap-cards);
}

.campo {
  display: block;
  margin-bottom: var(--gap-cards);
}

.campo__etiqueta {
  display: block;
  font-size: var(--tam-secundario);
  color: var(--texto-secundario);
  font-weight: var(--peso-medio);
  margin-bottom: 5px;
}

.campo__control {
  width: 100%;
  height: var(--alto-input);
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  background: var(--blanco);
  font-size: var(--tam-card);
  transition: border-color var(--transicion);
}

textarea.campo__control {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}

.campo__control:focus {
  border-color: var(--verde);
  outline: none;
}

.campo__control:disabled {
  background: var(--fondo);
  color: var(--texto-secundario);
  cursor: not-allowed;
}

.campo__control[aria-invalid='true'] {
  border-color: var(--badge-vivo-texto);
}

/* Input con un botón o ícono pegado a la derecha (email + "Verificar",
   contraseña + ojo). */
.campo__grupo {
  display: flex;
  gap: var(--gap-chico);
  align-items: stretch;
}

.campo__grupo .campo__control {
  flex: 1;
}

/*
  Campo de contraseña con el ojo de "mostrar".

  EL BUG QUE ESTO ARREGLA. El botón se posicionaba al 50% de
  `.campo--con-ojo`, que NO es el input: es el bloque entero, con la
  etiqueta arriba y —cuando hay— el mensaje de error abajo. El centro de
  ese bloque cae bastante más arriba que el centro del campo, así que el
  ojo terminaba montado sobre la etiqueta. Y se movía solo: al aparecer
  un error el bloque crecía y el ojo bajaba.

  Ahora el ancla es `.campo__caja`, que envuelve únicamente al input.
  El ojo queda centrado sobre el campo pase lo que pase alrededor.
*/
.campo__caja {
  position: relative;
  display: block;
}

.campo__ojo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Área táctil cómoda: un ícono de 16px es difícil de acertar con el
     dedo, sobre todo al lado del borde del campo. */
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--texto-secundario);
  font-size: 18px;
  line-height: 1;
}

.campo__ojo:hover { color: var(--texto); }

/* El texto no pasa por debajo del botón. */
.campo__caja .campo__control {
  padding-right: 40px;
}

.campo__ayuda {
  font-size: var(--tam-secundario);
  color: var(--texto-secundario);
  margin-top: 4px;
}

/*
  Ayuda que pasó a ser una advertencia: se usa cuando el contador de
  caracteres llega al tope y el campo deja de aceptar texto. Sin esto,
  la persona sigue tecleando sin entender por qué no entra nada.
*/
.campo__ayuda--alerta {
  color: var(--badge-vivo-texto);
  font-weight: var(--peso-medio);
}

/*
  Campo con error: borde rojo, para que se vea CUÁL falta sin tener que
  leer los mensajes uno por uno.
*/
.campo__control--error,
.campo__control--error:focus {
  border-color: var(--badge-vivo-texto);
}

/*
  Un checkbox no es `.campo__control`, así que el borde rojo no lo
  alcanzaba: mostraba el mensaje pero no se veía cuál era el que faltaba.
*/
.checkbox--error {
  color: var(--badge-vivo-texto);
}

.checkbox--error input[type='checkbox'] {
  outline: 2px solid var(--badge-vivo-texto);
  outline-offset: 2px;
}

.campo__error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tam-secundario);
  color: var(--badge-vivo-texto);
  margin-top: 4px;
}

.campo__ok {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tam-secundario);
  color: var(--verde);
  margin-top: 4px;
}

.campo__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-medio);
}

@media (max-width: 640px) {
  .campo__fila {
    grid-template-columns: 1fr;
  }
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--tam-aviso);
  color: var(--texto-secundario);
  line-height: 1.5;
  cursor: pointer;
}

.checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--verde);
}

/* =====================================================================
   Selector "Tipo de publicación"
   =====================================================================
   Es lo ÚNICO que cambia el formulario de alta: un solo formulario para
   subastas y clasificados (doc 06), no dos pantallas.

   Lo comparten el backoffice y la página pública "Vender", por eso vive
   acá y no en admin.css.
   ===================================================================== */

.selector-tipo {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.selector-tipo label { flex: 1; cursor: pointer; }

.selector-tipo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.selector-tipo span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  font-size: var(--tam-card);
  font-weight: var(--peso-medio);
  color: var(--texto-aviso);
  background: var(--blanco);
}

.selector-tipo input:checked + span {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}

.selector-tipo input:focus-visible + span {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* =====================================================================
   Carga de fotos
   =====================================================================
   Las imágenes suben a Express, que las valida antes de reenviarlas a
   Supabase Storage (doc 01). Nunca del navegador directo a Storage.
   ===================================================================== */

.dropzone {
  border: 1px dashed var(--borde-punteado);
  border-radius: var(--radio-boton);
  padding: 22px;
  text-align: center;
  color: var(--texto-secundario);
  font-size: var(--tam-aviso);
  cursor: pointer;
  background: var(--fondo-carga);
}

.dropzone i {
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
  color: var(--texto-terciario);
}

.dropzone__miniatura {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  margin-top: 10px;
  border-radius: var(--radio-boton);
  background: var(--blanco);
}

.miniaturas {
  display: flex;
  gap: var(--gap-chico);
  flex-wrap: wrap;
  margin-top: var(--gap-medio);
}

.miniaturas__item {
  position: relative;
  width: 72px;
  height: 56px;
  border-radius: var(--radio-badge);
  overflow: hidden;
  border: 1px solid var(--borde);
}

.miniaturas__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniaturas__quitar {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: var(--blanco);
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   "Mi cuenta" — sidebar de pestañas
   =====================================================================
   Orden del doc 13: Mis pujas, Ganadas, Historial, Favoritos,
   Mis solicitudes, Notificaciones, Mis datos.
   ===================================================================== */

.cuenta {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0 48px;
}

@media (max-width: 860px) {
  .cuenta { grid-template-columns: 1fr; }
}

.cuenta__sidebar {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  padding: 16px;
}

.cuenta__perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0 4px;
}

.cuenta__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--peso-fuerte);
  font-size: var(--tam-cuerpo);
  flex-shrink: 0;
}

.cuenta__nombre {
  font-size: var(--tam-card);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.cuenta__email {
  font-size: var(--tam-secundario);
  color: var(--texto-terciario);
  word-break: break-all;
}

.cuenta__tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cuenta__tabs a {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: var(--tam-card);
  color: var(--texto-aviso);
}

.cuenta__tabs a i { font-size: 15px; }

.cuenta__tabs a[aria-current='page'] {
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: var(--peso-medio);
}

.cuenta__tabs a[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

/* =====================================================================
   Mensajes de estado (flash)
   ===================================================================== */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radio-boton);
  font-size: var(--tam-card);
  margin-bottom: var(--gap-cards);
}

.aviso--error {
  background: var(--badge-vivo-fondo);
  color: var(--badge-vivo-texto);
}

.aviso--ok {
  background: var(--verde-claro);
  color: var(--badge-clasificado-texto);
}

.aviso--info {
  background: var(--fondo);
  color: var(--texto-secundario);
  border: 1px solid var(--borde-suave);
}

/*
  Aviso que PIDE UNA ACCIÓN, no que informa.

  Nace del aviso de "cargá tu DNI para poder ofertar": iba en gris sobre
  gris y quedaba como una nota al pie, cuando en realidad es lo único
  que separa a la persona de poder participar en la subasta que está
  mirando. Con el mismo peso visual que un texto de ayuda, se pasaba de
  largo.

  Usa el ámbar que el sistema ya tiene para "DESTACADA": llama la
  atención sin el rojo de error, que aquí sería equivocado porque la
  persona no hizo nada mal.

  El ícono va CENTRADO en vertical y más grande —el resto de los avisos
  lo alinea arriba, que con dos renglones lo dejaba flotando— y la
  barra lateral ancla el bloque sin encerrarlo en un recuadro.
*/
.aviso--accion {
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--badge-destacada-fondo);
  color: var(--badge-destacada-texto);
  border: 1px solid var(--badge-destacada-texto);
  border-left-width: 4px;
  font-size: var(--tam-cuerpo);
}

.aviso--accion i {
  font-size: 26px;
  /* Que el ícono no se achique cuando el texto ocupa varios renglones. */
  flex: none;
}

.aviso--accion a {
  color: var(--badge-destacada-texto);
  font-weight: var(--peso-medio);
  text-decoration: underline;
}

/* =====================================================================
   Tablas
   ===================================================================== */

.tabla {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  overflow: hidden;
}

.tabla th {
  text-align: left;
  font-size: var(--tam-secundario);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
  background: var(--fondo);
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.tabla td {
  font-size: var(--tam-card);
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.tabla tr:last-child td {
  border-bottom: none;
}

/* =====================================================================
   Estados vacíos
   ===================================================================== */

.vacio {
  text-align: center;
  padding: 48px var(--padding-lateral);
  color: var(--texto-secundario);
}

.vacio i {
  font-size: 34px;
  color: var(--texto-terciario);
  display: block;
  margin-bottom: var(--gap-medio);
}

/* =====================================================================
   Pantallas centradas (login, registro, error, mantenimiento)
   ===================================================================== */

.centrada {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px var(--padding-lateral);
}

.centrada--ancha {
  max-width: 620px;
}

.centrada__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.centrada__logo img {
  height: 46px;
  width: auto;
}

.centrada__titulo {
  font-size: var(--tam-hero);
  font-weight: var(--peso-fuerte);
  text-align: center;
  color: var(--texto);
  margin-bottom: var(--gap-chico);
}

.centrada__bajada {
  font-size: var(--tam-card);
  color: var(--texto-secundario);
  text-align: center;
  margin-bottom: 26px;
}

.centrada__pie {
  text-align: center;
  font-size: var(--tam-card);
  color: var(--texto-secundario);
  margin-top: var(--gap-grande);
}

/* =====================================================================
   Modal de confirmación
   ===================================================================== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-lateral);
  z-index: var(--z-modal);
}

.modal[hidden] {
  display: none;
}

.modal__caja {
  background: var(--blanco);
  border-radius: var(--radio-card);
  padding: 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sombra-modal);
}

.modal__titulo {
  font-size: var(--tam-titulo);
  font-weight: var(--peso-fuerte);
  margin-bottom: var(--gap-medio);
}

.modal__texto {
  font-size: var(--tam-card);
  color: var(--texto-secundario);
  margin-bottom: var(--gap-grande);
}

.modal__acciones {
  display: flex;
  gap: var(--gap-medio);
  justify-content: center;
}