/* ============================================================
   Paleta de marca Smartbuy (ver CLAUDE.md raíz > Sistema de diseño)
   Idéntica a la de IntegraCommissions.Cliente — mismo ecosistema visual.
   ============================================================ */
: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;

  --sb-sidebar-ancho: 150px;
  --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;
}

/* ============================================================
   Estructura general: sidebar + header + contenido
   ============================================================ */
.sb-app {
  display: flex;
  min-height: 100vh;
}

.sb-sidebar {
  width: var(--sb-sidebar-ancho);
  background-color: var(--sb-azul) !important;
  color: #fff;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .sb-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    /* Con ventanas menos altas que el total de ítems del menú, esto evita que
       los últimos (p.ej. "Administradores") queden cortados contra el borde
       de la pantalla sin forma de llegar a ellos. */
    overflow-y: auto;
  }
}

.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 {
  position: relative;
  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;
}

/* Contador de "En revisión" sobre el link Ventas del sidebar: trabajo en curso del módulo
   (no un evento nuevo, por eso vive acá y no en la campanita — ver ObtenerConteoEnRevisionAsync).
   Más grande que .sb-badge-contador del header (mismo estilo, otra escala): el ícono y el
   botón del sidebar (32px) son bastante más grandes que el botón de la campanita (20px),
   así que el badge mantiene la misma proporción relativa en vez del mismo tamaño fijo. */
.sb-badge-nav {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-align: center;
}

.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: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Pestañas de navegación entre páginas relacionadas (ej. Productos/Modelos):
   cada pestaña es un link real a su propia página, esta clase solo le pone
   la piel de Smartbuy al componente nativo de Bootstrap (nav-tabs). */
.sb-tabs {
  border-bottom: 1px solid var(--sb-borde);
  flex-wrap: nowrap;
  overflow-x: auto;
  -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;
}

.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);
}

.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 {
  position: relative;
  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;
}

/* Contador rojo sobre la campanita de notificaciones: convención universal de "hay algo
   pendiente", por eso no usa la paleta de marca (naranja/azul) como el resto del panel. */
.sb-badge-contador {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.sb-notificaciones-menu {
  min-width: 20rem;
  max-width: 90vw;
}

.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;
}

/* Igual que .sb-avatar pero más chico — para filas de listado (ej. la campanita de
   notificaciones), donde el círculo va junto a un nombre, no solo en el header. */
.sb-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background-color: var(--sb-naranja);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  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;
}

.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);
}

.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;
  }
}

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

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

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

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--sb-naranja) !important;
  border-color: var(--sb-naranja) !important;
  color: #fff !important;
  font-weight: 600;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

.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;
}

/* Paginación (estilo Gelr: píldoras redondeadas, 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);
}

.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);
}

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

/* Estado binario Activo/Inactivo de los catálogos (Producto, Modelo,
   Sucursal): reusa los mismos dos colores de "aprobada"/"reportada". */
.badge-estado-activa {
  background-color: #d1e7dd;
  color: #0f5132;
}

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

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

/* ============================================================
   Pantalla de login: dos columnas (form + marca), apiladas en móvil
   ============================================================ */
.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;
  /* Foto real de la fachada de la tienda con un tinte del azul de marca encima
     (docs/ui-kit-smartbuy/site.css, sección 8). background-color queda de respaldo
     si la imagen no carga; el degradado es del mismo azul (no negro) para que el
     texto blanco siga legible sobre cualquier parte de la foto. */
  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;
}

/* Logo real de Smartbuy arriba del formulario — del lado del formulario y no del panel
   de la foto, porque ese panel se oculta en móvil y el logo debe verse siempre. Chico a
   propósito: es una herramienta interna, quien entra ya conoce la marca. El margen
   negativo compensa el aire transparente que el PNG trae a la izquierda, para que el
   dibujo quede alineado con el título de abajo. */
.sb-cuenta-logo {
  display: block;
  height: 4rem;
  width: auto;
  margin: 0 0 1.25rem -0.75rem;
}

/* 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)
   y más grande para ser el punto focal de una tarjeta centrada. */
.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;
}

/* Miniatura de imagen con zoom (docs/ui-kit-smartbuy/site.css, sección 16):
   tamaño fijo sin importar las dimensiones de la imagen subida, cursor de
   lupa como pista de que se puede ampliar en un modal al hacer clic. */
