/* ============================================================
   INCOEP · Login — diseño adaptable, fondo animado, glass UI
   ============================================================ */
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
    --bg: #050816;
    --bg-2: #0a1030;
    --txt: #e8ecf8;
    --muted: #8b95b5;
    --line: rgba(255, 255, 255, .09);
    --cyan: #22d3ee;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --radius: 22px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font);
    color: var(--txt);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo animado ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
      background: radial-gradient(120% 90% at 15% 0%, #0d1544 0%, var(--bg) 55%); }

.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; mix-blend-mode: screen; }
.orb.o1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax;
          background: radial-gradient(circle at 30% 30%, var(--violet), transparent 65%);
          animation: deriva1 22s ease-in-out infinite alternate; }
.orb.o2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 18vh;
          background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 65%);
          animation: deriva2 26s ease-in-out infinite alternate; opacity: .42; }
.orb.o3 { width: 34vmax; height: 34vmax; left: 20vw; bottom: -18vmax;
          background: radial-gradient(circle at 50% 50%, var(--pink), transparent 65%);
          animation: deriva3 30s ease-in-out infinite alternate; opacity: .30; }

@keyframes deriva1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes deriva2 { to { transform: translate3d(-16vw, -8vh, 0) scale(1.1); } }
@keyframes deriva3 { to { transform: translate3d(12vw, -12vh, 0) scale(1.2); } }

.grid { position: absolute; inset: 0;
        background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
                mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
        opacity: .55; animation: rejilla 18s linear infinite; }
@keyframes rejilla { to { background-position: 56px 56px, 56px 56px; } }

#net { position: absolute; inset: 0; width: 100%; height: 100%; }

.noise { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- Estructura ---------- */
.shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
         display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

.hero { display: flex; flex-direction: column; justify-content: space-between;
        padding: clamp(28px, 5vw, 64px); gap: 32px; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #06101f;
              background: linear-gradient(135deg, var(--cyan), var(--violet));
              box-shadow: 0 10px 30px -8px rgba(34, 211, 238, .55), inset 0 1px 0 rgba(255,255,255,.4); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; line-height: 1.1; }
.brand-name small { display: block; font-family: var(--font); font-weight: 500; font-size: .72rem; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }

.hero-body { max-width: 560px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
        font-size: .78rem; color: #c9d3f5; background: rgba(255,255,255,.05); border: 1px solid var(--line);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.hero h1 { font-family: var(--font-display); font-weight: 700; margin: 22px 0 16px;
           font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; }
.grad { background: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--pink));
        -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: brillo 7s linear infinite; }
@keyframes brillo { to { background-position: 200% center; } }
.hero p.lead { color: var(--muted); font-size: clamp(.95rem, .85rem + .3vw, 1.1rem); line-height: 1.6; max-width: 48ch; }

.feats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.feat { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px; font-size: .85rem;
        background: rgba(255,255,255,.04); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        transition: transform .3s, border-color .3s, background .3s; }
.feat:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.07); }
.feat svg { width: 17px; height: 17px; color: var(--cyan); }

.hero-foot { color: var(--muted); font-size: .78rem; }

/* ---------- Panel / tarjeta ---------- */
.panel { display: grid; place-items: center; padding: clamp(18px, 4vw, 48px); }

.card { position: relative; width: min(100%, 440px); padding: clamp(26px, 4vw, 40px); border-radius: var(--radius);
        background: linear-gradient(160deg, rgba(20, 28, 66, .72), rgba(9, 13, 36, .78));
        backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
        box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255,255,255,.08);
        animation: entra .8s cubic-bezier(.2, .8, .2, 1) both; }
/* borde luminoso giratorio */
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
                background: conic-gradient(from var(--giro), transparent 0 55%, var(--cyan) 72%, var(--violet) 86%, transparent 100%);
                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
                        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
                animation: gira 6s linear infinite; }
@keyframes gira { to { --giro: 360deg; } }
@keyframes entra { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.card.shake { animation: sacude .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes sacude { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(6px); } 45%, 55% { transform: translateX(-8px); } }

.card h2 { font-family: var(--font-display); font-size: 1.65rem; letter-spacing: -.02em; }
.card .sub { color: var(--muted); font-size: .92rem; margin: 6px 0 24px; }

/* Alertas */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45;
         margin-bottom: 20px; border: 1px solid; animation: entra .5s both; }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert strong { display: block; font-weight: 600; margin-bottom: 2px; }
