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

  --sb-sidebar-ancho: 130px;
  --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);
  /* !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;
}

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

.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: 37.5px;
  height: 37.5px;
  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;
}

.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, sin funcionalidad todavía): se ve activo,
   no "gris apagado" como un <button disabled> normal. */
.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;
}

/* Menú del avatar (Ver perfil / 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);
}

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

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

/* 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).
   docs/ui-kit-smartbuy/site.css, sección 3. */
.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;
}

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

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

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

.campo-deshabilitado-nota {
  background-color: var(--sb-beige);
  color: var(--sb-marron);
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

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

/* ============================================================
   Tabla "Mis ventas": 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;
}

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

/* En el celular (bajo 768px, cuando "Mi perfil" apila la foto encima de los campos) la
   foto ocupa sola todo el ancho, así que puede ser más grande sin apretar nada: pasa de
   5rem a 9rem. La inicial crece en la misma proporción para el caso sin foto. En
   tablet/escritorio se queda en 5rem porque ahí comparte la fila con los campos. */
@media (max-width: 767.98px) {
  .sb-avatar-grande {
    width: 9rem;
    height: 9rem;
    font-size: 3.6rem;
  }
}

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

/* ============================================================
   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 {
  color: #e0d093;
}

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

[data-bs-theme="dark"] .badge-estado-aprobada {
  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);
}

/* Bloque de un teléfono en "Registrar venta" (Views/Ventas/Registrar.cshtml): una
   factura puede traer varios teléfonos y cada uno va en su propio recuadro, para
   que se distinga a simple vista dónde termina uno y empieza el otro. */
.sb-telefono {
  border: 1px solid var(--sb-borde);
  border-radius: var(--sb-radio);
  padding: 1rem;
  margin-bottom: 1rem;
}

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

/* Botón "Agregar otro teléfono" de Registrar venta. Tiene la misma forma que un
   recuadro .sb-telefono pero con borde punteado azul: ocupa el lugar del siguiente
   teléfono, para que el vendedor lo vea como parte del formulario y no como un
   enlace secundario. Al pasar el mouse se rellena de azul, igual que
   .btn-outline-secondary. No es naranja a propósito: el naranja queda para la
   acción principal de la pantalla ("Reportar venta"). */
.sb-telefono-agregar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 2px dashed var(--sb-azul);
  border-radius: var(--sb-radio);
  background-color: transparent;
  color: var(--sb-azul);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sb-telefono-agregar[hidden] {
  display: none;
}

.sb-telefono-agregar:hover,
.sb-telefono-agregar:focus-visible {
  border-style: solid;
  background-color: var(--sb-azul);
  color: #fff;
  outline: none;
}

[data-bs-theme="dark"] .sb-telefono-agregar {
  border-color: #8ec2ff;
  color: #8ec2ff;
}

[data-bs-theme="dark"] .sb-telefono-agregar:hover,
[data-bs-theme="dark"] .sb-telefono-agregar:focus-visible {
  border-color: var(--sb-azul);
  color: #fff;
}

/* .sb-icon mide 37.5px (pensado para el menú lateral); aquí acompaña a un texto. */
.sb-telefono-agregar .sb-icon {
  width: 1.5rem;
  height: 1.5rem;
}