/* ============================================================
   UI KIT SMARTBUY — hoja de estilos canónica
   ============================================================
   Este es el ORIGINAL. IntegraCommissions.Admin e IntegraCommissions.Cliente
   tienen cada una su propia copia de este archivo (wwwroot/css/site.css) porque
   cada app se publica sola y no comparten build ni proyecto — ver README.md
   de esta carpeta para la dinámica completa.

   Si mejoras algo visual en una app, tráelo aquí primero y luego llévalo a las
   demás. Si necesitas algo nuevo que no está aquí, agrégalo aquí también aunque
   solo lo use una app por ahora — así la próxima app que lo necesite ya lo
   encuentra listo.
   ============================================================ */

/* ============================================================
   1. Tokens — paleta de marca Smartbuy (ver CLAUDE.md raíz > Sistema de diseño)
   ============================================================ */
:root {
  --sb-azul: #174FB0;
  --sb-azul-oscuro: #123f8c;
  --sb-azul-petroleo: #005F8B;
  --sb-naranja: #FE8100;
  --sb-naranja-oscuro: #e57400;
  --sb-beige: #EDE8D0;
  --sb-marron: #664D03;
  --sb-texto: #212529;
  --sb-secundario: #888888;
  --sb-borde: #E9ECEF;
  --sb-borde-fuerte: #DDDDDD;
  --sb-fondo: #F4F6F9;
  --sb-superficie: #ffffff;

  /* Ajustables por app: el ancho del sidebar depende de qué tan largo sea el
     texto de tus enlaces de menú; el tamaño de ícono, de cuántos íconos por
     fila caben cómodos. No los cambies aquí — sobreescríbelos en el site.css
     de tu app después de copiar este archivo. */
  --sb-sidebar-ancho: 140px;
  --sb-radio: 1rem;
}

/* Tipografía: PENDIENTE — reemplazar por la fuente oficial de Smartbuy Store
   en cuanto se confirme (ver CLAUDE.md raíz). Mientras tanto, fuente de sistema. */
body {
  background-color: var(--sb-fondo);
  color: var(--sb-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   2. Shell — sidebar + header + contenido (usado por _Layout.cshtml)
   ============================================================ */
.sb-app {
  display: flex;
  min-height: 100vh;
}

.sb-sidebar {
  width: var(--sb-sidebar-ancho);
  /* !important: Bootstrap fuerza background-color:transparent!important en .offcanvas-lg
     a partir de 992px (para que se comporte como sidebar estático), así que sin esto
     el fondo azul desaparece en escritorio. */
  background-color: var(--sb-azul) !important;
  color: #fff;
  flex-shrink: 0;
  /* El menú va a seguir creciendo (Inicio, Registrar venta, Mis ventas,
     Vendedores, Productos, Categorías, Marcas...) — con overflow visible
     los últimos links quedarían cortados en pantallas bajas en vez de
     scrollear. overflow-y en vez de overflow: los bordes redondeados del
     link activo no deben cortarse por overflow-x. */
  overflow-y: auto;
  /* Scrollbar delgado y a tono con el sidebar azul — el scrollbar gris
     por defecto del navegador es ancho (~15-17px) y le come espacio real
     al menú (140px de ancho total); uno delgado y translúcido casi no se
     nota hasta que hace falta. scrollbar-width/color: Firefox; los
     ::-webkit-scrollbar-*: Chrome/Edge/Safari. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

@media (min-width: 992px) {
  .sb-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

.sb-sidebar::-webkit-scrollbar {
  width: 6px;
}

.sb-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sb-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.sb-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.sb-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.25rem 0.25rem;
}

.sb-logo {
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
}

.sb-sidebar-subtitulo {
  padding: 0 1.25rem 1rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}

.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
}

.sb-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 0.5rem;
  border-radius: 1rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sb-nav-link.active,
.sb-nav-link.active:hover {
  background-color: var(--sb-naranja) !important;
  color: #fff !important;
  font-weight: 600;
  transition: none !important;
  animation: none !important;
}

.sb-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.sb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sb-header {
  background: var(--sb-superficie);
  border-bottom: 1px solid var(--sb-borde);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sb-header-title {
  font-size: 1.35rem;
  margin: 0;
  color: var(--sb-texto);
  flex: 1;
}

.sb-header-usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sb-secundario);
  font-size: 0.9rem;
}

/* Botón de ícono suelto en el header (config, notificaciones). Distinto de
   .sb-avatar: este es transparente hasta hover, el avatar siempre tiene fondo. */
.sb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--sb-secundario);
  padding: 0;
  text-decoration: none;
}

.sb-icon-btn:not(:disabled):hover {
  background-color: var(--sb-fondo);
  color: var(--sb-azul);
}

/* Deshabilitado a propósito (solo visual, ej. "próximamente"): se ve activo,
   no "gris apagado" como un <button disabled> normal — evita que parezca roto. */
.sb-icon-btn:disabled {
  opacity: 1;
  cursor: default;
}

.sb-icon-btn .sb-icon {
  width: 20px;
  height: 20px;
}

.sb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background-color: var(--sb-naranja);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Botón que envuelve el círculo + el nombre — es este botón entero el que
   abre el dropdown (data-bs-toggle), no solo el círculo, para que el
   nombre también sea parte del área clickeable. El nombre se oculta en
   pantallas muy angostas para no apretar el header (queda solo el
   círculo, igual que antes). */
.sb-usuario-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 999px;
  cursor: pointer;
}

.sb-usuario-btn:hover,
.sb-usuario-btn:focus {
  background-color: var(--sb-fondo);
}

.sb-usuario-btn:hover .sb-avatar,
.sb-usuario-btn:focus .sb-avatar {
  background-color: var(--sb-naranja-oscuro);
}

.sb-usuario-nombre {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sb-texto);
  white-space: nowrap;
}

/* Menú del avatar (Ver perfil / Cambiar contraseña / Cerrar sesión) */
.dropdown-menu {
  border-radius: 0.75rem;
  border-color: var(--sb-borde);
  min-width: 12rem;
}

.dropdown-header {
  font-weight: 600;
  color: var(--sb-texto);
}

.dropdown-item:active {
  background-color: var(--sb-naranja);
  color: var(--sb-marron);
}

/* Para opciones de menú "próximamente": visible pero no clickeable. */
.dropdown-item.disabled {
  pointer-events: none;
}

.sb-btn-menu {
  border: none;
  background: transparent;
  color: var(--sb-azul);
  padding: 0.25rem;
  display: inline-flex;
}

.sb-content {
  padding: 1.25rem;
  flex: 1;
}

@media (min-width: 768px) {
  .sb-content {
    padding: 1.75rem;
  }
}

/* ============================================================
   3. Tarjetas
   ============================================================ */
.card {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  background: var(--sb-superficie);
}

.sb-stat-card {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sb-stat-valor {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sb-azul);
  line-height: 1;
}

.sb-stat-etiqueta {
  color: var(--sb-secundario);
  font-size: 0.9rem;
}

