:root {
      --amarillo: #d5a522;
      --amarillo-claro: #f0ca57;
      --gris: #212121;
      --gris-2: #2b2b2b;
      --gris-3: #353535;
      --negro: #0b0b0b;
      --blanco: #ffffff;
      --texto-secundario: #bdbdbd;
      --borde: rgba(255, 255, 255, 0.09);
      --peligro: #c44747;
      --sombra: 0 24px 80px rgba(0, 0, 0, 0.45);
      --radio: 18px;
      --transicion: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      min-height: 100%;
      margin: 0;
      font-family: "Arial MT Pro", Arial, Helvetica, sans-serif;
      background: var(--negro);
      color: var(--blanco);
    }

    body {
      overflow: hidden;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
    }

    .hidden {
      display: none !important;
    }

    .login-screen {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
      background:
        radial-gradient(circle at 15% 20%, rgba(213, 165, 34, 0.15), transparent 36%),
        linear-gradient(135deg, #080808 0%, #111111 60%, #171717 100%);
    }

    .login-brand {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(36px, 6vw, 86px);
      overflow: hidden;
      border-right: 1px solid var(--borde);
    }

    .login-brand::after {
      content: "";
      position: absolute;
      right: -180px;
      bottom: -180px;
      width: 540px;
      height: 540px;
      border: 1px solid rgba(213, 165, 34, 0.22);
      border-radius: 50%;
      box-shadow:
        0 0 0 65px rgba(213, 165, 34, 0.035),
        0 0 0 130px rgba(213, 165, 34, 0.025);
    }

    .brand-logo-horizontal {
      position: relative;
      z-index: 1;
      width: min(360px, 78%);
      height: auto;
      object-fit: contain;
    }

    .login-copy {
      position: relative;
      z-index: 1;
      max-width: 720px;
      margin-top: 80px;
    }

    .eyebrow {
      color: var(--amarillo-claro);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 12px;
      font-weight: 700;
    }

    .login-copy h1 {
      max-width: 760px;
      margin: 18px 0 20px;
      font-size: clamp(42px, 5.8vw, 82px);
      line-height: 0.98;
      letter-spacing: -0.04em;
    }

    .login-copy p {
      max-width: 620px;
      margin: 0;
      color: #cfcfcf;
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.65;
    }

    .login-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 13px;
      color: #9a9a9a;
      font-size: 13px;
    }

    .login-meta img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }

    .login-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 42px;
      background: rgba(20, 20, 20, 0.84);
      backdrop-filter: blur(16px);
    }

    .login-card {
      width: min(460px, 100%);
      padding: 38px;
      background: linear-gradient(180deg, rgba(48, 48, 48, 0.88), rgba(31, 31, 31, 0.96));
      border: 1px solid var(--borde);
      border-radius: 26px;
      box-shadow: var(--sombra);
    }

    .login-card-logo {
      display: none;
      width: 190px;
      margin-bottom: 28px;
    }

    .login-card h2 {
      margin: 0 0 9px;
      font-size: 30px;
      letter-spacing: -0.025em;
    }

    .login-card > p {
      margin: 0 0 28px;
      color: var(--texto-secundario);
      line-height: 1.55;
    }

    .field {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
    }

    .field label,
    .field-label {
      color: #dddddd;
      font-size: 13px;
      font-weight: 700;
    }

    .optional-label {
      color: #858585;
      font-size: 11px;
      font-weight: 400;
    }

    .input-wrap {
      position: relative;
    }

    input,
    select,
    textarea {
      width: 100%;
      color: var(--blanco);
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 12px;
      outline: none;
      transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
    }

    input,
    select {
      min-height: 48px;
      padding: 0 14px;
    }

    textarea {
      min-height: 100px;
      padding: 13px 14px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--amarillo);
      box-shadow: 0 0 0 3px rgba(213, 165, 34, 0.12);
      background: #1d1d1d;
    }

    .password-input {
      padding-right: 52px;
    }

    .icon-button {
      display: inline-grid;
      place-items: center;
      min-width: 40px;
      height: 40px;
      padding: 0 11px;
      border-radius: 11px;
      color: var(--blanco);
      background: transparent;
      cursor: pointer;
      transition: background var(--transicion), color var(--transicion), transform var(--transicion);
    }

    .icon-button:hover {
      color: var(--amarillo-claro);
      background: rgba(255, 255, 255, 0.07);
    }

    .icon-button:active {
      transform: scale(0.96);
    }

    .password-toggle {
      position: absolute;
      top: 4px;
      right: 4px;
      height: 40px;
    }

    .primary-button,
    .secondary-button,
    .danger-button,
    .ghost-button {
      min-height: 46px;
      padding: 0 17px;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform var(--transicion), filter var(--transicion), background var(--transicion), border-color var(--transicion);
    }

    .primary-button {
      color: #121212;
      background: var(--amarillo);
    }

    .primary-button:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .secondary-button {
      color: var(--blanco);
      background: var(--gris-3);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .secondary-button:hover,
    .ghost-button:hover {
      background: #414141;
    }

    .ghost-button {
      color: var(--blanco);
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.11);
    }

    .danger-button {
      color: #ffffff;
      background: rgba(196, 71, 71, 0.16);
      border: 1px solid rgba(196, 71, 71, 0.34);
    }

    .danger-button:hover {
      background: rgba(196, 71, 71, 0.28);
    }

    .full-width {
      width: 100%;
    }

    .login-hint {
      margin-top: 18px;
      padding: 14px;
      color: #a9a9a9;
      background: rgba(213, 165, 34, 0.06);
      border: 1px solid rgba(213, 165, 34, 0.16);
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.5;
    }

    .app {
      position: relative;
      width: 100%;
      height: 100dvh;
      min-height: 0;
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      overflow: hidden;
      background: #111111;
    }

    .sidebar {
      position: relative;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #171717;
      border-right: 1px solid var(--borde);
      z-index: 20;
    }

    .sidebar-header {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 82px;
      padding: 18px 18px 17px 20px;
      border-bottom: 1px solid var(--borde);
    }

    .sidebar-logo {
      width: 164px;
      height: auto;
    }

    .sidebar-isologo {
      display: none;
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    .sidebar-tools {
      display: flex;
      gap: 5px;
    }

    .sidebar-search {
      flex: 0 0 auto;
      padding: 15px 16px 10px;
      background: #171717;
    }

    .sidebar-search input {
      min-height: 44px;
      background: #232323;
    }

    .client-list {
      min-height: 0;
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: scroll;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 8px 8px 18px 10px;
      scrollbar-width: thin;
      scrollbar-color: #555 transparent;
    }

    .client-item {
      width: 100%;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      color: var(--blanco);
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 14px;
      cursor: pointer;
      transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
    }

    .client-item + .client-item {
      margin-top: 4px;
    }

    .client-item:hover {
      background: #222222;
    }

    .client-item.active {
      background: linear-gradient(90deg, rgba(213, 165, 34, 0.17), rgba(213, 165, 34, 0.045));
      border-color: rgba(213, 165, 34, 0.23);
    }

    .client-avatar {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #111111;
      background: var(--amarillo);
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .client-item:nth-child(3n + 2) .client-avatar {
      color: var(--blanco);
      background: #3a3a3a;
    }

    .client-avatar.has-image,
    .access-client-avatar.has-image,
    .hero-client-avatar.has-image,
    .credential-client-avatar.has-image,
    .client-photo-preview.has-image {
      overflow: hidden;
      color: transparent;
      background: #242424;
    }

    .client-avatar img,
    .access-client-avatar img,
    .hero-client-avatar img,
    .credential-client-avatar img,
    .client-photo-preview img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .client-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 700;
    }

    .client-count {
      margin-top: 4px;
      color: #949494;
      font-size: 12px;
    }

    .client-chevron {
      color: #666666;
      font-size: 18px;
    }

    .sidebar-footer {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      padding: 14px 16px 18px;
      background: #171717;
      border-top: 1px solid var(--borde);
      box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
    }

    .user-profile {
      display: grid;
      grid-template-columns: 39px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;
    }

    .user-avatar {
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #111111;
      background: var(--amarillo);
      font-weight: 800;
    }

    .user-profile strong,
    .user-profile span {
      display: block;
    }

    .user-profile strong {
      font-size: 13px;
    }

    .user-profile span {
      margin-top: 3px;
      color: #8c8c8c;
      font-size: 11px;
    }

    .workspace {
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background:
        radial-gradient(circle at 85% 0%, rgba(213, 165, 34, 0.06), transparent 26%),
        #111111;
    }

    .topbar {
      position: relative;
      z-index: 5;
      flex: 0 0 auto;
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 30px;
      background: rgba(17, 17, 17, 0.84);
      border-bottom: 1px solid var(--borde);
      backdrop-filter: blur(18px);
    }

    .mobile-menu-button {
      display: none;
    }

    .topbar-title h1 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.025em;
    }

    .topbar-title p {
      margin: 5px 0 0;
      color: #8f8f8f;
      font-size: 12px;
    }

    .topbar-actions {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .workspace-scroll {
      min-width: 0;
      min-height: 0;
      flex: 1 1 auto;
      overflow-x: hidden;
      overflow-y: scroll;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: clamp(22px, 3.5vw, 44px);
      scrollbar-width: thin;
      scrollbar-color: #555 transparent;
    }

    .workspace-scroll::-webkit-scrollbar,
    .client-list::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
      width: 10px;
    }

    .workspace-scroll::-webkit-scrollbar-track,
    .client-list::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.025);
    }

    .workspace-scroll::-webkit-scrollbar-thumb,
    .client-list::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb {
      background: #4c4c4c;
      border: 2px solid transparent;
      border-radius: 999px;
      background-clip: padding-box;
    }

    .workspace-scroll::-webkit-scrollbar-thumb:hover,
    .client-list::-webkit-scrollbar-thumb:hover,
    .modal-body::-webkit-scrollbar-thumb:hover {
      background: #626262;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
      padding: clamp(26px, 4vw, 48px);
      background: linear-gradient(135deg, #242424 0%, #1d1d1d 62%, #191919 100%);
      border: 1px solid var(--borde);
      border-radius: 24px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    }

    .hero-panel::after {
      content: "";
      position: absolute;
      right: -75px;
      top: -75px;
      width: 250px;
      height: 250px;
      border: 1px solid rgba(213, 165, 34, 0.16);
      border-radius: 50%;
      box-shadow: 0 0 0 46px rgba(213, 165, 34, 0.025);
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero-client-main {
      display: flex;
      align-items: center;
      gap: 22px;
      min-width: 0;
    }

    .hero-client-avatar {
      flex: 0 0 auto;
      width: 82px;
      height: 82px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      color: #111111;
      background: var(--amarillo);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
      font-size: 25px;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .hero-client-copy {
      min-width: 0;
    }

    .hero-client-actions {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    .hero-content h2 {
      margin: 10px 0 12px;
      font-size: clamp(30px, 4vw, 48px);
      letter-spacing: -0.045em;
    }

    .hero-content p {
      max-width: 720px;
      margin: 0;
      color: #b8b8b8;
      line-height: 1.65;
    }

    .hero-stats {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, 145px);
      gap: 12px;
    }

    .stat-card {
      padding: 18px;
      background: rgba(0, 0, 0, 0.19);
      border: 1px solid var(--borde);
      border-radius: 16px;
    }

    .stat-card strong {
      display: block;
      font-size: 27px;
      color: var(--amarillo-claro);
    }

    .stat-card span {
      display: block;
      margin-top: 5px;
      color: #9e9e9e;
      font-size: 12px;
    }

    .section-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin: 36px 0 18px;
    }

    .section-header h3 {
      margin: 0;
      font-size: 20px;
      letter-spacing: -0.025em;
    }

    .section-header p {
      margin: 6px 0 0;
      color: #868686;
      font-size: 13px;
    }

    .access-toolbar {
      margin-bottom: 18px;
      overflow: hidden;
      background: rgba(27, 27, 27, 0.92);
      border: 1px solid var(--borde);
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    }

    .access-filter-grid {
      display: grid;
      grid-template-columns: minmax(320px, 2.15fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr);
      gap: 10px;
      padding: 14px;
    }

    .access-filter-grid.secondary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.055);
    }

    .access-more-filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-height: 180px;
      padding: 14px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.11);
      border-top: 1px solid rgba(255, 255, 255, 0.055);
      opacity: 1;
      transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease;
    }

    .access-more-filters.is-collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-top-color: transparent;
      opacity: 0;
      pointer-events: none;
    }

    .filter-control {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .filter-control-label {
      padding-left: 2px;
      color: #8e99a9;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .filter-control select,
    .filter-control input {
      min-height: 46px;
      background: #1b1b1b;
      border-color: rgba(255, 255, 255, 0.105);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .filter-control select {
      padding-right: 36px;
      cursor: pointer;
    }

    .access-search-wrap {
      position: relative;
    }

    .access-search-wrap::before {
      content: "⌕";
      position: absolute;
      left: 15px;
      top: 50%;
      z-index: 1;
      color: #818181;
      font-size: 20px;
      transform: translateY(-53%);
      pointer-events: none;
    }

    .access-search-wrap input {
      padding-left: 44px;
      font-weight: 400;
    }

    .access-toolbar-footer {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.055);
    }

    .more-filters-button,
    .clear-filters-button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      color: var(--blanco);
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 11px;
      cursor: pointer;
      font-size: 12px;
      transition: background var(--transicion), border-color var(--transicion), color var(--transicion), opacity var(--transicion);
    }

    .more-filters-button:hover,
    .clear-filters-button:not(:disabled):hover {
      background: #292929;
      border-color: rgba(213, 165, 34, 0.25);
    }

    .more-filters-button[aria-expanded="true"] {
      color: var(--amarillo-claro);
      border-color: rgba(213, 165, 34, 0.34);
      background: rgba(213, 165, 34, 0.075);
    }

    .filter-count-badge {
      min-width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
      padding: 0 5px;
      color: #111111;
      background: var(--amarillo);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
    }

    .filter-count-badge:empty,
    .filter-count-badge[data-count="0"] {
      display: none;
    }

    .clear-filters-button:disabled {
      color: #646464;
      border-color: rgba(255, 255, 255, 0.05);
      cursor: default;
      opacity: 0.72;
    }

    @media (max-width: 1080px) {
      .access-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .filter-search-control {
        grid-column: 1 / -1;
      }

      .access-filter-grid.secondary,
      .access-more-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      .access-filter-grid,
      .access-filter-grid.secondary,
      .access-more-filters {
        grid-template-columns: 1fr;
      }

      .filter-search-control {
        grid-column: auto;
      }

      .access-toolbar-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .more-filters-button,
      .clear-filters-button {
        width: 100%;
      }
    }

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

    .access-card {
      min-width: 0;
      min-height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      text-align: left;
      color: var(--blanco);
      background: linear-gradient(180deg, #202020, #1b1b1b);
      border: 1px solid var(--borde);
      border-radius: var(--radio);
      cursor: pointer;
      transition: transform var(--transicion), border-color var(--transicion), background var(--transicion), box-shadow var(--transicion);
    }

    .access-card:hover {
      transform: translateY(-3px);
      background: linear-gradient(180deg, #262626, #1d1d1d);
      border-color: rgba(213, 165, 34, 0.34);
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
    }

    .access-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .access-identity {
      position: relative;
      flex: 0 0 auto;
    }

    .access-client-avatar {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 16px;
      color: #111111;
      background: var(--amarillo);
      border: 1px solid rgba(255, 255, 255, 0.09);
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .access-type-symbol {
      position: absolute;
      right: -6px;
      bottom: -6px;
      min-width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      padding: 0 5px;
      color: var(--amarillo-claro);
      background: #111111;
      border: 2px solid #202020;
      border-radius: 8px;
      font-size: 8px;
      font-weight: 900;
    }

    .access-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #111111;
      background: var(--amarillo);
      font-weight: 900;
      font-size: 18px;
    }

    .access-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      color: #b9b9b9;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 999px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .access-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amarillo);
      box-shadow: 0 0 10px rgba(213, 165, 34, 0.66);
    }

    .access-card h4 {
      margin: 21px 0 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 17px;
    }

    .access-card p {
      margin: 0;
      overflow: hidden;
      color: #8f8f8f;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }

    .access-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      padding-top: 13px;
      color: #747474;
      border-top: 1px solid rgba(255, 255, 255, 0.055);
      font-size: 10px;
    }

    .access-card-footer span,
    .access-card-footer time {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .add-card {
      justify-content: center;
      align-items: center;
      gap: 12px;
      min-height: 168px;
      color: #aaaaaa;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.16);
    }

    .add-card .access-icon {
      color: var(--amarillo);
      background: rgba(213, 165, 34, 0.09);
      border: 1px solid rgba(213, 165, 34, 0.2);
    }

    .empty-state {
      padding: 54px 30px;
      text-align: center;
      color: #8c8c8c;
      background: #191919;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 18px;
    }

    .modal-layer {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transicion), visibility var(--transicion);
    }

    .modal-layer.open {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      width: min(720px, 100%);
      max-height: min(840px, calc(100vh - 48px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #1f1f1f;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 22px;
      box-shadow: var(--sombra);
      transform: translateY(16px) scale(0.98);
      transition: transform var(--transicion);
    }

    .modal-layer.open .modal {
      transform: translateY(0) scale(1);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 22px;
      border-bottom: 1px solid var(--borde);
    }

    .modal-title-wrap {
      min-width: 0;
    }

    .modal-title-wrap h3 {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 20px;
    }

    .modal-title-wrap p {
      margin: 5px 0 0;
      color: #8b8b8b;
      font-size: 12px;
    }

    .modal-body {
      overflow-y: auto;
      padding: 22px;
      scrollbar-width: thin;
      scrollbar-color: #555 transparent;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 16px 22px;
      background: #1c1c1c;
      border-top: 1px solid var(--borde);
    }

    .credential-summary {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 16px;
      margin-bottom: 18px;
      background: #181818;
      border: 1px solid var(--borde);
      border-radius: 15px;
    }

    .credential-client-avatar {
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #111111;
      background: var(--amarillo);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 15px;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .credential-summary strong,
    .credential-summary span {
      display: block;
    }

    .credential-summary span {
      margin-top: 5px;
      color: #929292;
      font-size: 12px;
    }

    .credential-row {
      display: grid;
      grid-template-columns: 155px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    }

    .credential-row:last-child {
      border-bottom: 0;
    }

    .credential-label {
      color: #a5a5a5;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .credential-value {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .credential-value.is-secret {
      letter-spacing: 0.18em;
    }

    .row-actions {
      display: flex;
      gap: 4px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .span-2 {
      grid-column: span 2;
    }

    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 48px;
      padding: 0 13px;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 12px;
    }

    .switch-row span {
      color: #b8b8b8;
      font-size: 13px;
    }

    .switch {
      position: relative;
      width: 44px;
      height: 24px;
      flex: 0 0 auto;
    }

    .switch input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .switch-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #464646;
      cursor: pointer;
      transition: background var(--transicion);
    }

    .switch-track::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #eeeeee;
      transition: transform var(--transicion), background var(--transicion);
    }

    .switch input:checked + .switch-track {
      background: var(--amarillo);
    }

    .switch input:checked + .switch-track::after {
      transform: translateX(20px);
      background: #151515;
    }

    .client-photo-editor {
      display: grid;
      grid-template-columns: 94px minmax(0, 1fr);
      gap: 17px;
      align-items: center;
      padding: 16px;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 15px;
    }

    .client-photo-preview {
      width: 94px;
      height: 94px;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #111111;
      background: var(--amarillo);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      font-size: 25px;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .client-photo-controls {
      min-width: 0;
    }

    .client-photo-controls strong,
    .client-photo-controls span {
      display: block;
    }

    .client-photo-controls span {
      margin-top: 6px;
      color: #858585;
      font-size: 11px;
      line-height: 1.5;
    }

    .client-photo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px;
    }

    .client-photo-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .generator-box {
      margin-top: 18px;
      padding: 16px;
      background: rgba(213, 165, 34, 0.055);
      border: 1px solid rgba(213, 165, 34, 0.16);
      border-radius: 15px;
    }

    .generator-box h4 {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .generator-controls {
      display: grid;
      grid-template-columns: 130px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .custom-fields {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .custom-field-row {
      display: grid;
      grid-template-columns: 145px minmax(0, 1fr) auto auto;
      gap: 9px;
      align-items: center;
    }

    .custom-field-row input {
      min-height: 44px;
    }

    .notice {
      padding: 13px 15px;
      color: #b4b4b4;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.55;
    }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 300;
      min-width: 240px;
      max-width: min(380px, calc(100vw - 48px));
      padding: 14px 16px;
      color: #151515;
      background: var(--amarillo);
      border-radius: 12px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
      font-weight: 700;
      font-size: 13px;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity var(--transicion), transform var(--transicion);
    }

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

    .sidebar-scrim {
      display: none;
    }

    /* Vista compacta en escritorio: equivalente aproximado a un zoom del 90 %. */
    @media (min-width: 901px) {
      body {
        zoom: 0.9;
      }

      .login-screen {
        width: 111.112vw;
        min-height: 111.112vh;
      }

      .app {
        width: 111.112vw;
        height: 111.112dvh;
      }

      .modal-layer {
        width: 111.112vw;
        height: 111.112vh;
      }
    }

    @media (max-width: 1180px) {
      .app {
        grid-template-columns: 288px minmax(0, 1fr);
      }

      .access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-panel {
        grid-template-columns: 1fr;
      }

      .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      body {
        overflow: auto;
      }

      .login-screen {
        grid-template-columns: 1fr;
      }

      .login-brand {
        display: none;
      }

      .login-panel {
        min-height: 100vh;
        padding: 24px;
        background:
          radial-gradient(circle at 50% 0%, rgba(213, 165, 34, 0.11), transparent 34%),
          #111111;
      }

      .login-card-logo {
        display: block;
      }

      .app {
        position: relative;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        grid-template-columns: 1fr;
        overflow: hidden;
      }

      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(330px, 88vw);
        height: 100dvh;
        max-height: 100dvh;
        transform: translateX(-102%);
        transition: transform 220ms ease;
        box-shadow: var(--sombra);
      }

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

      .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 15;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transicion), visibility var(--transicion);
      }

      .app.sidebar-open .sidebar-scrim {
        opacity: 1;
        visibility: visible;
      }

      .mobile-menu-button {
        display: inline-grid;
      }

      .topbar {
        min-height: 72px;
        padding: 0 18px;
      }

      .topbar-title h1 {
        font-size: 18px;
      }

      .topbar-title p {
        display: none;
      }

      .topbar-actions .secondary-button {
        display: none;
      }

      .workspace-scroll {
        padding: 20px;
      }
    }

    @media (max-width: 620px) {
      .login-card {
        padding: 28px 22px;
        border-radius: 20px;
      }

      .login-card-logo {
        width: 166px;
      }

      .topbar-title {
        min-width: 0;
      }

      .topbar-title h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .topbar-actions {
        gap: 5px;
      }

      .topbar-actions .primary-button {
        width: 42px;
        min-height: 42px;
        padding: 0;
        font-size: 0;
      }

      .topbar-actions .primary-button::before {
        content: "+";
        font-size: 22px;
      }

      .hero-panel {
        padding: 24px;
        border-radius: 20px;
      }

      .hero-client-main {
        align-items: flex-start;
      }

      .hero-client-avatar {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        font-size: 20px;
      }

      .hero-client-actions .secondary-button {
        width: auto;
      }

      .hero-stats {
        grid-template-columns: 1fr 1fr;
      }

      .stat-card {
        padding: 15px;
      }

      .access-grid {
        grid-template-columns: 1fr;
      }

      .section-header {
        align-items: start;
        flex-direction: column;
      }

      .section-header .secondary-button {
        width: 100%;
      }

      .modal-layer {
        align-items: end;
        padding: 0;
      }

      .modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
      }

      .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .modal-footer .primary-button:last-child:nth-child(1),
      .modal-footer .primary-button:last-child:nth-child(3) {
        grid-column: 1 / -1;
      }

      .credential-row {
        grid-template-columns: 1fr auto;
      }

      .credential-label {
        grid-column: 1 / -1;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .span-2 {
        grid-column: auto;
      }

      .generator-controls,
      .custom-field-row,
      .client-photo-editor {
        grid-template-columns: 1fr;
      }

      .client-photo-preview {
        width: 78px;
        height: 78px;
        border-radius: 20px;
      }

      .custom-field-row .icon-button,
      .custom-field-row .secondary-button {
        width: 100%;
      }
    }
/* Ajustes de la versión conectada a PHP/MySQL */
.loading-screen{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;gap:15px;text-align:center;background:#0b0b0b;color:#aaa}.loading-screen img{width:74px;height:74px;object-fit:contain;margin:auto;animation:vaultPulse 1.3s ease-in-out infinite}.loading-screen span{font-size:13px;font-weight:700;letter-spacing:.04em}@keyframes vaultPulse{50%{transform:scale(.94);opacity:.68}}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}.login-error{margin-top:14px;padding:12px 14px;color:#ffdede;background:rgba(196,71,71,.14);border:1px solid rgba(196,71,71,.32);border-radius:11px;font-size:12px;line-height:1.45}.section-header-tight{margin-top:24px}.section-header-tight h3{font-size:16px}.field-no-margin{margin:0}.notice-spaced{margin-top:16px}.push-left{margin-right:auto}.mandatory-modal{z-index:220;background:rgba(0,0,0,.88)}.password-change-modal{width:min(680px,100%)}.confirm-modal{width:min(520px,100%)}.confirm-message{margin:0;color:#c7c7c7;line-height:1.65}.empty-state-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}.loading-card{min-height:168px;display:grid;place-items:center;color:#888;background:#191919;border:1px solid var(--borde);border-radius:var(--radio)}.access-card[aria-busy="true"]{opacity:.65;pointer-events:none}.credential-url{display:block;max-width:100%;margin-top:5px;overflow:hidden;color:#929292;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.credential-row.is-url .credential-value{color:var(--amarillo-claro)}.secret-reveal-warning{margin-bottom:15px}.custom-field-secret{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#aaa;font-size:11px}.custom-field-secret input{width:18px;min-height:18px;margin:0;accent-color:var(--amarillo)}.custom-field-row{grid-template-columns:145px minmax(0,1fr) auto auto auto}.custom-field-row.is-active{padding:7px;background:rgba(213,165,34,.045);border:1px solid rgba(213,165,34,.13);border-radius:13px}.client-list-loading{padding:24px;color:#777;text-align:center;font-size:12px}.client-item .client-meta{min-width:0}.client-count-inline{color:#8b8b8b;font-size:10px;font-weight:400}.access-card-footer time{flex:0 0 auto}.access-card .access-status{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-footer{flex-wrap:wrap}.modal-footer .primary-button,.modal-footer .secondary-button,.modal-footer .danger-button,.modal-footer .ghost-button{white-space:nowrap}.body-locked{overflow:hidden!important}.toast.error{color:#fff;background:#b33c3c}.toast.info{color:#fff;background:#3b3b3b}.offline-banner{position:fixed;left:50%;top:14px;z-index:500;transform:translateX(-50%);padding:10px 15px;background:#c44747;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.35)}
@media(max-width:620px){.custom-field-row{grid-template-columns:1fr}.push-left{margin-right:0}.modal-footer .push-left{grid-column:1/-1}.empty-state-actions{flex-direction:column}.empty-state-actions button{width:100%}}
.clipboard-helper{position:fixed!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.access-grid>.empty-state,.access-grid>.loading-card{grid-column:1/-1}.compact-empty{margin:10px;padding:22px 12px}.client-count{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-meta{display:block;min-width:0}.empty-state strong{display:block;color:#d8d8d8;font-size:15px}.empty-state p{margin:8px 0 0;line-height:1.5}.access-card small{color:#777;font-size:11px}
@media(min-width:901px){.loading-screen{width:111.112vw;height:111.112vh}}
.user-actions{display:flex;align-items:center;gap:2px}.user-profile{grid-template-columns:39px minmax(0,1fr) auto}