/* Passkeys Moshipp
   ─────────────────────────────────────────────────────────────────────
   Dos contextos en un solo archivo:
   · .mp-panel  → dentro del área de admin de WHMCS (hereda su tipografía)
   · .mp-login  → página de acceso suelta (estilo propio, oscuro)          */

:root {
    --mp-cian:   #00a3d7;
    --mp-cian-2: #22c3ee;
    --mp-fondo:  #080e1a;
    --mp-panel:  #0f1727;
    --mp-borde:  #1d2942;
    --mp-texto:  #e6edf6;
    --mp-suave:  #8ea2bd;
    --mp-ok:     #2ea86a;
    --mp-error:  #e2564a;
    --mp-aviso:  #d99a2b;
}

/* ── Panel dentro del admin ───────────────────────────────────────── */

.mp-tabs { margin-bottom: 18px; }

.mp-panel { padding: 4px 0 24px; }

.mp-intro {
    max-width: 70ch;
    margin: 0 0 16px;
    line-height: 1.6;
}

.mp-tabla { width: 100%; margin-top: 18px; }
.mp-tabla th { white-space: nowrap; }
.mp-tabla td { vertical-align: middle; }

.mp-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.mp-label  { width: 220px; }

.mp-acciones form { margin: 0; }

.mp-vacio {
    margin-top: 18px;
    padding: 22px;
    border: 1px dashed #c3ccd8;
    border-radius: 6px;
    color: #6b7887;
    text-align: center;
}

.mp-nota {
    margin-top: 22px;
    padding: 12px 14px;
    border-left: 3px solid var(--mp-cian);
    background: #f2f8fc;
    line-height: 1.6;
}

.mp-h3 { margin-top: 34px; }

