/* ─── Paleta de colores Arai ERP ─── */
:root {
  --brand-primary:   #2F5753;   /* verde institucional Arai */
  --brand-secondary: #1F3B38;   /* verde oscuro */
  --brand-accent:    #4E7D78;   /* verde claro */
  --sidebar-bg:      #0F172A;   /* slate-900 */
  --sidebar-text:    #CBD5E1;   /* slate-300 */
  --sidebar-active:  #2F5753;
  --topbar-bg:       #FFFFFF;
  --topbar-border:   #E2E8F0;
  --body-bg:         #F8FAFC;

  /* Override de la variable "primary" nativa de Bootstrap 5 — sin esto,
     clases crudas como bg-primary/text-primary/btn-primary/border-primary
     siguen en el azul default de Bootstrap (#0d6efd) aunque el resto de la
     paleta ya esté en verde institucional (confirmado 2026-08-07: el ABM de
     Clientes, entre otras pantallas, seguía mostrando azul). */
  --bs-primary:            #2F5753;
  --bs-primary-rgb:        47, 87, 83;
  --bs-primary-bg-subtle:  #e8f0ef;
  --bs-primary-border-subtle: #c3d6d4;
  --bs-primary-text-emphasis: #1F3B38;
  --bs-link-color:         #2F5753;
  --bs-link-color-rgb:     47, 87, 83;
  --bs-link-hover-color:   #1F3B38;
  --bs-link-hover-color-rgb: 31, 59, 56;
}

.btn-primary {
  --bs-btn-bg: #2F5753;
  --bs-btn-border-color: #2F5753;
  --bs-btn-hover-bg: #1F3B38;
  --bs-btn-hover-border-color: #1F3B38;
  --bs-btn-active-bg: #1F3B38;
  --bs-btn-active-border-color: #1a3330;
  --bs-btn-disabled-bg: #2F5753;
  --bs-btn-disabled-border-color: #2F5753;
  --bs-btn-focus-shadow-rgb: 47, 87, 83;
}

.btn-outline-primary {
  --bs-btn-color: #2F5753;
  --bs-btn-border-color: #2F5753;
  --bs-btn-hover-bg: #2F5753;
  --bs-btn-hover-border-color: #2F5753;
  --bs-btn-active-bg: #2F5753;
  --bs-btn-active-border-color: #2F5753;
  --bs-btn-disabled-color: #2F5753;
  --bs-btn-disabled-border-color: #2F5753;
  --bs-btn-focus-shadow-rgb: 47, 87, 83;
}

.cursor-pointer { cursor: pointer; }

body {
  background-color: var(--body-bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Sidebar ─── */
#sidebar {
  width: 240px;
  min-height: 100vh;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  transition: width 0.25s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#sidebar::-webkit-scrollbar {
  width: 6px;
}

#sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.sidebar-brand {
  color: #FFFFFF;
  text-decoration: none;
}

.sidebar-brand:hover { color: var(--brand-accent); }

.sidebar-divider {
  border-color: rgba(255,255,255,0.1);
}

#sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}

/* Mismo tamaño de fuente para TODOS los ítems del sidebar (principales y
   sub-items) — Bootstrap .small en sub-items quedaba visualmente más chico */
#sidebar .nav-link,
#sidebar .nav-link.small,
#sidebar .nav-link .small {
  font-size: 0.9rem !important;
}

#sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.08);
  color: #FFFFFF;
}

#sidebar .nav-link.active {
  background-color: var(--sidebar-active);
  color: #FFFFFF;
}

/* label de sección de administración en sidebar */
.sidebar-section-label {
  color: #64748b;   /* slate-500 */
  font-size: .78rem;
  letter-spacing: .04em;
}

/* título de sección colapsable (Dte, Cobranzas, Stock, Administración) */
.sidebar-section-toggle {
  cursor: pointer;
}

