/* ============================================================
   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;
  cursor: pointer;
}

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

/* 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;
}

/* ============================================================
   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. 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;
}

/* ============================================================
   17. Admin — submenú temporal del sidebar (fuera del kit canónico)
   ============================================================
   El kit asume ítems de sidebar planos (ver docs/ui-kit-smartbuy/iconos.md,
   cuyos conceptos de Envíos/Cobros/Auditoría ya están pensados como UN ítem
   con pestañas internas). SmartbuyStore.Admin todavía no tiene esas pantallas
   fusionadas construidas (eso es Fase 3 de ADOPCION-SANDBOX.md), así que
   mientras tanto "Envíos", "Métodos de cobro", "Auditoría" y "Reportes" son
   un ítem de sidebar con un submenú colapsable hacia sus controladores reales
   por separado — nadie pierde acceso a una pantalla que antes tenía en el
   sidebar. Cuando se migre cada módulo a pestañas, este bloque y su uso en
   _Layout.cshtml se eliminan. Repórtalo de vuelta al kit si se necesita en
   otro proyecto (ver "Ciclo de retroalimentación" del doc de adopción). */
.sb-nav-link.sb-nav-link-expandible {
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.75rem 1rem;
}

.sb-nav-link.sb-nav-link-expandible .sb-icon {
  width: 22px;
  height: 22px;
}

.sb-nav-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sb-nav-link-expandible[aria-expanded="true"] .sb-nav-chevron {
  transform: rotate(180deg);
}

.sb-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem 0.5rem 2.25rem;
}

.sb-nav-sub .sb-nav-link {
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 0.6rem;
}

/* ============================================================
   Densidad en computadoras (copiada del ui-kit-smartbuy, site.css sección 24)
   ============================================================
   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.
     · cualquier computadora: 13 px en vez de 16 (como un zoom del 81 %);
     · laptop de pantalla baja (820 px de alto o menos, ej. 1366 × 768): 12 px (como un 75 %).
   Menú lateral compacto en toda computadora: menos relleno, ícono de 24 px y texto más chico.

   Solo desde 992 px de ancho (en el celular nada cambia) y solo en el panel
   administrativo (html:has(.sb-app), el contenedor del layout con menú lateral): la tienda
   pública y la pantalla de entrada no se tocan.
   ============================================================ */
@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;
  }

  /* Botones del menú cuadrados (ajuste propio de SmartbuyStore, no viene del kit):
     una sola columna con el menú más angosto, en rem para que baje junto con el
     tamaño base. El ancho alcanza para la etiqueta más larga ("Transacciones").
     En el celular el menú lateral (offcanvas) sigue igual. */
  .sb-sidebar {
    width: 8.25rem;
  }

  .sb-sidebar-header {
    padding: 1.25rem 0.6rem 0.25rem;
  }

  .sb-sidebar-subtitulo {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.75rem;
  }

  .sb-nav-link {
    aspect-ratio: 1;
  }
}

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