/* ============================================================================
   ActualizaERP — Capa de personalización visual
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css (Bootstrap + SB Admin compilados).
   Todo el rediseño vive aquí para no tocar esas ~11,000 líneas generadas:
   si algún día se regenera la plantilla, este archivo sobrevive.

   Solo afecta la PRESENTACIÓN. No cambia comportamiento ni estructura.
   Para revertir por completo: quitar el <link> de _Layout.cshtml.
   ========================================================================== */

:root {
    --erp-ink: #111827; /* texto principal */
    --erp-ink-soft: #6b7280; /* texto secundario */
    --erp-line: #e5e7eb; /* bordes */
    --erp-bg: #f6f7f9; /* fondo de página */
    --erp-surface: #ffffff; /* tarjetas */
    --erp-brand: #ffc107; /* amarillo institucional */
    --erp-sidebar: #1a1d21; /* lateral */
    --erp-radius: .625rem;
}

/* ── Tipografía ────────────────────────────────────────────────────────────
   Inter con la pila del sistema como respaldo: si la fuente no carga,
   el sitio se sigue viendo correcto.                                       */
body,
.sb-nav-fixed .sb-topnav,
.btn,
.form-control,
.form-select,
.dropdown-menu,
table {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--erp-bg);
    color: var(--erp-ink);
    font-size: .9375rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--erp-ink);
    letter-spacing: -.01em;
}

/* ── Barra superior ───────────────────────────────────────────────────── */
.sb-topnav {
    background-color: var(--erp-sidebar) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    height: 3.5rem;
}

/* ── Menú lateral ─────────────────────────────────────────────────────────
   El tema original usaba texto al 50% e íconos al 25% de opacidad: quedaba
   lavado y por debajo del contraste mínimo accesible.

   Nota sobre los selectores: la plantilla define el enlace del menú como
   `.sb-sidenav .sb-sidenav-menu .nav .nav-link` (4 clases). Toda regla de
   aquí que compita con ella necesita al menos esa especificidad, o se pierde
   en silencio. Por eso los selectores llevan `.nav` aunque parezca de más. */
.sb-sidenav-dark {
    background-color: var(--erp-sidebar);
}

    .sb-sidenav-dark .sb-sidenav-menu .nav .nav-link {
        color: rgba(255,255,255,.72);
        border-radius: .5rem;
        margin: .125rem .5rem;
        padding: .55rem .75rem;
        transition: background-color .12s ease, color .12s ease;
    }

        .sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
            color: rgba(255,255,255,.5);
            transition: color .12s ease;
        }

        .sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
            background-color: rgba(255,255,255,.07);
            color: #fff;
        }

            .sb-sidenav-dark .sb-sidenav-menu .nav-link:hover .sb-nav-link-icon {
                color: #fff;
            }

    /* Módulo abierto: barra amarilla + fondo tenue para saber dónde se está */
    .sb-sidenav-dark .sb-sidenav-menu .nav-link[aria-expanded="true"],
    .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
        background-color: rgba(255,193,7,.12);
        color: #fff;
        box-shadow: inset 3px 0 0 var(--erp-brand);
    }

        .sb-sidenav-dark .sb-sidenav-menu .nav-link[aria-expanded="true"] .sb-nav-link-icon,
        .sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
            color: var(--erp-brand);
        }

    .sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
        color: rgba(255,255,255,.35);
        font-size: .7rem;
        letter-spacing: .08em;
        padding-bottom: .25rem;
    }

    /* ── Submenús ──────────────────────────────────────────────────────────
       Una guía vertical marca de dónde cuelgan las opciones: sin ella eran
       solo texto indentado y costaba ver a qué módulo pertenecían.         */
    .sb-sidenav-dark .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
        margin-left: 1.6rem;
        padding-left: .35rem;
        border-left: 1px solid rgba(255,255,255,.1);
    }

        .sb-sidenav-dark .sb-sidenav-menu .nav .sb-sidenav-menu-nested .nav-link {
            font-size: .875rem;
            padding: .45rem .75rem;
            margin: .0625rem .5rem .0625rem .25rem;
        }

        /* La opción activa no lleva la barra amarilla del módulo (quedaban dos
           barras seguidas); se marca con un punto a la izquierda del texto.  */
        .sb-sidenav-dark .sb-sidenav-menu .nav .sb-sidenav-menu-nested .nav-link.active {
            box-shadow: none;
            font-weight: 500;
        }

            .sb-sidenav-dark .sb-sidenav-menu .nav .sb-sidenav-menu-nested .nav-link.active::before {
                content: "";
                position: absolute;
                left: -.6rem;
                top: 50%;
                transform: translateY(-50%);
                width: .3rem;
                height: .3rem;
                border-radius: 50%;
                background-color: var(--erp-brand);
            }

    /* ── Buscador del menú ─────────────────────────────────────────────────
       Con 13 módulos abiertos la lista no cabe en pantalla; esto filtra las
       opciones de todos los módulos a la vez.                              */
    /* La caja con borde es el contenedor, no el <input>: el ícono y el campo son
       hermanos en una fila flex. Así no hace falta posicionar nada en absoluto
       ni cuadrar el ícono a mano contra el alto del campo.                    */
    .menu-buscador {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: .75rem .875rem .5rem;
        padding: .4rem .6rem;
        background-color: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: .5rem;
        transition: border-color .12s ease, background-color .12s ease;
    }

        .menu-buscador:focus-within {
            background-color: rgba(255,255,255,.1);
            border-color: rgba(255,193,7,.5);
        }

        /* Font Awesome se carga por JS (all.js) y sustituye cada <i> por un <svg>,
           así que hay que contemplar ambos: el <i> antes de que corra el script
           y el <svg> después. El color funciona porque el svg usa currentColor. */
        .menu-buscador i,
        .menu-buscador svg {
            flex: none;
            font-size: .75rem;
            color: rgba(255,255,255,.4);
        }

        .menu-buscador input {
            /* min-width:0 evita que el ancho mínimo del input desborde la caja */
            flex: 1 1 auto;
            min-width: 0;
            background: transparent;
            border: 0;
            padding: 0;
            outline: none;
            color: #fff;
            font-size: .8125rem;
        }

            .menu-buscador input::placeholder {
                color: rgba(255,255,255,.4);
            }

            /* La X nativa de type="search" es casi invisible sobre el fondo oscuro */
            .menu-buscador input::-webkit-search-cancel-button {
                -webkit-appearance: none;
                appearance: none;
            }

    .menu-sin-resultados {
        color: rgba(255,255,255,.45);
        font-size: .8125rem;
        padding: .75rem 1.25rem;
    }

    .sb-sidenav-dark .sb-sidenav-footer {
        background-color: rgba(255,255,255,.04);
        border-top: 1px solid rgba(255,255,255,.06);
        font-size: .8125rem;
    }