.sidebar-section-toggle:hover .sidebar-section-label {
  color: #94a3b8;   /* slate-400 */
}

.sidebar-section-chevron {
  color: #64748b;
  transition: transform 0.2s ease;
}

.sidebar-section-chevron.rotated {
  transform: rotate(-90deg);
}

/* sub-items (Timbrados, Clasificación) — override Bootstrap .text-muted */
#sidebar .nav-link.text-muted {
  color: #94a3b8 !important;   /* slate-400 — visible sobre fondo oscuro */
}

#sidebar .nav-link.text-muted:hover {
  color: #e2e8f0 !important;
  background-color: rgba(255,255,255,0.06);
}

#sidebar .nav-link.text-muted.active {
  color: #FFFFFF !important;
  background-color: var(--sidebar-active);
}

.sidebar-footer {
  color: var(--sidebar-text);
  font-size: 0.8rem;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.sidebar-footer-info {
  line-height: 1.2;
}

.sidebar-footer-name {
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
}

.sidebar-footer-role {
  color: var(--sidebar-text);
  font-size: .72rem;
  opacity: .75;
}

.sidebar-footer-action {
  color: var(--sidebar-text);
  font-size: 1.35rem;
  opacity: .7;
  transition: opacity .15s, color .15s;
  text-decoration: none;
  padding: .25rem;
}

.sidebar-footer-action:hover {
  opacity: 1;
  color: #f87171;
}

/* ─── Botón colapsar/expandir junto al logo ─── */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--sidebar-text-muted, #94a3b8);
  border-radius: 6px;
  font-size: .85rem;
  transition: background-color .15s, color .15s;
}
.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
@media (max-width: 767.98px) {
  .sidebar-collapse-btn { display: none; }
}

/* ─── Sidebar collapsed ─── */
#app-wrapper.sidebar-collapsed #sidebar {
  width: 80px;
}

/* Ocultar todos los textos de nav */
#app-wrapper.sidebar-collapsed #sidebar .nav-link-text,
#app-wrapper.sidebar-collapsed .sidebar-brand-text,
#app-wrapper.sidebar-collapsed .sidebar-footer-info,
#app-wrapper.sidebar-collapsed .sidebar-footer-action {
  display: none !important;
}

/* Brand: centrar logo, fila pasa a columna para acomodar el botón debajo */
#app-wrapper.sidebar-collapsed .sidebar-brand-row {
  flex-direction: column;
  gap: .35rem;
}

#app-wrapper.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 0;
  flex-grow: 0;
}

#app-wrapper.sidebar-collapsed .sidebar-collapse-btn i::before {
  content: "\f285"; /* bi-chevron-right */
}

#app-wrapper.sidebar-collapsed .sidebar-logo {
  width: 34px;
  height: 34px;
  margin: 0 !important;
}

/* Nav links: centrar íconos */
#app-wrapper.sidebar-collapsed #sidebar .nav-link {
  justify-content: center;
  padding: 0.6rem;
}

#app-wrapper.sidebar-collapsed #sidebar .nav-link i {
  margin: 0 !important;
  font-size: 1.2rem;
}

/* Títulos de sección colapsables (Dte, Cobranzas, Mantenimientos,
   Administración): en modo ícono solo queda visible el ícono, centrado
   igual que los .nav-link — se oculta el texto, el chevron, y el badge
   "Próx." de los ítems placeholder. Los grupos quedan siempre expandidos
   (mostrando sus íconos) para no combinar dos estados de colapso distintos
   — el modo ícono ya es la vista "compacta", no hace falta plegar de más. */
#app-wrapper.sidebar-collapsed .sidebar-section-toggle {
  justify-content: center;
  padding: 0.6rem !important;
  margin-top: .5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* El primer grupo (Dte) no necesita separador arriba — no hay nada antes */
#app-wrapper.sidebar-collapsed #sidebar > ul:first-of-type > li:first-child .sidebar-section-toggle {
  margin-top: 0;
  border-top: none;
}