.alert.err  { color: #fecaca; background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.35); }
.alert.warn { color: #fde68a; background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.35); }
.alert.info { color: #bae6fd; background: rgba(34,211,238,.09);  border-color: rgba(34,211,238,.32); }

.dots { display: flex; gap: 6px; margin-top: 9px; }
.dots span { width: 22px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.18); }
.dots span.on { background: var(--err); box-shadow: 0 0 10px rgba(248,113,113,.6); }

/* Campos */
.field { position: relative; margin-bottom: 16px; }
.field > svg.ico { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); transition: color .25s; pointer-events: none; }
.field input { width: 100%; height: 56px; padding: 22px 46px 6px 46px; font: inherit; font-size: .98rem; color: var(--txt);
               background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 14px; outline: none; transition: border-color .25s, box-shadow .25s, background .25s; }
.field label { position: absolute; left: 46px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .95rem; pointer-events: none;
               transition: all .2s ease; transform-origin: left; }
.field input::placeholder { color: transparent; }
.field input:focus, .field input:not(:placeholder-shown) { background: rgba(255,255,255,.07); }
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.14); }
.field input:focus ~ svg.ico, .field input:focus + label + svg.ico { color: var(--cyan); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 14px; transform: translateY(-50%) scale(.78); color: var(--cyan); }
.field:focus-within > svg.ico { color: var(--cyan); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--txt); -webkit-box-shadow: 0 0 0 40px #101a4a inset; caret-color: var(--txt); }

.eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
       background: none; border: 0; border-radius: 10px; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.eye:hover { color: var(--txt); background: rgba(255,255,255,.07); }
.eye:focus-visible, .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.eye svg { width: 19px; height: 19px; }

.caps { display: none; align-items: center; gap: 7px; margin: -6px 0 14px; font-size: .8rem; color: var(--warn); }
.caps.show { display: flex; }
.caps svg { width: 15px; height: 15px; }

.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 22px; font-size: .85rem; }
.check { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); cursor: pointer; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25);
               display: grid; place-items: center; background: transparent; cursor: pointer; transition: all .2s; }