/* Modificadores de color para un stat que en sí mismo es "bueno" o "malo"
   (ej. transacciones aprobadas vs. rechazadas) — mismos dos tonos que ya
   usan .badge-estado-aprobada/-rechazada, no colores nuevos. El azul de
   .sb-stat-valor sigue siendo el default para números neutros (totales,
   montos). Nunca uses fondos de color sólido en la tarjeta completa (así
   lo tenía el sandbox) — .sb-stat-card se queda blanca siempre, la que
   cambia es la cifra. */
.sb-stat-valor-exito {
  color: #0f5132;
}

.sb-stat-valor-alerta {
  color: #842029;
}

/* Tarjeta que envuelve un <canvas> de Chart.js: alto fijo para que el gráfico
   no crezca sin control (Chart.js necesita un contenedor con altura definida). */
.sb-chart-card {
  padding: 1.25rem 1.5rem;
}

.sb-chart-card h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.sb-chart-contenedor {
  position: relative;
  height: 260px;
}

/* ============================================================
   4. Botones y formularios (naranja Smartbuy)
   ============================================================ */
.btn {
  border-radius: 999px;
}

.btn-primary {
  background-color: var(--sb-naranja) !important;
  border-color: var(--sb-naranja) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

/* Oscurece + levanta con sombra al pasar el mouse — antes no había ningún
   cambio visual en hover (mismo color que en reposo), así que un botón
   naranja no se sentía clickeable hasta hacerle clic. */
.btn-primary:hover {
  background-color: var(--sb-naranja-oscuro) !important;
  border-color: var(--sb-naranja-oscuro) !important;
  box-shadow: 0 0.35rem 0.75rem rgba(254, 129, 0, 0.35);
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(254, 129, 0, 0.25) !important;
}

/* Al presionar, un poquito más oscuro todavía y sin la sombra "flotante"
   del hover — se siente hundido en vez de solo cambiar de color. */
.btn-primary:active {
  background-color: var(--sb-naranja-oscuro) !important;
  border-color: var(--sb-naranja-oscuro) !important;
  box-shadow: none !important;
  transform: translateY(1px);
}

.btn-outline-secondary {
  color: var(--sb-azul);
  border-color: var(--sb-borde-fuerte);
}

.btn-outline-secondary:hover {
  background-color: var(--sb-azul);
  border-color: var(--sb-azul);
  color: #fff;
}

.btn-outline-danger {
  border-radius: 999px;
}

.form-control,
.form-select {
  border-radius: 0.65rem;
  border-color: var(--sb-borde-fuerte);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sb-naranja);
  box-shadow: 0 0 0 0.2rem rgba(254, 129, 0, 0.25);
}

.form-label {
  font-weight: 600;
  color: var(--sb-texto);
}

/* Aviso dentro de un campo deshabilitado a propósito (funcionalidad futura,
   ej. "la subida de factura se habilita cuando exista IntegraImage"). */
