/* Paginа: app/index.html — CSS extraido automaticamente */
:root {
      --aya-red: #b51d2a;
      --aya-green: #176b3a;
      --aya-yellow: #d9a51b;
      --aya-dark: #111111;
      --aya-card: rgba(255, 255, 255, 0.07);
      --aya-border: rgba(255, 255, 255, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;

      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(181, 29, 42, 0.20),
          transparent 38%
        ),
        radial-gradient(
          circle at 0% 100%,
          rgba(23, 107, 58, 0.16),
          transparent 35%
        ),
        linear-gradient(
          145deg,
          #090909 0%,
          #111111 50%,
          #0a0a0a 100%
        );

      color: #fff;

      font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow-x: hidden;
    }

    .app-shell {
      width: 100%;
      max-width: 460px;

      min-height: 100vh;
      min-height: 100dvh;

      display: flex;
      align-items: center;
      justify-content: center;

      padding:
        max(28px, env(safe-area-inset-top))
        22px
        max(28px, env(safe-area-inset-bottom))
        22px;
    }

    .login-container {
      width: 100%;
      max-width: 390px;
    }

    .brand {
      text-align: center;
      margin-bottom: 30px;
    }

    .brand-logo {
      width: 92px;
      height: 92px;

      object-fit: contain;

      display: block;

      margin: 0 auto 18px;

      filter:
        drop-shadow(
          0 8px 20px rgba(0, 0, 0, 0.45)
        );
    }

    .brand-title {
      margin: 0;

      font-size: 2rem;
      font-weight: 800;

      letter-spacing: 0.04em;
    }

    .brand-subtitle {
      margin: 7px 0 0;

      color: rgba(255, 255, 255, 0.62);

      font-size: 0.92rem;
    }

    .login-card {
      background: var(--aya-card);

      border:
        1px solid var(--aya-border);

      border-radius: 24px;

      padding: 28px 24px;

      box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .login-title {
      margin-bottom: 5px;

      font-size: 1.35rem;
      font-weight: 700;
    }

    .login-description {
      margin-bottom: 24px;

      color: rgba(255, 255, 255, 0.58);

      font-size: 0.9rem;
    }

    .form-label {
      color: rgba(255, 255, 255, 0.78);

      font-size: 0.86rem;
      font-weight: 600;

      margin-bottom: 8px;
    }

    .form-control {
      min-height: 50px;

      border-radius: 14px;

      border:
        1px solid rgba(255, 255, 255, 0.13);

      background:
        rgba(0, 0, 0, 0.22);

      color: #fff;

      padding: 12px 14px;
    }

    .form-control:focus {
      color: #fff;

      background:
        rgba(0, 0, 0, 0.30);

      border-color:
        rgba(217, 165, 27, 0.65);

      box-shadow:
        0 0 0 3px rgba(217, 165, 27, 0.10);
    }

    .form-control::placeholder {
      color:
        rgba(255, 255, 255, 0.32);
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper .form-control {
      padding-right: 48px;
    }

    .password-toggle {
      position: absolute;

      top: 50%;
      right: 12px;

      transform:
        translateY(-50%);

      border: 0;

      background:
        transparent;

      color:
        rgba(255, 255, 255, 0.55);

      width: 34px;
      height: 34px;

      display: flex;

      align-items: center;
      justify-content: center;

      cursor: pointer;
    }

    .password-toggle:hover {
      color: #fff;
    }

    .btn-login {
      width: 100%;
      min-height: 52px;

      border: 0;
      border-radius: 14px;

      background:
        linear-gradient(
          135deg,
          var(--aya-red),
          #8f1420
        );

      color: #fff;

      font-weight: 700;

      box-shadow:
        0 10px 25px rgba(181, 29, 42, 0.24);

      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    }

    .btn-login:hover {
      transform:
        translateY(-1px);

      box-shadow:
        0 14px 30px rgba(181, 29, 42, 0.30);
    }

    .btn-login:disabled {
      opacity: 0.65;

      transform: none;

      cursor: wait;
    }

    .divider {
      display: flex;

      align-items: center;

      gap: 12px;

      margin: 22px 0;

      color:
        rgba(255, 255, 255, 0.38);

      font-size: 0.78rem;
    }

    .divider::before,
    .divider::after {
      content: "";

      height: 1px;

      flex: 1;

      background:
        rgba(255, 255, 255, 0.10);
    }

    .oauth-grid {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 10px;
    }

    .btn-oauth {
      min-height: 48px;

      border-radius: 13px;

      border:
        1px solid rgba(255, 255, 255, 0.12);

      background:
        rgba(255, 255, 255, 0.055);

      color: #fff;

      font-weight: 600;

      font-size: 0.88rem;

      transition:
        background 0.2s ease,
        border-color 0.2s ease;
    }

    .btn-oauth:hover {
      background:
        rgba(255, 255, 255, 0.10);

      border-color:
        rgba(255, 255, 255, 0.20);

      color: #fff;
    }

    .btn-oauth i {
      margin-right: 6px;

      font-size: 1rem;
    }

    .status {
      display: none;

      margin-bottom: 18px;

      padding: 12px 14px;

      border-radius: 12px;

      font-size: 0.84rem;

      line-height: 1.45;
    }

    .status.show {
      display: block;
    }

    .status.error {
      background:
        rgba(181, 29, 42, 0.12);

      border:
        1px solid rgba(181, 29, 42, 0.30);

      color:
        #ffb4bb;
    }

    .status.info {
      background:
        rgba(217, 165, 27, 0.10);

      border:
        1px solid rgba(217, 165, 27, 0.25);

      color:
        #f4d98c;
    }

    .status.success {
      background:
        rgba(23, 107, 58, 0.12);

      border:
        1px solid rgba(23, 107, 58, 0.30);

      color:
        #9be0b8;
    }

    .footer {
      text-align: center;

      margin-top: 22px;

      color:
        rgba(255, 255, 255, 0.30);

      font-size: 0.72rem;
    }

    .loading-screen {
      position: fixed;

      inset: 0;

      display: none;

      align-items: center;
      justify-content: center;

      background:
        #090909;

      z-index: 9999;
    }

    .loading-screen.show {
      display: flex;
    }

    .loading-content {
      text-align: center;
    }

    .loading-logo {
      width: 70px;
      height: 70px;

      object-fit: contain;

      margin-bottom: 18px;
    }

    .spinner-border {
      width: 1.8rem;
      height: 1.8rem;
    }

    .loading-text {
      margin-top: 14px;

      color:
        rgba(255, 255, 255, 0.55);

      font-size: 0.85rem;
    }

    @media (max-width: 380px) {

      .app-shell {
        padding-left: 16px;
        padding-right: 16px;
      }

      .login-card {
        padding: 24px 19px;
      }

      .brand-title {
        font-size: 1.75rem;
      }
    }

    /* ===== IPAD / TABLET ===== */
    @media (min-width: 768px) and (max-width: 1023.98px) {

      .app-shell {
        max-width: 520px;
        padding-left: 32px;
        padding-right: 32px;
      }

      .login-container {
        max-width: 440px;
      }

      .brand-logo {
        width: 110px;
        height: 110px;
      }

      .brand-title {
        font-size: 2.4rem;
      }

      .brand-subtitle {
        font-size: 1.05rem;
      }

      .login-card {
        padding: 36px 32px;
        border-radius: 28px;
      }

      .login-title {
        font-size: 1.55rem;
      }

      .login-description {
        font-size: 1rem;
        margin-bottom: 28px;
      }

      .form-control {
        min-height: 54px;
        font-size: 1rem;
        border-radius: 16px;
      }

      .btn-login {
        min-height: 56px;
        font-size: 1.05rem;
        border-radius: 16px;
      }

      .footer {
        font-size: 0.8rem;
      }
    }
          /* ===== IEPLUS_LIGHT_OVERRIDES : IÊ+ tema claro (estrutura/navegação preta com texto claro) ===== */
        .topbar,.sidebar,.sidebar-header,.bottom-navigation,.bottom-nav,.side-nav,.nav-drawer,.app-nav{background:#111111 !important;}
        .topbar,.topbar *,.sidebar *,.bottom-navigation *,.bottom-navigation a,.bottom-navigation i,.bottom-navigation span{color:rgba(255,255,255,.85) !important;}
        .sidebar a.active,.sidebar .active,.bottom-navigation .active{color:#8FE6B4 !important;}
        .sidebar a.active,.bottom-navigation .active{background:rgba(22,128,74,.30) !important;}