.check input:checked { background: linear-gradient(135deg, var(--cyan), var(--violet)); border-color: transparent; }
.check input:checked::after { content: ''; width: 4px; height: 8px; border: solid #06101f; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.row a { color: var(--cyan); text-decoration: none; }
.row a:hover { text-decoration: underline; }

/* Botón */
.btn { position: relative; width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden;
       font: inherit; font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: #04101d;
       display: flex; align-items: center; justify-content: center; gap: 10px;
       background: linear-gradient(110deg, var(--cyan), #6ee7f9 40%, var(--violet) 120%); background-size: 160% 100%;
       box-shadow: 0 14px 30px -10px rgba(34,211,238,.55); transition: transform .2s, box-shadow .3s, background-position .5s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 38px -10px rgba(139,92,246,.6); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
              transform: translateX(-120%); animation: destello 4.5s ease-in-out infinite 1.2s; }
@keyframes destello { 60%, 100% { transform: translateX(120%); } }
.btn:disabled { cursor: not-allowed; filter: saturate(.5) brightness(.85); }
.btn:disabled::after { display: none; }
.btn svg { width: 19px; height: 19px; }
.spin { width: 19px; height: 19px; border: 2.5px solid rgba(4,16,29,.25); border-top-color: #04101d; border-radius: 50%; animation: vuelta .7s linear infinite; display: none; }
.loading .spin { display: block; }
.loading .btn-ico { display: none; }
@keyframes vuelta { to { transform: rotate(360deg); } }

.secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: .78rem; }
.secure svg { width: 15px; height: 15px; color: var(--ok); }
.help { text-align: center; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.help a { color: var(--txt); font-weight: 600; text-decoration: none; }
.help a:hover { color: var(--cyan); }

/* Bloqueo con cuenta regresiva */
.lock { text-align: center; padding: 6px 0 4px; }
.ring { position: relative; width: 132px; height: 132px; margin: 0 auto 14px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bgc { stroke: rgba(255,255,255,.1); }
.ring .fg  { stroke: url(#grad); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring .time { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lock p { color: var(--muted); font-size: .88rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .shell { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .hero { padding: 24px 22px 0; gap: 18px; }
    .hero-body, .hero-foot { display: none; }
    .panel { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); align-items: start; }
}
@media (max-height: 640px) and (min-width: 992px) {
    .hero-body .feats, .hero p.lead { display: none; }
}
@media (max-width: 400px) {
    .card { padding: 24px 18px; border-radius: 18px; }
    .row { flex-direction: column; align-items: flex-start; }
}
/* Pantallas muy anchas */
@media (min-width: 1600px) { .shell { max-width: 1680px; margin: 0 auto; } }

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    #net { display: none; }
}

/* ============================================================
   MODO CLARO
   ============================================================ */
[data-bs-theme="light"] {
    --bg: #eef2fb;
    --txt: #0f1626;
    --muted: #55617f;
    --line: rgba(16, 22, 35, .09);
    --ok: #059669;
    --warn: #b45309;
    --err: #dc2626;
}
[data-bs-theme="light"] body { background: var(--bg); color-scheme: light; }
[data-bs-theme="light"] .bg { background: radial-gradient(120% 90% at 15% 0%, #ffffff 0%, var(--bg) 60%); }
[data-bs-theme="light"] .orb { mix-blend-mode: normal; opacity: .38; }
[data-bs-theme="light"] .orb.o2 { opacity: .30; }
[data-bs-theme="light"] .orb.o3 { opacity: .22; }
[data-bs-theme="light"] .grid { opacity: .8; }
[data-bs-theme="light"] .noise { opacity: .03; mix-blend-mode: multiply; }
[data-bs-theme="light"] .card { background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(244,247,255,.88));
                                box-shadow: 0 40px 80px -34px rgba(30, 41, 90, .35), inset 0 1px 0 #fff; }
[data-bs-theme="light"] .pill, [data-bs-theme="light"] .feat { background: rgba(255,255,255,.75); color: #34415f; }
[data-bs-theme="light"] .feat:hover { background: rgba(34,211,238,.12); }
[data-bs-theme="light"] .feat svg { color: #0891b2; }
[data-bs-theme="light"] .field input { background: rgba(15,22,38,.04); color: var(--txt); }
[data-bs-theme="light"] .field input:focus, [data-bs-theme="light"] .field input:not(:placeholder-shown) { background: rgba(15,22,38,.06); }
[data-bs-theme="light"] .field input:focus { border-color: #0891b2; box-shadow: 0 0 0 4px rgba(8,145,178,.15); }
[data-bs-theme="light"] .field input:focus + label, [data-bs-theme="light"] .field input:not(:placeholder-shown) + label,
[data-bs-theme="light"] .field:focus-within > svg.ico { color: #0891b2; }
[data-bs-theme="light"] .field input:-webkit-autofill { -webkit-text-fill-color: var(--txt); -webkit-box-shadow: 0 0 0 40px #e6ecfb inset; }
[data-bs-theme="light"] .eye:hover { background: rgba(15,22,38,.06); }
[data-bs-theme="light"] .check input { border-color: rgba(15,22,38,.3); }
[data-bs-theme="light"] .row a { color: #0891b2; }
[data-bs-theme="light"] .alert.err  { color: #991b1b; background: rgba(239,68,68,.09);  border-color: rgba(239,68,68,.35); }
[data-bs-theme="light"] .alert.warn { color: #92400e; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
[data-bs-theme="light"] .alert.info { color: #0c4a6e; background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.35); }
[data-bs-theme="light"] .dots span { background: rgba(15,22,38,.14); }
[data-bs-theme="light"] .ring .bgc { stroke: rgba(15,22,38,.1); }
[data-bs-theme="light"] .caps { color: #b45309; }
[data-bs-theme="light"] .grad { background-image: linear-gradient(100deg, #0891b2, #7c3aed 55%, #db2777); }
[data-bs-theme="light"] .help a:hover { color: #0891b2; }

/* Botón de cambio de tema */
.mode-btn { position: fixed; z-index: 5; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 14px;
            display: grid; place-items: center; cursor: pointer; color: var(--txt); background: rgba(255,255,255,.07);
            border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .25s, background .25s, color .25s; }
.mode-btn:hover { transform: translateY(-2px) rotate(8deg); color: var(--cyan); }
.mode-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mode-btn svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.mode-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.mode-btn .i-moon { opacity: 1; }
[data-bs-theme="light"] .mode-btn { background: rgba(255,255,255,.8); }
[data-bs-theme="light"] .mode-btn .i-sun { opacity: 1; transform: none; }
[data-bs-theme="light"] .mode-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.5); }