/* =========================================================================
   portalskins.css
   Plantillas del portal publico de proveedores (/Portal/Name/<nombre>).

   REGLA DE ORO DE ESTE ARCHIVO: aqui NO hay selectores globales.
   Nada de body, html, *, input o a "sueltos". Este archivo tambien lo carga
   la plantilla CLASICA (Views/Portal/Name.cshtml) para pintar el pie
   compartido, y esa plantilla el cliente la quiere EXACTAMENTE como esta;
   una sola regla global le cambiaria la cara.

   Por eso todo cuelga de una clase raiz:
     .pk-pie     pie compartido (aviso de privacidad + redes) y su ventana
     .pk-aurora  plantilla Aurora     (Views/Portal/NameAurora.cshtml)
     .pk-corp    plantilla Corporativo(Views/Portal/NameCorporativo.cshtml)
     .pk-min     plantilla Minimal    (Views/Portal/NameMinimal.cshtml)

   Las cuatro plantillas van con Layout = null: lo que no este aqui, no se
   pinta. No se puede dar por hecho ni Bootstrap ni jQuery.
   ========================================================================= */


/* =========================================================================
   1. PIE COMPARTIDO: aviso de privacidad y redes
   -------------------------------------------------------------------------
   Va FIJO al fondo de la ventana a proposito. La plantilla clasica solo
   recibe la llamada al parcial, no puede recibir cambios de maquetacion; un
   pie fijo se pinta encima sin mover ni un pixel de lo que ya existe.
   ========================================================================= */

.pk-pie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90000;
    display: flex;
    justify-content: center;
    padding: 0 10px 12px;
    /* El contenedor deja pasar el clic; solo la pastilla lo atrapa. Asi el pie
       no roba clics a la plantilla que tiene debajo. */
    pointer-events: none;
    font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
}

.pk-pie-caja {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .20);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

    /* Margen en los hijos y no "gap": gap en flex no existe en navegadores
       viejos y el pie tiene que verse decente en todos. */
    .pk-pie-caja > * {
        margin: 3px 3px;
    }

