@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════
   VARIABLES — colores oficiales UTyPSG
   Verde: #009c86  |  Oro: #c9922a
════════════════════════════════════════════ */
:root {
    /* Brand — verde oficial UTyPSG */
    --brand:          #009c86;
    --brand-dark:     #007a6a;
    --brand-darker:   #005a4e;
    --brand-light:    #e0f5f2;
    --brand-glow:     rgba(0,156,134,.18);

    /* Panel derecho — degradado verde oscuro institucional */
    --panel-top:      #006e62;
    --panel-mid:      #003d36;
    --panel-bot:      #002520;

    /* Fondo de página */
    --bg:             #d4dedd;

    /* Superficie form */
    --surface:        #ffffff;
    --surface-2:      #f0faf9;
    --border:         #c8dedd;
    --border-focus:   #009c86;

    /* Texto */
    --text-1:         #0d1f1c;
    --text-2:         #1a3d37;
    --text-3:         #4a7a73;
    --text-label:     #1a3d37;

    /* Semantic / toast */
    --error:          #e5484d;
    --error-lt:       #fef2f2;
    --error-bdr:      #fecaca;
    --warn:           #f59e0b;
    --warn-lt:        #fffbeb;
    --warn-bdr:       #fde68a;
    --warn-dk:        #92400e;
    --info:           #3b82f6;
    --info-lt:        #eff6ff;
    --info-bdr:       #bfdbfe;
    --info-dk:        #1e3a5f;

    /* Alias toast */
    --log-danger:      var(--error);
    --log-danger-lt:   var(--error-lt);
    --log-danger-bdr:  var(--error-bdr);
    --log-danger-dk:   #991b1b;
    --log-warn:        var(--warn);
    --log-warn-lt:     var(--warn-lt);
    --log-warn-bdr:    var(--warn-bdr);
    --log-warn-dk:     var(--warn-dk);
    --log-primary:     var(--brand);
    --log-primary-lt:  var(--brand-light);
    --log-primary-bdr: rgba(0,156,134,.25);
    --log-primary-dk:  var(--brand-darker);
    --log-text1:       var(--text-1);
    --log-text2:       var(--text-2);
    --log-text3:       var(--text-3);
    --log-font:        'Outfit', sans-serif;
    --log-mono:        'JetBrains Mono', monospace;
    --log-rad:         10px;
    --log-rad-sm:      7px;
    --log-trans:       all .22s cubic-bezier(.4,0,.2,1);

    --font:       'Outfit', sans-serif;
    --rad-sm:     6px;
    --rad:        12px;
    --rad-lg:     18px;
    --rad-card:   20px;
    --shadow-lg:  0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10);
    --ease:       cubic-bezier(.4,0,.2,1);
    --trans:      all .2s var(--ease);
}

/* ════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
*::selection { background:var(--brand); color:#fff; }
html { height:100%; }

body {
    font-family: var(--font);
    min-height: 100%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

#particle-canvas {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
}

.logo        { display:none !important; }
#logo__utpsg { display:none !important; }

/* ════════════════════════════════════════════
   CARD  (split 50/50)
════════════════════════════════════════════ */
.form-wrapper {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 58fr 42fr;
    width: min(860px, 96vw);
    max-height: 90vh;
    border-radius: var(--rad-card);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: cardIn .4s var(--ease) both;
}
@keyframes cardIn {
    from { opacity:0; transform:translateY(20px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ════════════════════════════════════════════
   FORM SIDE
════════════════════════════════════════════ */
.form-side {
    background: var(--surface);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
    max-height: 90vh;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    order: 1; /* formulario a la izquierda */
}
.form-side::-webkit-scrollbar { width:4px; }
.form-side::-webkit-scrollbar-track { background:transparent; }
.form-side::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

.my-form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    width: 100%;
    max-width: 370px;
    padding: 2rem 2.25rem 2.25rem;
}

/* ── Logo SAMS ── */
.form-logo {
    display: flex; flex-direction: column;
    align-items: center; gap: .3rem;
    margin-bottom: .1rem;
}
.form-logo img {
    width: clamp(48px, 7vw, 62px); height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.form-logo-name {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .2em; color: var(--text-2);
    text-transform: uppercase;
}
.form-logo-sub {
    font-size: .58rem; letter-spacing: .1em;
    color: var(--text-3); text-transform: uppercase;
    margin-top: -.15rem;
}

.form-welcome-row { display:none; }
.cont-mask        { display:none; }

/* ── Título de sección del formulario ── */
.form-heading {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border);
}
.form-heading h2 {
    font-size: 1.28rem; font-weight: 700;
    color: var(--text-1); letter-spacing: -.025em;
    margin: 0 0 .18rem; line-height: 1.2;
}
.form-heading small {
    font-size: .68rem; color: var(--text-3);
    letter-spacing: .01em; display: block;
}

/* ── Mascot banner pill ── */
.mascot-banner {
    display: flex; align-items: center; gap: .65rem;
    background: var(--brand-light);
    border: 1px solid rgba(0,156,134,.22);
    border-radius: 12px;
    padding: .55rem .85rem;
}
.mascot-banner img.mascota {
    width: 36px; height: 36px; object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,156,134,.25));
    flex-shrink: 0;
}
.mascot-banner-text strong {
    display: block; font-size: .78rem; font-weight: 700;
    color: var(--brand-darker); line-height: 1.2;
}
.mascot-banner-text span {
    font-size: .69rem; color: var(--brand-dark); font-weight: 400;
}

