/* NALTI DESIGN SYSTEM v2.0 
    Estándar de Continuidad Operativa - Komitachi 2026
*/

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

:root {
    --n-black: #000000;
    --n-white: #ffffff;
    --n-zinc-50: #fafafa;
    --n-zinc-100: #f4f4f5;
    --n-zinc-400: #a1a1aa;
    --n-zinc-500: #71717a;
    --n-border: 1px solid #e5e7eb;
    --n-border-dark: 1px solid #000000;
    --font-main: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

/* --- RESET & ESTRUCTURA GLOBAL --- */
body {
    font-family: var(--font-main);
    background-color: var(--n-white);
    color: var(--n-black);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- AJUSTE DE ESPACIADO --- */
main.main-content {
    margin-top: 75px; /* Reducido de 100px a 75px */
    min-height: 80vh;
}

/* También eliminamos un posible espacio extra en el primer contenedor */
.main-content > .container:first-child {
    padding-top: 0 !important;
}

/* --- NAVEGACIÓN (COHESIÓN LOGO-MENÚ) --- */
.navbar {
    padding: 1.2rem 0;
    background-color: var(--n-white) !important;
    border-bottom: var(--n-border) !important;
}

    /* Ajuste de cercanía: Limitamos el ancho del contenedor interno 
   para que el logo y el menú no se vayan a los extremos de la pantalla */
    .navbar > .container {
        max-width: 1000px;
        justify-content: space-between;
    }

.nav-logo {
    height: 28px;
    filter: contrast(1.1);
    transition: transform 0.3s ease;
}

.nav-link {
    font-family: var(--font-mono);
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--n-zinc-500) !important;
    transition: color 0.3s ease, transform 0.2s ease;
}

    .nav-link:hover {
        color: var(--n-black) !important;
        transform: translateY(-1px);
    }

/* --- FORMULARIOS (ESTILO QUIRÚRGICO) --- */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--n-zinc-500);
    margin-bottom: 0.6rem;
    display: block;
    font-weight: 500;
}

.form-control, .form-select {
    border-radius: 0 !important;
    border: 1px solid var(--n-zinc-100);
    background-color: var(--n-zinc-100);
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-family: var(--font-main);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-control:focus, .form-select:focus {
        background-color: var(--n-white);
        border-color: var(--n-black);
        box-shadow: none;
        outline: none;
    }

/* --- BOTONES --- */
.btn-n-dark {
    background-color: var(--n-black);
    color: var(--n-white);
    border: 1px solid var(--n-black);
    border-radius: 0;
    padding: 0.8rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    transition: all 0.4s ease;
}

    .btn-n-dark:hover {
        background-color: var(--n-white);
        color: var(--n-black);
    }

.btn-n-outline {
    background-color: transparent;
    color: var(--n-black);
    border: 1px solid var(--n-black);
    border-radius: 0;
    padding: 0.8rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    transition: all 0.3s ease;
}

    .btn-n-outline:hover {
        background-color: var(--n-black);
        color: var(--n-white);
    }

/* --- TABLAS Y DATOS (CURADURÍA) --- */
.n-table-container {
    border: var(--n-border-dark);
    padding: 0;
    background: var(--n-white);
}

.n-table {
    width: 100%;
    margin-bottom: 0;
}

    .n-table thead th {
        font-family: var(--font-mono);
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding: 1.2rem 1rem;
        background-color: var(--n-white);
        border-bottom: 2px solid var(--n-black);
        color: var(--n-zinc-400);
    }

    .n-table tbody td {
        padding: 1rem;
        font-size: 0.8rem;
        border-bottom: var(--n-border);
        vertical-align: middle;
    }

/* --- FOOTER INSTITUCIONAL --- */
footer {
    background-color: var(--n-white);
    border-top: var(--n-border-dark) !important;
    padding: 4rem 0 2rem 0 !important;
}

.footer-brand {
    font-family: var(--font-mono);
    letter-spacing: 0.6em;
    font-weight: 400;
    font-size: 0.9rem;
}

.footer-link {
    text-decoration: none;
    color: var(--n-zinc-500);
    font-size: 0.6rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: color 0.3s ease;
}

    .footer-link:hover {
        color: var(--n-black);
    }

/* --- UTILIDADES DE TEXTO --- */
.text-tracking-widest {
    letter-spacing: 0.4em !important;
}

.font-mono {
    font-family: var(--font-mono) !important;
}

.text-tiny {
    font-size: 0.6rem !important;
}

/* Estilos para mantener la estética monospace / border-dark en las pestañas */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #212529 !important; /* text-dark de Bootstrap */
    color: white !important;
}