.pk-pie-aviso {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

    .pk-pie-aviso i {
        margin-right: 7px;
        font-size: 14px;
        color: #64748b;
        transition: color .18s ease;
    }

    .pk-pie-aviso:hover,
    .pk-pie-aviso:focus {
        background: #eef2f7;
        color: #0f172a;
        outline: none;
    }

        .pk-pie-aviso:hover i,
        .pk-pie-aviso:focus i {
            color: #0f172a;
        }

.pk-pie-linea {
    width: 1px;
    height: 20px;
    background: rgba(15, 23, 42, .14);
}

.pk-pie-redes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.pk-pie-icono {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 2px;
    border-radius: 50%;
    color: #475569;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

    .pk-pie-icono svg {
        width: 16px;
        height: 16px;
        display: block;
    }

    .pk-pie-icono:hover,
    .pk-pie-icono:focus {
        color: #fff;
        background: #0f172a;
        transform: translateY(-2px);
        text-decoration: none;
        outline: none;
    }

    /* Color de cada casa al pasar el raton: se reconocen de un vistazo. */
    .pk-pie-icono.pk-pie-facebook:hover, .pk-pie-icono.pk-pie-facebook:focus {
        background: #1877f2;
    }

    .pk-pie-icono.pk-pie-instagram:hover, .pk-pie-icono.pk-pie-instagram:focus {
        background: #d62976;
    }

    .pk-pie-icono.pk-pie-linkedin:hover, .pk-pie-icono.pk-pie-linkedin:focus {
        background: #0a66c2;
    }

    .pk-pie-icono.pk-pie-twitter:hover, .pk-pie-icono.pk-pie-twitter:focus {
        background: #0f172a;
    }

    .pk-pie-icono.pk-pie-youtube:hover, .pk-pie-icono.pk-pie-youtube:focus {
        background: #ff0000;
    }

    .pk-pie-icono.pk-pie-whatsapp:hover, .pk-pie-icono.pk-pie-whatsapp:focus {
        background: #25d366;
    }

    .pk-pie-icono.pk-pie-tiktok:hover, .pk-pie-icono.pk-pie-tiktok:focus {
        background: #010101;
    }

    .pk-pie-icono.pk-pie-sitio:hover, .pk-pie-icono.pk-pie-sitio:focus {
        background: #0d9488;
    }

    .pk-pie-icono.pk-pie-correo:hover, .pk-pie-icono.pk-pie-correo:focus {
        background: #ea580c;
    }

    .pk-pie-icono.pk-pie-telefono:hover, .pk-pie-icono.pk-pie-telefono:focus {
        background: #4338ca;
    }

    /* Tooltip propio: el title del navegador tarda un segundo en salir y se ve
       distinto en cada sistema. Este sale al instante y es igual en todos. */
    .pk-pie-icono::after {
        content: attr(data-tip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-bottom: 10px;
        width: max-content;
        max-width: 220px;
        padding: 7px 10px;
        border-radius: 7px;
        background: #0f172a;
        color: #fff;
        font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) translateY(4px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }

    .pk-pie-icono:hover::after,
    .pk-pie-icono:focus::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }


/* -------------------------------------------------------------------------
   1.b Ventana del aviso de privacidad
   Sin Bootstrap y sin jQuery: display none/flex y unas lineas de JavaScript
   propio en el parcial. z-index por debajo del modal de "portal desactivado"
   de la clasica (999999), que manda sobre todo lo demas.
   ------------------------------------------------------------------------- */

.pk-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99000;
    background: rgba(15, 23, 42, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 18px;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
}

    .pk-modal.pk-abierto {
        display: flex;
    }

.pk-modal-caja {
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .45);
    overflow: hidden;
    animation: pkModalEntra .22s ease-out;
}

@keyframes pkModalEntra {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pk-modal-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #eef1f6;
}

.pk-modal-titulo {
    margin: 0;
    padding-right: 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.pk-modal-x {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

    .pk-modal-x:hover,
    .pk-modal-x:focus {
        background: #e2e8f0;
        color: #0f172a;
        outline: none;
    }

.pk-modal-cuerpo {
    padding: 18px 22px;
    overflow-y: auto;
}

.pk-modal-texto {
    margin: 0;
    /* pre-wrap respeta los saltos de linea que capturo el cliente SIN que la
       vista tenga que meter <br>: el texto sale codificado por Razor y aqui
       solo se respeta su formato. Es lo que evita el HTML inyectado. */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

.pk-modal-pie {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid #eef1f6;
}

.pk-modal-btn {
    border: 0;
    border-radius: 9px;
    padding: 10px 22px;
    background: #0f172a;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease;
}

    .pk-modal-btn:hover,
    .pk-modal-btn:focus {
        background: #1e293b;
        outline: none;
    }

@media (max-width: 480px) {
    .pk-pie-aviso span {
        display: none; /* en el celular solo el escudo: el texto no cabe */
    }

    .pk-pie-aviso i {
        margin-right: 0;
    }

    .pk-modal-caja {
        max-height: 92vh;
    }

    .pk-modal-titulo {
        font-size: 17px;
    }
}


/* =========================================================================
   2. PLANTILLA AURORA
   Degradado oscuro con manchas de color desenfocadas y tarjeta de vidrio.
   ========================================================================= */

.pk-aurora {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 18px 110px; /* el 110 de abajo es el hueco del pie fijo */
    background: #140f2e;
    background: linear-gradient(150deg, #1b1040 0%, #140f2e 45%, #0b1229 100%);
    font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #e9ecff;
}

    /* La RAIZ tambien entra: lleva min-height 100vh mas relleno vertical, y sin
       border-box esos pixeles se suman a la altura y la pantalla queda con
       barra de desplazamiento aunque el contenido quepa de sobra. */
    .pk-aurora,
    .pk-aurora *,
    .pk-aurora *::before,
    .pk-aurora *::after {
        box-sizing: border-box;
    }

.pk-aurora-fondo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.pk-aurora-mancha {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    will-change: transform;
}

.pk-aurora-m1 {
    width: 46vw;
    height: 46vw;
    min-width: 320px;
    min-height: 320px;
    top: -12vh;
    left: -8vw;
    background: #7c3aed;
    animation: pkFlotaA 17s ease-in-out infinite;
}

.pk-aurora-m2 {
    width: 40vw;
    height: 40vw;
    min-width: 280px;
    min-height: 280px;
    bottom: -14vh;
    right: -6vw;
    background: #22d3ee;
    opacity: .42;
    animation: pkFlotaB 21s ease-in-out infinite;
}

.pk-aurora-m3 {
    width: 30vw;
    height: 30vw;
    min-width: 220px;
    min-height: 220px;
    top: 42%;
    left: 48%;
    background: #f472b6;
    opacity: .30;
    animation: pkFlotaC 25s ease-in-out infinite;
}

@keyframes pkFlotaA {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(6vw, 5vh) scale(1.12);
    }
}

@keyframes pkFlotaB {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-7vw, -4vh) scale(1.08);
    }
}

@keyframes pkFlotaC {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-58%, -42%) scale(1.15);
    }
}

/* Quien pidio menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
    .pk-aurora-mancha {
        animation: none;
    }

    .pk-modal-caja {
        animation: none;
    }
}

.pk-aurora-tarjeta {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 28px;
    padding: 44px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 30px 90px rgba(2, 6, 23, .55);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}

.pk-aurora-marca {
    flex: 1 1 320px;
    padding: 8px 34px 8px 8px;
    min-width: 0;
}

.pk-aurora-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 16px 20px;
    border-radius: 18px;
    /* El logotipo del cliente casi siempre es oscuro sobre transparente: sobre
       el vidrio oscuro desapareceria. Va sobre una placa blanca. */
    background: #fff;
    box-shadow: 0 12px 34px rgba(2, 6, 23, .35);
}

    .pk-aurora-logo img {
        display: block;
        max-width: 220px;
        max-height: 92px;
        width: auto;
        height: auto;
    }

.pk-aurora-sinlogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #c7d2fe;
    font-size: 34px;
}

