/* Portal de Socios F7ERP — tokens calcados de NextERP/wwwroot/assets/css/nexterp-theme.css (backoffice Blazor).
   Chips rectangulares (sin ovalos), tipografia Nunito, marca navy #092C4C + azul #1E6BB8. */
:root {
    --nex-brand-primary: #092C4C;
    --nex-brand-primary-hover: #0B3A63;
    --nex-brand-accent: #1E6BB8;
    --nex-brand-accent-hover: #165594;
    --nex-brand-tint: #E9EFF5;
    --nex-surface-page: #F3F3F3;
    --nex-surface-card: #FFFFFF;
    --nex-surface-alt: #F4F6F8;
    --nex-surface-border: #E2E6EA;
    --nex-surface-divider: #E5E9EE;
    --nex-text-primary: #1F2937;
    --nex-text-muted: #5A6B7B;
    --nex-positive: #2E9E55;
    --nex-danger: #DC2626;
    --nex-warning: #E08C00;
    --nex-drawer-bg: #06223A;
    --nex-drawer-item: #C2D2E0;
    --nex-radius-card: 10px;
    --nex-radius-control: 6px;
    --nex-radius-chip: 4px;
    --nex-shadow-card: 0 2px 14px rgba(15, 23, 42, .07);
    --nex-shadow-card-hover: 0 2px 14px rgba(15, 23, 42, .14);
    --nex-font-family: "Nunito", "Segoe UI", -apple-system, sans-serif;
    --nex-ico-win: #1E6BB8;
    --nex-ico-mac: #1F2937;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nex-brand-primary: #6CB4F0;
        --nex-brand-primary-hover: #8CC5F4;
        --nex-brand-accent: #6CB4F0;
        --nex-brand-accent-hover: #8CC5F4;
        --nex-brand-tint: #10243A;
        --nex-surface-page: #1B1B1B;
        --nex-surface-card: #272727;
        --nex-surface-alt: #1F1F1F;
        --nex-surface-border: #3A3A3A;
        --nex-surface-divider: #333333;
        --nex-text-primary: #F5F5F5;
        --nex-text-muted: #C2C2C2;
        --nex-shadow-card: 0 2px 14px rgba(0, 0, 0, .35);
        --nex-shadow-card-hover: 0 2px 14px rgba(0, 0, 0, .55);
        --nex-ico-win: #6CB4F0;
        --nex-ico-mac: #F5F5F5;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--nex-font-family);
    background: var(--nex-surface-page);
    color: var(--nex-text-primary);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--nex-brand-accent); }
h1, h2, h3 { margin: 0; font-weight: 800; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.nx-muted { color: var(--nex-text-muted); }
.nx-mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .78rem; color: var(--nex-text-muted); word-break: break-all; }

/* ---------- topbar (como el header del backoffice: logo sobre blanco + franja navy) ---------- */
.nx-topbar {
    background: #FFFFFF;
    border-bottom: 4px solid #092C4C;
    box-shadow: var(--nex-shadow-card);
    position: sticky; top: 0; z-index: 10;
}
.nx-topbar-in {
    max-width: 1240px; margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 16px;
}
.nx-logo img { height: 34px; display: block; }
.nx-topbar-titulo {
    font-weight: 800; color: #092C4C; padding-left: 16px;
    border-left: 1px solid #E2E6EA; font-size: 1.05rem;
}
.nx-topbar-der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nx-usuario { display: flex; align-items: center; gap: 10px; }
.nx-avatar {
    width: 34px; height: 34px; border-radius: var(--nex-radius-control);
    background: #092C4C; color: #FFFFFF; display: grid; place-items: center; font-weight: 800;
}
.nx-usuario-txt { display: flex; flex-direction: column; line-height: 1.15; color: #1F2937; }
.nx-usuario-txt small { color: #5A6B7B; font-size: .78rem; }

/* ---------- layout ---------- */
.nx-main { max-width: 1240px; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 20px; }
.nx-pie { text-align: center; color: var(--nex-text-muted); font-size: .8rem; padding: 0 0 24px; }
.nx-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nx-encabezado p { margin: 6px 0 0; }
.nx-selector { display: flex; flex-direction: column; min-width: 240px; }
.nx-dos-col { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .nx-dos-col { grid-template-columns: 1fr; } }

/* ---------- tarjetas ---------- */
.nx-card {
    background: var(--nex-surface-card);
    border: 1px solid var(--nex-surface-border);
    border-radius: var(--nex-radius-card);
    box-shadow: var(--nex-shadow-card);
    padding: 18px 20px;
}
.nx-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--nex-surface-divider); }
.nx-destacado { border-left: 4px solid var(--nex-brand-accent); background: linear-gradient(0deg, var(--nex-surface-card), var(--nex-surface-card)); }
.nx-vacio { color: var(--nex-text-muted); padding: 14px 0; margin: 0; }

