/*
 * Pantallas de Seguridad (diseño 01-04 del 2026-11-07): Seguridad, Activar clave dinámica, Mi sesión y Dispositivos de confianza.
 * Marcado: members/partials/security_settings.tpl, devices/my_devices.tpl y devices/trusted_devices_page.tpl.
 * Comportamiento (pasos, copiar clave, ojo, desplegables): assets/evolution/js/colpay-security.js.
 * Botones con esquinas redondeadas (no en pastilla); las insignias sí son redondas, como en el diseño.
 */

.cp-sec {
    --cp-sec-navy: var(--cpui-navy, #21214f);
    --cp-sec-cyan: var(--cpui-cyan, #00ade1);
    --cp-sec-green: #36faa8; /* verde del diseño */
    --cp-sec-muted: #5d6480;
    --cp-sec-line: #e4e4ec;
    --cp-sec-card: #fff;
    --cp-sec-soft: #f4f6fb;
    --cp-sec-danger: #e11d2e;
    /* Escala de la letra y de los botones: el diseño es una pantalla de ~400 px; en pantallas más angostas baja y en las anchas sube. */
    --cp-sec-scale: .76;
    max-width: 560px;
    margin: 0 auto;
    color: var(--cp-sec-navy);
    font-size: calc(1rem * var(--cp-sec-scale, 1));
}
@media (min-width: 360px) {
    .cp-sec { --cp-sec-scale: .82; }
}
@media (min-width: 420px) {
    .cp-sec { --cp-sec-scale: .9; }
}
@media (min-width: 520px) {
    .cp-sec { --cp-sec-scale: 1; }
}
.cp-sec [hidden] {
    display: none !important;
}

/* Un enlace viejo con #twofactor_disabled / #twofactor_enabled (el chip del tablero lo traía) hacía que el navegador desplazara la página hasta ese bloque
   (con scroll-behavior: smooth de Bootstrap, animado) y, como la pantalla es corta, terminaba al final y con el botón verde tapado por la barra fija.
   Con este margen el destino de la ancla queda por encima del inicio y la pantalla se queda ARRIBA. */
#twofactor_disabled,
#twofactor_enabled {
    scroll-margin-top: 100vh;
}

/* ------------------------------------------------------------------ encabezado de cada pantalla */
.cp-sec-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 1.1rem;
}
.cp-sec-head__title {
    margin: 0;
    font-size: calc(1.65rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    line-height: 1.15;
    color: var(--cp-sec-navy);
}
.cp-sec-head__sub{
    margin: .15rem 0 0;
    color: var(--cp-sec-muted);
    font-size: calc(1rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #e3f1ff;
    color: var(--cp-sec-navy);
    font-size: calc(1.2rem * var(--cp-sec-scale, 1));
    text-decoration: none;
}
.cp-sec-back:focus-visible {
    background: #d3e8fc;
    color: var(--cp-sec-navy);
    outline: none;
}
@media (hover: hover) {
    .cp-sec-back:hover {
        background: #d3e8fc;
        color: var(--cp-sec-navy);
    }
}

/* ------------------------------------------------------------------ tarjetas */
.cp-sec-card {
    display: block;
    margin: 0 0 .9rem;
    padding: 1rem;
    border: 1px solid var(--cp-sec-line);
    border-radius: 12px;
    background: var(--cp-sec-card);
    box-shadow: 0 1px 2px rgba(33, 33, 79, .05);
    color: var(--cp-sec-navy);
}
a.cp-sec-card,
a.cp-sec-card:hover {
    color: var(--cp-sec-navy);
    text-decoration: none;
}
.cp-sec-card__top {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
/* Tarjeta «Clave dinámica»: icono | título + insignia, y el texto debajo ocupando todo el ancho restante */
.cp-sec-card__top--grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: .85rem;
    row-gap: .1rem;
    align-items: center;
}
.cp-sec-card__top--grid .cp-sec-card__icon {
    grid-row: 1 / span 2;
    align-self: center;
}
.cp-sec-card__top--grid .cp-sec-card__title {
    grid-column: 2;
    grid-row: 1;
}
.cp-sec-card__top--grid .cp-sec-badge {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
}
.cp-sec-card__top--grid .cp-sec-card__text{
    grid-column: 2 / span 2;
    grid-row: 2;
    margin: 0;
    font-size: calc(.92rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(2.6rem * var(--cp-sec-scale, 1) + .3rem);
    height: calc(2.6rem * var(--cp-sec-scale, 1) + .3rem);
    font-size: calc(2.1rem * var(--cp-sec-scale, 1));
    line-height: 1;
    color: var(--cp-sec-navy);
}
.cp-sec-card__main {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-sec-card__title {
    margin: 0;
    font-size: calc(1.28rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    line-height: 1.2;
    color: var(--cp-sec-navy);
}
.cp-sec-card__text{
    margin: .15rem 0 0;
    color: var(--cp-sec-muted);
    font-size: calc(1rem * var(--cp-sec-scale, 1)) !important;
    line-height: 1.35;
}
.cp-sec-card__note {
    margin: .85rem 0 0;
    color: var(--cp-sec-muted);
    font-size: calc(.95rem * var(--cp-sec-scale, 1));
}
.cp-sec-card .cp-sec-btn {
    margin-top: .95rem;
}
.cp-sec-card__center {
    margin-top: .6rem;
    text-align: center;
}
/* Texto que se despliega dentro de la tarjeta: la tarjeta se estira (el alto pasa de 0 a su contenido). */
.cp-sec-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.cp-sec-expand.is-open {
    grid-template-rows: 1fr;
}
.cp-sec-expand__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .3s;
}
.cp-sec-expand.is-open .cp-sec-expand__inner {
    visibility: visible;
    transition-delay: 0s;
}
.cp-sec-howto {
    margin: .85rem 0 0;
    padding: .85rem 0 0;
    border-top: 1px solid var(--cp-sec-line);
    color: var(--cp-sec-muted);
    font-size: calc(.93rem * var(--cp-sec-scale, 1));
    line-height: 1.5;
}
.cp-sec-howto p {
    margin: 0;
}
.cp-sec-howto a {
    color: var(--cp-sec-navy);
    font-weight: 700;
    text-decoration: underline;
}

/* Insignias */
.cp-sec-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .22rem .8rem;
    border-radius: 999px;
    font-size: calc(.9rem * var(--cp-sec-scale, 1));
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.cp-sec-badge--warn { background: #ffe19f; color: #7a5200; }
.cp-sec-badge--ok { background: #c9f7de; color: #0b6b3c; }
.cp-sec-badge--info { background: #d6f2fb; color: #0a6a82; }

/* Fila-enlace dentro de una tarjeta («Ver mi sesión >», «Administrar dispositivos >») */
.cp-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .9rem 0 -.2rem;
    padding: .8rem .15rem .1rem;
    border-top: 1px solid var(--cp-sec-line);
    color: var(--cp-sec-navy);
    font-weight: 800;
    font-size: calc(1.05rem * var(--cp-sec-scale, 1));
    text-decoration: none;
}
.cp-sec-row:hover,
.cp-sec-row:focus-visible {
    color: var(--cp-sec-navy);
    outline: none;
}
.cp-sec-row i {
    font-size: calc(1.1rem * var(--cp-sec-scale, 1));
}
a.cp-sec-card--link {
    display: flex;
    align-items: center;
    gap: .85rem;
}
a.cp-sec-card--link .cp-sec-card__title {
    font-size: calc(1.2rem * var(--cp-sec-scale, 1));
}

/* «¿Necesitas ayuda?»: en el diseño es una fila delgada (icono pequeño + texto + flecha), no una tarjeta alta */
#cpSecHelp {
    padding: .6rem .9rem;
    gap: .75rem;
}
#cpSecHelp .cp-sec-card__icon {
    width: calc(1.6rem * var(--cp-sec-scale, 1) + .4rem);
    height: calc(1.6rem * var(--cp-sec-scale, 1) + .4rem);
    font-size: calc(1.5rem * var(--cp-sec-scale, 1));
}
#cpSecHelp .cp-sec-card__title {
    font-size: calc(1.05rem * var(--cp-sec-scale, 1));
}

.cp-sec .cp-sec-foot {
    font-size: calc(1rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec .cp-sec-help {
    font-size: calc(1rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec .cp-sec-linkbox__text {
    font-size: calc(1rem * var(--cp-sec-scale, 1)) !important;
}
/* template.tpl declara «p, .list-group-item { font-size: 1.2rem !important }» para todo el sitio: los textos de estas pantallas que son <p> llevan su
   tamaño con !important (por especificidad ganan a esa regla), y los <p> sueltos dentro de un bloque heredan el tamaño del bloque. */
.cp-sec .cp-sec-howto p,
.cp-sec .cp-sec-empty p {
    font-size: inherit !important;
}

/* ------------------------------------------------------------------ botones y enlaces */
.cp-sec-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: calc(2.6rem * var(--cp-sec-scale, 1) + .25rem);
    padding: .55rem 1rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: calc(1.1rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.cp-sec-btn--primary {
    background: var(--cp-sec-green);
    border-color: var(--cp-sec-green);
    color: var(--cp-sec-navy);
}
.cp-sec-btn--primary:hover,
.cp-sec-btn--primary:focus-visible {
    background: #22e898;
    border-color: #22e898;
    color: var(--cp-sec-navy);
    outline: none;
}
.cp-sec-btn--outline {
    background: #fff;
    border-color: var(--cp-sec-cyan);
    color: var(--cp-sec-navy);
}
.cp-sec-btn--danger {
    background: #fff;
    border-color: var(--cp-sec-danger);
    color: var(--cp-sec-danger);
}
.cp-sec-btn--danger:hover,
.cp-sec-btn--danger:focus-visible {
    background: #fff1f2;
    color: var(--cp-sec-danger);
    outline: none;
}
.cp-sec-btn--ghost {
    background: transparent;
    border-color: var(--cp-sec-line);
    color: var(--cp-sec-navy);
}
.cp-sec-btn--inline {
    width: auto;
    flex: 0 0 auto;
    padding-left: .9rem;
    padding-right: .9rem;
    font-size: calc(1rem * var(--cp-sec-scale, 1));
}
.cp-sec-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
.cp-sec-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cp-sec-navy);
    font: inherit;
    font-size: calc(1rem * var(--cp-sec-scale, 1));
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.cp-sec-link:focus-visible {
    color: var(--cp-sec-cyan);
    outline: none;
}
@media (hover: hover) {
    .cp-sec-link:hover {
        color: var(--cp-sec-cyan);
    }
}

/* ------------------------------------------------------------------ avisos */
.cp-sec-info {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    background: #dff3fc;
    color: var(--cp-sec-navy);
    line-height: 1.35;
}
.cp-sec-info > i {
    flex: 0 0 auto;
    font-size: calc(1.35rem * var(--cp-sec-scale, 1));
    color: var(--cp-sec-cyan);
    line-height: 1.1;
}
.cp-sec-info strong {
    display: block;
}
.cp-sec-info span {
    display: block;
    color: #35416c;
    font-size: calc(.95rem * var(--cp-sec-scale, 1));
}
.cp-sec-info--soft {
    background: #e9ecf3;
    color: var(--cp-sec-muted);
    font-size: calc(.95rem * var(--cp-sec-scale, 1));
    align-items: center;
}
.cp-sec-info--soft > i {
    color: var(--cp-sec-muted);
}
.cp-sec-help {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--cp-sec-muted);
}
.cp-sec-help a {
    color: var(--cp-sec-navy);
    font-weight: 800;
    text-decoration: underline;
}
.cp-sec-foot {
    margin: .7rem 0 0;
    text-align: center;
    color: var(--cp-sec-muted);
}

/* ------------------------------------------------------------------ Mi sesión */
.cp-sec-facts {
    margin: .9rem 0 0;
    padding: 0;
    border-top: 1px solid var(--cp-sec-line);
}
.cp-sec-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    padding: .6rem .1rem;
    border-bottom: 1px solid var(--cp-sec-line);
    font-size: calc(1.02rem * var(--cp-sec-scale, 1));
}
.cp-sec-fact dt,
.cp-sec-fact__label {
    font-weight: 800;
    color: var(--cp-sec-navy);
}
.cp-sec-fact dd {
    margin: 0;
    color: var(--cp-sec-muted);
    text-align: right;
}
.cp-sec-fact dd strong {
    color: var(--cp-sec-navy);
}
.cp-sec-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: #12c56e;
    vertical-align: baseline;
}
button.cp-sec-fact {
    width: 100%;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--cp-sec-line);
    background: none;
    color: var(--cp-sec-navy);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
button.cp-sec-fact i {
    transition: transform .15s ease;
}
button.cp-sec-fact.is-open i,
.cp-sec-collapse.is-open > i {
    transform: rotate(180deg);
}
.cp-sec-tech {
    margin: 0;
    padding: .6rem .1rem .2rem;
    font-size: calc(.88rem * var(--cp-sec-scale, 1));
    color: var(--cp-sec-muted);
    word-break: break-word;
}
.cp-sec-tech dt {
    margin-top: .45rem;
    font-weight: 800;
    color: var(--cp-sec-navy);
}
.cp-sec-tech dd {
    margin: 0;
}

/* ------------------------------------------------------------------ Dispositivos de confianza */
.cp-sec-device {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cp-sec-line);
    border-radius: 14px;
    background: var(--cp-sec-card);
}
.cp-sec-device__icon {
    flex: 0 0 auto;
    width: 2.6rem;
    text-align: center;
    font-size: calc(2rem * var(--cp-sec-scale, 1));
    line-height: 1;
}
.cp-sec-device__main {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-sec-device__title {
    margin: 0;
    font-size: calc(1.15rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    line-height: 1.2;
}
.cp-sec-device__meta{
    margin: .15rem 0 0;
    color: var(--cp-sec-muted);
    font-size: calc(.98rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec-device__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}
.cp-sec-device__side .cp-sec-link {
    font-size: calc(1rem * var(--cp-sec-scale, 1));
}
.cp-sec-empty {
    padding: 1.4rem 1rem;
    border: 1px dashed var(--cp-sec-line);
    border-radius: 14px;
    text-align: center;
    color: var(--cp-sec-muted);
}

/* ------------------------------------------------------------------ Activar clave dinámica */
.cp-sec-steps {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.2rem;
}
.cp-sec-step {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--cp-sec-muted);
    font-weight: 700;
}
.cp-sec-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid #b9bfd2;
    border-radius: 50%;
    background: #fff;
    color: var(--cp-sec-muted);
    font-weight: 800;
}
.cp-sec-step.is-active {
    color: var(--cp-sec-navy);
    font-weight: 800;
}
.cp-sec-step.is-active .cp-sec-step__dot {
    border-color: var(--cp-sec-cyan);
    background: var(--cp-sec-cyan);
    color: #fff;
}
.cp-sec-step.is-done .cp-sec-step__dot {
    border-color: var(--cp-sec-cyan);
    color: var(--cp-sec-cyan);
}
.cp-sec-steps__line {
    flex: 1 1 auto;
    height: 2px;
    background: #cfe9f5;
}
.cp-sec-title {
    margin: 0 0 .25rem;
    font-size: calc(1.55rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    color: var(--cp-sec-navy);
}
.cp-sec-lead{
    margin: 0 0 1rem;
    color: var(--cp-sec-muted);
    font-size: calc(1.05rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec-linkbox {
    margin: 0 0 .9rem;
    padding: 1rem;
    border-radius: 12px;
    background: #dff3fc;
}
.cp-sec-linkbox__title{
    margin: 0;
    font-size: calc(1.2rem * var(--cp-sec-scale, 1)) !important;
    font-weight: 800;
}
.cp-sec-linkbox__text {
    margin: .15rem 0 .75rem;
    color: #35416c;
}
.cp-sec-key {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.cp-sec-key__field {
    flex: 1 1 11rem;
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid var(--cp-sec-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(33, 33, 79, .06);
}
.cp-sec-key__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .7rem .8rem;
    border: 0;
    background: transparent;
    color: var(--cp-sec-navy);
    font: inherit;
    font-size: calc(1.05rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    letter-spacing: .12em;
    outline: none;
}
.cp-sec-key__eye {
    flex: 0 0 auto;
    padding: .5rem .75rem;
    border: 0;
    background: none;
    color: var(--cp-sec-navy);
    font-size: calc(1.25rem * var(--cp-sec-scale, 1));
    line-height: 1;
    cursor: pointer;
}
.cp-sec-key__copy {
    flex: 0 0 auto;
}
.cp-sec-openapp {
    margin: .75rem 0 0;
}
.cp-sec-openapp small {
    display: block;
    margin-top: .35rem;
    color: #35416c;
    font-size: calc(.85rem * var(--cp-sec-scale, 1));
}
.cp-sec-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 .9rem;
    padding: .8rem 1rem;
    border: 1px solid var(--cp-sec-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cp-sec-navy);
    font: inherit;
    font-size: calc(1.05rem * var(--cp-sec-scale, 1));
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.cp-sec-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: -.3rem 0 .9rem;
    padding: 1rem;
    border: 1px solid var(--cp-sec-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cp-sec-muted);
    font-size: calc(.9rem * var(--cp-sec-scale, 1));
    text-align: center;
}
.cp-sec-download {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: 0 0 .9rem;
    padding: .75rem 1rem;
    border: 1px solid var(--cp-sec-line);
    border-radius: 12px;
    background: #fff;
    font-weight: 800;
}
.cp-sec-download__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 0;
    font-size: calc(.95rem * var(--cp-sec-scale, 1));
    line-height: 1.2;
}
.cp-sec-download__label i {
    font-size: calc(1.3rem * var(--cp-sec-scale, 1));
}
.cp-sec-download a {
    flex: 0 0 auto;
    color: var(--cp-sec-navy);
    font-size: calc(.95rem * var(--cp-sec-scale, 1));
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
/* Raya entre el texto y los enlaces de descarga, como en el diseño */
.cp-sec-download a:first-of-type {
    padding-left: .9rem;
    border-left: 1px solid var(--cp-sec-line);
}
.cp-sec-safe{
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1rem;
    color: var(--cp-sec-muted);
    font-size: calc(.95rem * var(--cp-sec-scale, 1)) !important;
}
.cp-sec-safe i {
    margin-top: .1rem;
    font-size: calc(1.25rem * var(--cp-sec-scale, 1));
    color: var(--cp-sec-navy);
}
.cp-sec-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.cp-sec-actions .cp-sec-btn {
    margin-top: 0;
}

@media (max-width: 380px) {
    .cp-sec-head__title { font-size: calc(1.45rem * var(--cp-sec-scale, 1)); }
    .cp-sec-card__title { font-size: calc(1.15rem * var(--cp-sec-scale, 1)); }
    .cp-sec-device { flex-wrap: wrap; }
    .cp-sec-device__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}