.pk-aurora-nombre {
    margin: 26px 0 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.5px;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pk-aurora-etiqueta {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .28);
    border: 1px solid rgba(167, 139, 250, .45);
    color: #ddd6fe;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.pk-aurora-bienvenida {
    margin: 18px 0 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(233, 236, 255, .82);
}

.pk-aurora-forma {
    flex: 1 1 340px;
    max-width: 420px;
    padding: 30px 26px;
    border-radius: 22px;
    background: rgba(9, 12, 33, .48);
    border: 1px solid rgba(255, 255, 255, .12);
}

.pk-aurora-titulo {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.pk-aurora-sub {
    margin: 0 0 22px;
    font-size: 13px;
    color: rgba(233, 236, 255, .62);
}

.pk-aurora-campo {
    position: relative;
    margin-bottom: 16px;
}

.pk-aurora-etq {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    color: rgba(233, 236, 255, .78);
}

.pk-aurora-dato {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 44px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

    .pk-aurora-dato::-webkit-input-placeholder {
        color: rgba(233, 236, 255, .42);
    }

    .pk-aurora-dato::placeholder {
        color: rgba(233, 236, 255, .42);
    }

    .pk-aurora-dato:focus {
        outline: none;
        border-color: rgba(34, 211, 238, .75);
        background: rgba(255, 255, 255, .10);
        box-shadow: 0 0 0 4px rgba(34, 211, 238, .16);
    }

    .pk-aurora-dato:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pk-aurora-icono {
    position: absolute;
    left: 16px;
    bottom: 17px;
    color: rgba(199, 210, 254, .75);
    font-size: 15px;
    pointer-events: none;
}

.pk-aurora-ojo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(199, 210, 254, .8);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

    .pk-aurora-ojo:hover,
    .pk-aurora-ojo:focus {
        color: #fff;
        background: rgba(255, 255, 255, .1);
        outline: none;
    }

    .pk-aurora-ojo:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.pk-aurora-btn {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(124, 58, 237, .38);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .pk-aurora-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 18px 38px rgba(124, 58, 237, .48);
        filter: brightness(1.06);
    }

    .pk-aurora-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .pk-aurora-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

.pk-aurora .pk-alta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 13px 16px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: #e9ecff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

    .pk-aurora .pk-alta:hover,
    .pk-aurora .pk-alta:focus {
        background: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .38);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    .pk-aurora .pk-alta.pk-alta-off {
        opacity: .45;
        cursor: not-allowed;
    }

.pk-aurora-avisos {
    margin-bottom: 18px;
}

.pk-aurora-error {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(244, 63, 94, .14);
    border: 1px solid rgba(244, 63, 94, .42);
    color: #fecdd3;
    font-size: 13px;
    line-height: 1.5;
}

    .pk-aurora-error i {
        margin-right: 10px;
        margin-top: 2px;
        font-size: 15px;
        color: #fb7185;
    }

    .pk-aurora-error a {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
    }

.pk-aurora-bloqueo {
    padding: 18px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(251, 191, 36, .12);
    border: 1px solid rgba(251, 191, 36, .45);
}

    .pk-aurora-bloqueo h3 {
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        color: #fde68a;
    }

        .pk-aurora-bloqueo h3 i {
            margin-right: 9px;
        }

    .pk-aurora-bloqueo p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: rgba(253, 230, 138, .88);
    }

.pk-aurora-legal {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(233, 236, 255, .55);
}

    .pk-aurora-legal a {
        color: #a5b4fc;
        font-weight: 600;
        text-decoration: none;
    }

        .pk-aurora-legal a:hover {
            color: #fff;
            text-decoration: underline;
        }

@media (max-width: 900px) {
    .pk-aurora-tarjeta {
        padding: 30px 24px;
        max-width: 480px;
    }

    .pk-aurora-marca {
        flex-basis: 100%;
        padding: 0 0 26px;
        text-align: center;
    }

    .pk-aurora-bienvenida {
        margin-left: auto;
        margin-right: auto;
    }

    .pk-aurora-forma {
        flex-basis: 100%;
        max-width: 100%;
    }

    .pk-aurora-nombre {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .pk-aurora {
        padding: 24px 12px 104px;
    }

    .pk-aurora-tarjeta {
        padding: 22px 16px;
        border-radius: 20px;
    }

    .pk-aurora-forma {
        padding: 20px 16px;
    }

    .pk-aurora-nombre {
        font-size: 26px;
    }

    .pk-aurora-logo img {
        max-width: 170px;
        max-height: 72px;
    }
}


/* =========================================================================
   3. PLANTILLA CORPORATIVO
   Dos columnas: marca sobre fondo oscuro solido, acceso sobre fondo claro.
   ========================================================================= */

.pk-corp {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #f4f7fb;
    font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1f2937;
}

    .pk-corp,
    .pk-corp *,
    .pk-corp *::before,
    .pk-corp *::after {
        box-sizing: border-box;
    }

.pk-corp-marca {
    flex: 1 1 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 60px 56px;
    background: #1f3b57;
    color: #eaf1f8;
}

    /* Una diagonal muy tenue: le quita el plano al bloque solido sin volverse
       un degradado de moda que envejezca mal. */
    .pk-corp-marca::after {
        content: "";
        position: absolute;
        right: -14%;
        bottom: -28%;
        width: 78%;
        padding-top: 78%;
        border-radius: 50%;
        background: rgba(47, 93, 138, .38);
        pointer-events: none;
    }

.pk-corp-marca-cont {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.pk-corp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 20px 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(8, 24, 41, .30);
}

    .pk-corp-logo img {
        display: block;
        max-width: 260px;
        max-height: 110px;
        width: auto;
        height: auto;
    }

.pk-corp-sinlogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #cfe0f0;
    font-size: 38px;
}

.pk-corp-nombre {
    margin: 34px 0 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.4px;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pk-corp-raya {
    width: 62px;
    height: 4px;
    margin: 22px 0 0;
    border-radius: 2px;
    background: #4c8fd0;
}

.pk-corp-bienvenida {
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(234, 241, 248, .8);
}

.pk-corp-pieizq {
    position: relative;
    z-index: 1;
    margin: 46px 0 0;
    font-size: 12px;
    letter-spacing: .6px;
    color: rgba(234, 241, 248, .5);
}

.pk-corp-acceso {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 120px; /* el hueco de abajo es del pie fijo */
}

.pk-corp-forma {
    width: 100%;
    max-width: 420px;
    padding: 38px 34px;
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(31, 59, 87, .10);
}

.pk-corp-titulo {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #16283a;
}

.pk-corp-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
}

.pk-corp-campo {
    position: relative;
    margin-bottom: 18px;
}

.pk-corp-etq {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.pk-corp-dato {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 42px;
    border: 1px solid #d6dee8;
    border-radius: 8px;
    background: #fbfcfe;
    color: #16283a;
    font-family: inherit;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .pk-corp-dato::-webkit-input-placeholder {
        color: #9aa8b8;
    }

    .pk-corp-dato::placeholder {
        color: #9aa8b8;
    }

    .pk-corp-dato:focus {
        outline: none;
        background: #fff;
        border-color: #2f5d8a;
        box-shadow: 0 0 0 3px rgba(47, 93, 138, .14);
    }

    .pk-corp-dato:disabled {
        background: #f1f4f8;
        color: #94a3b8;
        cursor: not-allowed;
    }

.pk-corp-icono {
    position: absolute;
    left: 15px;
    bottom: 16px;
    color: #8fa3b8;
    font-size: 15px;
    pointer-events: none;
}

.pk-corp-ojo {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #8fa3b8;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

    .pk-corp-ojo:hover,
    .pk-corp-ojo:focus {
        color: #1f3b57;
        background: #eef2f7;
        outline: none;
    }

    .pk-corp-ojo:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pk-corp-btn {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: #1f3b57;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}

    .pk-corp-btn:hover:not(:disabled) {
        background: #2f5d8a;
        box-shadow: 0 10px 24px rgba(31, 59, 87, .26);
    }

    .pk-corp-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
    }

.pk-corp .pk-alta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1f3b57;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

    .pk-corp .pk-alta:hover,
    .pk-corp .pk-alta:focus {
        background: #f1f5f9;
        border-color: #2f5d8a;
        text-decoration: none;
        outline: none;
    }

    .pk-corp .pk-alta.pk-alta-off {
        opacity: .5;
        cursor: not-allowed;
    }

.pk-corp-error {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.55;
}

    .pk-corp-error i {
        margin-right: 10px;
        margin-top: 2px;
        color: #dc2626;
    }

    .pk-corp-error a {
        color: #991b1b;
        font-weight: 700;
        text-decoration: underline;
    }

.pk-corp-bloqueo {
    margin-bottom: 22px;
    padding: 18px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
}

    .pk-corp-bloqueo h3 {
        display: flex;
        align-items: center;
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 700;
        color: #92400e;
    }

        .pk-corp-bloqueo h3 i {
            margin-right: 9px;
        }

    .pk-corp-bloqueo p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: #a16207;
    }

.pk-corp-legal {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

    .pk-corp-legal a {
        color: #2f5d8a;
        font-weight: 600;
        text-decoration: none;
    }

        .pk-corp-legal a:hover {
            text-decoration: underline;
        }

@media (max-width: 980px) {
    .pk-corp-marca {
        flex-basis: 100%;
        padding: 44px 30px;
        text-align: center;
    }

    .pk-corp-marca-cont {
        margin: 0 auto;
    }

    .pk-corp-raya {
        margin-left: auto;
        margin-right: auto;
    }

    .pk-corp-acceso {
        flex-basis: 100%;
        padding: 34px 20px 110px;
    }

    .pk-corp-nombre {
        font-size: 30px;
    }

    .pk-corp-pieizq {
        display: none;
    }
}

@media (max-width: 480px) {
    .pk-corp-marca {
        padding: 32px 18px;
    }

    .pk-corp-logo {
        padding: 14px 16px;
    }

        .pk-corp-logo img {
            max-width: 190px;
            max-height: 82px;
        }

    .pk-corp-nombre {
        font-size: 25px;
    }

    .pk-corp-bienvenida {
        font-size: 15px;
    }

    .pk-corp-forma {
        padding: 24px 18px;
    }
}


/* =========================================================================
   4. PLANTILLA MINIMAL
   Una sola columna angosta, centrada, con mucho aire y casi sin adornos.
   ========================================================================= */

.pk-min {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px 120px; /* el hueco de abajo es del pie fijo */
    background: #fff;
    font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #111827;
}

    /* Misma razon que en Aurora: la raiz lleva 100vh con relleno. */
    .pk-min,
    .pk-min *,
    .pk-min *::before,
    .pk-min *::after {
        box-sizing: border-box;
    }

.pk-min-col {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.pk-min-logo img {
    display: block;
    margin: 0 auto;
    max-width: 210px;
    max-height: 100px;
    width: auto;
    height: auto;
}

.pk-min-sinlogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 30px;
}

.pk-min-nombre {
    margin: 34px 0 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: #111827;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pk-min-bienvenida {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6b7280;
}

.pk-min-forma {
    margin-top: 42px;
    text-align: left;
}

.pk-min-campo {
    position: relative;
    margin-bottom: 26px;
}

.pk-min-etq {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Solo raya de abajo: es el adorno minimo que necesita un campo. */
.pk-min-dato {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 2px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    background: transparent;
    color: #111827;
    font-family: inherit;
    font-size: 17px;
    transition: border-color .2s ease;
}

    .pk-min-dato::-webkit-input-placeholder {
        color: #d1d5db;
    }

    .pk-min-dato::placeholder {
        color: #d1d5db;
    }

    .pk-min-dato:focus {
        outline: none;
        border-bottom-color: #111827;
    }

    .pk-min-dato:disabled {
        color: #9ca3af;
        border-bottom-style: dashed;
        cursor: not-allowed;
    }

.pk-min-ojo {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

    .pk-min-ojo:hover,
    .pk-min-ojo:focus {
        color: #111827;
        background: #f3f4f6;
        outline: none;
    }

    .pk-min-ojo:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pk-min-btn {
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .8px;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

    .pk-min-btn:hover:not(:disabled) {
        background: #000;
        transform: translateY(-1px);
    }

    .pk-min-btn:disabled {
        background: #d1d5db;
        cursor: not-allowed;
    }

.pk-min .pk-alta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

    .pk-min .pk-alta:hover,
    .pk-min .pk-alta:focus {
        border-color: #111827;
        background: #fafafa;
        text-decoration: none;
        outline: none;
    }

    .pk-min .pk-alta.pk-alta-off {
        opacity: .45;
        cursor: not-allowed;
    }

.pk-min-error {
    display: flex;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 13px 15px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

    .pk-min-error i {
        margin-right: 10px;
        margin-top: 2px;
    }

    .pk-min-error a {
        color: #b91c1c;
        font-weight: 700;
        text-decoration: underline;
    }

.pk-min-bloqueo {
    margin: 0 0 26px;
    padding: 20px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    text-align: left;
}

    .pk-min-bloqueo h3 {
        display: flex;
        align-items: center;
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 700;
        color: #111827;
    }

        .pk-min-bloqueo h3 i {
            margin-right: 9px;
            color: #d97706;
        }

    .pk-min-bloqueo p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: #6b7280;
    }

.pk-min-legal {
    margin: 30px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: #9ca3af;
}

    .pk-min-legal a {
        color: #6b7280;
        font-weight: 600;
        text-decoration: underline;
    }

        .pk-min-legal a:hover {
            color: #111827;
        }

@media (max-width: 480px) {
    .pk-min {
        padding: 36px 18px 110px;
    }

    .pk-min-nombre {
        font-size: 25px;
    }

    .pk-min-forma {
        margin-top: 32px;
    }

    .pk-min-logo img {
        max-width: 170px;
        max-height: 84px;
    }
}


/* =========================================================================
   4. PANTALLA DE PERSONALIZACION  ·  .pk-admin
   -------------------------------------------------------------------------
   Views/Portal/Personalizar.cshtml: la pantalla donde el ADMINISTRADOR de la
   cuenta elige plantilla, captura su aviso de privacidad y sus redes. No es
   una plantilla del portal publico: vive DENTRO del tema INSPINIA, con
   Bootstrap 3 cargado.

   Dos reglas de convivencia con las plantillas de arriba:

     1. Todo cuelga de .pk-admin, que solo existe en esta pantalla. Asi ni una
        regla de aqui puede alcanzar al portal publico.
     2. Las clases llevan prefijo propio (pka-) para no toparse con las de las
        plantillas: .pk-pie de arriba es el pie fijo del portal y no tiene nada
        que ver con el pie de una tarjeta de esta pantalla.
   ========================================================================= */

.pk-admin {
    --pka-tinta: #0B1B34;
    --pka-tinta-2: #4A5160;
    --pka-gris: #8A8F98;
    --pka-linea: #E9ECF1;
    --pka-fondo: #F6F7F9;
    --pka-superficie: #FFFFFF;
    --pka-azul: #0A84FF;
    --pka-azul-osc: #0060DF;
    --pka-verde: #30D158;
    --pka-verde-osc: #26A94A;
    --pka-ambar: #FF9F0A;
    --pka-ambar-osc: #B26A00;
    --pka-rojo: #FF3B30;
    --pka-rojo-osc: #C4271E;
    --pka-r-sm: 10px;
    --pka-r: 16px;
    --pka-sombra: 0 1px 2px rgba(11,27,52,.04), 0 8px 24px rgba(11,27,52,.06);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Open Sans', Helvetica, Arial, sans-serif;
    color: var(--pka-tinta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Lienzo y encabezado ---------- */

.pk-admin .pka-lienzo {
    background: var(--pka-fondo);
    min-height: 100vh;
    padding: 34px 30px 64px;
}

@media (max-width: 767px) {
    .pk-admin .pka-lienzo { padding: 20px 14px 44px; }
}

.pk-admin .pka-cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pk-admin .pka-cab > * { margin-bottom: 10px; }

.pk-admin .pka-cab h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--pka-tinta);
    line-height: 1.1;
}

.pk-admin .pka-sub {
    font-size: 15px;
    color: var(--pka-gris);
    margin-top: 6px;
    max-width: 720px;
    line-height: 1.5;
}

.pk-admin .pka-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pka-gris);
    margin-bottom: 8px;
}

/* Direccion publica del portal, en el encabezado */

.pk-admin .pka-url {
    display: inline-flex;
    align-items: center;
    background: rgba(11,27,52,.05);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    color: var(--pka-tinta-2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-admin .pka-url i { margin-right: 8px; }

.pk-admin .pka-url code {
    background: none;
    padding: 0;
    color: var(--pka-tinta);
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Avisos ---------- */

.pk-admin .pka-aviso {
    border-radius: var(--pka-r-sm);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    border-left: 3px solid;
    margin-bottom: 16px;
}

.pk-admin .pka-aviso i { margin-right: 6px; }
.pk-admin .pka-aviso b { font-weight: 600; }
.pk-admin .pka-aviso a { font-weight: 600; color: inherit; text-decoration: underline; }
.pk-admin .pka-aviso ul { margin: 8px 0 0; padding-left: 20px; }
.pk-admin .pka-aviso li { margin-bottom: 3px; }

.pk-admin .pka-aviso--ok { background: rgba(48,209,88,.08); border-color: var(--pka-verde-osc); color: #17612B; }
.pk-admin .pka-aviso--info { background: rgba(10,132,255,.07); border-color: var(--pka-azul); color: #0A3E7A; }
.pk-admin .pka-aviso--atencion { background: rgba(255,159,10,.09); border-color: var(--pka-ambar); color: #7A4A00; }
.pk-admin .pka-aviso--error { background: rgba(255,59,48,.07); border-color: var(--pka-rojo); color: #8F1C15; }

/* ---------- Tarjetas ---------- */

.pk-admin .pka-card {
    background: var(--pka-superficie);
    border-radius: var(--pka-r);
    box-shadow: var(--pka-sombra);
    padding: 26px;
    border: 1px solid rgba(11,27,52,.04);
    margin-bottom: 22px;
}

.pk-admin .pka-card-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pk-admin .pka-card-cab > * { margin-bottom: 6px; }
.pk-admin .pka-card-cab .pka-chip { margin-left: 12px; }

.pk-admin .pka-card h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 5px;
    color: var(--pka-tinta);
}

.pk-admin .pka-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--pka-tinta);
}

.pk-admin .pka-nota {
    font-size: 13px;
    color: var(--pka-gris);
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

.pk-admin .pka-nota code {
    background: rgba(11,27,52,.05);
    color: var(--pka-tinta-2);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

/* Pie de tarjeta: nota a la izquierda, boton de guardar a la derecha */

.pk-admin .pka-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pka-linea);
}

.pk-admin .pka-pie .pka-nota { margin: 0 16px 10px 0; flex: 1 1 260px; }
.pk-admin .pka-pie .pka-btn { margin-bottom: 10px; }

/* ---------- Rejilla ---------- */

.pk-admin .pka-grid { display: grid; grid-gap: 18px; gap: 18px; }
.pk-admin .pka-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pk-admin .pka-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 991px) {
    .pk-admin .pka-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .pk-admin .pka-grid-2,
    .pk-admin .pka-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Botones ---------- */

.pk-admin .pka-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, box-shadow .2s ease, transform .16s cubic-bezier(.2,.7,.3,1);
}

.pk-admin .pka-btn i { margin-right: 8px; }
.pk-admin .pka-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pk-admin .pka-btn:active { transform: translateY(0) scale(.985); }
.pk-admin .pka-btn:focus { outline: 2px solid rgba(10,132,255,.4); outline-offset: 2px; text-decoration: none; }

.pk-admin .pka-btn--primario {
    background: var(--pka-azul);
    color: #fff;
    box-shadow: 0 4px 14px rgba(10,132,255,.28);
}

.pk-admin .pka-btn--primario:hover,
.pk-admin .pka-btn--primario:focus {
    background: var(--pka-azul-osc);
    color: #fff;
    box-shadow: 0 8px 22px rgba(10,132,255,.34);
}

.pk-admin .pka-btn--sutil { background: rgba(11,27,52,.055); color: var(--pka-tinta); }

.pk-admin .pka-btn--sutil:hover,
.pk-admin .pka-btn--sutil:focus { background: rgba(11,27,52,.09); color: var(--pka-tinta); }

.pk-admin .pka-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Formularios ---------- */

.pk-admin .pka-campo { margin-bottom: 18px; }

.pk-admin .pka-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pka-tinta-2);
    margin-bottom: 7px;
}

.pk-admin .pka-ayuda {
    font-size: 12.5px;
    color: var(--pka-gris);
    margin-top: 6px;
    line-height: 1.5;
}

/* Aviso de "recuperamos tu texto": tiene que verse, no pasar por nota al pie. */
.pk-admin .pka-ayuda--recuperado {
    color: #7a4b00;
    background: #fff6e5;
    border: 1px solid #f2d39b;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 600;
}

    .pk-admin .pka-ayuda--recuperado .fa {
        margin-right: 6px;
    }

.pk-admin .pka-input,
.pk-admin .pka-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--pka-linea);
    border-radius: var(--pka-r-sm);
    font-size: 14.5px;
    color: var(--pka-tinta);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pk-admin .pka-input:focus,
.pk-admin .pka-textarea:focus {
    border-color: var(--pka-azul);
    outline: none;
    box-shadow: 0 0 0 4px rgba(10,132,255,.12);
}

.pk-admin .pka-textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.6;
    font-size: 14px;
}

/* Campo con icono. El icono va DESPUES del input en el marcado (va absoluto,
   asi que se ve a la izquierda igual) para poder pintarlo de azul al enfocar:
   el selector + necesita al hermano previo. */

.pk-admin .pka-conicono { position: relative; }

.pk-admin .pka-conicono .pka-icono {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pka-gris);
    font-size: 15px;
    pointer-events: none;
    transition: color .18s ease;
}

.pk-admin .pka-conicono .pka-icono svg { width: 15px; height: 15px; }
.pk-admin .pka-conicono .pka-input { padding-left: 42px; }
.pk-admin .pka-conicono .pka-input:focus + .pka-icono { color: var(--pka-azul); }

/* ---------- Interruptor del aviso ---------- */

.pk-admin .pka-switch {
    display: inline-flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

.pk-admin .pka-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pk-admin .pka-riel {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    margin-right: 12px;
    border-radius: 999px;
    background: rgba(11,27,52,.16);
    transition: background .22s cubic-bezier(.2,.7,.3,1);
}

.pk-admin .pka-riel::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11,27,52,.28);
    transition: transform .22s cubic-bezier(.2,.7,.3,1);
}

.pk-admin .pka-switch input:checked + .pka-riel { background: var(--pka-verde); }
.pk-admin .pka-switch input:checked + .pka-riel::after { transform: translateX(20px); }
.pk-admin .pka-switch input:focus + .pka-riel { box-shadow: 0 0 0 4px rgba(10,132,255,.18); }

.pk-admin .pka-riel-texto {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--pka-tinta);
}

.pk-admin .pka-riel-nota {
    font-size: 12.5px;
    color: var(--pka-gris);
    display: block;
    font-weight: 400;
    margin-top: 2px;
}

/* ---------- Contador de caracteres ---------- */

.pk-admin .pka-contador {
    font-size: 12.5px;
    color: var(--pka-gris);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 400;
}

.pk-admin .pka-contador--cerca { color: var(--pka-ambar-osc); font-weight: 600; }
.pk-admin .pka-contador--tope { color: var(--pka-rojo-osc); font-weight: 600; }

/* ---------- Tarjetas de plantilla ---------- */

.pk-admin .pka-plantillas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-gap: 16px;
    gap: 16px;
}

