/* tecnufact · login — estilos de la pantalla de acceso.
   Va como <link> en el <head> (fuera de #app) porque Vue elimina los <style>
   embebidos dentro de su punto de montaje. */

.tf-login { position: fixed; inset: 0; z-index: 1000;
    display: grid; grid-template-columns: 1.05fr 1fr; overflow: auto;
    background: #FAF9FC;
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1D1430; }

.tf-login__brand { position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #6D28D9 0%, #3B0D8F 100%);
    padding: 56px 52px; display: flex; flex-direction: column; justify-content: space-between; }
.tf-login__brand::after { content: ""; position: absolute; right: -80px; bottom: -100px;
    width: 460px; height: 460px;
    background: url('/tecnu/isotipo-u-blanca.png') no-repeat center/contain;
    opacity: .08; pointer-events: none; }
.tf-login__mark { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.tf-login__mark img { width: 52px; height: 52px; }
.tf-login__wordmark { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: 26px; line-height: 1; color: #fff; }
.tf-login__wordmark small { display: block; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.tf-login__pitch { max-width: 32ch; position: relative; z-index: 1; }
.tf-login__pitch h1 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; }
.tf-login__pitch p { font-size: 15px; opacity: .85; margin: 0; color: #fff; }
.tf-login__values { display: flex; gap: 26px; font-size: 13px; position: relative; z-index: 1; }
.tf-login__values b { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.tf-login__values span { opacity: .72; color: #fff; }

.tf-login__form { display: flex; align-items: center; justify-content: center; padding: 40px; background: #FAF9FC; }
.tf-login__card { width: 100%; max-width: 380px; }
.tf-login__card h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 4px; color: #1D1430; }
.tf-login__card .sub { color: #6b6785; font-size: 14px; margin: 0 0 26px; }
.tf-field { margin-bottom: 18px; }
.tf-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #38304f; }
.tf-field input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #e4e0ee; border-radius: 10px; background: #fff; font-size: 15px; color: #1D1430; transition: border-color .15s, box-shadow .15s; }
.tf-field input:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
.tf-field.has-error input { border-color: #E11D48; }
.tf-field .err { color: #E11D48; font-size: 12.5px; margin-top: 6px; display: block; }
.tf-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tf-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #38304f; margin: 0; cursor: pointer; }
.tf-btn { width: 100%; height: 48px; border: none; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, #6D28D9 0%, #3B0D8F 100%); color: #fff;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .05s; }
.tf-btn:hover { filter: brightness(1.08); }
.tf-btn:active { transform: translateY(1px); }
.tf-btn:focus-visible { outline: 3px solid rgba(124,58,237,.5); outline-offset: 2px; }
.tf-foot { margin-top: 26px; font-size: 12.5px; color: #9490a8; text-align: center; }

@media (max-width: 860px) {
    .tf-login { grid-template-columns: 1fr; }
    .tf-login__brand { padding: 40px 32px; gap: 28px; }
    .tf-login__pitch { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tf-btn { transition: none; } }
