.x-permisos-page {
      padding-bottom: 98px;
  }

  .x-permisos-hero {
      display: grid;
      grid-template-columns: 1.4fr .75fr;
      gap: 18px;
      margin-bottom: 18px;
      border-radius: 30px;
      padding: 28px;
      background:
          radial-gradient(circle at top left, rgba(37, 99, 235, .20), transparent 34%),
          radial-gradient(circle at bottom right, rgba(14, 165, 233, .13), transparent 30%),
          linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .98));
      border: 1px solid rgba(148, 163, 184, .14);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
      overflow: hidden;
  }

  .x-permisos-eyebrow {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(37, 99, 235, .15);
      border: 1px solid rgba(96, 165, 250, .24);
      color: #bfdbfe;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 14px;
  }

  .x-permisos-hero h1 {
      margin: 0;
      color: #f8fafc;
      font-size: clamp(34px, 4vw, 52px);
      line-height: .98;
      font-weight: 950;
      letter-spacing: -.05em;
  }

  .x-permisos-hero p {
      max-width: 720px;
      margin: 14px 0 0;
      color: rgba(203, 213, 225, .78);
      font-size: 15px;
      line-height: 1.7;
  }

  .x-permisos-hero__stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
  }

  .x-permisos-hero__stats div {
      min-width: 145px;
      padding: 13px 14px;
      border-radius: 18px;
      background: rgba(15, 23, 42, .70);
      border: 1px solid rgba(148, 163, 184, .12);
  }

  .x-permisos-hero__stats strong {
      display: block;
      color: #ffffff;
      font-size: 22px;
      font-weight: 950;
  }

  .x-permisos-hero__stats span {
      display: block;
      margin-top: 2px;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 700;
  }

  .x-permisos-hero__profile {
      display: flex;
      align-items: stretch;
  }

  .x-profile-current {
      width: 100%;
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 18px;
      border-radius: 24px;
      background: rgba(15, 23, 42, .66);
      border: 1px solid rgba(148, 163, 184, .14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-profile-current__icon {
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      color: #bfdbfe;
      background: rgba(37, 99, 235, .18);
      border: 1px solid rgba(96, 165, 250, .22);
      font-size: 22px;
  }

  .x-profile-current span {
      display: block;
      color: #64748b;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 4px;
  }

  .x-profile-current strong {
      display: block;
      color: #f8fafc;
      font-size: 20px;
      font-weight: 950;
  }

  .x-profile-current p {
      margin: 6px 0 0;
      color: #94a3b8;
      font-size: 12.5px;
      line-height: 1.5;
  }

  .x-role-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 14px;
  }

  .x-role-tab {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 76px;
      padding: 14px;
      border-radius: 22px;
      text-decoration: none !important;
      background: rgba(15, 23, 42, .72);
      border: 1px solid rgba(148, 163, 184, .12);
      color: #cbd5e1;
      transition: .18s ease;
  }

  .x-role-tab:hover {
      transform: translateY(-1px);
      color: #ffffff;
      border-color: rgba(96, 165, 250, .32);
      background: rgba(30, 41, 59, .78);
  }

  .x-role-tab.is-active {
      background:
          radial-gradient(circle at top left, rgba(37, 99, 235, .28), transparent 38%),
          rgba(15, 23, 42, .88);
      border-color: rgba(96, 165, 250, .40);
      box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
  }

  .x-role-tab__icon {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(37, 99, 235, .14);
      color: #93c5fd;
  }

  .x-role-tab strong {
      display: block;
      color: #f8fafc;
      font-size: 14px;
      font-weight: 950;
  }

  .x-role-tab small {
      display: block;
      color: #94a3b8;
      font-size: 12px;
      margin-top: 2px;
  }

  .x-permisos-control-card {
      position: sticky;
      top: 78px;
      z-index: 20;
      margin-bottom: 16px;
      padding: 14px;
      border-radius: 24px;
      background: rgba(2, 6, 23, .76);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(148, 163, 184, .13);
      box-shadow: 0 20px 55px rgba(0, 0, 0, .30);
  }

  .x-permisos-search-row {
      display: flex;
      align-items: center;

      gap: 12px;
      margin-bottom: 12px;
  }

  .x-permisos-search {
      flex: 1;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border-radius: 16px;
      background: rgba(15, 23, 42, .82);
      border: 1px solid rgba(148, 163, 184, .13);
      color: #94a3b8;
  }

  .x-permisos-search input {
      width: 100%;
      height: 42px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #e5e7eb;
      font-size: 13px;
  }

  .x-permisos-search input::placeholder {
      color: #64748b;
  }

  .x-permisos-mini-actions {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .x-permisos-mini-actions button,
  .x-perm-tab {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 14px;
      border: 1px solid rgba(148, 163, 184, .13);
      background: rgba(15, 23, 42, .78);
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      transition: .18s ease;
  }

  .x-permisos-mini-actions button:hover,
  .x-perm-tab:hover {
      transform: translateY(-1px);
      color: #ffffff;
      border-color: rgba(96, 165, 250, .34);
      background: rgba(30, 41, 59, .84);
  }

  .x-perm-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 6px;
  }

  .x-perm-tab {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
  }

  .x-perm-tab.is-active {
      color: #ffffff;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-color: rgba(147, 197, 253, .42);
      box-shadow: 0 14px 30px rgba(37, 99, 235, .28);
  }

  .x-permisos-toolbar {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(148, 163, 184, .10);
  }

  .x-toolbar-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
  }

  .x-toolbar-group>span {
      color: #94a3b8;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-right: 4px;
  }

  .perm-chip {
      margin: 0;
      cursor: pointer;
      border-radius: 14px;
  }

  .perm-chip input {
      display: none;
  }

  .perm-chip span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 14px;
      background: rgba(15, 23, 42, .80);
      border: 1px solid rgba(148, 163, 184, .13);
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 850;
      transition: .18s ease;
  }

  .perm-chip input:checked+span {
      color: #ffffff;
      background: rgba(37, 99, 235, .28);
      border-color: rgba(96, 165, 250, .42);
  }

  .x-permisos-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
  }

  .x-modulo-card {
      position: relative;
      padding: 15px;
      border-radius: 24px;
      background:
          radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 30%),
          rgba(15, 23, 42, .78);
      border: 1px solid rgba(148, 163, 184, .13);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
      transition: .18s ease;
      overflow: hidden;
  }

  .x-modulo-card:hover {
      transform: translateY(-2px);
      border-color: rgba(96, 165, 250, .28);
      box-shadow: 0 22px 55px rgba(0, 0, 0, .26);
  }

  .x-modulo-card.no-access {
      opacity: .68;
  }

  .x-modulo-card-head {
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
  }

  .x-modulo-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      background: rgba(37, 99, 235, .16);
      border: 1px solid rgba(96, 165, 250, .18);
      color: #93c5fd;
  }

  .x-modulo-title-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
  }

  .x-modulo-meta h5 {
      margin: 0;
      color: #f8fafc;
      font-size: 14px;
      font-weight: 950;
  }

  .x-modulo-meta small {
      display: block;
      margin-top: 3px;
      color: #64748b;
      font-size: 11.5px;
      font-weight: 750;
  }

  .x-risk-badge {
      display: inline-flex;
      align-items: center;
      min-height: 19px;
      padding: 3px 7px;
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .05em;
  }

  .x-risk-badge--critico {
      color: #fecaca;
      background: rgba(239, 68, 68, .12);
      border: 1px solid rgba(248, 113, 113, .22);
  }

  .x-risk-badge--financiero {
      color: #fde68a;
      background: rgba(245, 158, 11, .12);
      border: 1px solid rgba(251, 191, 36, .22);
  }

  .x-module-access-summary {
      margin-bottom: 12px;
  }

  .x-module-access-summary span {
      display: block;
      margin-bottom: 6px;
      color: #94a3b8;
      font-size: 11.5px;
      font-weight: 800;
  }

  .x-module-access-bar {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: rgba(30, 41, 59, .82);
      overflow: hidden;
  }

  .x-module-access-bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2563eb, #22c55e);
  }

  .x-modulo-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 14px;
      padding-top: 4px;
  }

  .x-action-item {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
  }

  .x-action-item span {
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 800;
  }

  .perm-switch {
      display: inline-flex;
      align-items: center;
      margin: 0;
      cursor: pointer;
  }

  .perm-switch input {
      display: none;
  }

  .perm-switch-track {
      position: relative;
      width: 40px;
      height: 22px;
      display: inline-block;
      border-radius: 999px;
      background: rgba(51, 65, 85, .95);
      border: 1px solid rgba(148, 163, 184, .18);
      transition: .18s ease;
      box-shadow:
          inset 0 1px 2px rgba(0, 0, 0, .28),
          0 0 0 0 rgba(37, 99, 235, 0);
  }

  .perm-switch-track::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      top: 2px;
      left: 3px;
      border-radius: 999px;
      background: #f8fafc;
      transition: .18s ease;
      box-shadow: 0 2px 7px rgba(0, 0, 0, .32);
  }

  .perm-switch input:checked+.perm-switch-track {
      background: #2563eb;
      border-color: rgba(147, 197, 253, .48);
      box-shadow:
          0 0 0 3px rgba(37, 99, 235, .14),
          inset 0 1px 0 rgba(255, 255, 255, .20);
  }

  .perm-switch input:checked+.perm-switch-track::before {
      transform: translateX(17px);
      background: #ffffff;
  }

  .x-permisos-empty {
      margin-top: 20px;
      min-height: 160px;
      border-radius: 24px;
      border: 1px dashed rgba(148, 163, 184, .22);
      background: rgba(15, 23, 42, .58);
      color: #94a3b8;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 24px;
  }

  .x-permisos-empty i {
      font-size: 30px;
      color: #60a5fa;
      margin-bottom: 8px;
  }

  .x-permisos-empty strong {
      display: block;
      color: #e5e7eb;
      font-size: 16px;
      font-weight: 950;
  }

  .x-permisos-empty span {
      display: block;
      margin-top: 4px;
      font-size: 13px;
  }


  /* =========================================
   HERO PERMISOS COMPACTO
   Inspirado en hero compacto del dashboard
========================================= */

  .x-permisos-page {
      padding-bottom: 28px;
  }

  .x-permisos-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
      gap: 16px;
      min-height: 172px;
      margin-bottom: 16px;
      padding: 20px 22px;
      border-radius: 24px;
      background:
          radial-gradient(circle at top left, rgba(47, 107, 255, .12), transparent 34%),
          rgba(6, 18, 37, .62);
      border: 1px solid rgba(159, 176, 208, .14);
      box-shadow:
          0 18px 46px rgba(0, 0, 0, .20),
          inset 0 1px 0 rgba(255, 255, 255, .04);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
  }

  .x-permisos-hero__content {
      min-width: 0;
  }

  .x-permisos-eyebrow {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(159, 176, 208, .12);
      color: #bfdbfe;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 9px;
  }

  .x-permisos-hero h1 {
      margin: 0;
      color: #f8fafc;
      font-size: 30px;
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: -.035em;
  }

  .x-permisos-hero p {
      max-width: 620px;
      margin: 8px 0 0;
      color: #9FB0D0;
      font-size: 14px;
      line-height: 1.45;
  }

  .x-permisos-hero__stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px;
  }

  .x-permisos-hero__stats div {
      min-width: auto;
      min-height: 33px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(159, 176, 208, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-permisos-hero__stats strong {
      display: inline;
      color: #f8fafc;
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
  }

  .x-permisos-hero__stats span {
      display: inline;
      margin: 0;
      color: #9FB0D0;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
  }

  /* Lado derecho compacto */
  .x-permisos-hero__profile {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      min-width: 0;
  }

  .x-profile-current {
      width: 100%;
      min-height: 78px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 13px 15px;
      border-radius: 18px;
      background: rgba(15, 23, 42, .54);
      border: 1px solid rgba(148, 163, 184, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-profile-current__icon {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #bfdbfe;
      background: rgba(37, 99, 235, .18);
      border: 1px solid rgba(96, 165, 250, .22);
      font-size: 18px;
  }

  .x-profile-current__info {
      min-width: 0;
  }

  .x-profile-current span {
      display: block;
      color: #64748b;
      font-size: 10.5px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 3px;
  }

  .x-profile-current strong {
      display: block;
      color: #f8fafc;
      font-size: 18px;
      line-height: 1.05;
      font-weight: 950;
  }

  .x-profile-current p {
      margin: 4px 0 0;
      color: #94a3b8;
      font-size: 11.5px;
      line-height: 1.35;
  }

  /* Botones dentro del hero */
  .x-permisos-hero-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 58px;
      padding: 10px 12px;
      border-radius: 18px;
      background: rgba(2, 6, 23, .42);
      border: 1px solid rgba(148, 163, 184, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-permisos-hero-actions strong {
      display: block;
      color: #f8fafc;
      font-size: 12.5px;
      font-weight: 950;
      line-height: 1.25;
  }

  .x-permisos-hero-actions small {
      display: block;
      margin-top: 2px;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 750;
  }

  .x-permisos-hero-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
  }

  .x-perm-hero-btn {
      min-height: 36px;
      padding: 0 13px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid transparent;
      font-size: 11.5px;
      font-weight: 950;
      letter-spacing: .02em;
      text-transform: uppercase;
      cursor: pointer;
      transition: .18s ease;
  }

  .x-perm-hero-btn:hover {
      transform: translateY(-1px);
  }

  .x-perm-hero-btn--ghost {
      background: rgba(15, 23, 42, .70);
      border-color: rgba(148, 163, 184, .16);
      color: #cbd5e1;
  }

  .x-perm-hero-btn--ghost:hover {
      color: #ffffff;
      background: rgba(30, 41, 59, .82);
      border-color: rgba(96, 165, 250, .30);
  }

  .x-perm-hero-btn--primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-color: rgba(147, 197, 253, .35);
      color: #ffffff;
      box-shadow: 0 12px 28px rgba(37, 99, 235, .24);
  }

  .x-perm-hero-btn--primary:hover {
      box-shadow: 0 16px 36px rgba(37, 99, 235, .34);
  }

  @media (max-width: 1100px) {
      .x-permisos-hero {
          grid-template-columns: 1fr;
      }

      .x-permisos-hero__profile {
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: stretch;
      }

      .x-profile-current,
      .x-permisos-hero-actions {
          height: 100%;
      }
  }

  @media (max-width: 720px) {
      .x-permisos-hero {
          padding: 18px;
          border-radius: 22px;
      }

      .x-permisos-hero h1 {
          font-size: 27px;
      }

      .x-permisos-hero__profile {
          grid-template-columns: 1fr;
      }

      .x-permisos-hero-actions {
          flex-direction: column;
          align-items: stretch;
      }

      .x-permisos-hero-buttons {
          width: 100%;
      }

      .x-perm-hero-btn {
          flex: 1;
      }
  }

  @media (max-width: 520px) {
      .x-permisos-hero__stats {
          display: grid;
          grid-template-columns: 1fr;
      }

      .x-permisos-hero__stats div {
          justify-content: space-between;
      }

      .x-permisos-hero-buttons {
          flex-direction: column;
      }

      .x-perm-hero-btn {
          width: 100%;
      }
  }


  @media (max-width: 820px) {
      .x-permisos-hero {
          grid-template-columns: 1fr;
          padding: 22px;
      }

      .x-role-tabs {
          grid-template-columns: 1fr;
      }

      .x-permisos-search-row {
          flex-direction: column;
          align-items: stretch;
      }

      .x-permisos-mini-actions {
          width: 100%;
          overflow-x: auto;
      }

      .x-permisos-grid {
          grid-template-columns: 1fr;
      }

      .x-permisos-control-card {
          position: relative;
          top: auto;
      }



      .x-sticky-actions-buttons {
          width: 100%;
      }

      .x-sticky-actions-buttons .btn {
          flex: 1;
          justify-content: center;
      }
  }

  @media (max-width: 520px) {
      .x-permisos-page {
          padding-bottom: 138px;
      }

      .x-permisos-hero h1 {
          font-size: 34px;
      }

      .x-permisos-hero__stats {
          display: grid;
          grid-template-columns: 1fr;
      }

      .x-modulo-actions {
          grid-template-columns: 1fr;
      }

      .x-modulo-card-head {
          grid-template-columns: 42px 1fr auto;
      }
  }

  .x-permisos-hero__profile {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .x-profile-current {
      min-height: 128px;
  }

  .x-profile-current__info {
      min-width: 0;
  }



  .x-permisos-hero-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(2, 6, 23, .48);
      border: 1px solid rgba(148, 163, 184, .13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-permisos-hero-actions strong {
      display: block;
      color: #f8fafc;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.25;
  }

  .x-permisos-hero-actions small {
      display: block;
      margin-top: 3px;
      color: #94a3b8;
      font-size: 11.5px;
      font-weight: 750;
  }

  .x-permisos-hero-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
  }

  .x-perm-hero-btn {
      min-height: 42px;
      padding: 0 15px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .02em;
      text-transform: uppercase;
      cursor: pointer;
      transition: .18s ease;
  }

  .x-perm-hero-btn:hover {
      transform: translateY(-1px);
  }

  .x-perm-hero-btn--ghost {
      background: rgba(15, 23, 42, .72);
      border-color: rgba(148, 163, 184, .16);
      color: #cbd5e1;
  }

  .x-perm-hero-btn--ghost:hover {
      color: #ffffff;
      background: rgba(30, 41, 59, .82);
      border-color: rgba(96, 165, 250, .30);
  }

  .x-perm-hero-btn--primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-color: rgba(147, 197, 253, .35);
      color: #ffffff;
      box-shadow: 0 14px 32px rgba(37, 99, 235, .28);
  }

  .x-perm-hero-btn--primary:hover {
      box-shadow: 0 18px 42px rgba(37, 99, 235, .38);
  }

  .perm-chip {
      margin: 0;
      cursor: pointer;
  }

  .perm-chip input {
      display: none;
  }

  .perm-chip span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 850;
      transition: .18s ease;
  }

  .perm-chip:hover span {
      color: #e5e7eb;
  }

  .perm-chip input:checked+span {
      color: #60a5fa;
      background: transparent;
      border: 0;
      box-shadow: none;
  }

  @media (max-width: 820px) {
      .x-permisos-control-card .x-permisos-search-row {
          flex-direction: column !important;
          align-items: stretch !important;
      }

      .x-permisos-control-card .x-permisos-search {
          flex: 1 1 auto !important;
          width: 100% !important;
          max-width: 100% !important;
      }

      .x-permisos-control-card .x-permisos-mini-actions {
          margin-left: 0 !important;
          justify-content: flex-start !important;
          overflow-x: auto !important;
      }
  }

  /* =========================================
   FIX FINAL BUSCADOR PERMISOS COMPACTO
========================================= */

  .x-permisos-control-card .x-permisos-search-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      margin-bottom: 12px !important;
  }

  .x-permisos-control-card .x-permisos-search {
      flex: 0 0 420px !important;
      width: 420px !important;
      max-width: 420px !important;
      min-width: 0 !important;

      min-height: 38px !important;
      height: 38px !important;

      display: flex !important;
      align-items: center !important;
      gap: 9px !important;

      padding: 0 12px !important;
      border-radius: 14px !important;

      background: rgba(15, 23, 42, .72) !important;
      border: 1px solid rgba(148, 163, 184, .13) !important;
      color: #94a3b8 !important;
  }

  .x-permisos-control-card .x-permisos-search input {
      height: 36px !important;
      font-size: 12.5px !important;
  }

  .x-permisos-control-card .x-permisos-search i {
      font-size: 12px !important;
      color: #64748b !important;
  }

  .x-permisos-control-card .x-permisos-mini-actions {
      margin-left: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 7px !important;
      flex-shrink: 0 !important;
  }

  .x-permisos-control-card .x-permisos-mini-actions button {
      min-height: 34px !important;
      height: 34px !important;
      padding: 0 10px !important;
      border-radius: 12px !important;
      font-size: 11.5px !important;
  }

  /* Tablet / móvil */
  @media (max-width: 820px) {
      .x-permisos-control-card .x-permisos-search-row {
          flex-direction: column !important;
          align-items: stretch !important;
      }

      .x-permisos-control-card .x-permisos-search {
          flex: 1 1 auto !important;
          width: 100% !important;
          max-width: 100% !important;
      }

      .x-permisos-control-card .x-permisos-mini-actions {
          margin-left: 0 !important;
          justify-content: flex-start !important;
          overflow-x: auto !important;
      }
  }

  /* =========================================
   FILTROS PERMISOS EN UNA SOLA LINEA
========================================= */

  .x-permisos-filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
  }

  .x-permisos-filter-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
  }

  .x-permisos-filter-left .x-permisos-search {
      flex: 0 0 310px !important;
      width: 310px !important;
      max-width: 310px !important;
      min-height: 36px !important;
      height: 36px !important;
      padding: 0 11px !important;
      border-radius: 13px !important;
  }

  .x-permisos-filter-left .x-permisos-search input {
      height: 34px !important;
      font-size: 12px !important;
  }

  .x-permisos-filter-left .x-permisos-search i {
      font-size: 12px !important;
  }

  .x-permisos-filter-left .x-perm-tabs {
      display: flex;
      align-items: center;
      gap: 7px;
      overflow-x: auto;
      padding: 0 !important;
      min-width: 0;
      flex: 1;
  }

  .x-permisos-filter-left .x-perm-tab {
      min-height: 36px;
      height: 36px;
      padding: 0 11px;
      border-radius: 13px;
      font-size: 11.5px;
      flex: 0 0 auto;
  }

  .x-permisos-mini-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      flex-shrink: 0;
      margin-left: auto;
  }

  .x-permisos-mini-actions button {
      min-height: 34px !important;
      height: 34px !important;
      padding: 0 10px !important;
      border-radius: 12px !important;
      font-size: 11.5px !important;
  }