@media (max-width: 1199px) {
    .pk-admin .pka-plantillas { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 575px) {
    .pk-admin .pka-plantillas { grid-template-columns: 1fr; }
}

.pk-admin .pka-opcion {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    border: 1px solid var(--pka-linea);
    border-radius: var(--pka-r);
    padding: 12px 12px 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}

.pk-admin .pka-opcion:hover {
    border-color: rgba(10,132,255,.45);
    transform: translateY(-2px);
    box-shadow: var(--pka-sombra);
}

.pk-admin .pka-opcion.activo {
    border-color: var(--pka-azul);
    box-shadow: 0 0 0 3px rgba(10,132,255,.14);
}

.pk-admin .pka-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pk-admin .pka-opcion-cab {
    display: flex;
    align-items: center;
    margin: 12px 4px 5px;
}

.pk-admin .pka-opcion-cab b {
    font-size: 15px;
    font-weight: 600;
    color: var(--pka-tinta);
    margin-left: 9px;
}

.pk-admin .pka-marca {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(11,27,52,.22);
    position: relative;
    transition: border-color .18s ease;
}

.pk-admin .pka-opcion.activo .pka-marca { border-color: var(--pka-azul); }

.pk-admin .pka-opcion.activo .pka-marca::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pka-azul);
}

