/**
 * AscensorDocs — Modales, botones y login
 */

/* Modal base */
.modal-backdrop {
    position:fixed; inset:0;
    background:rgba(15,32,64,0.45); backdrop-filter:blur(4px);
    z-index:var(--z-modal); display:flex; align-items:center; justify-content:center;
    padding:var(--space-6); opacity:0; pointer-events:none; transition:opacity var(--transition);
}
[data-theme="dark"] .modal-backdrop { background:rgba(0,0,0,0.6); }
.modal-backdrop--active             { opacity:1; pointer-events:all; }

.modal {
    background:var(--color-bg-elevated); border:1px solid var(--color-border);
    border-radius:var(--radius-xl); width:100%; max-width:460px; max-height:90vh;
    overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
    transform:translateY(12px) scale(0.97); transition:transform var(--transition);
}
.modal-backdrop--active .modal { transform:translateY(0) scale(1); }

.modal__header {
    padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.modal__title { font-size:var(--text-md); font-weight:var(--weight-bold); }
.modal__close {
    width:26px; height:26px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
    color:var(--color-text-muted); cursor:pointer; transition:all var(--transition-fast);
}
.modal__close:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.modal__body   { padding:var(--space-5); overflow-y:auto; flex:1; }
.modal__footer { padding:var(--space-3) var(--space-5); border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:var(--space-3); flex-shrink:0; }

/* Botones */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    padding:var(--space-2) var(--space-4);
    border-radius:var(--radius); font-size:var(--text-sm); font-weight:var(--weight-medium);
    font-family:var(--font-ui); cursor:pointer; border:1px solid transparent;
    transition:all var(--transition-fast); white-space:nowrap; line-height:1.4;
}
.btn--primary  { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn--primary:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
.btn--secondary{ background:transparent; color:var(--color-text-primary); border-color:var(--color-border); }
.btn--secondary:hover { background:var(--color-bg-hover); border-color:var(--color-border-strong); }
.btn--ghost    { background:transparent; color:var(--color-text-secondary); border-color:transparent; }
.btn--ghost:hover { background:var(--color-bg-hover); color:var(--color-text-primary); }
.btn--sm  { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
.btn--full{ width:100%; }

/* Login */
.login-screen {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--color-bg); padding:var(--space-6); position:relative; overflow:hidden;
}
.login-screen::before {
    content:''; position:absolute; top:-30%; right:-15%; width:500px; height:500px;
    background:radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
    pointer-events:none;
}

.login-card {
    width:100%; max-width:360px;
    background:var(--color-bg-elevated); border:1px solid var(--color-border);
    border-radius:var(--radius-xl); padding:var(--space-8) var(--space-7);
    position:relative; z-index:1; box-shadow:var(--shadow-lg);
}
.login-card__logo      { width:38px; height:38px; background:var(--color-accent); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:var(--weight-bold); color:#fff; font-family:var(--font-mono); }
.login-card__brand     { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-7); }
.login-card__brand-name{ font-size:var(--text-md); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; }
.login-card__brand-sub { font-size:var(--text-xs); color:var(--color-text-muted); font-family:var(--font-mono); margin-top:1px; }
.login-card__title     { font-size:var(--text-lg); font-weight:var(--weight-bold); margin-bottom:var(--space-1); }
.login-card__subtitle  { font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-6); }
.login-card__form      { display:flex; flex-direction:column; gap:var(--space-4); }
.login-field           { display:flex; flex-direction:column; gap:var(--space-2); }
.login-field label     { font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; }
.login-card__footer    { margin-top:var(--space-5); text-align:center; font-size:var(--text-xs); color:var(--color-text-muted); font-family:var(--font-mono); }
.login-card__notice    { margin-top:var(--space-4); padding:var(--space-3); background:var(--color-bg-input); border:1px solid var(--color-border); border-radius:var(--radius); font-size:var(--text-xs); color:var(--color-text-muted); display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); }

/* Toast */
.toast-container { position:fixed; bottom:var(--space-5); left:50%; transform:translateX(-50%); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--space-2); pointer-events:none; align-items:center; }
.toast {
    background:var(--color-bg-elevated); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:var(--space-2) var(--space-4);
    font-size:var(--text-sm); display:flex; align-items:center; gap:var(--space-3);
    box-shadow:var(--shadow); animation:toastIn 250ms ease; max-width:340px; pointer-events:all;
}
.toast--success { border-color:var(--color-success); }
.toast--error   { border-color:var(--color-error); }

@keyframes toastIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }