/* =====================================================================
   NatCap UI — Sistema de diseño compartido
   Adaptado de los lineamientos "NatCap Explorer" (Lovable / shadcn+Tailwind)
   a CSS plano, para usarse en las plantillas Django del Observatorio.
   NO reemplaza funcionalidad: solo aporta tokens y clases de estilo.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ---- Tipografía ---- */
    --nc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --nc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* ---- Radios ---- */
    --nc-radius-sm: 0.375rem;
    --nc-radius: 0.625rem;
    --nc-radius-lg: 0.875rem;
    --nc-radius-xl: 1rem;
    --nc-radius-2xl: 1.25rem;

    /* ---- Paleta NatCap (chrome oscuro) ---- */
    --nc-950: #12151d;   /* navy casi negro   */
    --nc-900: #1b1f2a;   /* navy paneles      */
    --nc-800: #262c39;   /* navy hover        */

    /* ---- Marca ---- */
    --nc-brand: #00c0b5;          /* turquesa NatCap */
    --nc-brand-strong: #00a89e;
    --nc-brand-accent: #38bdf8;   /* sky */
    --nc-brand-success: #34d399;  /* emerald */
    --nc-brand-success-solid: #10b981;
    --nc-brand-warn: #f59e0b;     /* amber */
    --nc-danger: #ef4444;

    /* ---- Superficies claras (contenido/paneles) ---- */
    --nc-bg: #f6f8fb;
    --nc-surface: #ffffff;
    --nc-surface-2: #f8fafc;
    --nc-fg: #1b2432;
    --nc-muted: #64748b;
    --nc-border: #e2e8f0;
    --nc-border-strong: #cbd5e1;

    /* ---- Slate (texto sobre oscuro) ---- */
    --nc-slate-200: #e2e8f0;
    --nc-slate-300: #cbd5e1;
    --nc-slate-400: #94a3b8;
    --nc-slate-500: #64748b;

    /* ---- Sombras ---- */
    --nc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --nc-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    --nc-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.28);
    --nc-shadow-brand: 0 8px 24px rgba(0, 192, 181, 0.30);

    /* ---- Focus ---- */
    --nc-ring: rgba(0, 192, 181, 0.35);
}

/* =====================  Base tipográfica  ===================== */
.nc-root,
.nc-root * {
    box-sizing: border-box;
}
.nc-font { font-family: var(--nc-font-sans); }
.nc-mono { font-family: var(--nc-font-mono); }

/* =====================  Marca / Logo  ===================== */
.nc-brandmark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--nc-radius);
    background: var(--nc-brand);
    box-shadow: var(--nc-shadow-brand);
    flex-shrink: 0;
}
.nc-brandmark > i {
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    border: 2px solid #fff;
    border-radius: 2px;
    display: block;
}
.nc-brandmark.nc-brandmark-lg { width: 40px; height: 40px; border-radius: var(--nc-radius-lg); }
.nc-brandmark.nc-brandmark-lg > i { width: 20px; height: 20px; }
.nc-wordmark {
    font-family: var(--nc-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

/* =====================  Patrón hexagonal de fondo  ===================== */
.nc-hexbg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Cpolygon points='14,1 42,1 56,24 42,47 14,47 0,24' fill='none' stroke='%2300c0b5' stroke-opacity='0.5' stroke-width='0.6'/%3E%3C/svg%3E");
    opacity: 0.18;
}

/* =====================  Botones  ===================== */
.nc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--nc-radius);
    font-family: var(--nc-font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, filter .15s ease, transform .05s ease, border-color .15s ease;
    color: #fff;
    background: var(--nc-brand);
}
.nc-btn:hover { filter: brightness(1.08); }
.nc-btn:active { transform: scale(0.98); }
.nc-btn:disabled,
.nc-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.nc-btn-brand { background: var(--nc-brand); color: #06201f; }
.nc-btn-dark { background: var(--nc-900); color: #fff; }
.nc-btn-dark:hover { background: var(--nc-800); filter: none; }
.nc-btn-success { background: var(--nc-brand-success-solid); color: #fff; }
.nc-btn-warn { background: var(--nc-brand-warn); color: #3b2600; }
.nc-btn-danger { background: var(--nc-danger); color: #fff; }
.nc-btn-secondary {
    background: var(--nc-surface);
    color: var(--nc-fg);
    border: 1px solid var(--nc-border);
}
.nc-btn-secondary:hover { background: var(--nc-surface-2); filter: none; }
.nc-btn-ghost {
    background: transparent;
    color: var(--nc-slate-300);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.nc-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); filter: none; color: #fff; }
.nc-btn-sm { min-height: 30px; padding: 0 10px; font-size: 11px; }
.nc-btn-block { width: 100%; }

/* Icono cuadrado (nav rail / toolbars) */
.nc-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nc-radius);
    border: 0;
    background: transparent;
    color: var(--nc-slate-400);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.nc-iconbtn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nc-iconbtn.is-active {
    background: rgba(0, 192, 181, 0.15);
    color: var(--nc-brand);
}

/* =====================  Campos de formulario  ===================== */
.nc-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--nc-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--nc-muted);
}
.nc-input,
.nc-select,
.nc-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: var(--nc-surface);
    color: var(--nc-fg);
    font-family: var(--nc-font-sans);
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nc-textarea { min-height: 90px; resize: vertical; }
.nc-input:focus,
.nc-select:focus,
.nc-textarea:focus {
    outline: none;
    border-color: var(--nc-brand);
    box-shadow: 0 0 0 3px var(--nc-ring);
}

/* =====================  Tarjetas / paneles  ===================== */
.nc-card {
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-sm);
}
.nc-card-pad { padding: 16px; }

/* =====================  Badges / chips  ===================== */
.nc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-muted);
}
.nc-badge-mono { font-family: var(--nc-font-mono); }
.nc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--nc-slate-400);
    flex-shrink: 0;
}
.nc-dot-success { background: var(--nc-brand-success); }
.nc-dot-warn { background: var(--nc-brand-warn); }
.nc-dot-danger { background: var(--nc-danger); }
.nc-dot-pulse { animation: nc-pulse 1.6s ease-in-out infinite; }
@keyframes nc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* =====================  Consola / log  ===================== */
.nc-console {
    background: #0b0f18;
    border-radius: var(--nc-radius);
    padding: 10px 12px;
    font-family: var(--nc-font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--nc-slate-400);
}
.nc-log-ok, .log-ok { color: var(--nc-brand-success); }
.nc-log-info, .log-info { color: var(--nc-brand-accent); }
.nc-log-warn, .log-warn { color: var(--nc-brand-warn); }
.nc-log-err, .log-err { color: var(--nc-danger); }

/* =====================  Barra de progreso  ===================== */
.nc-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}
.nc-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nc-brand-accent), var(--nc-brand-success-solid));
    transition: width .5s ease;
}

/* =====================  Utilidades  ===================== */
.nc-hidden { display: none !important; }
.nc-scroll { scrollbar-width: thin; scrollbar-color: var(--nc-border-strong) transparent; }
.nc-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nc-scroll::-webkit-scrollbar-thumb { background: var(--nc-border-strong); border-radius: 8px; }