#app-wrapper.sidebar-collapsed .sidebar-section-label {
  display: flex;
  align-items: center;
}

#app-wrapper.sidebar-collapsed .sidebar-section-label i {
  margin: 0 !important;
  font-size: 1.1rem;
}

#app-wrapper.sidebar-collapsed .sidebar-section-label {
  font-size: 0 !important;
}

#app-wrapper.sidebar-collapsed .sidebar-section-chevron,
#app-wrapper.sidebar-collapsed .badge.nav-link-text {
  display: none !important;
}

#app-wrapper.sidebar-collapsed .sidebar-section-group {
  display: block !important;
  height: auto !important;
}

/* Anular el sangrado de sub-items (Clasificación, Depósitos, Cotizaciones)
   para que sus íconos queden centrados igual que el resto */
#app-wrapper.sidebar-collapsed #sidebar .nav-item {
  padding-left: 0 !important;
}

/* Footer: solo avatar */
#app-wrapper.sidebar-collapsed .sidebar-footer {
  justify-content: center;
  padding: 0;
}

#app-wrapper.sidebar-collapsed .sidebar-avatar {
  width: 34px;
  height: 34px;
}

/* ─── Topbar ─── */
.topbar {
  background-color: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ─── Cards ─── */
.card {
  border-radius: 12px;
}

.dashboard-access-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-access-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

/* ─── Spinner animación ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .7s linear infinite; }

/* ─── Toast notifications ─── */
#s-toast-container {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  min-width: 320px;
  max-width: 480px;
  width: max-content;
}

.s-toast {
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
  width: 100%;
}

/* ─── Mobile (< 768px) ─── */
@media (max-width: 767.98px) {

  /* Sidebar: overlay deslizante en mobile */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 240px !important;
  }

  #sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Backdrop semitransparente al abrir sidebar */
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
  }
  #sidebar-backdrop.show { display: block; }

  /* El contenido principal ocupa todo el ancho */
  #app-wrapper {
    flex-direction: column;
  }
  .flex-grow-1 { width: 100%; }

  /* Topbar: más compacta */
  .topbar { height: 48px; padding: 0 .75rem !important; }
  .topbar-center { display: none !important; }

  /* Contenido: menos padding lateral */
  .main-content, main { padding: .75rem !important; }
}

.s-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.s-toast-body {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem;
}

.s-toast-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.s-toast-msg {
  flex: 1;
  font-size: .875rem;
  line-height: 1.4;
  color: #1e293b;
}

.s-toast-close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #94a3b8;
  padding: 0;
  line-height: 1;
}

