#fondo{
                position: fixed;
                z-index: 600;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: #0a224de6; /*#0A224D;*/                
                
            }
            #cargando{
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 920;                   
            }


            #mensaje{
              padding: 30px;
              background: #fff;
              position: fixed;
              z-index: 990;
              top: 50%;
              left: 50%;
              width:calc(96% - 60px);
              max-width: 560px;
              border-radius: 15px;
              color: #000;                
              font-weight: 100; 
              font-style: normal;
              font-size: 18px;
              transform: translate(-50%, -50%);
              display: none;
            }

             #mensaje strong{
                color: #10397a !important;                
            }
            .logos{

                border-collapse: separate;     /* necesario para que funcione */
                border-spacing: 26px 0;        /* ↑↑ separa horizontalmente (24px) */
            }
            /* OTP */
            .otp-grid{
            display:grid;
            grid-template-columns:repeat(6,56px);
            gap:12px;
            margin:8px 0 22px;
            }
            .otp-grid input{
            width:56px;height:56px;text-align:center;
            font-size:24px;font-weight:600;background:#fff;
            border:1.5px solid #e5e7eb;border-radius:10px;outline:none;
            transition:.15s border-color,.15s box-shadow;
            }
            .otp-grid input:focus{
            border-color:#155eef;
            box-shadow:0 0 0 4px #dbe7ff;
            }
            /* OTP SMS */
/* GRID OTP 6 dígitos, centrado y recogido */
          /* ====== OTP 6 dígitos estilo banco ====== */
          .otpsms-grid{
            display: flex;            /* fila de cajas */
            flex-wrap: nowrap;        /* no se va a dos filas en desktop */
            gap: 10px;                /* separación entre casillas */
            margin: 18px 0 22px;      /* espacio arriba/abajo */
            justify-content: flex-start; /* alineado al texto, como la imagen */
          }

          .otpsms-grid input{
            width: 50px;              /* tamaño similar a la referencia */
            height: 50px;
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            background: #fff;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            outline: none;
            transition: .15s border-color, .15s box-shadow;
          }

          .otpsms-grid input:focus{
            border-color:#155eef;
            box-shadow:0 0 0 4px #dbe7ff;
            }

          /* En móviles, permitir que se adapte si el ancho es muy justo */
          @media (max-width: 420px){
            .otpsms-grid{
              flex-wrap: wrap;
            }
          }
          :root{
            --err-icon:#a96424;      /* ámbar */
            --err-bg:#fff;
            --err-text:#0e2640;
            --err-muted:#5e6876;
            --primary:#1544b5;       /* azul botón */
            --primary-hover:#103997;
            --shadow:0 18px 60px rgba(0,0,0,.14),0 6px 18px rgba(0,0,0,.08);
            --radius:16px;
          }

          /* Cubre toda la pantalla (como #fondo) */
          #fondo-error{
            position: fixed;
            inset: 0;
            background: rgba(10,20,30,.45);
            backdrop-filter: saturate(120%) blur(3px);
            z-index: 9998;
            display: none;            /* se muestra con .show */
          }

          /* Tarjeta de error */
          #mensaje-error{
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) scale(.98);
            width: min(900px,92vw);
            background: var(--err-bg);
            color: var(--err-text);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            z-index: 9999;
            display: none;            /* se muestra con .show */
            padding: clamp(18px,3.6vw,28px);
            animation: popin .22s ease-out both;
          }

          /* Layout interno */
          .err-wrap{
            display: grid;
            grid-template-columns: auto 1fr;
            gap: clamp(16px,2.8vw,22px);
            align-items: flex-start;
          }

          /* Icono en círculo */
          .err-ico{
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #f4e7d8;
            display: grid;
            place-items: center;
            flex: 0 0 64px;
          }
          .err-ico svg{ width: 32px; height: 32px; fill: var(--err-icon); }

          .err-title{
            font: 800 clamp(22px,3.8vw,32px)/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
            margin: 2px 0 10px;
            letter-spacing: -.2px;
          }
          .err-desc{
            color: var(--err-muted);
            font: 400 clamp(15px,2.6vw,18px)/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
            margin-bottom: 18px;
          }
          .err-actions{
            margin-top: 6px;
          }
          .btn-home{
            appearance: none;
            border: 0;
            border-radius: 999px;
            background: var(--primary);
            color: #fff;
            font: 700 16px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
            padding: 16px 26px;
            cursor: pointer;
            transition: transform .06s ease, background .2s ease;
          }
          .btn-home:hover{ background: var(--primary-hover); }
          .btn-home:active{ transform: translateY(1px); }

          /* Móviles: apilar */
          @media (max-width: 560px){
            .err-wrap{ grid-template-columns: 1fr; }
            .err-ico{ width: 56px; height: 56px; }
            .btn-home{ width: 100%; }
          }

          /* Animación de entrada */
          @keyframes popin{
            from{ opacity: 0; transform: translate(-50%,-48%) scale(.96); }
            to  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
          }

          /* Utilidad para mostrar */
          .show{ display:block !important; }
/* ============================================
   OTP: Botón | Reloj centrado | Link a la derecha
   SIN CAMBIAR HTML (usa display: contents)
   ============================================ */

.otp-actions{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;  /* botón | reloj | link */
  align-items: center;
  column-gap: 24px;
}

/* El wrapper desaparece y deja pasar sus hijos al grid */
.otp-side{
  display: contents !important;
}

/* Col 1: botón a la izquierda */
.otp-actions .otp-btn{
  grid-column: 1;
  justify-self: start;
  width: 100%;
  max-width: 420px;
}

/* Col 2: reloj EXACTAMENTE en el centro entre botón y link */
.otp-actions .otp-timer{
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Col 3: link a la derecha */
.otp-actions .link-call{
  grid-column: 3;
  justify-self: end;
  display: flex;
  justify-content: center;
  text-align: center;
  min-width: 170px; /* evita que “jale” el centro */
}

.otp-actions .otp-resend{
  display: inline-block;
  text-align: center;
  line-height: 1.15;
}

/* Móvil: apilar */
@media (max-width: 520px){
  .otp-actions{
    grid-template-columns: 1fr;
    row-gap: 16px;
    justify-items: center;
  }
  .otp-actions .otp-btn{ grid-column: 1; justify-self: center; max-width: 100%; }
  .otp-actions .otp-timer{ grid-column: 1; }
  .otp-actions .link-call{ grid-column: 1; justify-self: center; min-width: unset; }
}

            #fondo-error{display:none;position:fixed;inset:0;background:rgba(15, 45, 114, 0.922);backdrop-filter:blur(3px);z-index:9998}
            #mensaje-error{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#0e2640;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.15);padding:24px 30px;width:90%;max-width:600px;z-index:9999;animation:fadeIn .25s ease-out}
            @keyframes fadeIn{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
            .err-wrap{display:flex;align-items:flex-start;gap:20px}
            .err-ico{background:#f6e9da;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center}
            .err-ico svg{width:32px;height:32px;fill:#a96424}
            .err-title{font-size:22px;font-weight:700;margin:4px 0 10px}
            .err-desc{color:#5e6876;font-size:15px;line-height:1.6;margin-bottom:16px}
            .btn-home{background:#1544b5;color:#fff;border:none;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer;transition:background .2s}
            .btn-home:hover{background:#0f37a0}