.mp-nunca { color: #97a3b1; font-style: italic; }

/* Las pastillas salen sobre fondos claros (admin) y oscuros (Lagom), así que
   heredan el color del texto y solo se distinguen por el borde y el tinte.
   Un color fijo fallaba el contraste en uno de los dos. */
.mp-badge {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid rgba(127, 141, 163, .45);
    border-radius: 10px;
    background: rgba(127, 141, 163, .12);
    color: inherit;
    opacity: .75;
    font-size: 11px;
    white-space: nowrap;
}

.mp-badge-sync {
    border-color: rgba(0, 163, 215, .55);
    background: rgba(0, 163, 215, .14);
    opacity: .95;
}

/* Estados del diagnóstico */
.mp-estado-ok    { color: var(--mp-ok);    font-weight: 600; }
.mp-estado-aviso { color: var(--mp-aviso); font-weight: 600; }
.mp-estado-error { color: var(--mp-error); font-weight: 600; }

/* Mensajes junto al botón */
.mp-estado { margin-left: 12px; font-size: 13px; }
.mp-estado--info  { color: #5b6775; }
.mp-estado--ok    { color: var(--mp-ok); }
.mp-estado--error { color: var(--mp-error); }

/* ── Página de acceso ─────────────────────────────────────────────── */

.mp-login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 0%, #10203a 0%, var(--mp-fondo) 60%);
    color: var(--mp-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mp-login {
    width: min(92vw, 380px);
    padding: 38px 32px 30px;
    background: var(--mp-panel);
    border: 1px solid var(--mp-borde);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    text-align: center;
}

.mp-login-titulo {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.mp-login-sub {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--mp-suave);
}

.mp-boton {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--mp-cian);
    color: #04121b;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.mp-boton:hover:not(:disabled) { background: var(--mp-cian-2); }
.mp-boton:disabled { opacity: .55; cursor: default; }

.mp-login-estado {
    min-height: 20px;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.mp-login .mp-estado--info  { color: var(--mp-suave); }
.mp-login .mp-estado--ok    { color: #4dd18b; }
.mp-login .mp-estado--error { color: #ff8377; }

.mp-login-error {
    padding: 12px 14px;
    border: 1px solid rgba(226, 86, 74, .4);
    border-radius: 8px;
    background: rgba(226, 86, 74, .1);
    color: #ff9b91;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.mp-login-alt {
    display: inline-block;
    margin-top: 22px;
    color: var(--mp-suave);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.mp-login-alt:hover { color: var(--mp-cian-2); border-bottom-color: currentColor; }

/* ── Botón en la página de login del admin ────────────────────────────
   Esa página carga templates/login.min.css (Bootstrap 3 recortado) sobre
   fondo claro. No heredamos nada de ahí: el botón se pinta entero aquí
   para que no dependa de qué clases sobrevivan en la próxima versión.   */

.mp-admin-login { margin-top: 20px; }

.mp-admin-sep {
    position: relative;
    margin: 0 0 16px;
    text-align: center;
    color: #9aa5b1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mp-admin-sep::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e3e8ee;
}

.mp-admin-sep span {
    position: relative;
    padding: 0 12px;
    background: #fff;
}

/* Solo maquetación: el color y el tamaño los pone el botón del tema
   (btn btn-default / btn-primary), para que no desentone con los suyos. */
.mp-admin-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.mp-admin-boton svg { flex: 0 0 auto; }

/* Hereda el color del tema: el login de admin es claro y el de Lagom oscuro,
   así que un gris fijo fallaría en uno de los dos. */
.mp-admin-recordar {
    display: block;
    margin: 12px 0 0;
    color: inherit;
    opacity: .75;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.mp-admin-recordar:hover { opacity: 1; }

.mp-admin-recordar input { margin-right: 6px; vertical-align: -1px; }

.mp-admin-estado {
    min-height: 18px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.mp-admin-login .mp-estado--info  { color: #6b7887; }
.mp-admin-login .mp-estado--ok    { color: var(--mp-ok, #2ea86a); }
.mp-admin-login .mp-estado--error { color: var(--mp-error, #e2564a); }

.mp-login-recordar {
    display: block;
    margin-top: 14px;
    color: var(--mp-suave);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.mp-login-recordar input { margin-right: 6px; vertical-align: -1px; }

/* ── Panel de gestión de passkeys ─────────────────────────────────────
   Se usa en tres sitios con fondos distintos (pestaña de Configuración de
   seguridad de Lagom, página propia del módulo y área de admin), así que
   hereda el color del texto y solo pone acentos con el cian de marca.   */

.mp-panel-intro {
    max-width: 68ch;
    margin: 0 0 18px;
    opacity: .85;
    font-size: 13px;
    line-height: 1.6;
}

.mp-panel-barra { margin-bottom: 6px; }

.mp-panel-alta {
    display: inline-flex;
    width: auto;
    padding: 10px 18px;
}

.mp-panel-lista { margin-top: 16px; }

.mp-panel-vacio {
    padding: 22px;
    border: 1px dashed currentColor;
    border-radius: 6px;
    opacity: .55;
    text-align: center;
    font-size: 13px;
}

.mp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(127, 141, 163, .25);
}

.mp-item:last-child { border-bottom: 0; }

.mp-item-datos { flex: 1 1 auto; min-width: 0; }

.mp-item-nombre {
    width: 100%;
    max-width: 320px;
    font-weight: 600;
}

.mp-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
    padding-left: 9px;
    opacity: .7;
    font-size: 12px;
}

.mp-item-borrar { flex: 0 0 auto; }

.mp-panel-pie { margin-top: 16px; }

.mp-panel-enlace { padding-left: 0; }

.mp-panel-titulo { margin: 0 0 14px; font-size: 17px; }

.mp-panel-seguridad .mp-admin-estado { text-align: left; }

@media (max-width: 575px) {
    .mp-item { flex-wrap: wrap; }
    .mp-item-nombre { max-width: none; }
}

/* ── Aviso "configura tu passkey" ─────────────────────────────────────
   El aspecto lo pone la alerta del tema (.alert.alert-lagom.alert-info);
   aquí solo se coloca el botón junto al texto.                          */

.mp-aviso-cuerpo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mp-aviso-texto { flex: 1 1 320px; }

.mp-aviso-boton { flex: 0 0 auto; }

/* ── Avisos flotantes y diálogos ──────────────────────────────────────
   Sustituyen a alert/confirm/prompt del navegador. Superficie propia y
   elevada, no heredada: un diálogo tiene que leerse igual sobre el área
   de admin (siempre clara) que sobre Lagom, que puede estar en oscuro
   (marca <html class="lagom-dark-mode">).                              */

.mp-toasts {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(92vw, 380px);
    pointer-events: none;
}

.mp-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--mp-cian, #00a3d7);
    border-radius: 6px;
    background: #fff;
    color: #1f2430;
    box-shadow: 0 8px 28px rgba(8, 14, 26, .18);
    font-size: 13px;
    line-height: 1.5;
    pointer-events: auto;
    animation: mp-entrar .18s ease-out;
}

.mp-toast--ok    { border-left-color: var(--mp-ok, #2ea86a); }
.mp-toast--error { border-left-color: var(--mp-error, #e2564a); }

.mp-toast--saliendo { opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s; }

.mp-toast-texto { flex: 1 1 auto; }

.mp-toast-x {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    opacity: .4;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.mp-toast-x:hover { opacity: 1; }

.mp-modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 14, 26, .55);
    animation: mp-aparecer .15s ease-out;
}

.mp-modal {
    width: min(100%, 420px);
    padding: 24px;
    border-radius: 10px;
    background: #fff;
    color: #1f2430;
    box-shadow: 0 24px 60px rgba(8, 14, 26, .4);
    animation: mp-entrar .18s ease-out;
}

.mp-modal-titulo { margin: 0 0 8px; font-size: 17px; font-weight: 600; }

.mp-modal-texto { margin: 0 0 16px; font-size: 13px; line-height: 1.6; opacity: .8; }

.mp-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Lagom en oscuro, y nuestra propia página de acceso */
.lagom-dark-mode .mp-toast,
.lagom-dark-mode .mp-modal,
.mp-login-body .mp-toast,
.mp-login-body .mp-modal {
    background: #1b2029;
    color: #e6edf6;
}

.lagom-dark-mode .mp-modal-campo,
.mp-login-body .mp-modal-campo {
    border-color: #39424f;
    background: #131820;
    color: #e6edf6;
}

@keyframes mp-entrar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mp-aparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-toast, .mp-modal, .mp-modal-fondo { animation: none; }
    .mp-toast--saliendo { transition: none; }
}