/* AuthSys Bridge — estilos básicos. Sobrescribir o quitar según el tema. */

/* === Helpers de visibilidad según estado de sesión ===
 * El plugin agrega `authsys-logged-in` o `authsys-logged-out` al <body>.
 * Cualquier elemento con estas clases se oculta cuando corresponde.
 */
.authsys-logged-in  .authsys-hide-logged-in  { display: none !important; }
.authsys-logged-out .authsys-hide-logged-out { display: none !important; }


.authsys-form {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 28px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.authsys-form-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: #1c1917;
}

.authsys-field {
    margin-bottom: 16px;
}

.authsys-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1c1917;
    font-size: 14px;
}

.authsys-field input[type="text"],
.authsys-field input[type="email"],
.authsys-field input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    background: #ffffff;
    color: #1c1917;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.authsys-field input:focus {
    outline: none;
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.authsys-checkbox label {
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.authsys-checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.authsys-password-hints {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
    color: #6b7280;
}

.authsys-password-hints li {
    line-height: 1.6;
}

.authsys-password-hints li::before {
    content: "○ ";
    color: #d1d5db;
    margin-right: 4px;
}

.authsys-password-hints li.authsys-rule-ok {
    color: #047857;
}

.authsys-password-hints li.authsys-rule-ok::before {
    content: "✓ ";
    color: #047857;
}

/* Honeypot — invisible para humanos, visible para bots ingenuos */
.authsys-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.authsys-btn {
    display: inline-block;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.05s;
    line-height: 1;
}

.authsys-btn:active {
    transform: translateY(1px);
}

.authsys-btn-primary {
    background: #b91c1c;
    color: #ffffff;
    width: 100%;
}

.authsys-btn-primary:hover {
    opacity: 0.92;
}

.authsys-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.authsys-btn-secondary {
    background: #6b7280;
    color: #ffffff;
}

.authsys-btn-secondary:hover {
    background: #4b5563;
}

/* === Estilos para integrar en navbars dark (LPF Play header) === */

/* Link discreto: solo texto, mayúsculas, letter-spaced. Para "Iniciar sesión" en header oscuro.
 *
 * NOTA sobre especificidad: usamos doble clase (.authsys-btn-link.authsys-btn-link)
 * para ganarle a reglas tipo ".elementor-kit-348 a" (especificidad 0,1,1) que vienen
 * del theme/page-builder. Doble clase nos da (0,2,0). Es una técnica estándar para
 * evitar !important.
 *
 * Cascada de CSS variables (en orden de prioridad):
 *   1. --authsys-link-* → tu override custom
 *   2. --e-global-color-* / --e-global-typography-* → variables de Elementor (auto-detect)
 *   3. defaults visibles
 *
 * Override global (en :root) o scoped (en .site-header, .my-class, etc.):
 *
 *   :root {
 *       --authsys-link-color:           #ffffff;
 *       --authsys-link-hover-color:     #62B5E5;
 *       --authsys-link-font-family:     "Oswald", sans-serif;
 *       --authsys-link-font-size:       13px;
 *       --authsys-link-letter-spacing:  2.5px;
 *       --authsys-link-padding:         12px 16px;
 *   }
 */
.authsys-btn-link.authsys-btn-link {
    display: inline-block;
    background: transparent;

    color: var(--authsys-link-color,
            var(--e-global-color-text, rgba(255, 255, 255, 0.92)));

    fill: var(--authsys-link-fill,
           var(--authsys-link-color,
            var(--e-global-color-text, rgba(255, 255, 255, 0.92))));

    font-family: var(--authsys-link-font-family,
                  var(--e-global-typography-primary-font-family, inherit));

    font-size: var(--authsys-link-font-size, 13px);
    font-weight: var(--authsys-link-font-weight, 500);
    letter-spacing: var(--authsys-link-letter-spacing, 2.5px);
    padding: var(--authsys-link-padding, 12px 16px);

    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.18s, fill 0.18s;
}

.authsys-btn-link.authsys-btn-link:hover,
.authsys-btn-link.authsys-btn-link:focus-visible {
    color: var(--authsys-link-hover-color,
            var(--e-global-color-primary, #62B5E5));

    fill: var(--authsys-link-hover-fill,
           var(--authsys-link-hover-color,
            var(--e-global-color-primary, #62B5E5)));

    outline: none;
    text-decoration: none;
}

/* Variante para headers de fondo claro: invierte el color por default. */
.authsys-btn-link.authsys-btn-link.authsys-on-light {
    --authsys-link-color: rgba(0, 0, 0, 0.85);
    --authsys-link-hover-color: #b91c1c;
}

/* CTA prominente: fondo celeste, texto navy, mayúsculas. Para "Suscribite" en header oscuro.
 *
 * Doble clase (.authsys-btn-cta.authsys-btn-cta) para ganar especificidad contra
 * reglas globales del theme tipo ".elementor-kit-XXX a".
 *
 * Override variables:
 *   --authsys-cta-bg, --authsys-cta-color
 *   --authsys-cta-hover-bg, --authsys-cta-hover-color
 *   --authsys-cta-font-family, --authsys-cta-font-size, --authsys-cta-letter-spacing
 *   --authsys-cta-radius, --authsys-cta-padding
 */
.authsys-btn-cta.authsys-btn-cta {
    display: inline-block;

    background: var(--authsys-cta-bg, #62B5E5);
    color:      var(--authsys-cta-color, #0A1929);
    fill:       var(--authsys-cta-fill, var(--authsys-cta-color, #0A1929));

    font-family: var(--authsys-cta-font-family,
                  var(--e-global-typography-primary-font-family, inherit));
    font-size:       var(--authsys-cta-font-size, 13px);
    font-weight:     var(--authsys-cta-font-weight, 700);
    letter-spacing:  var(--authsys-cta-letter-spacing, 2.5px);
    padding:         var(--authsys-cta-padding, 14px 30px);
    border-radius:   var(--authsys-cta-radius, 4px);

    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, fill 0.18s, transform 0.05s;
}

.authsys-btn-cta.authsys-btn-cta:hover,
.authsys-btn-cta.authsys-btn-cta:focus-visible {
    background: var(--authsys-cta-hover-bg, #4FA8DD);
    color:      var(--authsys-cta-hover-color, #0A1929);
    fill:       var(--authsys-cta-hover-fill, var(--authsys-cta-hover-color, #0A1929));
    text-decoration: none;
    outline: none;
}

/* Variante outline del CTA: borde celeste + transparente.
 * Para acciones secundarias en tema dark (logout, cancelar, etc.) que no
 * compiten visualmente con el CTA principal pero mantienen el mismo lenguaje. */
.authsys-btn-cta.authsys-btn-cta-outline {
    background: transparent;
    color:      var(--authsys-cta-bg, #62B5E5);
    fill:       var(--authsys-cta-bg, #62B5E5);
    border: 1px solid var(--authsys-cta-bg, #62B5E5);
}
.authsys-btn-cta.authsys-btn-cta-outline:hover,
.authsys-btn-cta.authsys-btn-cta-outline:focus-visible {
    background: var(--authsys-cta-bg, #62B5E5);
    color:      var(--authsys-cta-color, #0A1929);
    fill:       var(--authsys-cta-color, #0A1929);
}

.authsys-btn-cta:active {
    transform: translateY(1px);
}

.authsys-message {
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: pre-line; /* respeta \n del JS para listar errores */
}

.authsys-message:empty {
    display: none;
}

.authsys-message-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 3px solid #dc2626;
}

.authsys-message-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 3px solid #047857;
}

.authsys-message-info {
    background: #dbeafe;
    color: #1e40af;
    border-left: 3px solid #2563eb;
}

.authsys-footnote {
    text-align: center;
    margin: 20px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.authsys-footnote a {
    color: #b91c1c;
    text-decoration: underline;
}

.authsys-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-family: ui-monospace, monospace;
}

.authsys-status.authsys-anonymous {
    background: #f3f4f6;
    color: #6b7280;
}

.authsys-status.authsys-authenticated {
    background: #d1fae5;
    color: #065f46;
}

.authsys-user-info {
    max-width: 480px;
    margin: 0 auto;
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 12px;
    font-size: 14px;
}

.authsys-user-info dt {
    color: #6b7280;
    font-weight: 600;
}

.authsys-user-info dd {
    margin: 0;
    color: #1c1917;
    word-break: break-all;
}

.authsys-empty {
    text-align: center;
    color: #6b7280;
    padding: 20px;
}

/* === Account dashboard ===
 *
 * Tema dark por default (matchea LPF Play). Override de variables si querés
 * tema light:
 *
 *   .authsys-account-dashboard {
 *       --authsys-acc-bg-card:   #ffffff;
 *       --authsys-acc-text:      #1c1917;
 *       --authsys-acc-text-muted:#6b7280;
 *       ...
 *   }
 */

.authsys-account-dashboard {
    --authsys-acc-bg-card:        var(--authsys-account-bg-card, #0e1419);
    --authsys-acc-bg-deep:        var(--authsys-account-bg-deep, transparent);
    --authsys-acc-text:           var(--authsys-account-text, #e5e7eb);
    --authsys-acc-text-muted:     var(--authsys-account-text-muted, #9ca3af);
    --authsys-acc-divider:        var(--authsys-account-divider, rgba(255,255,255,0.08));
    --authsys-acc-accent:         var(--authsys-account-accent, #62B5E5);

    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px;
    color: var(--authsys-acc-text);
    background: var(--authsys-acc-bg-deep);
}

.authsys-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.authsys-account-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--authsys-acc-text-muted);
    /* Oswald como en el home (mismo color y tamaño). */
    font-family: 'Oswald', sans-serif !important;
}

.authsys-account-header .authsys-account-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--authsys-acc-text);
}
.authsys-account-header .authsys-account-title strong { font-weight: 800; }

/* Pill de estado del plan — borde + punto + texto tintados según estado. */
.authsys-header-plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    flex: 0 0 auto;
}
.authsys-header-plan-pill .authsys-plan-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
/* Color por estado (hereda a borde + punto vía currentColor) */
.authsys-plan-status-free      { color: #62B5E5; }
.authsys-plan-status-active    { color: #34d399; }
.authsys-plan-status-trialing  { color: #62B5E5; }
.authsys-plan-status-grace     { color: #fbbf24; }
.authsys-plan-status-cancelled { color: #ff4d4f; }
.authsys-plan-status-expired   { color: #f87171; }
.authsys-plan-status-pending   { color: #fbbf24; }

.authsys-account-dashboard .authsys-section {
    background: var(--authsys-acc-bg-card);
    border-radius: 10px;
    padding: 28px 32px;
    margin-bottom: 20px;
    border: 1px solid var(--authsys-acc-divider);
    box-shadow: none;
}

.authsys-account-dashboard .authsys-section h2 {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--authsys-acc-accent);
    /* Sin esto el h2 hereda Oswald de Elementor y no matchea los eyebrows (Inter). */
    font-family: 'Oswald', sans-serif !important;
}

.authsys-account-dashboard .authsys-section h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--authsys-acc-text);
}

.authsys-data-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px 18px;
    margin: 0;
    font-size: 14px;
}

.authsys-data-grid dt {
    color: var(--authsys-acc-text-muted, #6b7280);
    font-weight: 600;
}

.authsys-data-grid dd {
    margin: 0;
    color: var(--authsys-acc-text, #1c1917);
    word-break: break-word;
}

.authsys-data-hint {
    margin: 14px 0 0;
    color: var(--authsys-acc-text-muted, #9ca3af);
    font-size: 13px;
}

/* Separador delgado y traslúcido entre filas del data-grid.
 * Aplica a todos los pares dt/dd excepto el último (la regla ::nth-last-child
 * salta los dos últimos hijos = la última fila). */
.authsys-account-dashboard .authsys-data-grid > *:not(:nth-last-child(-n+2)) {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--authsys-acc-divider);
}
.authsys-account-dashboard .authsys-data-grid > * {
    padding-top: 14px;
}
.authsys-account-dashboard .authsys-data-grid > dt:nth-child(1),
.authsys-account-dashboard .authsys-data-grid > dd:nth-child(2) {
    padding-top: 0;
}

/* Fila de data con acción a la derecha (ej: contraseña + botón Cambiar) */
.authsys-data-row-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.authsys-password-mask {
    letter-spacing: 4px;
    font-size: 16px;
    color: var(--authsys-acc-text);
}

/* === Botones del dashboard — override del lenguaje visual ===
 *
 * En el resto del sitio (navbars, plans-grid, signup) los CTAs siguen siendo
 * uppercase + letter-spaced para integrarse con el theme. Adentro del
 * dashboard preferimos un look más "app" : filled celeste, esquinas más
 * redondeadas, sin uppercase, fuente del sistema.
 *
 * Todo se scopea bajo .authsys-account-dashboard para no afectar otras pantallas.
 */
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta,
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta-outline {
    background: #35B3EF;
    color: #fff;
    fill: #fff;
    border: none;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;

    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
}

.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta:hover,
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta:focus-visible,
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta-outline:hover,
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-cta-outline:focus-visible {
    background: #1F9FDC;
    color: #fff;
    fill: #fff;
    outline: none;
}

/* Variante chica — para acciones inline en filas de data (ej: Cambiar contraseña) */
.authsys-account-dashboard .authsys-btn-cta.authsys-btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.authsys-btn-icon {
    flex-shrink: 0;
}

/* === Upgrade sub-card horizontal === */

.authsys-upgrade-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    /* Fondo azulado para DESTACAR el plan pago: glow arriba-izquierda + tinte
       general + borde azul, contra el fondo plano de la card del plan actual. */
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(98, 180, 229, 0.14), transparent 55%),
        linear-gradient(180deg, rgba(98, 180, 229, 0.06), rgba(98, 180, 229, 0.02));
    border: 1px solid rgba(98, 180, 229, 0.28);
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
}

.authsys-upgrade-card-body h3 {
    margin: 0 0 6px;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--authsys-acc-text);
}

.authsys-upgrade-card-body p {
    margin: 0 0 14px;
    color: var(--authsys-acc-text-muted);
    font-size: 14px;
}

.authsys-upgrade-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--authsys-acc-text);
    font-size: 14px;
}

.authsys-upgrade-card-features li {
    padding: 4px 0 4px 22px;
    position: relative;
}

.authsys-upgrade-card-features li::before {
    content: "✓";
    color: #62B5E5;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.authsys-upgrade-card-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 210px;
}

.authsys-upgrade-card-price {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: var(--authsys-acc-text);
    line-height: 1;
}
.authsys-upgrade-card-period-line {
    margin: 0;
    font-size: 13px;
    color: var(--authsys-acc-text-muted);
    text-align: center;
}

.authsys-upgrade-card-cta .authsys-btn-cta {
    width: 100%;
}

@media (max-width: 600px) {
    .authsys-upgrade-card {
        grid-template-columns: 1fr;
    }
    .authsys-upgrade-card-cta {
        align-items: stretch;
    }
}

/* Encabezado del plan actual: título + subtítulo + badge a la derecha */
.authsys-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.authsys-plan-header-title {
    margin: 0 0 4px !important;
    font-size: 24px !important;
    font-weight: 700;
}
.authsys-plan-header-subtitle {
    margin: 0;
    color: var(--authsys-acc-text-muted);
    font-size: 14px;
}

/* ─── Card ancha del PLAN ACTUAL (imagen 1) ─────────────────────────────
   Ocupa todo el ancho de la sección. Nombre grande a la izquierda, precio +
   período (y badge si hay sub paga) a la derecha, descripción debajo. */
.authsys-current-plan-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--authsys-acc-divider);
    /* Accent SIEMPRE azul del site (no color de estado) para no chocar con el
       eyebrow. El estado se comunica solo por el badge. */
    border-left: 3px solid var(--authsys-acc-accent);
    border-radius: 14px;
    padding: 24px 28px;
}
/* Separación con las fechas (Inicio/Fin del período) que van debajo. */
.authsys-current-plan-card + .authsys-data-grid {
    margin-top: 20px;
}
/* Igual que los headers de sección (Datos personales / Suscripción / Mis
   dispositivos) y "Mejorá tu plan": mismo color, fuente, tamaño y peso.
   El color de estado sigue vivo solo en el borde izquierdo de la card. */
.authsys-current-plan-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--authsys-acc-accent);
    font-family: 'Oswald', sans-serif !important;
}
.authsys-current-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}
.authsys-current-plan-name {
    margin: 0 !important;
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1.1;
    color: var(--authsys-acc-text);
}
.authsys-current-plan-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 12px;
}
.authsys-current-plan-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--authsys-acc-text-muted);
    white-space: nowrap;
}
.authsys-current-plan-price .authsys-current-plan-period {
    font-weight: 400;
}
.authsys-current-plan-desc {
    margin: 12px 0 0;
    /* Mismo color que las features del upgrade card (texto normal, no muted). */
    color: var(--authsys-acc-text);
    font-size: 15px;
    line-height: 1.5;
}

/* ─── Upgrade card enriquecido (imagen 2, horizontal) ─── */
.authsys-upgrade-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--authsys-acc-accent);
    font-family: 'Oswald', sans-serif !important;
}
.authsys-upgrade-card-title {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--authsys-acc-text);
}
.authsys-upgrade-price-suffix {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--authsys-acc-text-muted);
    white-space: nowrap;
}
.authsys-upgrade-pay-note {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--authsys-acc-text-muted);
    text-align: center;
}

/* Plan actual — header con badge a la derecha */
.authsys-plan-current-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.authsys-plan-current-title {
    margin: 0 0 4px !important;
}
.authsys-plan-current-price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--authsys-acc-text);
}
.authsys-plan-current-price .authsys-plan-period {
    font-size: 14px;
    font-weight: 400;
    color: var(--authsys-acc-text-muted);
    margin-left: 6px;
}

/* Form row para nombre + apellido lado a lado */
.authsys-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.authsys-field-row .authsys-field {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .authsys-field-row {
        grid-template-columns: 1fr;
    }
}

/* Versión del ToS visible al lado del label */
.authsys-tos-version {
    color: rgba(0, 0, 0, 0.4);
    font-style: normal;
    font-size: 11px;
    margin-left: 4px;
}

/* Banners */

.authsys-banner {
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.authsys-banner-warning {
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

/* Status badges */

.authsys-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.authsys-badge-free      { background: #f3f4f6; color: #6b7280; }
.authsys-badge-active    { background: #d1fae5; color: #065f46; }
.authsys-badge-cancelled { background: #fed7aa; color: #9a3412; }
.authsys-badge-expired   { background: #fee2e2; color: #991b1b; }
.authsys-badge-grace     { background: #fef3c7; color: #92400e; }

/* Pill-style badges dentro del dashboard dark — más cercanos al look de la referencia */
.authsys-account-dashboard .authsys-badge {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent !important;
    letter-spacing: 0.08em;
}
.authsys-account-dashboard .authsys-badge-free      { color: #62B5E5; }
.authsys-account-dashboard .authsys-badge-active    { color: #34d399; }
.authsys-account-dashboard .authsys-badge-cancelled { color: #ff4d4f; }
.authsys-account-dashboard .authsys-badge-expired   { color: #f87171; }
.authsys-account-dashboard .authsys-badge-grace     { color: #fbbf24; }

/* Plan actual */

.authsys-plan-current {
    margin-bottom: 16px;
}

.authsys-plan-current-header {
    margin-bottom: 12px;
}

.authsys-plan-price {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #b91c1c;
}

.authsys-plan-period {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    margin-left: 4px;
}

.authsys-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 14px;
    color: #1c1917;
}

.authsys-plan-features li {
    padding: 6px 0 6px 24px;
    position: relative;
}

.authsys-plan-features li::before {
    content: "✓";
    color: #047857;
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* Toggle de auto-renew */

.authsys-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Action buttons row */

.authsys-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.authsys-actions .authsys-btn-cta,
.authsys-actions .authsys-btn-secondary {
    margin: 0;
}

/* Plans grid (comparativa) */

.authsys-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .authsys-plans-grid {
        grid-template-columns: 1fr;
    }
    .authsys-data-grid {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .authsys-data-grid dd {
        margin-bottom: 8px;
    }
}

.authsys-plan-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
}

.authsys-plan-card-featured {
    border: 2px solid #b91c1c;
    background: #fff;
}

/* Historial */

.authsys-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.authsys-history-table th {
    text-align: left;
    padding: 8px 12px;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.authsys-history-table td {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #1c1917;
}

.authsys-history-table tbody tr:last-child td {
    border-bottom: none;
}

.authsys-section-footer {
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 8px 0 !important;
}
.authsys-section-footer .authsys-btn-cta,
.authsys-section-footer .authsys-btn-secondary {
    display: inline-block;
    min-width: 200px;
}

/* Plans-grid embebido dentro del account-dashboard: ajustar padding/centrado
 * para que no doble el espaciado de la sección que lo contiene. */
.authsys-account-dashboard .authsys-plans-grid-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Espacio entre las cards y los detalles de la suscripción */
.authsys-subscription-details {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--authsys-acc-divider);
}
.authsys-subscription-details .authsys-actions {
    margin-top: 16px;
    text-align: center;
}

/* === Section header con botón de acción ─────────────────────── */

.authsys-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.authsys-section-header h2 { margin: 0; }

.authsys-section-intro {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* === Link button (texto que parece link, pero es botón) ─────── */

.authsys-link-btn {
    background: transparent;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.authsys-link-btn:hover { color: #7f1d1d; }

/* === Inline form (editar perfil) ─────────────────────────────── */

.authsys-inline-form {
    margin: 0;
}
.authsys-field-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0 0;
}

/* === Devices ─────────────────────────────────────────────────── */

.authsys-devices-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.authsys-device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 16px;
    flex-wrap: wrap;
}
.authsys-device-item:last-child { border-bottom: none; }

.authsys-device-info { flex: 1 1 240px; }
.authsys-device-info strong {
    display: inline-block;
    margin-right: 8px;
    color: #1c1917;
}
.authsys-device-type {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 8px;
}
.authsys-device-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.authsys-device-current { background: #f9fafb; padding-left: 12px; padding-right: 12px; border-radius: 6px; }

.authsys-btn-small {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* === Zona de peligro ─────────────────────────────────────────── */

.authsys-danger-zone {
    border: 1px solid #fecaca;
    background: #fef2f2 !important;
}
.authsys-danger-zone h2 { color: #991b1b; }

.authsys-btn-danger {
    background: #dc2626;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s;
}
.authsys-btn-danger:hover { background: #b91c1c; }
.authsys-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Modal ──────────────────────────────────────────────────── */

.authsys-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.authsys-modal[hidden] { display: none; }

.authsys-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.authsys-modal-dialog {
    position: relative;
    background: #0e1419;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 28px;
    padding-top: 36px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}
.authsys-modal-dialog h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}
.authsys-modal-dialog p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #9ca3af;
}

/* X de cerrar — arriba a la derecha */
.authsys-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px;
    /* Visible siempre (el theme la pintaba casi negra). */
    color: #aeb9c5 !important;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.authsys-modal-close svg { fill: currentColor !important; }
.authsys-modal-close:hover,
.authsys-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    outline: none;
}

/* Botones del modal — mismo lenguaje visual que los del dashboard.
 * Filled #35B3EF, texto blanco, sans-serif del sistema, redondeados.
 * Aplican fuera del scope .authsys-account-dashboard porque el modal cuelga
 * de <body>. */
.authsys-modal .authsys-btn-cta.authsys-btn-cta,
.authsys-modal .authsys-btn-danger {
    background: #35B3EF;
    color: #ffffff;
    fill: #ffffff;
    border: none;
    /* Inter (no inherit): sin esto tomaban la fuente del theme. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 12px 22px;
    border-radius: 8px !important; /* Elemento pisa el radius de los <button> */
    cursor: pointer;
    transition: background 0.15s;
}
.authsys-modal .authsys-btn-cta.authsys-btn-cta:hover,
.authsys-modal .authsys-btn-cta.authsys-btn-cta:focus-visible,
.authsys-modal .authsys-btn-danger:hover,
.authsys-modal .authsys-btn-danger:focus-visible {
    background: #1F9FDC;
    color: #ffffff;
    outline: none;
}
.authsys-modal .authsys-btn-secondary {
    background: transparent;
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 8px !important;
    cursor: pointer;
}
.authsys-modal .authsys-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.authsys-modal .authsys-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Modal de un solo botón → centrar la acción */
.authsys-modal-single .authsys-actions {
    justify-content: center;
}
.authsys-modal-dialog code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.authsys-modal-dialog input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
}

/* === Payment history ────────────────────────────────────────── */

.authsys-payment-history {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.authsys-payment-history h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: #1c1917;
}

.authsys-payments-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.authsys-payments-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}
.authsys-payments-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #1c1917;
    font-size: 14px;
}
.authsys-payments-table tbody tr:last-child td { border-bottom: none; }

.authsys-text-muted { color: #9ca3af; font-size: 13px; }

.authsys-badge-completed { background: #d1fae5; color: #065f46; }
.authsys-badge-pending   { background: #fef3c7; color: #92400e; }
.authsys-badge-failed    { background: #fee2e2; color: #991b1b; }
.authsys-badge-refunded  { background: #e5e7eb; color: #4b5563; }

/* === Gate de login (cuando user anónimo entra a página protegida) === */

/* Gate de login — tema oscuro, para matchear el resto del sitio (LPF Play). */
.authsys-login-required {
    max-width: 440px;
    margin: 60px auto;
    padding: 40px 32px;
    text-align: center;
    background: #121924;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.authsys-login-required h2 {
    margin: 0 0 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #f3f4f6;
}

.authsys-login-required p {
    margin: 0 0 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.5;
}

.authsys-login-required .authsys-btn-cta {
    display: inline-block;
    padding: 14px 32px;
    margin-bottom: 16px;
    /* El gate se renderiza fuera del wrapper dark, así que el theme le aplicaba
       otra tipografía + uppercase. Lo normalizamos para matchear los CTA del sitio. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    font-size: 15px;
    border-radius: 6px;
    color: #ffffff;
}

.authsys-login-required-footnote {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 16px !important;
}

.authsys-login-required-footnote a {
    color: #5AB4E5;
    text-decoration: underline;
}

/* === Banner de pago pendiente ────────────────────────────────────────
   Estado `pending` de AuthSys: el usuario eligió plan pago pero no completó
   el pago. Ámbar (atención), no rojo (error): es una acción a completar. */
.authsys-pending-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
}
.authsys-pending-banner-text {
    flex: 1 1 260px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #fcd34d;
}
.authsys-pending-banner-text strong { color: #fde68a; }
.authsys-pending-banner .authsys-pending-banner-btn {
    flex: 0 0 auto;
    padding: 12px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    background: #f59e0b;
    color: #1a1206;
}
.authsys-pending-banner .authsys-pending-banner-btn:hover { background: #d97706; }

/* === Dispositivos en el dashboard dark ───────────────────────────────
   El bloque base de .authsys-device-* está pensado para tema claro (texto
   #1c1917), que sobre el dashboard oscuro queda invisible. Acá lo corregimos
   y unificamos los botones de la sección, que venían con 3 estilos distintos. */

.authsys-theme-dark .authsys-device-item {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

.authsys-theme-dark .authsys-device-info strong {
    color: #e5e7eb;
    font-size: 15px;
}

.authsys-theme-dark .authsys-device-type {
    color: #9ca3af;
}

.authsys-theme-dark .authsys-device-meta {
    color: #9ca3af;
}

/* Botones de la sección: mismo tamaño y forma. "Cerrar sesión" (acción
   principal) en azul; "Bloquear" (secundaria) en outline neutro. */
.authsys-devices-section .authsys-device-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Los 3 botones de sesión al mismo alto (referencia: "Cerrar sesión en todos").
   El del footer vive fuera de la sección, por eso lo sumamos explícito. */
.authsys-theme-dark .authsys-devices-section .authsys-btn-secondary,
.authsys-theme-dark .authsys-devices-section .authsys-btn-danger,
.authsys-theme-dark .authsys-devices-section .authsys-btn-cta,
.authsys-theme-dark .authsys-section-footer .authsys-btn-cta {
    padding: 8px 16px !important;
    font-size: 13px !important;
    /* Sin esto, danger/secondary heredan line-height ~1.4 del theme y quedan
       36px de alto mientras el .btn-cta (line-height 1 de la base) queda en 31px. */
    line-height: 1 !important;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid transparent;
    /* Sin esto heredan la tipografía del theme y no matchean el resto del dashboard. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform: none;
    letter-spacing: normal;
}

/* Footer "Cerrar sesión": forzado por ID (imbatible) para que quede idéntico
   al de arriba — mismo alto, mismo line-height, y sin el min-width que lo
   hacía más ancho/grande que los otros dos. */
.authsys-theme-dark .authsys-section-footer #authsys-btn-logout {
    padding: 8px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    min-width: 0 !important;
    border-radius: 6px !important;
}

/* "Bloquear" — secundaria, outline neutro (sin el gris sólido del tema claro). */
.authsys-theme-dark .authsys-devices-section .authsys-btn-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
}
.authsys-theme-dark .authsys-devices-section .authsys-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* "Cerrar sesión" — misma paleta azul y texto blanco, como los CTA del dashboard. */
/* Mismo color que "Cerrar sesión en todos" y el del footer (#35B3EF). */
/* "Cerrar sesión" de cada dispositivo → OUTLINE (inverso). Mismo tamaño, pero
   borde + texto celeste y hover que se rellena. Baja el peso visual cuando hay
   varios juntos. ("Cerrar sesión en todos" y el logout del footer quedan llenos.) */
.authsys-theme-dark .authsys-devices-section .authsys-btn-danger {
    background: transparent;
    color: #35B3EF;
    border: 1px solid #35B3EF;
}
.authsys-theme-dark .authsys-devices-section .authsys-btn-danger:hover,
.authsys-theme-dark .authsys-devices-section .authsys-btn-danger:focus-visible {
    background: #35B3EF;
    color: #ffffff;
    border-color: #35B3EF;
    outline: none;
}

/* "Cerrar sesión" por dispositivo → sólo una X. Ícono limpio, muted por default,
   rojo al hover (indica cerrar/quitar). Reemplaza al botón outline anterior. */
.authsys-theme-dark .authsys-devices-section .authsys-device-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #93a1af;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.authsys-theme-dark .authsys-devices-section .authsys-device-close:hover,
.authsys-theme-dark .authsys-devices-section .authsys-device-close:focus-visible {
    color: #ff4d4f;
    background: rgba(244, 84, 74, 0.12);
    outline: none;
}
.authsys-device-close svg { display: block; }

/* === Contador de dispositivos ("2 de 3") en el header de la sección ─── */

.authsys-device-count {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 10px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* === Plans grid (página /planes con shortcode [authsys_plans_grid]) ─── */

.authsys-plans-grid-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

.authsys-plans-grid-2col {
    display: grid;
    /* N planes dinámicos: cada card entre 300 y 440px, centradas, con wrap. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 440px));
    justify-content: center;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 700px) {
    .authsys-plans-grid-2col { grid-template-columns: 1fr; }
}

.authsys-plan-tile {
    --authsys-tile-bg:        var(--authsys-plan-tile-bg, #121924);
    --authsys-tile-text:      var(--authsys-plan-tile-text, #e5e7eb);
    --authsys-tile-muted:     var(--authsys-plan-tile-muted, #9ca3af);
    --authsys-tile-divider:   var(--authsys-plan-tile-divider, rgba(255,255,255,0.08));
    --authsys-tile-accent:    var(--authsys-plan-tile-accent, #5AB4E5);
    --authsys-tile-border:    var(--authsys-plan-tile-border, rgba(255,255,255,0.12));

    position: relative;
    background: var(--authsys-tile-bg);
    color: var(--authsys-tile-text);
    border: 1px solid var(--authsys-tile-border);
    border-radius: 4px;
    padding: 43px;
    display: flex;
    flex-direction: column;
}

.authsys-plan-tile-featured {
    --authsys-tile-border: var(--authsys-tile-accent);
    border-width: 1px;
    box-shadow: 0 0 40px rgba(90, 180, 229, 0.15);
}

.authsys-plan-tile-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--authsys-tile-accent);
    color: #0A1929;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 2px;
}

.authsys-plan-tile-title {
    font-family: 'Oswald', sans-serif;
    margin: 0 0 28px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--authsys-tile-accent);
}

.authsys-plan-tile-price {
    display: flex;
    align-items: flex-start;
    line-height: 1;
    margin: 0;
}

.authsys-plan-tile-currency {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--authsys-tile-muted);
    margin-top: 12px;
    margin-right: 4px;
}

.authsys-plan-tile-amount {
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: var(--authsys-tile-text);
    letter-spacing: 4px;
}

.authsys-plan-tile-period {
    margin: 12px 0 0;
    color: var(--authsys-tile-muted);
    font-size: 16px;
}

.authsys-plan-tile-divider {
    border: 0;
    border-top: 1px solid var(--authsys-tile-divider);
    margin: 28px 0;
    width: 100%;
}

.authsys-plan-tile-features {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 13.808px;
    font-weight: 500;
    line-height: 20.712px;
    color: rgba(255, 255, 255, 0.54);
}

.authsys-plan-tile-features li {
    padding: 8px 0 8px 32px;
    position: relative;
    line-height: 1.4;
}

.authsys-feature-included::before {
    content: "✓";
    color: #4ade80;
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 6px;
}

.authsys-feature-excluded {
    color: var(--authsys-tile-muted);
}
.authsys-feature-excluded::before {
    content: "✕";
    color: var(--authsys-tile-muted);
    font-weight: 700;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 6px;
}

.authsys-plan-tile-cta {
    margin-top: 28px;
}

.authsys-plan-tile-button {
    display: block;
    width: 100%;
    padding: 18px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.authsys-plan-tile-button:hover:not(:disabled) {
    border-color: var(--authsys-tile-accent);
    color: var(--authsys-tile-accent);
}
.authsys-plan-tile-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Nota bajo el botón (planes pagos): "Sin permanencia…". Alto fijo en TODAS las
   cards (aunque esté vacía en free) para que los botones no se desalineen. */
.authsys-plans-grid-wrap .authsys-plan-tile-note {
    margin: 14px 0 0;
    min-height: 2.7em;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: #8a8a8a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: normal;
    text-transform: none;
}

.authsys-plan-tile-button-cta {
    background: var(--authsys-tile-accent);
    color: #0A1929;
    border-color: var(--authsys-tile-accent);
}
.authsys-plan-tile-button-cta:hover:not(:disabled) {
    background: #4FA8DD;
    color: #0A1929;
    border-color: #4FA8DD;
}

/* Override de contraste: sube especificidad (0,2,0) para ganarle a reglas del
   theme tipo `.elementor a { color }` que dejaban el botón free sin contraste. */
.authsys-plans-grid-wrap .authsys-plan-tile-button {
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
    /* El kit de Elementor le mete border-radius:0 a los <button> (el "Plan actual"
       disabled es <button>, no <a>). Con (0,2,0) le ganamos y quedan todos iguales. */
    border-radius: 6px;
    /* La fuente también: "Suscribirme ahora" es un <a> y el theme le pisaba el
       Oswald (Elementor estiliza los links). Con (0,2,0) gana y ambos botones
       (link y button) quedan idénticos. */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    font-weight: 700;
}
.authsys-plans-grid-wrap .authsys-plan-tile-button-cta {
    color: #0A1929;
    background: var(--authsys-tile-accent);
    border-color: var(--authsys-tile-accent);
}
.authsys-plans-grid-wrap .authsys-plan-tile-button:hover:not(:disabled) {
    border-color: var(--authsys-tile-accent);
    color: var(--authsys-tile-accent);
}
/* "Plan actual" (botón disabled): estado neutro, sin el rojo/maroon del theme
   en hover/focus. */
.authsys-plans-grid-wrap .authsys-plan-tile-button:disabled,
.authsys-plans-grid-wrap .authsys-plan-tile-button:disabled:hover,
.authsys-plans-grid-wrap .authsys-plan-tile-button:disabled:focus {
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.18);
    opacity: 1;
    cursor: default;
    box-shadow: none;
}
.authsys-plans-grid-wrap .authsys-plan-tile-button-cta:hover:not(:disabled) {
    color: #0A1929;
    background: #4FA8DD;
    border-color: #4FA8DD;
}

/* Overrides de tipografía con especificidad (0,3,0) para ganarle a los estilos
   de heading del theme (Elementor) que pisaban el título (salía blanco/grande)
   y el precio. */
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-plan-tile-title {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--authsys-tile-accent);
    margin: 0 0 28px;
}
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-plan-tile-currency {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--authsys-tile-muted);
}
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-plan-tile-amount {
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 4px;
    color: var(--authsys-tile-text);
}
/* El theme (Elementor) pisa el <hr> con su propio margin/fondo y se perdía la
   separación. Forzamos línea + aire arriba/abajo con especificidad (0,3,0). */
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-plan-tile-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: none;
    width: 100%;
    height: 0;
    margin: 32px 0;
}
/* Detalle del plan (features): Inter 13.8px/500, line-height 20.7px, 54% blanco. */
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-plan-tile-features li {
    font-family: 'Inter', sans-serif;
    font-size: 13.808px;
    font-weight: 500;
    line-height: 20.712px;
    color: rgba(255, 255, 255, 0.54);
}
.authsys-plans-grid-wrap .authsys-plan-tile .authsys-feature-excluded {
    color: rgba(255, 255, 255, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal "Cambiar contraseña" — form in-page. Look & feel del sitio (dark).
   ───────────────────────────────────────────────────────────────────────── */
.authsys-modal-form {
    max-width: 480px;
    text-align: left;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.authsys-modal-form .authsys-field {
    margin-bottom: 16px;
    text-align: left;
}
.authsys-modal-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.authsys-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.authsys-input-wrap input {
    width: 100%;
    padding: 11px 44px 11px 14px;
    background: #0a0f14 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    /* !important + text-fill: el theme/Elementor forzaba el texto a negro
       (invisible sobre el fondo oscuro). */
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6;
    caret-color: #62B5E5;
    font-size: 15px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* Autofill del browser no puede pintar el texto de negro ni el fondo blanco. */
.authsys-input-wrap input:-webkit-autofill,
.authsys-input-wrap input:-webkit-autofill:hover,
.authsys-input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f3f4f6;
    -webkit-box-shadow: 0 0 0 1000px #0a0f14 inset;
    caret-color: #62B5E5;
}

/* El theme aplica margin-bottom:16px SOLO a input[type="text"] (no a password).
   Al mostrar la contraseña con el ojo, el input pasa a text, crece el wrapper
   46→62px y el ícono (absolute, top:50%) se recentra más abajo. Neutralizamos
   el margen en AMBOS types para que alternar mostrar/ocultar no mueva nada. */
.authsys-input-wrap input[type="text"],
.authsys-input-wrap input[type="password"] {
    margin-bottom: 0 !important;
}
.authsys-input-wrap input:focus {
    outline: none;
    border-color: #62B5E5;
    box-shadow: 0 0 0 3px rgba(98, 180, 229, 0.2);
}
.authsys-input-wrap input.is-invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}
.authsys-pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    /* margin/padding en 0 y box-sizing fijo: el theme no puede engordar el box
       (era lo que bajaba el ícono al hacer foco). Centrado por transform. */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 6px;
    color: #aeb9c5 !important;
    cursor: pointer;
    transform: translateY(-50%) !important;
}
/* Mismo transform/color/estilo/MARGIN en TODOS los estados → no salta ni cambia
   al hacer hover / foco / click. El theme metía margin-bottom:16px en :focus. */
.authsys-pw-toggle:hover,
.authsys-pw-toggle:focus,
.authsys-pw-toggle:focus-visible,
.authsys-pw-toggle:active {
    position: absolute !important;
    top: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: #aeb9c5 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.authsys-pw-toggle svg {
    display: block;
    margin: 0 !important;
    fill: currentColor !important;
}

.authsys-field-error {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #f87171;
}

/* Checklist de política — estilo IDP: círculo gris → check verde al cumplir. */
.authsys-pw-checklist {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.authsys-pw-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #9ca3af;
    transition: color 0.15s;
}
.authsys-pw-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid #4b5563;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.authsys-pw-checklist li.is-valid { color: #34d399; }
.authsys-pw-checklist li.is-valid .authsys-pw-check {
    background: #34d399;
    border-color: #34d399;
}
.authsys-pw-checklist li.is-valid .authsys-pw-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #0e1419;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.authsys-pw-revoke {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #9ca3af;
    cursor: pointer;
}
.authsys-pw-revoke input {
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: #62B5E5;
}

.authsys-modal-form .authsys-message {
    margin: 0 0 14px;
    font-size: 13px;
    min-height: 1px;
}
.authsys-modal-form .authsys-message-success { color: #34d399; }
.authsys-modal-form .authsys-message-error   { color: #f87171; }
.authsys-modal-form .authsys-message-info    { color: #9ca3af; }

.authsys-modal-form .authsys-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
/* Dos botones del MISMO ancho, centrados. */
.authsys-modal-form .authsys-actions > button {
    flex: 1 1 0;
    max-width: 200px;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.authsys-modal-form .authsys-btn-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* "Cancelar" = inverso: sin relleno, color en borde + texto; hover se rellena. */
.authsys-modal-form .authsys-btn-secondary {
    background: transparent !important;
    border: 1px solid #35B3EF !important;
    color: #35B3EF !important;
}
.authsys-modal-form .authsys-btn-secondary:hover,
.authsys-modal-form .authsys-btn-secondary:focus-visible {
    background: #35B3EF !important;
    color: #ffffff !important;
    outline: none;
}

@media (max-width: 480px) {
    .authsys-pw-checklist { grid-template-columns: 1fr; }
}