/* ============================================================
   ANCLAJE Y DENSIDAD
   Las alturas las calcula js/anclaje.js y las publica como
   variables, así cada bloque se apila sin taparse.
   ============================================================ */

/* Recorta cualquier desborde horizontal de unos pocos píxeles.
   Se usa "clip" y no "hidden" a propósito: hidden crearía un
   contenedor de scroll y rompería el anclaje de la cabecera. */
html {
  overflow-x: clip
}

body {
  overflow-x: clip;
  max-width: 100%
}

:root {
  --alto-cabecera: 68px;
  --alto-tabs: 0px;
  --alto-barra: 60px
}

/* ============================================================ PILA SUPERIOR

   Se anclan tres cosas y nada más: la cabecera, las pestañas y el
   buscador. Las categorías scrollean con la página.

   En celular las pestañas viven fijas abajo (11-responsive.css), por
   eso el anclaje de pestañas es solo de escritorio.
   ============================================================ */

.franja-superior {
  position: sticky;
  top: 0;
  z-index: 60
}

/* --- Escritorio --- */
@media(min-width:769px) {
  .tabs-app {
    position: sticky;
    top: var(--alto-cabecera);
    z-index: 55;
    background: var(--bg)
  }

  #vista-inventario .barra-acciones {
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--alto-tabs));
    z-index: 50
  }
}

/* --- Celular: solo el buscador se ancla --- */
@media(max-width:768px) {
  #vista-inventario .barra-acciones {
    position: sticky;
    top: var(--alto-cabecera);
    z-index: 50
  }
}

/* ============================================================ PESTAÑAS MÁS BAJAS (PC) */

@media(min-width:769px) {
  .tabs-app {
    gap: 8px;
    padding: 10px 22px 6px
  }

  /* Menos aire entre las pestañas y el buscador */
  .vista-app {
    padding-top: 6px
  }

  #vista-inventario .barra-acciones {
    margin-top: 0;
    margin-bottom: 8px
  }

  .categorias-nav-wrapper {
    margin-top: 0;
    margin-bottom: 8px
  }

  .tab-btn {
    min-height: 38px;
    border-radius: 12px;
    font-size: 13.5px
  }

  .tab-icono {
    font-size: 14px
  }
}

/* ============================================================ GRILLA DE 6 COLUMNAS */

@media(min-width:1280px) {
  #resultados {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px
  }

  .card {
    padding: 10px
  }

  .card-header {
    grid-template-columns: 60px 1fr;
    gap: 8px
  }

  .card-imagen {
    width: 60px
  }

  .producto-img,
  .sin-imagen {
    width: 60px;
    height: 60px;
    border-radius: 10px
  }

  .card-info h3 {
    font-size: 13px;
    line-height: 1.22;
    margin-bottom: 3px
  }

  .card-info p {
    font-size: 11px;
    margin-bottom: 2px
  }

  .precios {
    gap: 4px;
    margin-top: 7px
  }

  .precio-item {
    padding: 5px 8px;
    border-radius: 8px
  }

  .precio-item .tipo {
    font-size: 10.5px
  }

  .precio-item .valor {
    font-size: 12px;
    font-weight: 800
  }

  .pill-stock,
  .badge-producto {
    font-size: 9.5px;
    padding: 2px 7px
  }

  .card-acciones {
    gap: 5px;
    margin-top: 8px
  }

  .card-acciones button {
    min-height: 32px;
    font-size: 11.5px;
    border-radius: 9px
  }
}

/* Entre 1024 y 1279 se acomodan solas sin quedar apretadas */
@media(min-width:1024px) and (max-width:1279px) {
  #resultados {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px
  }
}

/* ============================================================ BOTONES SIEMPRE AL PIE DE LA TARJETA */

#resultados .card {
  display: flex;
  flex-direction: column
}

#resultados .card .precios {
  flex: 1 1 auto
}

