/**
 * PIMSA Online — Colores corporativos (azul, blanco, gris)
 * Cargar antes de login-modern, header-modern, inicio-modern, footer-modern, busqueda-modern, estadodecuenta-modern, historial-modern, micuenta-modern, sucursales-modern, cart-modern
 */
:root {
  --pimsa-accent: #004285;
  --pimsa-accent-dark: #003366;
  --pimsa-accent-mid: #1565c0;
  --pimsa-accent-light: #42a5f5;
  --pimsa-accent-soft: #e8eef4;
  --pimsa-accent-soft-2: #dce4ec;
  --pimsa-accent-border: #90caf9;
  --pimsa-gray-50: #f8fafc;
  --pimsa-gray-100: #f1f5f9;
  --pimsa-gray-200: #e2e8f0;
  --pimsa-gray-500: #64748b;
  --pimsa-gray-700: #334155;
  --pimsa-navy: #0a1f33;
  --pimsa-navy-mid: #0c2d4a;
  --pimsa-navy-dark: #061525;
}

/* —— Sin recuadro blanco al hacer clic (ratón/touch) —— */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.nav-item-link:focus:not(:focus-visible),
.menu-item:focus:not(:focus-visible),
.header-action-link:focus:not(:focus-visible),
.header-user-dropdown__link:focus:not(:focus-visible),
.cart-btn-primary:focus:not(:focus-visible),
.cart-btn-outline:focus:not(:focus-visible),
.cart-confirm-btn:focus:not(:focus-visible),
.pimsa-swal-btn:focus:not(:focus-visible),
.add-cart:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Bootstrap 3 — anillo azul/gris en botones */
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus,
.btn-default:focus,
.btn-primary:focus,
.btn-warning:focus {
  outline: none !important;
  box-shadow: none !important;
}

a:focus,
a:active,
a:active:focus {
  outline: none !important;
}

/* Enlaces del menú superior */
.pimsa-header--modern .nav-item-link:focus,
.pimsa-header--modern .nav-item-link:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Sin destello al tocar en móvil */
a,
button,
.btn,
.nav-item-link,
.menu-item,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* —— Notificaciones modernas PIMSA (notify.js) —— */
.notifyjs-corner {
  z-index: 10050;
}

.notifyjs-corner[style*="top: 0px"] {
  top: 18px !important;
}

.notifyjs-metro-base {
  min-width: 0 !important;
  min-height: 0 !important;
  width: min(360px, calc(100vw - 28px)) !important;
  padding: 0 !important;
  color: var(--pimsa-navy-mid, #0c2d4a) !important;
  background: #fff !important;
  border: 1px solid var(--pimsa-gray-200, #e2e8f0) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(10, 31, 51, 0.2) !important;
  overflow: hidden;
}

.notifyjs-metro-base .image {
  left: 18px !important;
  top: 18px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--pimsa-accent, #004285) !important;
  background: var(--pimsa-accent-soft, #e8eef4);
  border-radius: 999px;
  font-size: 17px !important;
}

.notifyjs-metro-base .text-wrapper {
  margin: 16px 18px 16px 68px !important;
  min-height: 38px;
}

.notifyjs-metro-base .title,
.notifyjs-metro-base .text {
  font-family: 'DM Sans', 'Segoe UI', sans-serif !important;
}

.notifyjs-metro-base .title {
  display: block;
  margin: 0 0 3px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--pimsa-navy-mid, #0c2d4a) !important;
}

.notifyjs-metro-base .text {
  display: block;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--pimsa-gray-700, #334155) !important;
}

.notifyjs-wrapper.notifyjs-metro-success .notifyjs-metro-base {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
  border-left: 5px solid #10b981 !important;
  color: #065f46 !important;
}

.notifyjs-wrapper.notifyjs-metro-success .notifyjs-metro-base .title,
.notifyjs-wrapper.notifyjs-metro-success .notifyjs-metro-base .text {
  color: #065f46 !important;
}

.notifyjs-wrapper.notifyjs-metro-success .notifyjs-metro-base .image {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.14);
}

.notifyjs-wrapper.notifyjs-metro-warning .notifyjs-metro-base {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
  border-left: 5px solid #f59e0b !important;
  color: #92400e !important;
}

.notifyjs-wrapper.notifyjs-metro-warning .notifyjs-metro-base .title,
.notifyjs-wrapper.notifyjs-metro-warning .notifyjs-metro-base .text {
  color: #92400e !important;
}

.notifyjs-wrapper.notifyjs-metro-warning .notifyjs-metro-base .image {
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.14);
}

.notifyjs-wrapper.notifyjs-metro-error .notifyjs-metro-base {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
  border-left: 5px solid #ef4444 !important;
  color: #991b1b !important;
}

.notifyjs-wrapper.notifyjs-metro-error .notifyjs-metro-base .title,
.notifyjs-wrapper.notifyjs-metro-error .notifyjs-metro-base .text {
  color: #991b1b !important;
}

.notifyjs-wrapper.notifyjs-metro-error .notifyjs-metro-base .image {
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.14);
}

.notifyjs-wrapper.notifyjs-metro-info .notifyjs-metro-base,
.notifyjs-wrapper.notifyjs-metro-default .notifyjs-metro-base {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  border-left: 5px solid var(--pimsa-accent, #004285) !important;
  color: #1e40af !important;
}

.notifyjs-wrapper.notifyjs-metro-info .notifyjs-metro-base .title,
.notifyjs-wrapper.notifyjs-metro-info .notifyjs-metro-base .text,
.notifyjs-wrapper.notifyjs-metro-default .notifyjs-metro-base .title,
.notifyjs-wrapper.notifyjs-metro-default .notifyjs-metro-base .text {
  color: #1e40af !important;
}

.notifyjs-wrapper.notifyjs-metro-info .notifyjs-metro-base .image,
.notifyjs-wrapper.notifyjs-metro-default .notifyjs-metro-base .image {
  color: var(--pimsa-accent, #004285) !important;
  background: var(--pimsa-accent-soft, #e8eef4);
}

@media (max-width: 767px) {
  .notifyjs-corner {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .notifyjs-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
  }

  .notifyjs-metro-base {
    width: 100% !important;
  }
}

/* Teclado: indicador accesible discreto (opcional) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-item-link:focus-visible {
  outline: 2px solid var(--pimsa-accent-light, #42a5f5) !important;
  outline-offset: 2px;
}