/* EXM WS ID — mismo molde que los logins del webmail, PBX, GPS y Asistencia: panel claro
   con cuadrícula y la escena a la izquierda, formulario de ancho fijo a la derecha. El lado
   que cede al achicar es el formulario, nunca la ilustración. Paleta índigo. Prefijo ids-. */
:root {
    --ink: #1e1b4b; --muted: #4b4f7a; --dim: #8a8fb8; --line: rgba(30, 27, 75, 0.09);
    --brand-a: #3730a3; --brand-b: #6366f1; --ok: #059669; --bad: #dc2626;
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: #0f172a; background: #fff; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

.ids-wrap { min-height: 100%; display: flex; }

/* ── Panel de marca ── */
.ids-panel {
    flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
    padding: 36px clamp(20px, 3.5vw, 48px); color: var(--ink);
    background: radial-gradient(1100px 700px at 30% 20%, #fff 0%, #eef0ff 40%, #e4e7fd 80%);
}
.ids-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(79, 70, 229, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, 0.13) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 100%);
}
.ids-panel::after {
    content: ""; position: absolute; pointer-events: none; filter: blur(30px);
    width: 900px; height: 420px; top: 60%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.07) 55%, transparent 75%);
}
.ids-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }
.ids-mark {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff;
    background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); box-shadow: 0 8px 24px rgba(67, 56, 202, 0.32);
}
.ids-mark svg { width: 26px; height: 26px; }
.ids-brand h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.ids-brand p { margin: 0; font-size: 13px; color: var(--muted); }
.ids-headline { position: relative; z-index: 2; margin: 8px 0 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.5px; line-height: 1.15; text-wrap: balance; }
.ids-headline em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--brand-a), #818cf8); -webkit-background-clip: text; background-clip: text; }
.ids-lede { position: relative; z-index: 2; margin: 0; max-width: 52ch; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.6; color: var(--muted); }

/* ── Escena ── */
.ids-stage { position: relative; z-index: 1; width: min(100%, 900px, 160vh - 560px); min-width: min(100%, 380px); margin: 10px auto 24px; aspect-ratio: 900 / 520; }
.ids-stage svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ids-flow { stroke-dasharray: 3 12; animation: ids-dash 1.4s linear infinite; }
@keyframes ids-dash { to { stroke-dashoffset: -15px; } }
.ids-rise { animation: ids-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: 50%; }
@keyframes ids-rise { 0% { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ids-bob { animation: ids-bob 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50%; }
@keyframes ids-bob { 0% { transform: translateY(0); } to { transform: translateY(-5px); } }
.ids-ring { animation: ids-spin 18s linear infinite; transform-box: fill-box; transform-origin: 50%; }
@keyframes ids-spin { to { transform: rotate(360deg); } }
.ids-pulse { animation: ids-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: 50%; }
@keyframes ids-pulse { 0% { opacity: .55; transform: scale(.8); } 70%, to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .ids-flow, .ids-rise, .ids-bob, .ids-ring, .ids-pulse { animation: none; } }

/* ── Formulario ── */
.ids-form { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; }
@media (min-width: 980px) { .ids-form { flex: 0 0 clamp(360px, 34vw, 520px); } }
@media (max-width: 979px) { .ids-panel { display: none; } }
.ids-box { width: 100%; max-width: 380px; }
.ids-compact { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
@media (min-width: 980px) { .ids-compact { display: none; } }
.ids-compact .ids-mark { width: 44px; height: 44px; border-radius: 12px; }
.ids-compact .ids-mark svg { width: 22px; height: 22px; }
.ids-compact b { display: block; font-size: 16px; color: #0f172a; line-height: 1.2; }
.ids-compact span { font-size: 12px; color: #94a3b8; }

.ids-title { margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -.4px; color: #0f172a; }
.ids-sub { margin: 0 0 26px; font-size: 14px; color: #64748b; line-height: 1.5; }
.ids-sub b { color: #0f172a; }
.ids-alert { margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: #fef2f2; border: 1px solid #fecaca; color: var(--bad); }
.ids-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.ids-input {
    width: 100%; padding: 12px 16px; font: inherit; font-size: 15px; border-radius: 10px; outline: none;
    background: #f8fafc; border: 1px solid #e2e8f0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ids-input:focus { background: #fff; border-color: var(--brand-b); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
.ids-field { margin-bottom: 20px; }
.ids-pass { position: relative; }
.ids-pass .ids-input { padding-right: 44px; }
.ids-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 4px; color: #94a3b8; cursor: pointer; }
.ids-eye:hover { color: #475569; }
.ids-eye svg { width: 16px; height: 16px; display: block; }
.ids-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
    padding: 14px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, var(--brand-b), var(--brand-a));
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.33); transition: box-shadow .15s, transform .1s;
}
.ids-btn:hover { box-shadow: 0 6px 20px rgba(67, 56, 202, 0.43); }
.ids-btn:active { transform: scale(.985); }
.ids-btn[disabled] { opacity: .65; cursor: default; }
.ids-link { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: var(--brand-a); text-decoration: none; }
.ids-link:hover { text-decoration: underline; }
.ids-foot { margin-top: 28px; text-align: center; font-size: 12px; color: #94a3b8; }

/* ── Mis aplicaciones y avisos ── */
.ids-page { min-height: 100%; background: radial-gradient(1100px 600px at 30% 0%, #fff 0%, #f1f2ff 50%, #eceefd 100%); }
.ids-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .7); }
.ids-top .ids-brand h1 { font-size: 18px; }
.ids-top .ids-mark { width: 40px; height: 40px; border-radius: 11px; }
.ids-top .ids-mark svg { width: 20px; height: 20px; }
.ids-who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.ids-who form { margin: 0; }
.ids-out { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.ids-out:hover { border-color: #c7caf5; }
.ids-main { max-width: 980px; margin: 0 auto; padding: 36px clamp(16px, 4vw, 40px) 60px; }
.ids-main h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.3px; color: var(--ink); }
.ids-main > p { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
.ids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ids-app {
    display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; text-decoration: none; color: var(--ink);
    background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(30, 27, 75, 0.06); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ids-app:hover { transform: translateY(-2px); border-color: #c7caf5; box-shadow: 0 12px 26px rgba(30, 27, 75, 0.1); }
.ids-app i { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); }
.ids-app b { font-size: 15px; }
.ids-app span { font-size: 12.5px; color: var(--brand-a); font-weight: 600; }
.ids-empty { padding: 28px; border-radius: 14px; background: #fff; border: 1px dashed #c7caf5; color: var(--muted); font-size: 14px; line-height: 1.6; }

.ids-card { max-width: 460px; margin: 12vh auto 0; padding: 32px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(30, 27, 75, 0.08); }
.ids-card h2 { margin: 18px 0 8px; font-size: 22px; letter-spacing: -.3px; color: var(--ink); }
.ids-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.ids-card .ids-link { text-align: left; }

.ids-sending { display: grid; place-items: center; min-height: 100%; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.ids-spin { width: 28px; height: 28px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid #c7caf5; border-top-color: var(--brand-b); animation: ids-spin .8s linear infinite; }