/* ── Tarjetas: borde sutil en vez de sombra difusa ───────────────────── */
.card {
    border: 1px solid var(--erp-line);
    border-radius: var(--erp-radius);
    box-shadow: none;
}

    /* Las vistas usan .shadow-sm en muchas tarjetas: se suaviza sin quitarla */
    .card.shadow-sm {
        box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
    }

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--erp-line);
}

/* ── Formularios ─────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--erp-line);
    border-radius: .5rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--erp-brand);
        box-shadow: 0 0 0 3px rgba(255,193,7,.18);
    }

.form-label {
    font-weight: 500;
    color: var(--erp-ink);
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
    border-radius: .5rem;
    font-weight: 500;
    transition: filter .12s ease, box-shadow .12s ease;
}

    .btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(255,193,7,.35);
    }

    .btn-warning:hover {
        filter: brightness(.96);
    }

/* Foco visible en toda la interfaz: antes navegar con teclado era a ciegas */
a:focus-visible,
button:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--erp-brand);
    outline-offset: 2px;
}

/* ── Pantallas de acceso ──────────────────────────────────────────────────
   El login vive en _LayoutLogin.cshtml, un layout aparte que hasta ahora no
   cargaba esta hoja: se había quedado con el azul de la plantilla original.
   Todo va bajo .login-body para no afectar al resto del sitio.

   Se usa el mismo gris oscuro de la barra lateral, así el acceso y el sistema
   ya adentro se ven como la misma aplicación.                              */
.login-body {
    background-color: var(--erp-sidebar) !important;
    min-height: 100vh;
    /* El color plano dejaba una superficie muerta en pantallas grandes. Dos
       degradados radiales muy tenues centrados detrás de la tarjeta le dan
       profundidad sin meter ruido ni un color nuevo. */
    background-image: radial-gradient(1100px 620px at 50% 30%, rgba(255,193,7,.06), transparent 70%), radial-gradient(820px 480px at 50% 26%, rgba(255,255,255,.05), transparent 72%);
    background-repeat: no-repeat;
}

    /* La tarjeta venía pegada arriba con mt-5 y todo el vacío caía debajo.
       Centrada, el espacio se reparte y la pantalla deja de verse a medias. */
    .login-body #layoutAuthentication_content {
        display: flex;
        align-items: center;
    }

        .login-body #layoutAuthentication_content main {
            width: 100%;
        }

        .login-body #layoutAuthentication_content .card {
            margin-top: 0 !important;
        }

    .login-body .card {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: var(--erp-radius);
        box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.35);
    }

    .login-body .card-header,
    .login-body .card-footer {
        background-color: transparent;
        border-color: var(--erp-line);
    }

    /* El pie del layout de Identity venía con bg-light: sobre el fondo oscuro
       se veía como una franja blanca pegada abajo. Ahora es una línea discreta
       separada por un filete apenas visible, en vez de una barra. */
    .login-body footer.bg-light {
        background-color: transparent !important;
        border-top: 1px solid rgba(255,255,255,.07);
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

.login-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
    color: rgba(255,255,255,.45);
    font-size: .8125rem;
}

    .login-pie .separador {
        opacity: .4;
    }

    /* La bandera colgaba sola en la esquina derecha, sin decir a dónde llevaba */
    .login-pie a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        color: rgba(255,255,255,.6);
        text-decoration: none;
    }

        .login-pie a:hover {
            color: #fff;
        }

        .login-pie a img {
            height: 1rem;
            width: auto;
        }

    /* El botón de entrar es la acción principal: mismo amarillo que Guardar y
       Enviar en el resto del sistema. */
    .login-body .btn-primary {
        background-color: var(--erp-brand);
        border-color: var(--erp-brand);
        color: #1a1d21;
        font-weight: 600;
    }

        .login-body .btn-primary:hover,
        .login-body .btn-primary:focus {
            background-color: var(--erp-brand);
            border-color: var(--erp-brand);
            color: #1a1d21;
            filter: brightness(.96);
        }