#resultados .card .card-acciones {
  margin-top: auto;
  padding-top: 8px
}

/* ============================================================ COTIZACIONES EN 2 COLUMNAS (PC) */

@media(min-width:1024px) {
  .cotizaciones-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch
  }

  .cotizacion-card {
    height: 100%
  }
}

/* ============================================================ DETALLE DEL PRODUCTO */

.detalle-texto-libre {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text)
}

.detalle-sin-texto {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  font-style: italic
}

.detalle-bloque {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line)
}

.detalle-bloque h4 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--gold-2)
}

.detalle-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px
}

.detalle-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface-2)
}

.detalle-lista span {
  color: var(--text-soft);
  text-transform: capitalize
}

.detalle-lista strong {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums
}

/* ============================================================
   CABECERA EN CELULAR: el botón Salir tiene que verse
   ============================================================ */

@media(max-width:768px) {
  .franja-superior {
    padding-right: 10px;
    gap: 8px
  }

  .franja-usuario {
    flex: 0 0 auto;
    gap: 6px
  }

  /* Botón redondo, con el icono bien contrastado y sin salirse */
  .btn-logout {
    flex: 0 0 auto;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #c65c42, #a8452f) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(168, 69, 47, .35)
  }

  .icono-salir {
    font-size: 17px !important;
    line-height: 1;
    color: #fff
  }

  .texto-salir {
    display: none
  }

  /* El chip cede espacio para que el botón nunca quede cortado */
  .chip-usuario {
    max-width: 96px
  }
}

@media(max-width:380px) {
  .chip-usuario {
    max-width: 76px
  }

  .btn-logout {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important
  }
}

/* ============================================================
   ETIQUETAS: siempre en una sola fila
   ============================================================ */

.card-badge-area {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0
}

.card-badge-area .pill-stock,
.card-badge-area .badge-producto {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

@media(max-width:768px) {
  #resultados .card-header {
    grid-template-areas:
      "imagen imagen"
      "badge  badge"
      "info   info"
  }

  .card-badge-area .pill-stock,
  .card-badge-area .badge-producto {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0
  }
}

@media(max-width:380px) {
  .card-badge-area .pill-stock,
  .card-badge-area .badge-producto {
    font-size: 8.5px;
    padding: 2px 5px
  }
}

/* ============================================================
   CABECERA EN CELULAR — versión definitiva

   El problema anterior: el título no cedía ancho, así que el
   contenido sumaba más que la pantalla y el botón Salir quedaba
   cortado del lado derecho. Ahora cada pieza tiene su lugar y
   la única que se achica es el título.
   ============================================================ */

@media(max-width:768px) {
  .franja-superior {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
    overflow: hidden
  }

  /* Lo único elástico: cede ancho cuando hace falta */
  .encabezado-marca {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden
  }

  .titulo-marca {
    min-width: 0;
    overflow: hidden
  }

  .titulo-marca h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14.5px
  }

  .logo-sistema {
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important
  }

  /* Bloque del usuario: tamaño fijo, nunca se comprime ni se corta */
  .franja-usuario {
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    gap: 6px
  }

  /* En celular queda solo la inicial: el nombre completo se ve
     manteniendo pulsado (title) y ya está en Configuración. */
  .chip-usuario {
    max-width: none !important;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50%
  }

  .nombre-usuario {
    display: none !important
  }

  .avatar-usuario {
    width: 34px;
    height: 34px;
    font-size: 15px
  }

  .btn-logout {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important
  }
}

/* ============================================================
   ICONO DE SALIR
   Es un SVG, no un carácter: así se ve igual en cualquier
   teléfono sin depender de las fuentes del sistema.
   ============================================================ */

.icono-salir {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  color: currentColor
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px
}

@media(max-width:768px) {
  .icono-salir {
    width: 19px;
    height: 19px
  }

  .btn-logout {
    color: #fff !important
  }
}