.s-toast-close:hover { color: #475569; }

.s-toast-progress {
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
  animation: s-toast-shrink linear forwards;
}

@keyframes s-toast-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* colores por tipo */
.s-toast--success .s-toast-icon { color: #16a34a; }
.s-toast--success .s-toast-progress { color: #16a34a; }
.s-toast--danger  .s-toast-icon { color: #dc2626; }
.s-toast--danger  .s-toast-progress { color: #dc2626; }
.s-toast--warning .s-toast-icon { color: #d97706; }
.s-toast--warning .s-toast-progress { color: #d97706; }
.s-toast--info    .s-toast-icon { color: #2F5753; }
.s-toast--info    .s-toast-progress { color: #2F5753; }

/* ─── Login ─── */
.login-bg {
  background: linear-gradient(135deg, #0F172A 0%, #1E4A44 50%, #2F5753 100%);
}

.login-card {
  border-radius: 16px;
}

.login-brand-panel {
  max-width: 380px;
}

.sidebar-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.88;
  flex-shrink: 0;
}

.login-logo {
  max-height: 64px;
  width: auto;
}

.login-logo-panel {
  max-height: 250px;
  width: auto;
  opacity: 0.92;
}

.login-logo-mobile {
  max-height: 90px;
  width: auto;
}

.login-empresas-connector {
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
}

.login-empresas-tree {
  width: 90%;
  max-width: 300px;
  height: 2px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.25);
}

.login-empresas-row {
  position: relative;
  padding-top: 20px;
}

.login-empresas-row .login-logo-empresa {
  position: relative;
}

.login-empresas-row .login-logo-empresa::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 20px;
  background: rgba(255, 255, 255, 0.25);
}

.login-logo-empresa {
  max-height: 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px;
  opacity: 0.95;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Input groups sin borde doble */
.input-group .form-control:focus {
  box-shadow: none;
  border-color: var(--brand-primary);
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .btn {
  border-color: var(--brand-primary);
}

/* Input-group unificado: contenedor con borde único */
.input-group {
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  overflow: hidden;
}

.input-group .input-group-text,
.input-group .form-control,
.input-group .btn {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Foco: contorno azul en el contenedor */
.input-group:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(47, 87, 83, .15);
}

/* Error: contorno rojo en el contenedor */
.input-group:has(.is-invalid) {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .15);
}

/* ─── Alerts estilizados ─── */
.alert {
  border-radius: 10px;
  border: none;
  font-size: 0.9rem;
}

/* ─── Botones ─── */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

/* ─── Tab content wrapper ─── */
.tab-content-wrapper {
  border: 1px solid #dee2e6;
}

/* ─── Breadcrumb en topbar ─── */
.topbar .breadcrumb-item a {
  color: var(--bs-secondary-color);
}
.topbar .breadcrumb-item a:hover {
  color: var(--brand-primary);
}
.topbar .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-secondary-color);
}
.topbar .breadcrumb-item.active {
  color: var(--brand-primary);
  font-weight: 600;
}

/* ─── Topbar: centro empresa ─── */
.topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Topbar: avatar con dropdown ─── */
.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
}
.topbar-avatar:hover { opacity: .85; }
.topbar-avatar::after { display: none; }

/* ─── Tabla: header gris oscuro suavizado ─── */
.table-header-dark th {
  background-color: #3a3f4b;
  color: #e9ecef;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: none;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

/* ─── Tabla productos: filas ─── */
.prod-row td { vertical-align: middle; }
.prod-row-inactive td { opacity: .55; }

/* Código badge suave */
.badge-codigo {
  display: inline-block;
  background: #e6efee;
  color: #1f3b38;
  font-size: .72rem;
  font-weight: 700;
  padding: .2em .55em;
  border-radius: 4px;
  letter-spacing: .02em;
}

/* Impuesto badge atenuado */
.badge-impuesto {
  display: inline-block;
  background: #e9f5fb;
  color: #0077a8;
  font-size: .72rem;
  font-weight: 600;
  padding: .2em .55em;
  border-radius: 4px;
}

/* Estado badge pill pequeño */
.badge-estado {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .25em .65em;
  border-radius: 20px;
  letter-spacing: .03em;
}
.badge-estado-activo  { background: #d1fae5; color: #065f46; }
.badge-estado-inactivo { background: #f1f5f9; color: #64748b; }

/* Íconos de acción sin caja */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.row-action-btn {
  background: none;
  border: none;
  padding: .25rem .3rem;
  font-size: 1rem;
  border-radius: 5px;
  opacity: .45;
  transition: opacity .15s, background .15s;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
.prod-row:hover .row-action-btn { opacity: 1; }
.row-action-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,.06);
}

/* ─── Personas: badges de roles ─── */
.persona-row td { vertical-align: middle; }
.persona-row-inactive td { opacity: .55; }

.badge-rol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 0;
}
.badge-rol-cliente   { background: #dbeafe; color: #1d4ed8; }
.badge-rol-proveedor { background: #d1fae5; color: #065f46; }
.badge-rol-vendedor  { background: #ede9fe; color: #5b21b6; }
.badge-rol-cobrador  { background: #fef3c7; color: #92400e; }

/* ─── Pill de carga entre pantallas (patrón portado de cpc-class) ───
   Indicador flotante chico en vez de overlay de pantalla completa — no
   tapa la pantalla vieja, solo avisa que hay una navegación en curso.
   Como es MPA (recarga completa), no hace falta ocultarlo manualmente:
   desaparece junto con el documento viejo al llegar la página nueva. */
#appLoadingBar {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 2000;
  width: min(340px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#appLoadingBar.alb-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.alb-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 10px;
}
.alb-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.alb-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2F5753;
  display: inline-block;
  animation: albBounce 1.1s ease-in-out infinite;
}
.alb-dots span:nth-child(2) { animation-delay: .18s; background: #4E7D78; }
.alb-dots span:nth-child(3) { animation-delay: .36s; background: #9BB8B5; }
@keyframes albBounce {
  0%, 80%, 100% { transform: scale(.75); opacity: .5; }
  40%            { transform: scale(1.15); opacity: 1; }
}
.alb-texts { flex: 1; min-width: 0; }
.alb-title {
  font-size: 13px; font-weight: 800;
  color: #2F5753; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alb-msg {
  font-size: 11.5px; font-weight: 600;
  color: #6b7280; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alb-progress {
  height: 3px;
  background: rgba(47,87,83,.10);
}
.alb-progress-bar {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #2F5753, #9BB8B5, #2F5753);
  animation: albSlide 1.4s ease-in-out infinite;
}
@keyframes albSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Oculta las flechitas de incremento/decremento en <input type="number">
   usados como campos de conteo rápido (ej. Cierre de Caja) — el usuario
   tipea la cantidad directamente, las flechas solo estorban. */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spin {
  appearance: textfield;
  -moz-appearance: textfield;
}
.badge-rol-empleado  { background: #f1f5f9; color: #475569; }

/* ─── Botón/modal de ayuda contextual (macro info_modal.html) ───
   Ícono "i" junto al título de una pantalla, abre un modal con el
   gradiente institucional de Arai (mismo verde del login) para dar
   una descripción breve de qué hace la pantalla y qué opciones tiene. */
.btn-info-contextual {
  border: 0;
  background: transparent;
  color: var(--brand-accent);
  padding: 0;
  margin-left: .4rem;
  line-height: 1;
  font-size: 1.05rem;
  vertical-align: middle;
  transition: color .15s ease, transform .15s ease;
}
.btn-info-contextual:hover {
  color: var(--brand-primary);
  transform: scale(1.12);
}

.info-modal-content {
  border-radius: 18px;
  overflow: hidden;
}
.info-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: linear-gradient(135deg, #0F172A 0%, #1E4A44 55%, #2F5753 100%);
  color: #fff;
}
.info-modal-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(155, 184, 181, .35), transparent 60%);
  pointer-events: none;
}
.info-modal-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(2px);
  font-size: 1.3rem;
}
.info-modal-title {
  margin: 0;
  font-weight: 700;
  flex: 1;
  position: relative;
}
.info-modal-header .btn-close {
  position: relative;
  opacity: .85;
}
.info-modal-header .btn-close:hover { opacity: 1; }
.info-modal-body {
  padding: 1.5rem;
  font-size: .92rem;
  color: #33394a;
}
.info-modal-body p:last-child { margin-bottom: 0; }
.info-modal-body h6 {
  font-weight: 700;
  color: var(--brand-secondary);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1.1rem 0 .5rem;
}
.info-modal-body h6:first-child { margin-top: 0; }
.info-modal-body ul { padding-left: 1.15rem; margin-bottom: 0; }
.info-modal-body li { margin-bottom: .4rem; }
.info-modal-body li:last-child { margin-bottom: 0; }
.info-modal-body .info-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #eef4f3;
  color: var(--brand-secondary);
  border-radius: 6px;
  padding: .1rem .5rem;
  font-size: .78rem;
  font-weight: 600;
}