/* Tema Sellport sobre Bootstrap 5.3. El portal ya carga Bootstrap, pero sus estilos propios no lo usaban: aquí los
   tokens de Sellport se vuelven las variables de Bootstrap (--bs-*), para que los componentes de Bootstrap (botones,
   menús desplegables, campos, tarjetas, ventanas, grupos de botones) salgan con el diseño aprobado sin CSS a mano.
   Los estilos sp-*.css irán leyendo estas variables en lugar de repetir colores, radios y sombras. Va después de
   bootstrap.min.css. Para gente grande: letra base de 15 px en los componentes y objetivos de 40 px. */
:root {
  /* Tokens de Sellport (fuente única). */
  --sp-marino:#4b566b; --sp-marino-hondo:#3e4759; --sp-suelo:#e8ebef; --sp-riel:#ebedf0;
  --sp-tinta:#16191f; --sp-texto:#414d5c; --sp-tenue:#5f6b7a; --sp-linea:#e9ebed; --sp-borde:#d9dce4;
  --sp-naranja:#ff6a1a; --sp-naranja-claro:#ff8a3d; --sp-naranja-texto:#c2410c;
  --sp-letra:"Schibsted Grotesk", Inter, "Segoe UI", sans-serif;
  --sp-sombra:0 1px 2px rgba(22,25,31,.06);
  --sp-sombra-menu:0 16px 36px -18px rgba(20,26,46,.32);

  /* Los mismos tokens como variables de Bootstrap. */
  --bs-primary:#4b566b; --bs-primary-rgb:75,86,107;
  --bs-secondary-color:#5f6b7a; --bs-tertiary-bg:#f5f6f8;
  --bs-border-color:#d9dce4; --bs-border-color-translucent:rgba(22,25,31,.1);
  --bs-border-radius:10px; --bs-border-radius-sm:8px; --bs-border-radius-lg:18px; --bs-border-radius-xl:18px;
  --bs-box-shadow-sm:var(--sp-sombra); --bs-box-shadow:var(--sp-sombra-menu);
  --bs-focus-ring-color:rgba(194,65,12,.25);
  --bs-link-color:#c2410c; --bs-link-color-rgb:194,65,12; --bs-link-hover-color:#9a3412; --bs-link-hover-color-rgb:154,52,18;
}

