/* ================================================================
   OB ORBIT — capa visual reversible para iconos SVG
   ================================================================ */
:root {
  --ob-orbit-gold: #CC9230;
  --ob-orbit-gold-light: #E2B65C;
  --ob-orbit-gold-wash: #F6EDDA;
  --ob-orbit-navy: #071A33;
}

.ob-orbit-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  vector-effect: non-scaling-stroke;
}

.ob-orbit-icon * { vector-effect: non-scaling-stroke; }
.ob-orbit-brand-tile { position: relative; isolation: isolate; }
.ob-orbit-accent {
  fill: var(--ob-orbit-gold);
  stroke: none;
  filter: drop-shadow(0 0 3px rgba(204, 146, 48, .28));
}

body:has(.sidebar) .sidebar .nav-menu li:not(.nav-cat) {
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 10px;
}

body:has(.sidebar) .sidebar .nav-menu .nav-icon.ob-orbit-slot {
  position: relative;
  isolation: isolate;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  color: #FFFFFF;
  background: linear-gradient(145deg, rgba(29, 67, 108, .96), rgba(7, 26, 51, .96));
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              inset 0 -1px 0 rgba(0, 0, 0, .14),
              0 7px 16px rgba(2, 10, 24, .24);
  transition: color 160ms ease, background-color 160ms ease,
              border-color 160ms ease, transform 180ms cubic-bezier(.32,.72,0,1);
}

body:has(.sidebar) .sidebar .nav-menu .nav-icon.ob-orbit-slot::before,
.ob-orbit-brand-tile::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 1px solid transparent;
  border-top-color: rgba(226, 182, 92, .62);
  border-right-color: rgba(204, 146, 48, .38);
  border-radius: 50%;
  transform: rotate(18deg);
  pointer-events: none;
}

body:has(.sidebar) .sidebar .nav-menu .nav-icon.ob-orbit-slot .ob-orbit-icon {
  position: relative;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8 !important;
}

body:has(.sidebar) .sidebar .nav-menu li:hover .nav-icon.ob-orbit-slot {
  color: #FFFFFF;
  background: linear-gradient(145deg, rgba(39, 83, 131, 1), rgba(10, 36, 69, 1));
  border-color: rgba(226, 182, 92, .38);
  transform: translateY(-1px) scale(1.035);
}

body:has(.sidebar) .sidebar .nav-menu li.active .nav-icon.ob-orbit-slot {
  color: #FFFFFF !important;
  background: linear-gradient(145deg, #173B64, var(--ob-orbit-navy));
  border-color: rgba(242, 215, 155, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2),
              0 6px 16px rgba(7, 26, 51, .3);
}

body:has(.sidebar) .sidebar .nav-menu li.active .nav-icon.ob-orbit-slot::before {
  border-top-color: rgba(242, 215, 155, .95);
  border-right-color: rgba(226, 182, 92, .62);
}

body:has(.sidebar) .sidebar .nav-menu li.active .ob-orbit-accent {
  fill: var(--ob-orbit-gold-light);
  filter: drop-shadow(0 0 3px rgba(226, 182, 92, .3));
}

body:has(.sidebar) .sidebar .nav-menu li:hover .ob-orbit-accent { fill: var(--ob-orbit-gold-light); }

/* La barra superior opcional reutiliza los mismos SVG sin la baldosa. */
.ob-desplegable .ob-orbit-icon,
.ob-paleta-lista .ob-orbit-icon {
  width: 18px;
  height: 18px;
  color: #49627F;
}
.ob-desplegable a:hover .ob-orbit-icon,
.ob-paleta-lista [role=option]:hover .ob-orbit-icon { color: var(--ob-orbit-navy); }
.ob-desplegable a.aqui .ob-orbit-accent { fill: #CC9230; }

/* Controles declarativos: data-ob-action="save|edit|download|…". */
.ob-icon-control {
  align-items: center;
  justify-content: center;
}
.ob-action-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 8px;
  vertical-align: middle;
  color: currentColor;
  transition: transform 160ms cubic-bezier(.32,.72,0,1), opacity 160ms ease;
}
.ob-icon-control:hover .ob-action-icon { transform: translateY(-1px) scale(1.04); }
.ob-icon-control:active .ob-action-icon { transform: translateY(0) scale(.97); }
.ob-icon-control:focus-visible {
  outline: 3px solid rgba(204, 146, 48, .28);
  outline-offset: 2px;
}
.ob-icon-control.ob-icon-only .ob-action-icon { margin-right: 0; }
.ob-action-icon,
.ob-action-icon *,
.ob-heading-icon,
.ob-heading-icon *,
.nav-icon.ob-orbit-slot,
.nav-icon.ob-orbit-slot * {
  pointer-events: none;
}
.ob-action-icon .ob-orbit-icon { width: 18px; height: 18px; }
.ob-icon-control.btn-small .ob-action-icon,
.ob-icon-control.btn-sm .ob-action-icon { width: 17px; height: 17px; flex-basis: 17px; }
.ob-icon-control.btn-small .ob-orbit-icon,
.ob-icon-control.btn-sm .ob-orbit-icon { width: 15px; height: 15px; }
.ob-icon-control .ob-orbit-accent { fill: currentColor; opacity: .55; filter: none; }
.ob-icon-control.btn-primary .ob-orbit-accent,
.ob-icon-control.btn-success .ob-orbit-accent { fill: var(--ob-orbit-gold-light); opacity: 1; }

/* Encabezados heredados: el emoji inicial se convierte en un cristal navy. */
.ob-icon-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ob-heading-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #1D436C, #071A33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 7px 16px rgba(7, 26, 51, .16);
}
.ob-heading-icon .ob-orbit-icon { position: relative; z-index: 1; width: 18px; height: 18px; }
.ob-heading-icon .ob-orbit-accent { fill: var(--ob-orbit-gold-light); }
h4.ob-icon-heading .ob-heading-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-radius: 8px;
}
h4.ob-icon-heading .ob-heading-icon .ob-orbit-icon { width: 15px; height: 15px; }

@media (max-width: 1024px) and (min-width: 769px) {
  body:has(.sidebar) .sidebar .nav-menu .nav-icon.ob-orbit-slot {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px;
  }
}

@media (max-width: 768px) {
  body:has(.sidebar) .sidebar .nav-menu .nav-icon.ob-orbit-slot {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px;
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-icon.ob-orbit-slot { transition: none !important; }
  .sidebar .nav-menu li:hover .nav-icon.ob-orbit-slot { transform: none !important; }
  .ob-action-icon { transition: none !important; }
  .ob-icon-control:hover .ob-action-icon,
  .ob-icon-control:active .ob-action-icon { transform: none !important; }
}