.campo-deshabilitado-nota {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

/* ============================================================
   5. Paginación (estilo píldora redondeada, paleta Smartbuy)
   ============================================================ */
.page-link {
  color: var(--sb-azul);
  border-color: var(--sb-borde-fuerte);
  border-radius: 999px !important;
  margin: 0 0.15rem;
}

.page-link:hover {
  color: var(--sb-azul-oscuro);
  background-color: var(--sb-fondo);
  border-color: var(--sb-borde-fuerte);
}

.page-item.active .page-link {
  background-color: var(--sb-naranja);
  border-color: var(--sb-naranja);
  color: #fff;
}

.page-item.disabled .page-link {
  color: var(--sb-secundario);
}

/* ============================================================
   6. Badge de estado — patrón genérico para "estado de un registro"
   ============================================================
   Nace del flujo de EstadoVenta (Reportada/EnRevision/Aprobada/Rechazada),
   pero el patrón de color es reutilizable para cualquier estado con la misma
   forma: neutral-pendiente / azul-en curso / verde-aprobado / rojo-rechazado.
   Un módulo nuevo con sus propios estados puede reusar .badge-estado y sumar
   sus propias variantes -nombreDelEstado siguiendo esta misma paleta.
   ============================================================ */
.badge-estado {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-estado-reportada {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
}

.badge-estado-enrevision {
  background-color: #cfe2ff;
  color: #084298;
}

.badge-estado-aprobada {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-estado-rechazada {
  background-color: #f8d7da;
  color: #842029;
}

/* Ejemplo de variante propia (ver comentario arriba): un módulo con estado
   binario Activa/Inactiva (ej. Categorías) reusa los mismos dos colores
   que ya significan "aprobado" y "neutral/pendiente", sin inventar tono
   nuevo — así el usuario no tiene que aprender un color por módulo. */
.badge-estado-activa {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-estado-inactiva {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
}

/* Publicado/Borrador (ej. Productos): mismos dos colores otra vez — sigue
   siendo "aprobado/visible" vs "neutral/pendiente", ningún estado binario
   del kit necesita un tercer color. */
.badge-estado-publicado {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-estado-borrador {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
}

/* Etiqueta de TIPO de registro (no es un estado del flujo de vida, es una
   clasificación fija: "Producto Padre" vs "Variante"). Por eso NO reusa
   .badge-estado ni su paleta de semáforo — un tono neutro propio para no
   mezclar "tipo de dato" con "estado actual". */
.badge-tipo {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--sb-secundario);
  color: #fff;
}

/* Etiqueta de ROL de usuario (admin/seller/client): única excepción a
   "clasificación = .badge-tipo gris", a pedido explícito del cliente —
   quiere distinguir el rol de un vistazo en el listado de Usuarios.
   Reusa los mismos 3 tonos de .badge-estado (verde/azul/beige), nunca
   colores nuevos: admin=verde (mayor privilegio), seller=azul (staff
   operativo), client=beige (cuenta de tienda, el tono "neutral"). */
.badge-rol {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-rol-admin {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-rol-seller {
  background-color: #cfe2ff;
  color: #084298;
}

.badge-rol-client {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
}

/* Etiqueta de ACCIÓN en la Bitácora de auditoría (Crear/Editar/Eliminar):
   acá sí conviene un color por verbo porque no hay una columna "Estado"
   aparte que ya avise de un problema — es la única señal para detectar un
   "Eliminar" entre muchas filas. Reusa .badge-estado (crear=aprobada,
   editar=enrevision, eliminar=rechazada). En el log de Seguridad, en
   cambio, la columna "Estado" (Éxito/Fallo) ya cumple ese rol, así que su
   columna "Acción" se queda en .badge-tipo gris para no duplicar señales. */
.badge-estado-creado {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-estado-editado {
  background-color: #cfe2ff;
  color: #084298;
}

.badge-estado-eliminado {
  background-color: #f8d7da;
  color: #842029;
}

/* ============================================================
   7. Tablas: scroll horizontal propio, nunca desborda la página
   ============================================================ */
.sb-tabla-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sb-tabla-wrapper table {
  margin-bottom: 0;
}

.sb-tabla-wrapper tbody tr:hover {
  background-color: var(--sb-fondo);
}

/* Fila separadora para agrupar visualmente registros relacionados dentro
   de una misma tabla (ej. los 2 intentos SaleInitiation/SaleCompletion de
   un mismo pago, en el historial de una orden). Es una etiqueta de grupo,
   no un registro más — por eso <td colspan> a todo el ancho, fondo tenue
   y texto chico. El fondo es el mismo --sb-fondo que ya usa el hover de
   fila, no un tono nuevo. */
.sb-tabla-fila-grupo td {
  background-color: var(--sb-fondo);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--sb-secundario);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Miniatura circular para la primera columna de una tabla (logo de marca,
   imagen de producto, etc.). Con <img> adentro se recorta a círculo; sin
   imagen real todavía, muestra iniciales — mismo tamaño que .sb-avatar
   pero en gris neutro, para no confundirse con el avatar de usuario
   (ese sí es naranja, este no representa una persona). */
.sb-miniatura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--sb-borde);
  color: var(--sb-secundario);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

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

/* Variante cuadrada de .sb-miniatura: para fotos de producto (rectas por
   naturaleza) en vez de logos/avatares (donde el círculo ya es el estándar).
   object-fit: contain, no cover — una foto de producto normalmente tiene
   fondo blanco/transparente y no debe recortarse como un logo circular sí. */
.sb-miniatura-cuadrada {
  border-radius: 0.5rem;
}

.sb-miniatura-cuadrada img {
  object-fit: contain;
}

/* Swatch de color — para variantes de producto (Azul, Negro, etc.). El
   color en sí es un dato, no una decisión de diseño, así que se fija con
   `style="background-color:..."` en el markup, no con una clase por color;
   esta regla solo define la forma/tamaño/borde, iguales para cualquier color. */
.sb-color-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--sb-borde-fuerte);
  flex-shrink: 0;
}

/* Variante clickeable de `.sb-color-swatch` — filtro "Color" del catálogo
   de la tienda pública (site.css sección 20). Checkbox oculto + anillo
   naranja con `:has()` cuando está marcado, mismo criterio de selección
   que `.sb-tarjeta-opcion` (sección 14). */
.tienda-filtro-color {
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.tienda-filtro-color:has(input:checked) {
  border-color: var(--sb-naranja);
}

.tienda-filtro-color input {
  display: none;
}

/* ============================================================
   8. Pantalla de cuenta (login / cambio de contraseña): dos columnas
   (formulario + marca), apiladas en móvil. Usada por _LayoutCuenta.cshtml.
   ============================================================ */
.sb-cuenta-body {
  background-color: var(--sb-fondo);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.sb-cuenta-wrapper {
  width: 100%;
  max-width: 760px;
}

.sb-cuenta-card {
  display: flex;
  flex-direction: column-reverse;
  background: var(--sb-superficie);
  border-radius: var(--sb-radio);
  overflow: hidden;
  box-shadow: 0 1rem 3rem rgba(23, 79, 176, 0.15);
}

@media (min-width: 768px) {
  .sb-cuenta-card {
    flex-direction: row;
  }
}

.sb-cuenta-form {
  flex: 1;
  padding: 2.5rem 2rem;
}

.sb-cuenta-marca {
  flex: 1;
  /* background-color de respaldo si la imagen no carga; el degradado
     encima es del mismo azul (no negro) para que sea un tinte de marca,
     no un oscurecido genérico — y para que el texto blanco siga legible
     sobre cualquier parte de la foto. Ruta de la imagen relativa a este
     archivo: si copias site.css a TuModulo/wwwroot/css/site.css, la ruta
     cambia a ../img/fondo.png (site.css ya no está al lado de img/). */
  background-color: var(--sb-azul);
  background-image: linear-gradient(rgba(23, 79, 176, 0.82), rgba(23, 79, 176, 0.82)), url('img/fondo.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 2rem;
}

.sb-cuenta-marca .sb-logo {
  font-size: 1.75rem;
}

/* ============================================================
   9. Tabs — navegación por pestañas dentro de una tarjeta
   ============================================================
   Reemplaza el acordeón para formularios largos con varias secciones (ej.
   "Crear producto": info básica / precios / inventario / envío / variantes /
   publicación) — cada sección vive en su propia pestaña en vez de apilarse
   colapsada. Ver Patrones/formulario-tabs.cshtml.

   Es el componente nativo de Bootstrap (nav-tabs + tab-content, con
   data-bs-toggle="tab") — esta sección solo le pone la piel de Smartbuy
   encima, no reemplaza su JS.
   ============================================================ */
.sb-tabs {
  border-bottom: 1px solid var(--sb-borde);
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Con muchas pestañas en pantalla angosta, scrollea en vez de envolver o
     apachurrar el texto — mismo criterio que .sb-tabla-wrapper con tablas. */
  -webkit-overflow-scrolling: touch;
}

.sb-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.9rem 1.25rem;
  color: var(--sb-secundario);
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Tamaño de ícono dentro de una pestaña — así ningún ícono de tab necesita
   style="width:...;height:..." inline; el tamaño lo decide esta regla, no
   cada instancia (ver iconos.md > "Escala de tamaños" para el resto de
   contextos: 34px por defecto en .sb-icon, 20px acá y en .sb-icon-btn). */
.sb-tabs .nav-link .sb-icon {
  width: 20px;
  height: 20px;
}

.sb-tabs .nav-link:hover {
  color: var(--sb-azul);
  border-bottom-color: var(--sb-borde-fuerte);
}

.sb-tabs .nav-link.active {
  color: var(--sb-naranja-oscuro);
  background-color: rgba(254, 129, 0, 0.08);
  border-bottom-color: var(--sb-naranja);
}

/* Numerito de paso — opcional, solo para wizards de varios pasos (una
   pestaña simple de 2-3 secciones no lo necesita). */
.sb-tab-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--sb-borde);
  color: var(--sb-secundario);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sb-tabs .nav-link.active .sb-tab-paso {
  background-color: var(--sb-naranja);
  color: #fff;
}

.sb-tab-contenido {
  padding: 1.5rem 0 0.5rem;
}

/* ============================================================
   10. Checkbox / switch con el naranja de marca
   ============================================================
   Sin esto, Bootstrap pinta el estado marcado de azul — rompe la regla ya
   establecida en el resto del kit de que naranja = indicador activo/
   seleccionado (nav activo, foco de input, página activa en la
   paginación). Aplica globalmente a cualquier <input type="checkbox">
   o switch (ej. "Activa" en Categorías), no es un componente nuevo.
   ============================================================ */
.form-check-input:checked {
  background-color: var(--sb-naranja);
  border-color: var(--sb-naranja);
}

.form-check-input:focus {
  border-color: var(--sb-naranja);
  box-shadow: 0 0 0 0.2rem rgba(254, 129, 0, 0.25);
}

/* ============================================================
   11. Modales — mismo lenguaje visual que las tarjetas
   ============================================================
   Sin esto, Bootstrap le da a .modal-content su propio radio (0.5rem)
   distinto al de las tarjetas (--sb-radio, 1rem) — un modal se sentía "de
   otra pantalla" en vez de una extensión del mismo sistema. Referencia
   UX/UI para CUALQUIER modal nuevo: "Reiniciar contraseña" en Vendedores
   (modal-por-fila-en-listado.cshtml) — header con título + cerrar, body
   con el contenido/formulario, footer con Cancelar + acción a la derecha.
   ============================================================ */
.modal-content {
  border-radius: var(--sb-radio);
  border: 1px solid var(--sb-borde);
}

.modal-header {
  border-bottom: 1px solid var(--sb-borde);
  padding: 1.25rem 1.5rem;
}

.modal-title {
  font-weight: 700;
  color: var(--sb-texto);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--sb-borde);
  padding: 1rem 1.5rem;
}

/* ============================================================
   12. Avatar grande — para la vista centrada de "Mi perfil"
   ============================================================
   Mismo círculo con inicial que .sb-avatar del header, pero de solo
   lectura (no es un botón, no abre nada) y más grande para ser el punto
   focal de una tarjeta centrada — ver Patrones y vista-previa > "Mi perfil".
   ============================================================ */
.sb-avatar-grande {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--sb-naranja);
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
}

/* ============================================================
   13. Acordeón — para listas largas y colapsables (ej. municipios por
   departamento en un selector de zona de envío)
   ============================================================
   Es el componente nativo de Bootstrap — esta sección solo lo pone a
   tono: borde con --sb-borde en vez del gris de Bootstrap, fondo tenue
   --sb-fondo cuando está expandido (no el celeste por defecto), y foco
   naranja (misma regla que ya siguen inputs, checkboxes y botones: el
   naranja es el color de "activo/con foco" en todo el kit).
   ============================================================ */
.accordion-item {
  border-color: var(--sb-borde);
}

.accordion-button:not(.collapsed) {
  background-color: var(--sb-fondo);
  color: var(--sb-texto);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: var(--sb-naranja);
  box-shadow: 0 0 0 0.2rem rgba(254, 129, 0, 0.25);
}

/* ============================================================
   14. Tarjeta seleccionable — elegir una entre varias opciones (ej. qué
   pasarela procesa el pago directo)
   ============================================================
   Un <input type="radio"> normal (ya sale naranja al marcarse, sección
   10) adentro de una .card; el borde de la tarjeta se resalta en naranja
   cuando su radio está marcado, con :has() — mismo criterio de "naranja
   = seleccionado" que ya sigue el resto del kit. Si el navegador no
   soporta :has() (todos los actuales sí, Firefox desde la 121), la
   tarjeta se ve normal pero sigue siendo funcional — no es una
   dependencia dura.
   ============================================================ */
.sb-tarjeta-opcion {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sb-tarjeta-opcion:has(.form-check-input:checked) {
  border-color: var(--sb-naranja);
  background-color: rgba(254, 129, 0, 0.05);
}

.sb-tarjeta-opcion.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   15. Editor de texto enriquecido — para contenido largo con formato
   propio (ej. el cuerpo de una Política de la tienda)
   ============================================================
   Barra de herramientas + área editable (contenteditable), sin librería
   externa: alcanza con document.execCommand para dar formato básico
   (negrita, cursiva, listas, encabezados, enlaces) a un texto legal o
   informativo. Botones de texto, no iconos — mismo criterio que las
   acciones de fila del resto del kit. El borde/foco sigue la misma regla
   que cualquier .form-control (naranja al enfocar).
   ============================================================ */
.sb-editor {
  border: 1px solid var(--sb-borde-fuerte);
  border-radius: var(--sb-radio);
  overflow: hidden;
}

.sb-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: var(--sb-fondo);
  border-bottom: 1px solid var(--sb-borde-fuerte);
}

.sb-editor-btn {
  border: 1px solid transparent;
  background: none;
  border-radius: 0.375rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-texto);
  font-size: 0.8125rem;
}

.sb-editor-btn:hover {
  background-color: var(--sb-borde);
}

.sb-editor-divider {
  width: 1px;
  height: 1.5rem;
  background-color: var(--sb-borde-fuerte);
  margin: 0 0.125rem;
}

.sb-editor-select {
  width: auto;
}

.sb-editor-area {
  min-height: 14rem;
  max-height: 28rem;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  outline: none;
}

.sb-editor-area:focus {
  box-shadow: inset 0 0 0 2px rgba(254, 129, 0, 0.15);
}

.sb-editor-area ul,
.sb-editor-area ol {
  padding-left: 1.5rem;
}

.sb-editor-area h4 {
  font-size: 1rem;
  font-weight: 700;
}

.sb-editor-area:empty::before {
  content: attr(data-placeholder);
  color: var(--sb-secundario);
  pointer-events: none;
}

/* ============================================================
   16. Miniatura de imagen con zoom — para documentos adjuntos donde el
   contenido real importa más que decorar el marco (ej. factura de una
   venta, comprobante de pago).
   ============================================================
   Tamaño fijo SIN importar las dimensiones del archivo subido (nunca hay
   "salto" de layout entre una factura vertical y una horizontal);
   object-fit: contain conserva la imagen completa sin recortarla (a
   diferencia de "cover"), con un fondo neutro para las franjas que deja.
   El cursor de lupa (zoom-in) es la pista de que se puede ampliar; el
   detalle real se ve en un modal (mismo componente ya usado en el resto
   del kit, sección 11) al hacer clic — no una librería de lightbox nueva.
   ============================================================ */
.sb-miniatura-zoom {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background-color: var(--sb-fondo);
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  cursor: zoom-in;
  transition: border-color 0.15s ease;
}

.sb-miniatura-zoom:hover {
  border-color: var(--sb-naranja);
}

/* Lupa dentro del modal de imagen ampliada (ver .sb-miniatura-zoom arriba):
   al mover el mouse sobre la imagen, un círculo sigue el puntero mostrando
   esa misma zona a mayor aumento — para leer un detalle de una factura que
   salió borrosa por luz/resolución/estado del papel, sin salir de la
   pantalla. El cursor real se oculta (cursor: none) para que el círculo
   HAGA de puntero. JS mínimo por vista (ver Ventas/Detalle.cshtml en
   IntegraCommissions.Admin/.Cliente), sin librería de zoom externa. */
.sb-lupa-contenedor {
  position: relative;
  display: inline-block;
}

.sb-lupa-contenedor img {
  cursor: none;
}

.sb-lupa {
  position: absolute;
  display: none;
  width: 180px;
  height: 180px;
  border: 3px solid var(--sb-naranja);
  border-radius: 50%;
  pointer-events: none;
  background-repeat: no-repeat;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

/* ============================================================
   17. Modo oscuro — se activa poniendo [data-bs-theme="dark"] en <html>
   (Bootstrap 5.3 ya entiende ese atributo para sus propios componentes:
   tablas, modales, inputs, dropdowns se adaptan solos). Acá solo hace
   falta redefinir los tokens de la sección 1 que son neutros (fondo,
   superficie, texto, bordes) — el sidebar y los botones NO cambian: el
   azul/naranja de marca ya se ve bien sobre fondo oscuro, y el sidebar
   siempre fue azul oscuro incluso en modo claro.
   --sb-marron NO se redefine acá a propósito: también se usa como texto
   oscuro sobre naranja (.dropdown-item:active, ver sección 2), que debe
   seguir siendo oscuro en los dos temas por contraste. Por eso el texto
   de los badges color beige (reportada/inactiva/borrador/rol-client) se
   corrige aparte más abajo, sin tocar --sb-marron.
   Los demás badges (aprobada/enrevision/rechazada y sus alias creado/
   editado/eliminado/rol-admin/rol-seller) usan hex sueltos, no variables
   — llevan su propio bloque de reemplazo agrupado por color.
   ============================================================ */
:root[data-bs-theme="dark"] {
  --sb-fondo: #12181f;
  --sb-superficie: #1b232c;
  --sb-texto: #e9ecef;
  --sb-secundario: #98a2ad;
  --sb-borde: #2a333d;
  --sb-borde-fuerte: #3a4552;
  --sb-beige: #3a331a;
}

[data-bs-theme="dark"] .badge-estado-reportada,
[data-bs-theme="dark"] .badge-estado-inactiva,
[data-bs-theme="dark"] .badge-estado-borrador,
[data-bs-theme="dark"] .badge-rol-client {
  color: #e0d093;
}

[data-bs-theme="dark"] .badge-estado-enrevision,
[data-bs-theme="dark"] .badge-estado-editado,
[data-bs-theme="dark"] .badge-rol-seller {
  background-color: #16223a;
  color: #8ec2ff;
}

[data-bs-theme="dark"] .badge-estado-aprobada,
[data-bs-theme="dark"] .badge-estado-activa,
[data-bs-theme="dark"] .badge-estado-publicado,
[data-bs-theme="dark"] .badge-estado-creado,
[data-bs-theme="dark"] .badge-rol-admin {
  background-color: #10261d;
  color: #75c9a0;
}

[data-bs-theme="dark"] .badge-estado-rechazada,
[data-bs-theme="dark"] .badge-estado-eliminado {
  background-color: #341418;
  color: #ea868f;
}

[data-bs-theme="dark"] .badge-tipo {
  background-color: #495057;
  color: #fff;
}

/* Sección 18 (Tienda): mismo caso que los badges beige de arriba — el fondo
   ya se ajusta solo (--sb-beige/--sb-azul son variables), pero el texto
   marrón sobre beige pierde contraste en fondo oscuro y necesita su propio
   reemplazo, sin tocar --sb-marron (sigue sirviendo de texto oscuro sobre
   naranja en .tienda-promo-card.bg-naranja, que debe seguir oscuro en los
   dos temas). */
[data-bs-theme="dark"] .tienda-topbar,
[data-bs-theme="dark"] .tienda-topbar a,
[data-bs-theme="dark"] .tienda-categoria-icono .sb-icon {
  color: #e0d093;
}

[data-bs-theme="dark"] .tienda-precio-oferta {
  color: #ea868f;
}

/* ============================================================
   18. Tienda pública (ecommerce) — usado por _LayoutTienda.cshtml
   ============================================================
   Vitrina de cara al cliente (home, catálogo, producto) — layout público sin
   sidebar, distinto del shell administrativo de la sección 2. Inspirado en
   capturas de una plantilla externa (tema "Rozer"), adaptado a la paleta y
   al catálogo real de Smartbuy: se descartó el selector de idioma/moneda (un
   solo mercado, quetzales), los logos de "featured in" (marcas de Envato sin
   equivalente real) y los logos de pasarelas de pago del demo — la fila de
   medios de pago del footer queda en texto plano marcado TODO_ hasta
   confirmar qué pasarelas acepta la tienda de verdad. Ver Patrones/tienda-home.cshtml.
   ============================================================ */

/* Barra superior: aviso de bienvenida + acceso a cuenta. Un solo mercado
   (Guatemala, español, quetzales) — el demo original traía selector de
   idioma y moneda que acá no aplica. */
.tienda-topbar {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
  font-size: 0.8rem;
  padding: 0.4rem 0;
}

.tienda-topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.tienda-topbar a {
  color: var(--sb-marron);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tienda-topbar a:hover {
  text-decoration: underline;
}

.tienda-topbar .sb-icon {
  width: 16px;
  height: 16px;
}

/* Header: logo + buscador + acciones (favoritos/carrito). */
.tienda-header {
  background: var(--sb-superficie);
  border-bottom: 1px solid var(--sb-borde);
  padding: 1rem 0;
}

.tienda-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Logo real de Smartbuy (img/logo_smartbuy_border_white.png) — reemplaza
   el logotipo de texto (Smart/buy en azul/naranja) que se usó mientras no
   había un recurso de marca real. Solo se limita el alto; el ancho fluye
   solo para no deformar el logo. */
.tienda-logo-tienda {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tienda-logo-tienda img {
  height: 74px; /* 44px + 30% + 30%, pedido puntual del usuario */
  width: auto;
}

.tienda-buscador {
  flex: 1;
  min-width: 220px;
}

/* El input-group nativo de Bootstrap trae radios cuadrados; se envuelve en
   un borde propio con radio de píldora y se le quitan los radios/bordes a
   cada hijo, igual criterio que cualquier otro control del kit (radio 999px
   en controles compuestos). */
.tienda-buscador .input-group {
  border: 1px solid var(--sb-borde-fuerte);
  border-radius: 999px;
  overflow: hidden;
}

.tienda-buscador .input-group .form-select,
.tienda-buscador .input-group .form-control,
.tienda-buscador .input-group .btn {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.tienda-buscador .input-group .form-select {
  border-right: 1px solid var(--sb-borde);
  max-width: 170px;
  flex: 0 0 auto;
}

.tienda-buscador .input-group .btn {
  background-color: var(--sb-naranja);
  color: var(--sb-marron);
  padding-inline: 1.1rem;
}

.tienda-buscador .input-group .btn:hover {
  background-color: var(--sb-naranja-oscuro);
}

.tienda-buscador .input-group .btn .sb-icon {
  width: 18px;
  height: 18px;
}

.tienda-acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Contador de favoritos/carrito — mismo .sb-icon-btn del header admin
   (sección 2), solo le suma un badge circular en la esquina. */
.tienda-icono-contador {
  position: relative;
}

.tienda-badge-contador {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background-color: var(--sb-naranja);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Menú hamburguesa del header de la tienda — abre `#offcanvasMenu`.
   Reemplaza la barra de navegación horizontal (Inicio/Catálogo/Ofertas/...)
   que tenía la primera versión de la home: el acceso a categorías y al
   resto de enlaces ahora vive en el panel de categorías (solo en la home,
   ver `.tienda-categorias-panel`) y en este offcanvas (en cualquier
   pantalla de la tienda). Usa `.sb-icon-btn` (el mismo botón circular con
   hover del resto de íconos del header — búsqueda, favoritos, carrito),
   NO `.sb-btn-menu` del panel admin: ese es un ícono suelto sin fondo,
   pensado para sentarse junto al título de una página, y acá se veía
   descolgado al lado de íconos con su propio botón circular. */
.tienda-header .sb-icon-btn {
  flex-shrink: 0;
}

/* Panel "Todas las categorías" — vive junto al hero SOLO en la home
   (`.tienda-hero-fila`, ver abajo) y en el sidebar de Catálogo. El resto de
   la tienda llega a las categorías por el offcanvas del ícono de
   hamburguesa, no por este panel. SIN `overflow:hidden`: el flyout de
   subcategorías (más abajo) necesita salirse del cuadro — las esquinas se
   redondean en la barra de título y en el último ítem, no recortando el
   contenedor completo. */
.tienda-categorias-panel {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  height: 100%;
}

.tienda-categorias-panel-titulo {
  background-color: var(--sb-azul);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.85rem 1rem;
  border-radius: var(--sb-radio) var(--sb-radio) 0 0;
}

.tienda-categorias-panel .nav {
  flex-direction: column;
}

/* Cada categoría es un <li> propio (no solo el <a>) porque el flyout de
   subcategorías (si existen) vive como hermano del link dentro del mismo
   <li> — necesita `position:relative` en el <li> para anclarse ahí. */
.tienda-categorias-panel li {
  position: relative;
}

.tienda-categorias-panel .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--sb-texto);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--sb-borde);
}

/* Corrección: como cada <a class="nav-link"> es el único hijo de su <li>,
   `.nav-link:last-child` era siempre verdadero para TODOS (cada uno es el
   último hijo de SU PROPIO <li>) — quitaba el borde de todos, no solo del
   último de la lista. El selector correcto compara contra `li:last-child`. */
.tienda-categorias-panel li:last-child .nav-link {
  border-bottom: none;
  border-radius: 0 0 var(--sb-radio) var(--sb-radio);
}

.tienda-categorias-panel .nav-link:hover {
  background-color: var(--sb-fondo);
  color: var(--sb-naranja-oscuro);
}

/* Categoría activa — en la home el panel de categorías no tiene "activa"
   (es un menú, no un filtro), así que este modificador solo entra en
   juego en Catálogo, pero es una extensión directa de
   `.tienda-categorias-panel` (arriba), no un componente aparte — por eso
   sigue viviendo acá, dentro de la sección 18, en vez de en la sección 20
   (ver el pointer al final del archivo). */
.tienda-categorias-panel .nav-link.active {
  background-color: var(--sb-fondo);
  color: var(--sb-naranja-oscuro);
}

/* Ícono de flecha — solo lo llevan las categorías con subcategorías
   (ver iconos.md > "Flecha derecha"), nunca decorativo en las que no
   tienen nada que desplegar. */
.tienda-categorias-panel .nav-link .sb-icon {
  width: 16px;
  height: 16px;
  color: var(--sb-secundario);
  flex-shrink: 0;
}

/* Flyout de subcategorías — aparece a la derecha del panel al pasar el
   mouse (o con teclado, `:focus-within`) sobre la categoría. Reemplaza el
   primer intento (lista anidada indentada debajo de la categoría activa):
   el usuario pidió replicar el flyout de la plantilla de referencia en vez
   de un acordeón inline. `:has()` no hace falta acá — el propio `:hover`
   del <li> alcanza. */
.tienda-categoria-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: var(--sb-superficie);
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  padding: 0.75rem 1rem;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tienda-categorias-panel li:hover .tienda-categoria-flyout,
.tienda-categorias-panel li:focus-within .tienda-categoria-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.tienda-categoria-flyout a {
  display: block;
  padding: 0.35rem 0;
  color: var(--sb-texto);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.tienda-categoria-flyout a:hover {
  color: var(--sb-naranja-oscuro);
}

/* Banner ancho de una sola tarjeta, a todo el ancho de la sección — misma
   `.tienda-promo-card`, solo horizontal en vez de apilada. */
.tienda-promo-card.ancho {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 140px;
}

.tienda-promo-card.ancho h3 {
  font-size: 1.4rem;
}

.tienda-promo-card.ancho .btn {
  flex-shrink: 0;
}

/* Banner mediano — 2 por fila (`col-md-6`) en vez de uno solo a todo el
   ancho (`.ancho`, arriba) o 3 chicas (`.tienda-promo-card` sin
   modificador). Se queda vertical como la base, solo más alta. */
.tienda-promo-card.mediano {
  min-height: 220px;
  padding: 2rem;
}

.tienda-promo-card.mediano h3 {
  font-size: 1.5rem;
}

/* Tabs de "Compra por categoría" alineadas a la derecha del título de
   sección (mismo `.tienda-titulo-seccion` de siempre, ahora con
   `.sb-tabs` como segundo hijo en vez de en su propia fila) — sin el
   borde inferior de `.sb-tabs` (sección 9) para no chocar con el
   subrayado naranja del título. */
.tienda-titulo-seccion .sb-tabs {
  border-bottom: none;
  margin-bottom: 0;
}

/* Grilla compacta — pedido puntual para "Compra por categoría": ~20% menos
   alta que el resto de grillas de producto del kit (que se quedan
   cuadradas, sección 18) — imagen 5:4 en vez de 1:1, y menos padding en
   las tarjetas. Es un modificador acotado a esta sección, no un cambio al
   componente base `.sb-producto-card`/`.tienda-promo-card`. */
.tienda-grilla-compacta .sb-producto-imagen {
  aspect-ratio: 5 / 4;
}

.tienda-grilla-compacta .sb-producto-card {
  padding: 0.8rem;
}

.tienda-grilla-compacta .tienda-promo-card {
  padding: 1.4rem;
}

/* Fila del hero en la home: panel de categorías + carrusel — el panel se
   oculta bajo 992px (en móvil se llega a las categorías por el offcanvas,
   no tiene sentido duplicarlo aquí). Ajuste 2026-09-17: las 2 tiles
   apiladas al lado del hero (`.tienda-promo-card.compacto`) se quitaron a
   pedido del usuario — el hero pasó de `col-lg-6` a `col-lg-9` para
   ocupar el espacio que dejaron. La clase `.compacto` se eliminó del kit
   (sin usos restantes). */
.tienda-hero-fila .tienda-hero {
  height: 100%;
}

/* Sublinks de subcategoría bajo cada tarjeta de "Categorías populares" —
   mismo criterio de contenido de la variante de plantilla, sin fotografía
   de stock (el kit no tiene fotos de catálogo, ver sección 18 arriba). */
.tienda-categoria-subenlaces {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tienda-categoria-subenlaces a {
  color: var(--sb-secundario);
  font-size: 0.78rem;
  text-decoration: none;
}

.tienda-categoria-subenlaces a:hover {
  color: var(--sb-azul);
  text-decoration: underline;
}

/* Hero de la home — degradado azul/azul-petróleo (nunca fondo de foto de
   stock: el kit no usa fotografía de producto, solo íconos e ilustración
   plana, mismo criterio que el resto de las tarjetas). Carrusel nativo de
   Bootstrap (misma disciplina que .sb-tabs: solo se le pone la piel de
   marca encima, no se reemplaza su JS). */
.tienda-hero {
  background: linear-gradient(120deg, var(--sb-azul) 0%, var(--sb-azul-petroleo) 100%);
  color: #fff;
  border-radius: var(--sb-radio);
  overflow: hidden;
}

.tienda-hero-eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  font-style: italic;
  font-weight: 600;
  color: #ffd9ad;
}

.tienda-hero .sb-icon-decorativo {
  width: 220px;
  height: 220px;
  color: rgba(255, 255, 255, 0.25);
}

.tienda-hero .carousel-indicators [data-bs-target] {
  background-color: #fff;
  opacity: 0.5;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tienda-hero .carousel-indicators .active {
  opacity: 1;
}

/* Franja de beneficios (envío/devoluciones/soporte/pago seguro). */
.tienda-feature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.tienda-feature .sb-icon {
  width: 32px;
  height: 32px;
  color: var(--sb-azul);
  flex-shrink: 0;
}

.tienda-feature-titulo {
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.tienda-feature-texto {
  color: var(--sb-secundario);
  font-size: 0.85rem;
}

/* Tarjetas de promoción (3 destacados). Naranja es el único fondo que
   necesita texto oscuro encima (mismo criterio de accesibilidad del CLAUDE.md
   raíz: "sobre botones naranja usar texto oscuro"), por eso es un modificador
   aparte en vez del color blanco por defecto. */
.tienda-promo-card {
  border-radius: var(--sb-radio);
  padding: 1.75rem;
  color: #fff;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
}

.tienda-promo-card.bg-naranja {
  background-color: var(--sb-naranja);
  color: var(--sb-marron);
}

.tienda-promo-eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.85;
}

.tienda-promo-card h3 {
  font-weight: 800;
  margin: 0;
  font-size: 1.35rem;
}

.tienda-promo-card .sb-icon-decorativo {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 64px;
  height: 64px;
  opacity: 0.3;
}

/* Encabezado de sección con subrayado naranja — mismo "activo = naranja",
   aplicado como acento de título en vez de estado de nav. */
.tienda-titulo-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.tienda-titulo-seccion h2 {
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 3px solid var(--sb-naranja);
  display: inline-block;
  padding-bottom: 0.4rem;
  margin: 0;
}

/* Categorías destacadas: círculo beige con ícono, se invierte a naranja en
   hover (mismo "activo/hover = naranja" del resto del kit). */
.tienda-categoria-card {
  text-decoration: none;
  text-align: center;
  color: var(--sb-texto);
  display: block;
  height: 100%;
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1.25rem 1rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tienda-categoria-card:hover {
  border-color: var(--sb-borde-fuerte);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
}

.tienda-categoria-icono {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--sb-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem;
  transition: background-color 0.15s ease;
}

.tienda-categoria-icono .sb-icon {
  width: 30px;
  height: 30px;
  color: var(--sb-marron);
}

.tienda-categoria-card:hover .tienda-categoria-icono {
  background-color: var(--sb-naranja);
}

.tienda-categoria-card:hover .tienda-categoria-icono .sb-icon {
  color: #fff;
}

.tienda-categoria-nombre {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Tarjeta de producto — un solo componente para Destacados/Novedades/Ofertas
   del día (con .tienda-deal-card como variante horizontal), en vez de un
   componente distinto por sección. Sin fotografía de producto (el kit no
   tiene fotos de catálogo todavía): un ícono neutro sobre fondo --sb-fondo
   marca el lugar de la imagen real. */
.sb-producto-card {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sb-producto-card:hover {
  border-color: var(--sb-borde-fuerte);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
}

.sb-producto-imagen {
  aspect-ratio: 1 / 1;
  background-color: var(--sb-fondo);
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.sb-producto-imagen .sb-icon {
  width: 40px;
  height: 40px;
  color: var(--sb-secundario);
}

.sb-producto-categoria {
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--sb-secundario);
  letter-spacing: 0.03em;
}

.sb-producto-nombre {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sb-texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Calificación con estrellas — naranja de marca en vez de amarillo genérico,
   así no se introduce un color fuera de la paleta solo para esto. */
.sb-producto-rating {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.sb-producto-rating .sb-icon {
  width: 14px;
  height: 14px;
}

.sb-producto-rating .sb-icon.lleno {
  color: var(--sb-naranja);
  fill: var(--sb-naranja);
}

.sb-producto-rating .sb-icon.vacio {
  color: var(--sb-borde-fuerte);
}

.sb-producto-precio {
  margin-top: auto;
  font-weight: 700;
}

.sb-producto-precio-anterior {
  color: var(--sb-secundario);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 0.4rem;
}

/* Mismo rojo que .badge-estado-rechazada (sección 6) — un precio de oferta
   reusa el tono "negativo/atención" que ya existe en vez de inventar un rojo
   nuevo; el reemplazo de modo oscuro vive en la sección 17. */
.tienda-precio-oferta {
  color: #842029;
}

/* Variante horizontal de .sb-producto-card, para "Ofertas del día". */
.tienda-deal-card {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.tienda-deal-card .sb-producto-imagen {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.tienda-deal-card .sb-producto-descripcion {
  color: var(--sb-secundario);
  font-size: 0.85rem;
}

/* Footer — azul de marca (no cambia entre temas, mismo criterio que el
   sidebar del panel admin). */
.tienda-footer {
  background-color: var(--sb-azul);
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
}

.tienda-footer h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.tienda-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.tienda-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.tienda-footer .form-control {
  border-radius: 999px 0 0 999px;
}

.tienda-footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.tienda-footer-social a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.tienda-footer-social .sb-icon {
  width: 16px;
  height: 16px;
}

.tienda-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}

/* Medios de pago: texto plano, no logos — TODO_ hasta confirmar con el
   cliente qué pasarelas/tarjetas acepta realmente la tienda. */
.tienda-pago-badge {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Franja de marcas — arriba del footer, en la home (Patrones/tienda-home.cshtml).
   Texto + ícono, nunca un logo de marca de tercero sin confirmar (mismo
   criterio que `.tienda-pago-badge`): solo Tecno es una marca real del
   catálogo de comisiones (CLAUDE.md raíz); el resto queda `TODO_MARCAS`
   hasta que el cliente confirme qué otras marcas destacar. */
.tienda-marcas {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.tienda-marcas-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sb-secundario);
  font-weight: 700;
  font-size: 1.05rem;
}

.tienda-marcas-item .sb-icon {
  width: 22px;
  height: 22px;
}

/* Botón "volver arriba" — fijo, aparece solo después de bajar (JS en
   _LayoutTienda.cshtml). Color oscuro fijo, no `--sb-texto`: ese token SÍ
   cambia en modo oscuro (pasa a claro), y este botón debe verse igual en
   los dos temas, igual criterio que el azul del sidebar/footer. */
.tienda-scroll-arriba {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background-color: #212529;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.25);
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.tienda-scroll-arriba.visible {
  opacity: 1;
  visibility: visible;
}

.tienda-scroll-arriba:hover {
  background-color: var(--sb-naranja-oscuro);
}

.tienda-scroll-arriba .sb-icon {
  width: 20px;
  height: 20px;
}

/* ============================================================
   19. Carrito y checkout
   ============================================================
   Mini-carrito (offcanvas nativo de Bootstrap — el mismo componente que ya
   usa el sidebar del panel admin en móvil, sección 2, solo con la piel de
   marca encima) + pantalla completa de carrito (Patrones/tienda-carrito.cshtml).

   Excepción documentada a "Confirmar un borrado: siempre modal" (ver
   README > Estándar de medidas): quitar una línea del carrito NO abre
   modal. El carrito es un estado de sesión, no un registro persistido —
   quitar un producto es trivialmente reversible (agregarlo de nuevo desde
   el catálogo), a diferencia de borrar un Vendedor o una Categoría. Se
   reusa `.btn-close` (la misma X de modales/offcanvas) en vez de
   `.btn-outline-danger` + modal.
   ============================================================ */

/* Breadcrumb — la tienda no tiene sidebar que ubique al visitante, así que
   necesita su propia señal de "dónde estoy" (el panel admin no la necesita:
   el ítem activo del sidebar ya cumple ese rol). */
.tienda-breadcrumb {
  background-color: var(--sb-fondo);
  padding: 0.75rem 1.25rem;
  border-radius: var(--sb-radio);
  margin-bottom: 1.5rem;
}

.tienda-breadcrumb .breadcrumb {
  margin: 0;
}

.tienda-breadcrumb a {
  color: var(--sb-azul);
  text-decoration: none;
}

.tienda-breadcrumb a:hover {
  text-decoration: underline;
}

.tienda-breadcrumb .breadcrumb-item.active {
  color: var(--sb-secundario);
}

/* Pasos de compra (Carrito / Pago / Pedido confirmado) — reusa el mismo
   círculo numerado `.sb-tab-paso` de los wizards (sección 9), solo que acá
   vive suelto en vez de adentro de una pestaña de `.sb-tabs`. */
.tienda-pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tienda-paso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sb-secundario);
  font-weight: 700;
  font-size: 0.9rem;
}

.tienda-paso .sb-tab-paso {
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
}

.tienda-paso.activo {
  color: var(--sb-naranja-oscuro);
}

.tienda-paso.activo .sb-tab-paso {
  background-color: var(--sb-naranja);
  color: #fff;
}

.tienda-paso-linea {
  width: 4rem;
  height: 2px;
  background-color: var(--sb-borde-fuerte);
  margin: 0 1rem;
}

@media (max-width: 576px) {
  .tienda-paso-linea {
    width: 1.5rem;
    margin: 0 0.5rem;
  }
}

/* Carrito vacío — sin caja de alerta de color (mismo criterio del kit:
   nunca decorar con `.alert` de color lo que un ícono + texto ya explican). */
.tienda-vacio {
  text-align: center;
  padding: 3rem 1rem;
}

.tienda-vacio .sb-icon {
  width: 64px;
  height: 64px;
  color: var(--sb-borde-fuerte);
  margin-bottom: 1rem;
}

.tienda-vacio p {
  color: var(--sb-secundario);
  margin-bottom: 1.5rem;
}

/* Fila de producto dentro de la tabla del carrito. */
.tienda-carrito-producto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tienda-carrito-producto .sb-producto-imagen {
  width: 64px;
  height: 64px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Stepper de cantidad — botones de texto (−/+), no íconos, mismo criterio
   minimalista que los botones de `.sb-editor` (sección 15). */
.tienda-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sb-borde-fuerte);
  border-radius: 999px;
  overflow: hidden;
}

.tienda-cantidad button {
  border: none;
  background: transparent;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-texto);
  font-weight: 700;
  cursor: pointer;
}

.tienda-cantidad button:hover {
  background-color: var(--sb-fondo);
  color: var(--sb-naranja-oscuro);
}

.tienda-cantidad input {
  width: 2.25rem;
  border: none;
  text-align: center;
  padding: 0;
  color: var(--sb-texto);
  background: transparent;
  -moz-appearance: textfield;
}

.tienda-cantidad input::-webkit-outer-spin-button,
.tienda-cantidad input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Mini-carrito (offcanvas) — misma lista que la tabla completa, en tarjetas
   apiladas en vez de filas (no entra una tabla en un panel de 380px). */
.tienda-minicarrito-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sb-borde);
}

.tienda-minicarrito-item:last-child {
  border-bottom: none;
}

.tienda-minicarrito-item .sb-producto-imagen {
  width: 64px;
  height: 64px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.tienda-minicarrito-item-info {
  flex: 1;
  min-width: 0;
}

.tienda-minicarrito-item-nombre {
  font-weight: 600;
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tienda-minicarrito-item-cantidad {
  color: var(--sb-secundario);
  font-size: 0.8rem;
}

.tienda-minicarrito-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  padding: 1rem 0;
  border-top: 1px solid var(--sb-borde);
  margin: 0.5rem 0 1rem;
}

/* ============================================================
   20. Catálogo — filtros de la tienda pública
   ============================================================
   Patrones/tienda-catalogo.cshtml: casi toda la pantalla reusa componentes
   que ya existen en vez de crear los suyos — no hay CSS exclusivo de
   catálogo agrupado en un solo bloque, por eso esta sección es solo un
   mapa de dónde vive cada pieza:
     - `.card`, `.form-check`, `.sb-producto-card`, `.pagination`,
       `.tienda-categoria-card` — reuso directo, sin cambios.
     - `.tienda-categorias-panel` (con `.nav-link.active` y el flyout de
       subcategorías `.tienda-categoria-flyout`) — sección 18: es el mismo
       panel de categorías de la home, Catálogo solo le agrega el estado
       "activa". Ver el comentario junto a `.tienda-categorias-panel`.
     - `.tienda-filtro-color` (swatch clickeable del filtro "Color") —
       sección 7, junto a `.sb-color-swatch` (su base no interactiva).
   Si un futuro cambio agrega algo que de verdad sea exclusivo de Catálogo
   y no encaje en ninguna sección existente, ese es el momento de
   agregarle CSS propio acá — hasta entonces, esta sección se queda como
   índice para no duplicar ni mover código que ya vive bien donde está.
   ============================================================ */

/* ============================================================
   24. Densidad en computadoras (monitor y laptop)
   ============================================================
   En computadora la app se veía grande (pedido de José, 2026-10-15). Se compacta todo:

   - Tamaño base más chico: el kit (y Bootstrap) miden casi todo en rem, así que textos,
     botones, campos y espacios bajan parejo, como un zoom del navegador, sin desacomodar nada.
     Dos niveles:
       · cualquier computadora (monitor): 13 px en vez de 16, como un zoom del 81 %;
       · laptop de pantalla baja (1366 × 768, 820 px de alto o menos): 12 px, como un 75 %.
   - Menú lateral compacto en toda computadora: menos relleno, ícono de 24 px y texto un poco
     más chico, para que quepan todos los módulos sin scroll. (Lo que mide en px, como los
     íconos, no baja solo con el tamaño base: por eso se ajusta aquí.)

   Solo desde 992 px de ancho (en el celular el menú es un panel deslizable y nada cambia) y
   solo en el panel administrativo (html:has(.sb-app), el contenedor de _Layout.cshtml): la
   tienda pública (_LayoutTienda) y la pantalla de entrada (_LayoutCuenta) no se tocan, porque
   la vitrina para clientes se diseña con su propio tamaño.
   Si se agrega un componente con medidas fijas en px, revisa que se vea bien aquí también.
   ============================================================ */
@media (min-width: 992px) {
  html:has(.sb-app) {
    font-size: 13px;
  }

  .sb-sidebar-subtitulo {
    padding-bottom: 0.5rem;
  }

  .sb-nav {
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
  }

  .sb-nav-link {
    gap: 0.3rem;
    padding: 0.55rem 0.35rem;
    border-radius: 0.8rem;
    font-size: 0.78rem;
  }

  /* Solo el ícono del menú: los del encabezado y las pestañas ya son de 20 px. */
  .sb-nav .sb-icon {
    width: 24px;
    height: 24px;
  }
}

/* Laptop de pantalla baja: un punto más compacto. */
@media (min-width: 992px) and (max-height: 820px) {
  html:has(.sb-app) {
    font-size: 12px;
  }
}