/* ── Fields ── */
.text-field { display:flex; flex-direction:column; gap:.28rem; }
.text-field label {
    font-size: .63rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--text-label);
    transition: color .2s var(--ease);
}
/* Cuando el campo está activo — label e ícono adoptan el color brand */
.text-field:focus-within label { color: var(--brand); }
.text-field:focus-within .field-icon { color: var(--brand); }

.error-message { display:none; }
.text-field input:user-invalid ~ .error-message {
    display:block; font-size:.72rem; color:var(--error); margin-top:.15rem;
}
.username__input { text-transform:uppercase; letter-spacing:.04em; }
.username__input::placeholder { text-transform:none; letter-spacing:0; }

.input-icon-wrap { position:relative; display:flex; align-items:center; }
.input-icon-wrap .field-icon {
    position:absolute; left:.85rem;
    color:var(--text-3); font-size:.82rem;
    pointer-events:none; display:flex; z-index:1;
}
.input-icon-wrap input {
    width:100%; border:1.5px solid var(--border);
    border-radius:8px; outline:none;
    background:var(--surface-2); color:var(--text-1);
    height:44px; padding-left:2.35rem; padding-right:1rem;
    font-family:var(--font); font-size:.875rem;
    transition:var(--trans);
}
.input-icon-wrap input::placeholder { color:var(--text-3); }
.input-icon-wrap input:focus {
    border-color:var(--brand);
    background:var(--surface);
    box-shadow:0 0 0 3px var(--brand-glow);
}

.password-wrapper { position:relative; display:flex; align-items:center; }
.password-wrapper .field-icon {
    position:absolute; left:.85rem;
    color:var(--text-3); font-size:.82rem;
    pointer-events:none; display:flex; z-index:1;
}
.password-wrapper input {
    width:100%; border:1.5px solid var(--border);
    border-radius:8px; outline:none;
    background:var(--surface-2); color:var(--text-1);
    height:44px; padding-left:2.35rem; padding-right:2.8rem;
    font-family:var(--font); font-size:.875rem;
    transition:var(--trans);
}
.password-wrapper input:focus {
    border-color:var(--brand);
    background:var(--surface);
    box-shadow:0 0 0 3px var(--brand-glow);
}
.toggle-password {
    position:absolute; right:.7rem;
    background:none; border:none; cursor:pointer; padding:.25rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-3); border-radius:var(--rad-sm);
    transition:var(--trans); outline:none; line-height:0; z-index:1;
}
.toggle-password:hover { color:var(--brand); background:var(--brand-glow); }
.toggle-password:focus-visible { box-shadow:0 0 0 2px var(--brand-glow); }
/* Autocomplete — mantener estilo del formulario en desktop */
.input-icon-wrap input:-webkit-autofill,
.input-icon-wrap input:-webkit-autofill:hover,
.input-icon-wrap input:-webkit-autofill:focus,
.password-wrapper input:-webkit-autofill,
.password-wrapper input:-webkit-autofill:hover,
.password-wrapper input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    -webkit-text-fill-color: var(--text-1) !important;
    border-color: var(--border) !important;
    transition: background-color 9999s ease, color 9999s ease;
}

/* Ocultar ojo nativo del navegador (Edge, Chrome, Safari) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display:none; }
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button { display:none !important; visibility:hidden; pointer-events:none; }

/* ── Button ── */
.my-form__button {
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    background: linear-gradient(135deg, #009c86 0%, #005a4e 100%);
    color:#fff; border:none; outline:none;
    border-radius:var(--rad); height:48px;
    font-family:var(--font); font-size:.78rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    cursor:pointer; width:100%;
    box-shadow:0 4px 18px rgba(0,156,134,.45);
    transition:var(--trans);
    position:relative; overflow:hidden;
}
/* Línea dorada decorativa inferior */
.my-form__button::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, #c9922a, transparent);
    opacity:.55;
}
.my-form__button::before {
    display: none; /* flecha eliminada — solo visible como spinner en estado .loading */
}
.my-form__button:hover:not(:disabled) {
    background:linear-gradient(135deg, #00a892 0%, #007a6a 100%);
    box-shadow:0 6px 24px rgba(0,156,134,.52);
    transform:translateY(-1px);
}
/* .my-form__button:hover::before — eliminado junto con la flecha */
.my-form__button:active:not(:disabled) { transform:translateY(0); }
.my-form__button:disabled {
    background:#bfcecc !important; color:#8fa49f !important;
    cursor:not-allowed; box-shadow:none; transform:none;
}

/* ── Actions / links ── */
.my-form__actions { display:flex; flex-direction:column; gap:.3rem; margin-top:-.1rem; }
.my-form__row { display:flex; justify-content:center; gap:1rem; }
.my-form__actions a {
    color:var(--text-3); font-size:.72rem;
    text-decoration:none; transition:color .2s;
}
.my-form__actions a:hover { color:var(--brand); text-decoration:underline; }

/* ════════════════════════════════════════════
   INFO SIDE — panel derecho
════════════════════════════════════════════ */
.info-side {
    position:relative;
    display:flex; justify-content:center; align-items:center;
    background:
        radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(160deg, var(--panel-top) 0%, var(--panel-mid) 55%, var(--panel-bot) 100%);
    background-size: 22px 22px, 100% 100%;
    overflow:hidden;
    padding:2rem 1.75rem;
    order: 2; /* panel verde a la derecha */
    box-shadow: inset 8px 0 24px -4px rgba(0,0,0,.32); /* sombra izquierda — profundidad entre paneles */
}
.info-side::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,146,42,.25) 0%, transparent 70%);
    pointer-events:none;
}
.info-side::after {
    content:''; position:absolute; bottom:-60px; left:-40px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,156,134,.18) 0%, transparent 70%);
    pointer-events:none;
}