/* Botones: el principal en marino, los secundarios blancos con línea fina. */
.btn { --bs-btn-font-family:var(--sp-letra); --bs-btn-font-size:15px; --bs-btn-font-weight:600; --bs-btn-padding-y:.5rem; --bs-btn-border-radius:10px; --bs-btn-focus-box-shadow:0 0 0 3px rgba(194,65,12,.25); }
.btn-primary { --bs-btn-bg:#4b566b; --bs-btn-border-color:#4b566b; --bs-btn-hover-bg:#3e4759; --bs-btn-hover-border-color:#3e4759; --bs-btn-active-bg:#16191f; --bs-btn-active-border-color:#16191f; --bs-btn-disabled-bg:#4b566b; --bs-btn-disabled-border-color:#4b566b; }
.btn-light, .btn-outline-secondary { --bs-btn-color:#16191f; --bs-btn-bg:#fff; --bs-btn-border-color:#d9dce4; --bs-btn-hover-color:#16191f; --bs-btn-hover-bg:#f5f6f8; --bs-btn-hover-border-color:#c4c9d2; --bs-btn-active-color:#16191f; --bs-btn-active-bg:#ebedf0; --bs-btn-active-border-color:#c4c9d2; }
/* Grupo segmentado (Top 10 / 20 / 50): riel gris y la opción elegida en blanco. */
.btn-group.sp-seg { padding:3px; gap:2px; border-radius:10px; background:var(--sp-riel); }
.btn-group.sp-seg > .btn { --bs-btn-color:#414d5c; --bs-btn-bg:transparent; --bs-btn-border-color:transparent; --bs-btn-hover-bg:rgba(255,255,255,.6); --bs-btn-hover-border-color:transparent; --bs-btn-active-bg:#fff; --bs-btn-active-color:#16191f; --bs-btn-active-border-color:transparent; border-radius:8px !important; }
.btn-group.sp-seg > .btn-check:checked + .btn, .btn-group.sp-seg > .btn.active { background:#fff; color:#16191f; box-shadow:0 1px 3px rgba(22,25,31,.12); }

/* Menús desplegables. */
.dropdown-menu { --bs-dropdown-font-size:15px; --bs-dropdown-color:#16191f; --bs-dropdown-border-color:#e9ebed; --bs-dropdown-border-radius:12px; --bs-dropdown-inner-border-radius:11px; --bs-dropdown-box-shadow:var(--sp-sombra-menu); --bs-dropdown-padding-x:6px; --bs-dropdown-padding-y:6px; --bs-dropdown-item-padding-x:10px; --bs-dropdown-item-padding-y:8px; --bs-dropdown-link-color:#16191f; --bs-dropdown-link-hover-bg:#f5f6f8; --bs-dropdown-link-active-color:#16191f; --bs-dropdown-link-active-bg:#ebedf0; --bs-dropdown-header-color:#5f6b7a; --bs-dropdown-divider-bg:#e9ebed; font-family:var(--sp-letra); }
.dropdown-menu .dropdown-item { border-radius:8px; }

/* Campos. */
.form-control, .form-select { font-size:15px; border-color:#d9dce4; border-radius:10px; min-height:40px; }
.form-control:focus, .form-select:focus { border-color:#c2410c; box-shadow:0 0 0 3px rgba(194,65,12,.15); }
.form-check-input:checked { background-color:#16191f; border-color:#16191f; }
.form-check-input:focus { border-color:#c2410c; box-shadow:0 0 0 3px rgba(194,65,12,.15); }

/* Tarjetas: blancas, sin borde, radio 18. */
.card { --bs-card-border-width:0; --bs-card-border-radius:18px; --bs-card-inner-border-radius:18px; --bs-card-bg:#fff; --bs-card-cap-bg:transparent; --bs-card-spacer-x:1.25rem; --bs-card-spacer-y:1.125rem; box-shadow:var(--sp-sombra); }

/* Ventanas emergentes. */
.modal { --bs-modal-border-width:0; --bs-modal-border-radius:16px; --bs-modal-inner-border-radius:16px; --bs-modal-box-shadow:0 24px 64px -24px rgba(13,18,28,.45); --bs-modal-header-border-color:#e9ebed; --bs-modal-footer-border-color:#e9ebed; }
.modal-backdrop { --bs-backdrop-bg:#16191f; --bs-backdrop-opacity:.35; }

/* Tablas. */
.table { --bs-table-color:#16191f; --bs-table-border-color:#e9ebed; --bs-table-hover-bg:#f5f6f8; }
.table > thead th { color:#5f6b7a; font-weight:600; }

/* Tooltips y popovers. */
.tooltip { --bs-tooltip-bg:#16191f; --bs-tooltip-font-size:14px; --bs-tooltip-border-radius:8px; }
.popover { --bs-popover-border-color:#e9ebed; --bs-popover-border-radius:12px; --bs-popover-box-shadow:var(--sp-sombra-menu); --bs-popover-font-size:15px; }

@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog, .dropdown-menu { transition:none !important; } }

/* Los menús crecen desde su botón (transitions.dev, menu dropdown). Se anima con scale/translate, no transform,
   porque Popper coloca el menú con transform. */
.dropdown-menu.show { animation:sp-menu-in var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)); transform-origin:top right; }
.dropdown-menu.show:not(.dropdown-menu-end) { transform-origin:top left; }
@keyframes sp-menu-in { from { opacity:0; scale:.97; translate:0 -4px; } }
@media (prefers-reduced-motion: reduce) { .dropdown-menu.show { animation:none; } }

/* Ventanas: suben con escala suave (transitions.dev, modal), no bajan desde arriba como en Bootstrap. */
.modal.fade .modal-dialog { transform:scale(.96); transition:transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)); }
.modal.show .modal-dialog { transform:none; }
.sp-modal { --bs-modal-padding:0; --bs-modal-margin:16px; }
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition:none; } }

/* Lo que el portal arma por dentro (detalle, producto) ya no es la ventana: la ventana es la de Bootstrap. */
html body .sp-modal .modal-body.gen-det-ventana { width:auto !important; max-height:none !important; border-radius:0 !important; box-shadow:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
html body .sp-modal .gen-modal-fondo.sp-en-modal { position:static !important; inset:auto !important; z-index:auto !important; display:block !important; padding:0 !important; background:none !important; backdrop-filter:none !important; opacity:1 !important; }
html body .sp-modal .gen-modal-fondo.sp-en-modal > .gen-modal { width:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; opacity:1 !important; transform:none !important; animation:none !important; overflow:visible !important; }

/* El portal usa zoom en <html>: el fondo oscuro de las ventanas se estira a toda la pantalla con inset en lugar de 100vw/100vh. */
.modal-backdrop, .sp-modal { width:calc(100vw / var(--z, 1)) !important; height:calc(100vh / var(--z, 1)) !important; }
html body .sp-modal .gen-desglose { width:auto !important; border-radius:0 !important; box-shadow:none !important; animation:none !important; }

/* Cifra que es un nombre (Taste + impeccable): mismo peso visual que sus vecinas sin gritar; 22 px, dos renglones como
   máximo (el nombre completo queda en el globo), y su dato de apoyo pegado debajo como en las demás. */
html body.modo-general #app-shell .mp-resumen .in-cifra.sp-cifra-texto > strong, html body #app-shell .in-cifra.sp-cifra-texto > strong { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:22px !important; font-weight:600 !important; line-height:1.25 !important; letter-spacing:-.015em !important; padding-top:6px; text-wrap:balance; }

/* Menús siempre en blanco (ui.css tiñe el fondo de Bootstrap). */
.dropdown-menu { --bs-dropdown-bg:#fff; }

/* Ventanas del General: el fondo de la ventana en blanco (ui.css lo teñía de azul y se veía una franja a la
   derecha) y el contenido del portal a todo lo ancho. */
.sp-modal .modal-content { --bs-modal-bg:#fff; background:#fff !important; }
html body .sp-modal .gen-modal-fondo.sp-en-modal > .gen-modal { width:100% !important; box-sizing:border-box; }
/* Tabla «Por tienda y canal» de la ventana del producto: celdas centradas a lo alto y «sin costo» del tamaño del resto. */
.sp-prod .gen-scroll table td { vertical-align:middle !important; }
.sp-prod .gen-scroll table td .caso-meta { font-size:13px; }
/* Celular: las seis cifras del producto en dos columnas parejas, separadas por líneas finas. */
@media (max-width:700px) {
  html body .sp-prod .gen-modal.ancho .gen-seis { grid-template-columns:1fr 1fr !important; }
  html body .sp-prod .gen-modal.ancho .gen-seis .in-cifra { border:0 !important; border-radius:0 !important; border-bottom:1px solid #eceef3 !important; }
  html body .sp-prod .gen-modal.ancho .gen-seis .in-cifra:nth-child(odd) { border-right:1px solid #eceef3 !important; }
}