/* ---------- chips RECTANGULARES (sin ovalos) ---------- */
.nx-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--nex-radius-chip);
    font-size: .78rem; font-weight: 700; white-space: nowrap;
    background: var(--nex-brand-tint); color: var(--nex-brand-primary);
    border: 1px solid rgba(30, 107, 184, .25);
}
.nx-chip-suave { background: var(--nex-surface-alt); color: var(--nex-text-muted); border-color: var(--nex-surface-border); font-weight: 600; }
.nx-chip-marca { background: #092C4C; color: #FFFFFF; border-color: #092C4C; text-transform: uppercase; font-size: .85rem; padding: 4px 12px; }

/* ---------- botones / formularios ---------- */
.nx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--nex-brand-accent); color: #FFFFFF; border: 1px solid transparent;
    border-radius: var(--nex-radius-control); padding: 8px 16px; font-weight: 700; font-size: .9rem;
    text-decoration: none; cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: background .15s ease;
}
.nx-btn:hover { background: var(--nex-brand-accent-hover); }
.nx-btn:focus-visible, .nx-input:focus-visible, .nx-manual:focus-visible { outline: 2px solid var(--nex-brand-accent); outline-offset: 2px; }
.nx-btn-ghost { background: transparent; color: #092C4C; border-color: #E2E6EA; }
.nx-btn-ghost:hover { background: #E9EFF5; }
.nx-btn-block { width: 100%; margin-top: 18px; padding: 11px 16px; font-size: 1rem; }
.nx-label { display: block; font-weight: 700; font-size: .85rem; margin: 12px 0 4px; color: var(--nex-text-primary); }
.nx-input {
    width: 100%; padding: 9px 12px; font: inherit; color: var(--nex-text-primary);
    background: var(--nex-surface-card); border: 1px solid var(--nex-surface-border); border-radius: var(--nex-radius-control);
}
.nx-alerta { padding: 10px 12px; border-radius: var(--nex-radius-control); background: #FFF6E5; color: #7A4B00; border: 1px solid #F3D9A4; font-size: .88rem; margin: 10px 0; }
.nx-alerta-error { background: #FDECEC; color: #8F1D1D; border-color: #F5C2C2; }

/* ---------- iconos de plataforma ---------- */
.nx-ico { width: 24px; height: 24px; display: block; }
.nx-ico-wrap { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
    border-radius: var(--nex-radius-control); background: var(--nex-surface-alt); border: 1px solid var(--nex-surface-border); }
.nx-ico-win { color: var(--nex-ico-win); }
.nx-ico-mac { color: var(--nex-ico-mac); }
.nx-ico-paq { color: var(--nex-positive); }
.nx-ico-doc { color: var(--nex-danger); }

/* ---------- instaladores ---------- */
.nx-grupo { padding: 14px 0 4px; border-bottom: 1px solid var(--nex-surface-divider); }
.nx-grupo:last-child { border-bottom: 0; }
.nx-grupo-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nx-grupo-head h3 { color: var(--nex-brand-primary); }
.nx-fila { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: var(--nex-radius-control); }
.nx-fila:hover { background: var(--nex-surface-alt); }
.nx-fila-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.nx-notas { color: var(--nex-text-muted); font-size: .82rem; margin-top: 2px; }
.nx-fila-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
    .nx-fila { flex-wrap: wrap; }
    .nx-fila-meta { justify-content: flex-start; width: 100%; padding-left: 58px; }
    .nx-fila .nx-btn { margin-left: 58px; }
    .nx-topbar-titulo { display: none; }
    .nx-usuario-txt small { display: none; }
}

/* ---------- manuales ---------- */
.nx-grilla-manuales { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding-top: 12px; }
.nx-manual { display: flex; align-items: center; gap: 12px; padding: 12px; text-decoration: none; color: var(--nex-text-primary);
    border: 1px solid var(--nex-surface-border); border-radius: var(--nex-radius-control); background: var(--nex-surface-card);
    transition: box-shadow .15s ease, border-color .15s ease; }
.nx-manual:hover { box-shadow: var(--nex-shadow-card-hover); border-color: var(--nex-brand-accent); }
.nx-manual-txt { display: flex; flex-direction: column; min-width: 0; }
.nx-manual-txt small { color: var(--nex-text-muted); font-size: .8rem; }
.nx-manual-lista { margin-top: 10px; }

/* ---------- log de cambios ---------- */
.nx-linea { list-style: none; margin: 0; padding: 6px 0 0; }
.nx-linea li { position: relative; padding: 10px 0 10px 18px; border-left: 2px solid var(--nex-surface-divider); margin-left: 6px; }
.nx-linea li::before { content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px;
    background: var(--nex-brand-accent); border-radius: 2px; }
.nx-linea-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.nx-linea p { margin: 4px 0 0; color: var(--nex-text-muted); font-size: .9rem; white-space: pre-line; }

/* ---------- login (como AuthPage/Login del backoffice: panel de marca + tarjeta) ---------- */
.nx-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.nx-login-lado { background: var(--nex-drawer-bg); color: var(--nex-drawer-item);
    background-image: linear-gradient(160deg, #092C4C 0%, #06223A 70%); display: flex; align-items: center; padding: 48px; }
.nx-login-lado-in { max-width: 440px; margin-left: auto; }
.nx-login-lado h1 { color: #FFFFFF; font-size: 2rem; margin-bottom: 12px; }
.nx-login-lado ul { padding-left: 18px; margin: 18px 0 0; }
.nx-login-lado li { margin: 6px 0; }
.nx-login-form-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
.nx-login-card { width: 100%; max-width: 400px; padding: 28px; }
.nx-login-card h2 { margin-top: 18px; font-size: 1.35rem; }
.nx-login-card p { margin: 6px 0 4px; }
.nx-login-logo { height: 46px; display: block; }
@media (prefers-color-scheme: dark) { .nx-login-logo { background: #FFFFFF; padding: 6px 10px; border-radius: var(--nex-radius-control); } }
.nx-pie-login { color: var(--nex-text-muted); font-size: .8rem; margin-top: 16px; }
@media (max-width: 860px) {
    .nx-login { grid-template-columns: 1fr; }
    .nx-login-lado { padding: 28px 20px; }
    .nx-login-lado-in { margin: 0; }
    .nx-login-lado ul { display: none; }
}