.blockquote-wrapper {
    position:relative; z-index:1;
    display:flex; flex-direction:column;
    align-items:center; gap:.85rem;
    width:100%; max-width:280px; text-align:center;
    margin-top: -3.5rem; /* subir contenido sobre el centro */
}
.info-header-right {
    margin-top: 1rem; /* separar "Acceso para" del logo */
    width: 100%;
}
.blockquote-wrapper > h1 { display:none; }

.blockquote-wrapper > img {
    width:100%; max-width:148px;
    filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.3));
}

.info-location {
    font-size:.61rem; font-weight:700;
    letter-spacing:.2em; text-transform:uppercase;
    color:#c9922a;
}
.info-divider {
    display:flex; align-items:center; gap:.5rem; width:100%;
}
.info-divider::before, .info-divider::after {
    content:''; flex:1; height:1px; background:rgba(240,184,64,.25);
}
.info-divider span {
    font-size:.57rem; letter-spacing:.15em; text-transform:uppercase;
    color:rgba(255,255,255,.30); white-space:nowrap;
}
.info-roles {
    margin-top: 1rem;
    display:flex;
    flex-wrap:wrap;
    gap:.4rem; 
    justify-content:center;
    margin-bottom: .7rem; }
.info-role-badge {
    display:flex; align-items:center; gap:.35rem;
    border:1px solid rgba(240,184,64,.3); border-radius:30px;
    padding:.28rem .75rem;
    font-size:.63rem; font-weight:600;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.06); letter-spacing:.02em;
}
.info-role-badge::before {
    content:''; width:6px; height:6px;
    border-radius:50%; background:#c9922a; flex-shrink:0;
}
.info-footer {
    font-size:.57rem; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(255,255,255,.22);
    margin-top:.1rem;
}
.info-footer strong { color:rgba(240,184,64,.55); font-weight:700; }

.social-links {
    display:flex; justify-content:center; gap:.5rem;
    list-style:none; flex-wrap:wrap; margin:0; padding:0;
}

/* ════════════════════════════════════════════
   CAPTCHA
════════════════════════════════════════════ */
.log-captcha {
    border-radius:var(--log-rad); padding:9px 12px;
    background:var(--log-primary-lt); border:1px solid var(--log-primary-bdr);
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:9px;
    animation:logToastIn .28s ease both;
}
.log-captcha::before {
    content:''; position:absolute; top:0; left:0;
    width:3px; height:100%; background:var(--log-primary);
}
.log-captcha-icon {
    width:24px; height:24px; border-radius:6px; flex-shrink:0;
    background:rgba(0,156,134,.15);
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; color:var(--log-primary);
}
.log-captcha-body { flex:1; display:flex; flex-direction:column; gap:4px; }
.log-captcha-label { font-size:.67rem; font-weight:700; color:var(--log-primary-dk); margin:0; letter-spacing:.03em; text-transform:uppercase; }
.log-captcha-row { display:flex; align-items:center; gap:8px; }
.log-captcha-question {
    font-size:.9rem; font-weight:700; color:var(--log-text1);
    font-family:var(--font); letter-spacing:.01em; white-space:nowrap;
}
.log-captcha-sep { font-size:.8rem; color:var(--log-text3); font-weight:500; flex-shrink:0; }
.log-captcha-input {
    width:90px; flex-shrink:0;
    border:1.5px solid var(--log-primary-bdr); border-radius:6px;
    padding:5px 10px; font-family:var(--font); font-size:.85rem;
    font-weight:600; color:var(--log-text1); background:#fff;
    outline:none; transition:var(--log-trans); text-indent:0;
}
.log-captcha-input:focus {
    border-color:var(--log-primary);
    box-shadow:0 0 0 3px rgba(0,156,134,.12);
}