.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 (docs/ui-kit-smartbuy/site.css,
   sección 16): el círculo sigue el mouse mostrando esa zona a mayor
   aumento; el cursor real se oculta para que el círculo haga de puntero.
   JS en Ventas/Detalle.cshtml. */
.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);
}

/* ============================================================
   Checkbox / switch con el naranja de marca
   (docs/ui-kit-smartbuy/site.css, sección 10): sin esto Bootstrap pinta el
   estado marcado de azul, y en todo el panel naranja = activo/seleccionado.
   ============================================================ */
.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);
}

/* ============================================================
   Modales — mismo lenguaje visual que las tarjetas
   (docs/ui-kit-smartbuy/site.css, sección 11): sin esto Bootstrap le da a
   .modal-content su propio radio y borde, distintos a los de .card.
   ============================================================ */
.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;
}

/* ============================================================
   Aviso con personaje (docs/ui-kit-smartbuy/site.css, sección 21): cuerpo de
   un modal que pide atención sin ser un error — el dibujo señala con el dedo
   hacia el texto. En móvil se apila (dibujo arriba, texto centrado debajo).
   La mascota es Views/Shared/_AvatarSenalando.cshtml (wwwroot/img/avatar.png).
   ============================================================ */
.sb-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 576px) {
  .sb-aviso {
    flex-direction: row;
    gap: 1.5rem;
    text-align: left;
  }
}

/* La imagen original es apaisada (1536x1024, fondo transparente) con la mascota a la
   izquierda y aire vacío a la derecha: aspect-ratio + object-fit: cover la recortan a
   solo la mascota sin tocar el archivo, y object-position corre la "ventana" lo justo
   para que entre la mano que señala. Si se cambia la imagen por otra con otro encuadre,
   estos dos números son los que hay que reajustar. */
.sb-aviso-avatar {
  width: 11rem;
  aspect-ratio: 1.14;
  object-fit: cover;
  object-position: 33% center;
  flex-shrink: 0;
}

/* La cantidad que se está avisando, del mismo tamaño y azul que .sb-stat-valor. */
.sb-aviso-cifra {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sb-azul);
}

/* ============================================================
   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 neutros (fondo, superficie, texto, bordes,
   beige) — el azul/naranja de marca ya se ve bien sobre fondo oscuro, y
   el sidebar siempre fue azul oscuro incluso en modo claro. Los badges
   de estado que usan hex sueltos en vez de variables llevan su propio
   bloque de reemplazo agrupado por color. Ver docs/ui-kit-smartbuy/
   site.css sección 17 y README.md > "Modo claro/oscuro" para el criterio
   completo. */
:root[data-bs-theme="dark"] {
  --sb-fondo: #12181f;
  --sb-superficie: #1b232c;
  --sb-texto: #e9ecef;
  --sb-secundario: #adb5bd;
  --sb-borde: #2a333d;
  --sb-borde-fuerte: #3a4552;
  --sb-beige: #3a331a;
}

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

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

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

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

/* Aviso de espera a pantalla completa (site.js > mostrarAvisoCarga): cubre la
   pantalla mientras se prepara una foto o se envía un formulario, para que no
   se pueda tocar "Enviar" dos veces. z-index por encima del modal (1055) y
   del offcanvas (1045) de Bootstrap. */
.sb-aviso-carga {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.45);
}

.sb-aviso-carga[hidden] {
  display: none;
}

.sb-aviso-carga-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 14rem;
  padding: 1.5rem 2rem;
  border-radius: 0.75rem;
  background-color: var(--sb-superficie);
  color: var(--sb-texto);
  text-align: center;
}

.sb-aviso-carga .spinner-border {
  color: var(--sb-naranja);
}

/* Aviso de que una venta (una factura) trae más de un teléfono. Va junto al producto en
   los listados y junto al título en el detalle. Naranja de marca con texto oscuro (no
   blanco) por contraste: tiene que llamar la atención, porque cada teléfono comisiona
   por separado y hay que revisarlos todos. */
.sb-badge-telefonos {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: var(--sb-naranja);
  color: #212529;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Recuadro de un teléfono dentro de una venta (detalle de venta y modal de aprobar):
   una factura puede traer varios y cada uno se revisa y comisiona por separado. */
.sb-telefono {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1rem;
  margin-bottom: 1rem;
}