/* ============================================================
   Handyman — capa de las pantallas de acceso

   hm.css se mantiene literal, tal y como salió del prototipo. Todo lo
   que hace falta añadir para encajarlo con Laravel (componentes de
   error, subida de archivos, entrada animada) vive aquí.
   ============================================================ */

/* ---------- Marca sobre el panel oscuro ---------- */
.auth-aside .brand img { height: 40px; width: auto }
.auth-aside .brand .name { color: #fff }

/* ---------- Formularios ---------- */
.auth-form .toggle { background: none; border: 0; display: flex; align-items: center }
.auth-form .field .help-block { display: block; font-size: 12px; color: var(--orange); margin-top: 7px }
.auth-form .field .control.is-invalid { border-color: var(--orange) }

/* Dos campos por fila en formularios largos; una sola columna en móvil. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr } }

/* ---------- Avisos ---------- */
.auth-form .alert {
    border-radius: 14px; border: 1px solid var(--line);
    padding: 12px 16px; font-size: 14px; margin-bottom: 20px;
}
.auth-form .alert-danger { background: #FDECE6; border-color: #F6C9B8; color: #8A2D0C }
.auth-form .auth-status {
    font-size: 14px; color: var(--mint-ink); background: var(--mint);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 20px;
}
.auth-note {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--lilac); border-radius: 14px; padding: 13px 15px;
    font-size: 13px; color: var(--muted-3); line-height: 1.5; margin-bottom: 22px;
}
.auth-note svg { flex: 0 0 auto; color: var(--primary); margin-top: 1px }

/* ---------- Cita del panel de marca ---------- */
.auth-card-mini { margin-top: 34px }

/* ---------- Tarjeta inferior ---------- */
.auth-pro {
    margin-top: 30px; background: #fff; border: 1px solid var(--line-soft);
    border-radius: 16px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start;
}
.auth-pro .ico {
    width: 30px; height: 30px; border-radius: 10px; background: var(--lilac); color: var(--primary);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.auth-pro .t { font-family: 'Outfit', 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; margin-bottom: 3px }
.auth-pro .txt { font-size: 13px; color: var(--muted); line-height: 1.5 }

/* ---------- Subida del documento fiscal ---------- */
.file-drop {
    display: flex; align-items: center; gap: 13px; width: 100%;
    background: #fff; border: 1px dashed var(--line-mid); border-radius: 14px;
    padding: 14px 16px; text-align: left; transition: border-color .2s, background .2s;
}
.file-drop:hover { border-color: var(--primary-2); background: #FBFAFE }
.file-drop.has-file { border-style: solid; border-color: var(--primary) }
.file-drop .ico {
    width: 34px; height: 34px; border-radius: 11px; background: var(--lilac); color: var(--primary);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.file-drop .nm { font-size: 14px; color: var(--ink); word-break: break-all }
.file-drop .hint { font-size: 12px; color: var(--muted-2); margin-top: 2px }

/* ---------- Medidor de fuerza de contraseña ----------
   Las barras de .strength ya vienen de hm.css; aquí solo la etiqueta. */
.strength-label { font-size: 12px; color: var(--muted-2); margin-top: 7px }

/* ---------- Entrada ----------
   Animación de CSS puro, no dirigida por JavaScript: siempre termina, así
   que nunca puede dejar un elemento invisible. El retardo base deja pasar
   primero la cortina de carga. */
.hm-in { animation: hmIn .65s var(--ease-ds-out, ease) both; animation-delay: calc(.45s + var(--d, 0s)) }
@keyframes hmIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

.auth-aside .ring { animation: hmRing 1.2s var(--ease-out-quint, ease) both }
@keyframes hmRing { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
.auth-aside .ring-violet { animation-delay: .12s }
.auth-aside .ring-pink { animation-delay: .24s }

@media (prefers-reduced-motion: reduce) {
    .hm-in, .auth-aside .ring { animation: none }
}