/* ════════════════════════════════════════════
   TOASTS
════════════════════════════════════════════ */
#log-toast-container {
    position:fixed; top:16px; left:50%;
    transform:translateX(-50%);
    z-index:9999; width:380px;
    max-width:calc(100vw - 24px);
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
}
.log-toast {
    display:flex; align-items:center; gap:10px;
    border-radius:var(--log-rad); padding:10px 14px;
    border:1px solid transparent;
    position:relative; overflow:hidden;
    pointer-events:all;
    box-shadow:0 4px 16px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.06);
    animation:logToastIn .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes logToastIn {
    from { opacity:0; transform:translateY(-10px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.log-toast.toast-out { animation:logToastOut .22s ease both; }
@keyframes logToastOut {
    from { opacity:1; transform:translateY(0) scale(1); }
    to   { opacity:0; transform:translateY(-8px) scale(.97); }
}
.log-toast::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; }
.log-toast--error    { background:var(--log-danger-lt); border-color:var(--log-danger-bdr); }
.log-toast--error::before    { background:var(--log-danger); }
.log-toast--blocked  { background:var(--log-warn-lt);   border-color:var(--log-warn-bdr); }
.log-toast--blocked::before  { background:var(--log-warn); }
.log-toast--unlocked { background:#f0faf9; border-color:rgba(0,156,134,.3); }
.log-toast--unlocked::before { background:var(--log-primary); }
.log-toast--info     { background:var(--info-lt); border-color:var(--info-bdr); }
.log-toast--info::before     { background:var(--info); }

.log-toast-icon {
    font-size:.82rem; flex-shrink:0;
    width:28px; height:28px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
}
.log-toast--error   .log-toast-icon { background:rgba(239,68,68,.12);  color:var(--log-danger); }
.log-toast--blocked .log-toast-icon { background:rgba(245,158,11,.13); color:var(--log-warn); }
.log-toast--unlocked .log-toast-icon{ background:rgba(0,156,134,.13);  color:var(--log-primary); }
.log-toast--info    .log-toast-icon { background:rgba(59,130,246,.12); color:var(--info); }

.log-toast-content {
    flex:1; min-width:0;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.log-toast-title { font-size:.78rem; font-weight:700; white-space:nowrap; }
.log-toast-sep   { font-size:.68rem; color:var(--log-text3); }
.log-toast-body  { font-size:.74rem; opacity:.88; }
.log-toast--error   .log-toast-title { color:var(--log-danger-dk); }
.log-toast--blocked .log-toast-title { color:var(--log-warn-dk); }
.log-toast--unlocked .log-toast-title{ color:#005a4e; }
.log-toast--unlocked .log-toast-body { color:#1a3d37; opacity:1; }
.log-toast--info    .log-toast-title { color:var(--info-dk); }
.log-toast--info    .log-toast-body  { color:#3b5998; opacity:.9; }
.log-toast-timer {
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(245,158,11,.18); color:#92400e;
    border-radius:20px; padding:1px 8px;
    font-size:.68rem; font-weight:700; font-family:var(--log-mono);
}
.log-toast-timer i { font-size:.55rem; }

/* ════════════════════════════════════════════
   NOTICE + STRENGTH  (cambiar_password)
════════════════════════════════════════════ */
.pwd-notice {
    display:flex; align-items:flex-start; gap:9px;
    background:#fffbeb; border:1px solid rgba(245,158,11,.35);
    border-left:3px solid #f59e0b;
    border-radius:var(--rad); padding:9px 12px;
    font-size:.73rem; color:#78350f;
}
.pwd-notice i { color:#b45309; margin-top:1px; flex-shrink:0; }
.pwd-notice strong { display:block; color:#92400e; margin-bottom:1px; font-size:.74rem; }

.pwd-strength { display:flex; flex-direction:column; gap:4px; }
.pwd-strength-bar-wrap { height:4px; background:#e5e7eb; border-radius:10px; overflow:hidden; }
.pwd-strength-bar { height:100%; width:0%; border-radius:10px; transition:width .35s ease,background .35s ease; }
.pwd-strength-label { font-size:.65rem; font-weight:700; color:#9ca3af; letter-spacing:.3px; transition:color .3s; }
.str-0 { width:0%;   background:transparent; }
.str-1 { width:25%;  background:#ef4444; }
.str-2 { width:50%;  background:#f59e0b; }
.str-3 { width:75%;  background:#3b82f6; }
.str-4 { width:100%; background:#10b981; }
.str-label-0 { color:#9ca3af; }
.str-label-1 { color:#ef4444; }
.str-label-2 { color:#f59e0b; }
.str-label-3 { color:#3b82f6; }
.str-label-4 { color:#10b981; }

.pwd-match { font-size:.68rem; font-weight:600; display:flex; align-items:center; gap:5px; min-height:15px; }
.pwd-match.ok    { color:#10b981; }
.pwd-match.error { color:#ef4444; }

#login-submit-btn:disabled {
    background:#bfcecc !important; cursor:not-allowed;
    opacity:.8; box-shadow:none; pointer-events:none;
}
.log-toast--unlocked { background:#f0faf9 !important; border-color:rgba(0,156,134,.3) !important; }
.log-toast--unlocked::before { background:#009c86 !important; }
.log-toast--unlocked .log-toast-icon { background:rgba(0,156,134,.13) !important; color:#009c86 !important; }
.log-toast--unlocked .log-toast-title { color:#005a4e !important; }
.log-toast--unlocked .log-toast-body  { color:#1a3d37 !important; }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (min-width:1440px) {
    .form-wrapper { width:min(920px,93vw); }
}
@media (min-width:1280px) and (max-width:1439px) {
    .form-wrapper { width:min(860px,94vw); }
}
@media (min-width:1024px) and (max-width:1279px) {
    .form-wrapper { width:min(780px,95vw); }
    .my-form { padding:1.75rem 1.75rem 2rem; gap:.78rem; }
}
@media (min-width:768px) and (max-width:1023px) {
    body { overflow:auto; align-items:flex-start; padding:2rem 0; }
    .form-wrapper { width:min(740px,96vw); max-height:none; }
    .form-side { max-height:none; overflow-y:visible; }
    .my-form { padding:1.75rem 1.75rem 2rem; gap:.78rem; }
}
/* ═══════════════════════════════════════════════════════════
   SAMS · UTyPSG — MEJORAS MÓVIL v2
   Cambios vs v1:
   • Íconos sociales → blancos
   • Todo el texto → blanco (excepto la palabra "SAMS")
   • Difuminados dorados eliminados (solo bordes sólidos)
   • Marca de agua (venado) → textura de líneas diagonales
   ═══════════════════════════════════════════════════════════ */

.mob-login { display: none; }

@media (max-width:767px) {

    html, body {
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        background: #001610;
    }
    body { display: block; align-items: unset; justify-content: unset; }
    #particle-canvas { display: none; }
    .form-wrapper { display: none !important; }

    /* ── Contenedor principal ── */
    .mob-login {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 1;
        background: linear-gradient(168deg, #043d2c 0%, #01251a 35%, #001610 100%);
    }

    /* TEXTURA DE LÍNEAS DIAGONALES — casi imperceptible */
    .mob-login::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20375%20812%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22bg%22%20cx%3D%2248%25%22%20cy%3D%2242%25%22%20r%3D%2268%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300503c%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23002d20%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23001610%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width%3D%22375%22%20height%3D%22812%22%20fill%3D%22url(%23bg)%22/%3E%3Cpath%20d%3D%22M%20375,0%20L%20230,0%20C%20255,0%20295,18%20308,52%20C%20322,88%20312,118%20340,108%20C%20362,100%20375,72%20375,44%20Z%22%20fill%3D%22%23001e12%22%20opacity%3D%220.85%22/%3E%3Cpath%20d%3D%22M%200,812%20L%200,672%20C%200,696%2018,728%2050,742%20C%2084,758%20108,742%2096,712%20C%2084,682%2056,668%2030,680%20C%2010,690%200,712%200,812%20Z%22%20fill%3D%22%23001e12%22%20opacity%3D%220.85%22/%3E%3Cpath%20d%3D%22M%20-12,44%20C%2065,6%20162,60%20148,152%20C%20134,244%2040,266%202,312%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.072%22/%3E%3Cpath%20d%3D%22M%20-12,74%20C%2075,32%20178,84%20164,176%20C%20150,268%2054,290%2010,340%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.063%22/%3E%3Cpath%20d%3D%22M%20-12,104%20C%2085,58%20194,108%20180,200%20C%20166,292%2068,314%2018,368%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.054%22/%3E%3Cpath%20d%3D%22M%20-12,134%20C%2095,84%20210,132%20196,224%20C%20182,316%2082,338%2026,396%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M%20-12,164%20C%20105,110%20226,156%20212,248%20C%20198,340%2096,362%2034,424%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.036%22/%3E%3Cpath%20d%3D%22M%20-12,194%20C%20115,136%20242,180%20228,272%20C%20214,364%20110,386%2042,452%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.027%22/%3E%3Cpath%20d%3D%22M%20395,618%20C%20318,664%20270,748%20288,832%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.063%22/%3E%3Cpath%20d%3D%22M%20395,650%20C%20313,698%20262,784%20280,868%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.054%22/%3E%3Cpath%20d%3D%22M%20395,682%20C%20308,732%20254,820%20272,904%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M%20395,714%20C%20303,766%20246,856%20264,940%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.036%22/%3E%3Cpath%20d%3D%22M%20395,746%20C%20298,800%20238,892%20256,976%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.1%22%20opacity%3D%220.027%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22226%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22226%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22226%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22226%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22242%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22242%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22242%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22242%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22258%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22258%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22258%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22258%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22274%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22274%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22274%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22274%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22290%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22290%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22290%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22290%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%22572%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22572%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22572%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22572%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%22588%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22588%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22588%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22588%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%22604%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22604%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22604%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22604%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%22620%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22620%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22620%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22620%22%20r%3D%221.6%22%20fill%3D%22white%22%20opacity%3D%220.20%22/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
        pointer-events: none;
        z-index: 0;
    }

    /* SIN glow dorado difuminado — ::after eliminado */
    .mob-login::after { display: none; }

    /* Todo el contenido encima de la textura */
    .mob-login > * { position: relative; z-index: 1; }

    /* ════════════════════════════════
       LOGOS TOP
    ════════════════════════════════ */
    .mob-logos-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 1.4rem 1.2rem;
        gap: 1rem;
    }
    .mob-brand-left { display: flex; align-items: center; gap: .85rem; flex: 1; }
    .mob-sams-iso {
        width: 58px; height: 58px;
        object-fit: contain; flex-shrink: 0;
        /* Sin glow difuminado — solo drop-shadow sutil */
        filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
    }
    .mob-brand-texts { display: flex; flex-direction: column; gap: 3px; }
    .mob-brand-name {
        font-size: 1rem; font-weight: 800;
        color: #ffffff;
        letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    }
    /* TEXTO BLANCO — "Sistema de Administración" / "Primer acceso" / etc. */
    .mob-brand-sub {
        font-size: .6rem; font-weight: 600;
        color: #ffffff;
        letter-spacing: .12em; text-transform: uppercase;
        opacity: .75;
    }
    .mob-utp-logo {
        height: 52px; width: auto; flex-shrink: 0;
        filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
    }

    /* ════════════════════════════════
       SEPARADOR GUERRERO · MÉXICO
    ════════════════════════════════ */
    .mob-tagline-sep {
        display: flex; align-items: center; gap: .7rem;
        padding: 0 1.4rem; margin-bottom: 1.2rem;
    }
    .mob-tagline-sep::before,
    .mob-tagline-sep::after {
        content: ''; flex: 1; height: 1px;
        background: rgba(255,255,255,.18);
    }
    /* TEXTO BLANCO */
    .mob-tagline-sep span {
        font-size: .62rem; font-weight: 700;
        letter-spacing: .2em; text-transform: uppercase;
        color: #ffffff;
        opacity: .7;
        white-space: nowrap;
    }

    /* ════════════════════════════════
       MASCOTA
    ════════════════════════════════ */
    .mob-mascot {
        display: flex; align-items: center; gap: 1rem;
        background: rgba(255,255,255,.04);
        border: 1.5px solid rgba(201,146,42,.6);
        border-radius: 16px;
        padding: .9rem 1.15rem;
        margin: 0 1.4rem 1.4rem;
        /* SIN box-shadow difuminado */
    }
    .mob-mascot-img {
        width: 60px; height: 60px;
        object-fit: contain; flex-shrink: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: 3px solid #c9922a;
        padding: 2px;
        /* Solo borde sólido, sin glow */
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
    }
    .mob-mascot-text { display: flex; flex-direction: column; gap: 4px; }
    /* TEXTO BLANCO */
    .mob-mascot-text strong { font-size: .97rem; font-weight: 700; color: #ffffff; line-height: 1.2; }
    .mob-mascot-text span   { font-size: .73rem; color: rgba(255,255,255,.75); line-height: 1.45; }

    /* ════════════════════════════════
       FORMULARIO
    ════════════════════════════════ */
    .mob-form {
        display: flex; flex-direction: column;
        gap: 1rem;
        padding: 1.4rem;
        margin: 0 1.4rem 1rem;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 20px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .mob-field { display: flex; flex-direction: column; gap: .4rem; }
    /* TEXTO BLANCO — etiquetas */
    .mob-field label {
        font-size: .65rem; font-weight: 700;
        letter-spacing: .16em; text-transform: uppercase;
        color: #ffffff;
        opacity: .8;
    }
    .mob-input-wrap { position: relative; display: flex; align-items: center; }
    /* ÍCONO BLANCO */
    .mob-icon {
        position: absolute; left: 1rem;
        color: rgba(255,255,255,.6); font-size: .9rem;
        pointer-events: none; display: flex; z-index: 1;
    }

    /* CAMPOS — borde dorado sólido, sin glow difuminado */
    .mob-input {
        width: 100%; height: 54px;
        border: 1.5px solid rgba(201,146,42,.55);
        border-radius: 14px;
        background: rgba(0,0,0,.28);
        color: #ffffff;
        padding-left: 2.65rem; padding-right: 1rem;
        font-family: var(--font); font-size: 1rem;
        outline: none;
        transition: border-color .22s, background .22s, box-shadow .22s;
    }
    .mob-input::placeholder { color: rgba(255,255,255,.35); }
    .mob-input:focus {
        border-color: #c9922a;
        background: rgba(255,255,255,.05);
        /* Solo ring sólido, sin blur difuminado */
        box-shadow: 0 0 0 2px rgba(201,146,42,.35);
    }
    /* Autocomplete oscuro — evitar el fondo blanco del navegador */
    .mob-input:-webkit-autofill,
    .mob-input:-webkit-autofill:hover,
    .mob-input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px rgba(0,20,15,.88) inset !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: rgba(201,146,42,.55) !important;
        caret-color: #ffffff;
        transition: background-color 9999s ease, color 9999s ease;
    }
    .mob-pwd-wrap .mob-input { padding-right: 3.2rem; }
    /* ÍCONO OJO BLANCO */
    .mob-toggle-pwd {
        position: absolute; right: .9rem;
        background: none; border: none; cursor: pointer; padding: .25rem;
        display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,.55);
        transition: color .2s; outline: none; z-index: 1; border-radius: 6px;
    }
    .mob-toggle-pwd:hover { color: #ffffff; }

    /* ════════════════════════════════
       BOTÓN PRINCIPAL
    ════════════════════════════════ */
    .mob-btn {
        display: flex; align-items: center; justify-content: flex-start;
        width: 100%; height: 58px; border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #d4a030 0%, #c9922a 55%, #a87520 100%);
        color: #fff; font-family: var(--font);
        cursor: pointer; overflow: hidden; padding: 0;
        /* Borde sólido dorado sin difuminado */
        box-shadow: 0 0 0 1.5px rgba(201,146,42,.8), 0 4px 12px rgba(0,0,0,.4);
        transition: all .22s var(--ease);
        position: relative; margin-top: .4rem;
    }
    /* Destello inferior sólido */
    .mob-btn::after {
        content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    }
    /* Caja del ícono */
    .mob-btn-icon {
        display: flex; align-items: center; justify-content: center;
        width: 58px; height: 100%;
        background: rgba(0,0,0,.22);
        border-right: 1px solid rgba(255,255,255,.15);
        flex-shrink: 0; font-size: 1.1rem;
    }
    .mob-btn-icon i { font-size: 1.1rem; }
    /* Texto del botón */
    .mob-btn-label {
        flex: 1; text-align: center;
        font-size: .82rem; font-weight: 800;
        letter-spacing: .18em; text-transform: uppercase;
        padding-right: 6px;
    }
    /* Hover — sin glow difuminado */
    .mob-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #e0a835 0%, #d4952e 55%, #b87f28 100%);
        box-shadow: 0 0 0 2px rgba(201,146,42,.9), 0 4px 16px rgba(0,0,0,.45);
        transform: translateY(-1px);
    }
    .mob-btn:active:not(:disabled) { transform: translateY(0); }
    .mob-btn:disabled {
        background: rgba(255,255,255,.07) !important;
        color: rgba(255,255,255,.22) !important;
        box-shadow: none !important; cursor: not-allowed;
    }
    .mob-btn:disabled .mob-btn-icon { background: rgba(0,0,0,.15); }

    /* Fallback HTML sin span */
    .mob-btn > i:first-child {
        width: 58px; height: 100%;
        background: rgba(0,0,0,.22);
        border-right: 1px solid rgba(255,255,255,.15);
        font-size: 1.1rem; padding: 0; border-radius: 0;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; margin-right: 0;
    }

    /* LINKS — TEXTO BLANCO */
    .mob-links { display: flex; justify-content: center; padding-bottom: .4rem; }
    .mob-links a {
        font-size: .74rem; color: rgba(255,255,255,.65);
        text-decoration: none; transition: color .2s;
    }
    .mob-links a:hover { color: #ffffff; text-decoration: underline; }

    /* Aviso primer acceso */
    .mob-notice {
        display: flex; align-items: flex-start; gap: .65rem;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(245,158,11,.28);
        border-left: 3px solid #f59e0b;
        border-radius: 12px; padding: .8rem .95rem;
        font-size: .71rem; color: rgba(255,255,255,.72); line-height: 1.48;
    }
    .mob-notice i { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
    /* TEXTO BLANCO en aviso */
    .mob-notice strong { display: block; color: #ffffff; margin-bottom: 2px; font-size: .74rem; }

    /* Barra de fortaleza */
    .mob-form .pwd-strength { margin-top: .3rem; }
    .mob-form .pwd-strength-bar-wrap { background: rgba(255,255,255,.08); }
    .mob-form .pwd-strength-label { color: rgba(255,255,255,.45); font-size: .63rem; }
    .mob-form .pwd-match { font-size: .67rem; margin-top: .15rem; }
    .mob-form .pwd-match.ok    { color: #34d399; }
    .mob-form .pwd-match.error { color: #f87171; }

    /* Captcha */
    .mob-form .log-captcha { background: rgba(255,255,255,.04); border-color: rgba(201,146,42,.3); }
    .mob-form .log-captcha::before { background: var(--brand); }
    .mob-form .log-captcha-label        { color: rgba(255,255,255,.55); }
    .mob-form .log-captcha-question     { color: #fff; }
    .mob-form .log-captcha-sep          { color: rgba(255,255,255,.4); }
    .mob-form .log-captcha-input        { background: rgba(255,255,255,.08); border-color: rgba(201,146,42,.4); color: #fff; }
    .mob-form .log-captcha-input::placeholder { color: rgba(255,255,255,.35); }
    .mob-form .log-captcha-input:focus  { border-color: #c9922a; box-shadow: 0 0 0 3px rgba(201,146,42,.18); }
    .mob-form .log-captcha-icon         { background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); }

    /* ════════════════════════════════
       SEPARADOR "ACCESO PARA"
    ════════════════════════════════ */
    .mob-roles-sep {
        display: flex; align-items: center; gap: .6rem;
        padding: 1.6rem 1.4rem .8rem;
    }
    .mob-roles-sep::before,
    .mob-roles-sep::after {
        content: ''; flex: 1; height: 1px;
        background: rgba(255,255,255,.15);
    }
    /* TEXTO BLANCO */
    .mob-roles-sep span {
        font-size: .58rem; font-weight: 700;
        letter-spacing: .15em; text-transform: uppercase;
        color: rgba(255,255,255,.55); white-space: nowrap;
    }

    /* ════════════════════════════════
       PILLS DE ROLES
    ════════════════════════════════ */
    .mob-roles-pills {
        display: flex; flex-wrap: wrap;
        justify-content: center; gap: .55rem; padding: 0 1.4rem;
    }
    .mob-role-pill {
        display: inline-flex; align-items: center; gap: .45rem;
        padding: .5rem 1.05rem; border-radius: 10px;
        background: rgba(255,255,255,.05);
        border: 1.5px solid rgba(201,146,42,.55);
        /* TEXTO BLANCO */
        color: rgba(255,255,255,.88);
        font-family: var(--font); font-size: .7rem; font-weight: 600;
        letter-spacing: .03em; transition: background .2s, border-color .2s;
    }
    .mob-role-pill:hover { background: rgba(255,255,255,.09); border-color: rgba(201,146,42,.85); }
    /* ÍCONO BLANCO en pills */
    .mob-role-pill i { font-size: .72rem; color: rgba(255,255,255,.7); }

    /* ════════════════════════════════
       FOOTER
    ════════════════════════════════ */
    .mob-bottom {
        display: flex; flex-direction: column;
        align-items: center; gap: .9rem;
        padding: 1.4rem 1.4rem max(2.2rem, calc(1rem + env(safe-area-inset-bottom)));
    }
    .mob-sams-tag {
        display: flex; align-items: center; gap: .6rem;
        width: 100%; justify-content: center;
        font-size: .58rem; letter-spacing: .12em;
        text-transform: uppercase;
        /* TEXTO BLANCO general del tag */
        color: rgba(255,255,255,.45); text-align: center;
    }
    .mob-sams-tag::before, .mob-sams-tag::after {
        content: ''; flex: 1; max-width: 50px; height: 1px;
        background: rgba(255,255,255,.15);
    }
    /* "SAMS" se mantiene dorado — única excepción */
    .mob-sams-tag strong { color: #c9922a; font-weight: 700; }

    /* ════════════════════════════════
       ÍCONOS SOCIALES — BLANCOS
    ════════════════════════════════ */
    .mob-socials {
        display: flex; align-items: center; gap: .7rem;
        list-style: none; margin: 0; padding: 0;
    }
    .mob-socials a {
        display: flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 14px;
        background: rgba(255,255,255,.06);
        /* Borde dorado sólido, sin difuminado */
        border: 1.5px solid rgba(201,146,42,.65);
        /* COLOR BLANCO */
        color: #ffffff;
        text-decoration: none;
        transition: all .22s var(--ease);
    }
    .mob-socials a:hover {
        background: rgba(255,255,255,.12);
        border-color: #c9922a;
        /* BLANCO en hover, sin glow */
        color: #ffffff;
        transform: translateY(-2px);
    }
    .mob-socials svg { width: 44%; height: 44%; stroke: currentColor; }
}

/* ════════════════════════════════════════════
   BOTÓN — barra de progreso al cargar
════════════════════════════════════════════ */
@keyframes btn-fill-progress {
    0%   { background-size:   0% 100%; }
    55%  { background-size:  72% 100%; }
    80%  { background-size:  90% 100%; }
    100% { background-size: 100% 100%; }
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Estado loading — desktop */
.my-form__button.loading {
    background-color: var(--brand-darker);
    background-image: linear-gradient(
        90deg,
        var(--brand-dark) 0%,
        var(--brand)      50%,
        #00c49a           80%,
        #00ddb0           100%
    );
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    animation: btn-fill-progress 3s cubic-bezier(.25,.46,.45,.94) forwards;
    cursor: wait;
    pointer-events: none;
}
/* Spinner — reemplaza la flecha → */
.my-form__button.loading::before {
    content: '';
    width: 15px; height: 15px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .75s linear infinite;
    flex-shrink: 0;
    display: inline-block;
    order: 0; /* spinner va antes del texto */
    margin-left: 0;
}
/* Estado loading — móvil */
.mob-btn.loading {
    background-color: #6b4a10;
    background-image: linear-gradient(
        90deg,
        #a87520 0%,
        #c9922a 50%,
        #e8ac3a 80%,
        #f5c040 100%
    );
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    animation: btn-fill-progress 3s cubic-bezier(.25,.46,.45,.94) forwards;
    cursor: wait;
    pointer-events: none;
}
.mob-btn.loading .mob-btn-icon i {
    animation: btn-spin .75s linear infinite;
    display: inline-block;
}

/* ════════════════════════════════════════════
   TOAST — botón de cierre ×
════════════════════════════════════════════ */
.log-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem .35rem;
    border-radius: 4px;
    opacity: .4;
    transition: opacity .18s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
    margin-top: -.05rem;
}
.log-toast-close:hover { opacity: .85; }

/* ── Extra small < 380px ── */
@media (max-width:379px) {
    .mob-logos-top   { padding: 1.5rem 1.1rem 1rem; }
    .mob-sams-iso    { width: 50px; height: 50px; }
    .mob-brand-name  { font-size: .88rem; }
    .mob-utp-logo    { height: 44px; }
    .mob-mascot      { margin: 0 1.1rem 1.1rem; padding: .75rem .95rem; }
    .mob-mascot-img  { width: 52px; height: 52px; }
    .mob-form        { padding: 1.1rem; margin: 0 1.1rem 1rem; gap: .85rem; }
    .mob-input       { height: 50px; font-size: .95rem; }
    .mob-btn         { height: 54px; }
    .mob-btn-icon    { width: 52px; }
    .mob-btn-label   { font-size: .75rem; letter-spacing: .14em; }
    .mob-roles-sep, .mob-roles-pills, .mob-bottom { padding-left: 1.1rem; padding-right: 1.1rem; }
    .mob-role-pill   { font-size: .64rem; padding: .4rem .85rem; }
    .mob-socials a   { width: 44px; height: 44px; border-radius: 12px; }
    .mob-tagline-sep { padding: 0 1.1rem; }
}