/* ── Tablas ──────────────────────────────────────────────────────────── */
.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

.table > thead {
    border-bottom: 2px solid var(--erp-line);
}

    .table > thead th {
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--erp-ink-soft);
    }

.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,193,7,.06);
}

/* ── Menús desplegables ──────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--erp-line);
    border-radius: var(--erp-radius);
    box-shadow: 0 8px 24px rgba(16,24,40,.08);
    padding: .3rem;
}

.dropdown-item {
    border-radius: .375rem;
    padding: .45rem .6rem;
    font-size: .875rem;
}

/* ── Detalles ────────────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    letter-spacing: .01em;
}

footer.py-4 {
    background-color: transparent !important;
    border-top: 1px solid var(--erp-line);
    font-size: .8125rem;
}

.modal-content {
    border: none;
    border-radius: .75rem;
}

/* ── Encabezado de página (<page-header>) ─────────────────────────────────
   Centraliza el patrón que estaba repetido en decenas de vistas.          */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--erp-line);
}

.page-breadcrumb {
    font-size: .75rem;
    color: var(--erp-ink-soft);
    margin-bottom: .25rem;
}

    .page-breadcrumb .sep {
        margin: 0 .4rem;
        opacity: .5;
    }

    .page-breadcrumb .actual {
        color: var(--erp-ink);
        font-weight: 500;
    }

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--erp-ink);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle {
    font-size: .875rem;
    color: var(--erp-ink-soft);
    margin: .25rem 0 0;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* ── Barra de carga al navegar ───────────────────────────────────────── */
#barraCarga {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--erp-brand);
    z-index: 2000;
    opacity: 0;
    transition: none;
}

    #barraCarga.cargando {
        opacity: 1;
        width: 92%;
        transition: width 8s cubic-bezier(.05,.7,.1,1);
    }

/* ── Botón de búsqueda en la barra superior ──────────────────────────── */
.topnav-search {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
    border-radius: .5rem;
    font-size: .8125rem;
    padding: .35rem .75rem;
    min-width: 2.5rem;
}

    .topnav-search:hover {
        background: rgba(255,255,255,.14);
        color: #fff;
    }

    .topnav-search kbd {
        background: rgba(255,255,255,.12);
        border-radius: .25rem;
        padding: .1rem .35rem;
        font-size: .7rem;
        color: rgba(255,255,255,.75);
    }

/* ── Búsqueda rápida (Ctrl+K) ────────────────────────────────────────── */
.busqueda-rapida {
    border-radius: .75rem;
    overflow: hidden;
}

.busqueda-input {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--erp-line);
    color: var(--erp-ink-soft);
}

    .busqueda-input .form-control {
        border: none;
        box-shadow: none !important;
        padding: 0;
        font-size: 1rem;
    }

.busqueda-resultados {
    max-height: 22rem;
    overflow-y: auto;
    padding: .35rem;
}

.busqueda-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem .75rem;
    border-radius: .5rem;
    text-decoration: none;
    color: var(--erp-ink);
}

    .busqueda-item .modulo {
        font-size: .75rem;
        color: var(--erp-ink-soft);
    }

    .busqueda-item.activo,
    .busqueda-item:hover {
        background: rgba(255,193,7,.14);
        color: var(--erp-ink);
    }

.busqueda-vacio {
    padding: 1.25rem;
    text-align: center;
    color: var(--erp-ink-soft);
    font-size: .875rem;
}

/* ── Estado vacío para tablas ────────────────────────────────────────── */
.estado-vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--erp-ink-soft);
}

    /* Igual que en el buscador: Font Awesome convierte el <i> en <svg> */
    .estado-vacio i,
    .estado-vacio svg {
        font-size: 1.75rem;
        opacity: .35;
        display: block;
        margin-bottom: .6rem;
        margin-inline: auto;
    }

.alert {
    border: 1px solid transparent;
    border-radius: var(--erp-radius);
}