/* Acceso de clientes - estilo empresarial (colores del logo: negro, rojo y blanco) */
:root{--rojo:#ec1c23;--rojo-osc:#6b0e16;--negro:#111;--gris:#5c6670}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:#222;
  background:linear-gradient(135deg,#0b0b0c 0%,#1a1a1c 60%,#3a0a10 100%)}

.login-form{width:100%;max-width:400px;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}

/* Logo y rayas rojas, como en el logotipo */
.login-form__logo-container{padding:28px 30px 20px;background:#fff;text-align:center}
.login-form__logo{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.login-form__logo-container::after{content:"";display:block;height:14px;margin-top:20px;
  background:linear-gradient(var(--rojo) 0 4px,transparent 4px 7px,var(--rojo) 7px 10px,
  transparent 10px 12px,var(--rojo) 12px 14px)}

.login-form__content{padding:8px 32px 30px}
.login-form__header{margin-bottom:22px;text-align:center}
.login-form__titulo{display:block;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gris)}
.login-form__sub{display:block;margin-top:4px;font-size:24px;font-weight:700;color:var(--negro)}

.login-form__label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:#333}
.login-form__input{display:block;width:100%;margin-bottom:16px;padding:12px 14px;font-size:15px;color:#111;
  background:#f7f7f8;border:1px solid #cfd3d8;border-radius:5px;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s}
.login-form__input:focus{background:#fff;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(236,28,35,.18)}
.login-form__input::placeholder{color:#9aa1a9}

.login-form__button{display:block;width:100%;padding:13px;font-size:15px;font-weight:700;letter-spacing:.5px;
  color:#fff;background:var(--rojo);border:0;border-radius:5px;cursor:pointer;transition:background .2s}
.login-form__button:hover{background:#c9141b}
.login-form__button:active{background:var(--rojo-osc)}
.login-form__button:focus-visible{outline:3px solid var(--negro);outline-offset:2px}

.login-form__links{margin-top:22px;padding-top:18px;border-top:1px solid #e3e5e8;
  text-align:center;font-size:14px;line-height:2}
.login-form__link{color:#333;text-decoration:none}
.login-form__link:hover{color:var(--rojo);text-decoration:underline}
.login-form__sep{margin:0 8px;color:#b5bac0}

@media (max-width:420px){
  .login-form__content{padding:8px 22px 26px}
  .login-form__sub{font-size:21px}
}