/* tecnimont.identithi.com - login pages (2026-10-09). Same look as personal.identithi.com:
   background #FAFBFD, card #F0F2F8 / border #D8DCE6, primary #4D76B0, Inter. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #FAFBFD; color: #0A0012; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.tl-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tl-wrap { width: 100%; max-width: 28rem; }
.tl-header { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.tl-lang { order: -1; align-self: flex-end; display: inline-flex; background: #F0F2F8; border-radius: 9999px; padding: 2px; }
.tl-lang button { border: 0; background: transparent; color: #5A6478; font: inherit; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 9999px; cursor: pointer; }
.tl-lang button.active { background: #4D76B0; color: #FFFFFF; }
.tl-logo { width: 62%; max-width: 280px; height: auto; display: block; }
.tl-subtitle { text-align: center; color: #5A6478; font-size: .875rem; margin: 0; }
.tl-card { background: #F0F2F8; border: 1px solid #D8DCE6; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.tl-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; }
.tl-center { text-align: center; }
.tl-hint { font-size: .875rem; color: #5A6478; margin: 0 0 1rem; }
.tl-stack > * + * { margin-top: .75rem; }
.btn-primary, .btn-outline, .btn-ghost {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .625rem 1rem; font-size: .875rem; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: opacity .15s, background .15s;
}
.btn-primary { background: #4D76B0; color: #FFFFFF; border: 1px solid #4D76B0; }
.btn-primary:hover:not(:disabled) { opacity: .9; }
.btn-outline { background: #FAFBFD; border: 1px solid #D8DCE6; color: #0A0012; }
.btn-outline:hover:not(:disabled) { background: #F0F2F8; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: #0A0012; }
.btn-ghost:hover:not(:disabled) { background: #E6E9F2; }
button:disabled { opacity: .6; cursor: not-allowed; }
.tl-or { display: flex; align-items: center; gap: .75rem; color: #5A6478; font-size: .75rem; margin: .5rem 0; }
.tl-or::before, .tl-or::after { content: ""; height: 1px; background: #D8DCE6; flex: 1; }
.tl-back { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: #5A6478; cursor: pointer; text-decoration: none; margin-bottom: .75rem; }
.tl-back:hover { color: #0A0012; }
.tl-field { display: block; margin-bottom: 1rem; }
.tl-field span { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.tl-field input { width: 100%; border: 1px solid #D8DCE6; background: #FAFBFD; border-radius: .5rem; padding: .5rem .75rem; font: inherit; font-size: .875rem; color: #0A0012; outline: none; }
.tl-field input:focus { box-shadow: 0 0 0 2px #4D76B0; }
.tl-field input:disabled { opacity: .6; }
.tl-status { font-size: .875rem; text-align: center; margin: 1rem 0 0; color: #5A6478; min-height: 1.25em; }
.tl-status.err { color: #EF4444; }
.tl-qr { display: flex; justify-content: center; align-items: center; min-height: 200px; }
.tl-qr img { display: block; }
.tl-msg { text-align: center; font-size: .875rem; color: #5A6478; margin: .5rem 0 0; min-height: 1.25em; }
.tl-footer { text-align: center; font-size: .75rem; color: #8A93A8; margin: 1.5rem 0 0; }
.tl-footer b { color: #5A6478; }
.tl-user { font-size: 1rem; color: #4D76B0; font-weight: 500; margin: 0 0 .75rem; word-break: break-all; }
.tl-icon { width: 18px; height: 18px; flex: 0 0 18px; }
[hidden] { display: none !important; }