.pk-admin .pka-opcion-desc {
    font-size: 12.5px;
    color: var(--pka-gris);
    line-height: 1.5;
    margin: 0 4px;
}

.pk-admin .pka-etiqueta-activa {
    display: inline-block;
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pka-verde-osc);
    background: rgba(48,209,88,.13);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* ---------- Miniaturas de las plantillas ----------
   Insinuan como se ve cada portal SIN una sola imagen: son cajas y lineas de
   colores. Asi no hay capturas que se queden viejas cuando una plantilla
   cambie, ni archivos que subir al servidor. */

.pk-admin .pka-mini {
    position: relative;
    overflow: hidden;
    height: 122px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.pk-admin .pka-mini-card {
    position: relative;
    z-index: 2;
    width: 60%;
    border-radius: 7px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
}

.pk-admin .pka-mini-logo {
    height: 9px;
    width: 46%;
    border-radius: 3px;
    margin-bottom: 8px;
}

.pk-admin .pka-mini-linea {
    height: 7px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.pk-admin .pka-mini-linea--corta { width: 62%; }

.pk-admin .pka-mini-boton {
    height: 9px;
    width: 55%;
    border-radius: 999px;
    margin-top: 3px;
}

/* Clasico: tarjeta blanca sobre el degradado morado y azul de siempre */

.pk-admin .pka-mini--clasico { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
.pk-admin .pka-mini--clasico .pka-mini-card { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.pk-admin .pka-mini--clasico .pka-mini-logo { background: #6a11cb; }
.pk-admin .pka-mini--clasico .pka-mini-linea { background: #E4E7EE; }
.pk-admin .pka-mini--clasico .pka-mini-boton { background: #2575fc; }

/* Aurora: vidrio esmerilado y luces de color */

.pk-admin .pka-mini--aurora { background: linear-gradient(135deg, #3b1c73 0%, #5b3cc4 55%, #1d6fa5 100%); }

.pk-admin .pka-mini-blob {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(13px);
    opacity: .85;
}

.pk-admin .pka-mini-blob--a { width: 74px; height: 74px; background: #22d3ee; top: -22px; left: -18px; }
.pk-admin .pka-mini-blob--b { width: 66px; height: 66px; background: #e879f9; bottom: -24px; right: -16px; }

.pk-admin .pka-mini--aurora .pka-mini-card {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.pk-admin .pka-mini--aurora .pka-mini-logo { background: rgba(255,255,255,.92); }
.pk-admin .pka-mini--aurora .pka-mini-linea { background: rgba(255,255,255,.42); }
.pk-admin .pka-mini--aurora .pka-mini-boton { background: #22d3ee; }

/* Corporativo: dos columnas, la marca a la izquierda y el acceso a la derecha */

.pk-admin .pka-mini--corporativo { background: #fff; padding: 0; align-items: stretch; }

.pk-admin .pka-mini-panel {
    flex: 0 0 42%;
    background: linear-gradient(160deg, #1f3b57 0%, #2f5d8a 100%);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pk-admin .pka-mini-panel .pka-mini-logo { background: rgba(255,255,255,.94); width: 62%; }
.pk-admin .pka-mini-panel .pka-mini-linea { background: rgba(255,255,255,.38); }

.pk-admin .pka-mini--corporativo .pka-mini-card {
    width: auto;
    flex: 1;
    justify-content: center;
    padding: 14px;
    background: #fff;
}

.pk-admin .pka-mini--corporativo .pka-mini-card .pka-mini-linea { background: #E4E7EE; }
.pk-admin .pka-mini--corporativo .pka-mini-boton { background: #2f5d8a; width: 70%; }

/* Minimal: fondo claro, todo centrado y sin tarjeta */

.pk-admin .pka-mini--minimal { background: #F7F8FC; border: 1px solid #E3E7EF; }

.pk-admin .pka-mini--minimal .pka-mini-card {
    width: 66%;
    background: none;
    box-shadow: none;
    align-items: center;
    padding: 0;
}

.pk-admin .pka-mini--minimal .pka-mini-logo { background: #1F2430; height: 11px; width: 54%; }

.pk-admin .pka-mini--minimal .pka-mini-linea {
    background: #fff;
    border: 1px solid #D8DEE9;
    width: 100%;
    height: 9px;
}

.pk-admin .pka-mini--minimal .pka-mini-boton { background: #1F2430; width: 48%; }

/* ---------- Etiquetas de estado ---------- */

.pk-admin .pka-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pk-admin .pka-chip i { margin-right: 6px; }
.pk-admin .pka-chip--verde { background: rgba(48,209,88,.13); color: var(--pka-verde-osc); }
.pk-admin .pka-chip--ambar { background: rgba(255,159,10,.14); color: var(--pka-ambar-osc); }
.pk-admin .pka-chip--gris { background: rgba(138,143,152,.12); color: var(--pka-tinta-2); }

/* ---------- Vista previa del boton del aviso ---------- */

.pk-admin .pka-previa {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--pka-r-sm);
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-admin .pka-previa-boton {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.42);
    color: #fff;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}