/* ---------------------------------------------------------------------------
   Capa de diseno sobre Bootstrap 5.3. Sin build: se edita y se sube.
   Los colores corporativos entran por variables desde Configuracion, asi que
   cambiar la marca no obliga a tocar este archivo.

   Orden del archivo: tokens -> layout (sidebar, topbar) -> piezas -> movil.
--------------------------------------------------------------------------- */

/* ------------------------------------------------------------------- tokens */

:root {
    --erp-sidebar-w: 250px;
    --erp-topbar-h: 60px;
    --erp-radius: 14px;
    --erp-radius-sm: 10px;

    --erp-sidebar-bg: #0f172a;
    --erp-sidebar-fg: #97a3b6;
    --erp-sidebar-active: #1e293b;

    --erp-surface: #ffffff;
    --erp-canvas: #f4f6f9;
    --erp-border: #e6e9ef;
    --erp-muted: #6b7280;

    /* Sombras en capas: mas suaves y mas creibles que una sola sombra dura. */
    --erp-sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
    --erp-sombra-2: 0 4px 14px rgba(16, 24, 40, .07);
    --erp-sombra-3: 0 18px 44px rgba(15, 23, 42, .16);

    /* Respeta la muesca y la barra de gestos del iPhone. */
    --erp-safe-l: env(safe-area-inset-left, 0px);
    --erp-safe-r: env(safe-area-inset-right, 0px);
    --erp-safe-b: env(safe-area-inset-bottom, 0px);
}

[data-bs-theme="dark"] {
    --erp-sidebar-bg: #0b1120;
    --erp-sidebar-active: #172033;
    --erp-surface: #151b28;
    --erp-canvas: #0f141f;
    --erp-border: #253044;
    --erp-muted: #94a3b8;

    --erp-sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --erp-sombra-2: 0 4px 14px rgba(0, 0, 0, .4);
    --erp-sombra-3: 0 18px 44px rgba(0, 0, 0, .55);
}

body {
    background: var(--erp-canvas);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.925rem;
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;   /* iOS no reescala el texto al girar el telefono */
}

/* Un solo anillo de foco para todo, visible en claro y en oscuro. */
:focus-visible {
    outline: 2px solid var(--erp-acento, var(--bs-primary));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ sidebar */

.erp-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--erp-sidebar-w);
    background: var(--erp-sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1045;
    padding-left: var(--erp-safe-l);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}

.erp-sidebar .marca {
    min-height: var(--erp-topbar-h);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.1rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: -.01em;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.erp-sidebar .marca .logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--bs-primary), var(--erp-acento, #7c3aed));
    display: grid;
    place-items: center;
    font-size: .8rem;
    flex: 0 0 auto;
}

/* El isotipo corporativo es oscuro: necesita fondo claro para leerse aqui. */
.erp-sidebar .marca .logo-chip {
    background: #fff;
    border-radius: 9px;
    padding: .28rem .35rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.erp-sidebar .marca .logo-chip img {
    display: block;
    width: 30px;
    height: auto;
}

.erp-sidebar .marca .nombre-empresa {
    font-size: .78rem;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* razones sociales largas: dos lineas y corta */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Cerrar el menu en movil. En escritorio no existe: la barra es fija. */
.erp-cerrar-menu {
    display: none;
    margin-left: auto;
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* El menu se compacta lo suficiente para entrar completo en una pantalla de
   portatil sin desplazarse. Antes pedia scroll por unos 40px de mas y aparecia
   una barra gris permanente al lado de los items. */
.erp-nav {
    padding: .5rem .55rem;
    overflow-y: auto;
    overscroll-behavior: contain;   /* al llegar al final no arrastra la pagina de atras */
    flex: 1;

    /* Firefox: barra fina y sin color hasta que el puntero entra a la barra
       lateral. El area sigue siendo desplazable con rueda, teclado y gesto. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s ease;
}

.erp-sidebar:hover .erp-nav,
.erp-nav:focus-within {
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

/* WebKit / Chrome / Edge / Safari: misma idea. La barra se dibuja encima del
   contenido y no le roba ancho, asi el menu no se mueve al aparecer. */
.erp-nav::-webkit-scrollbar { width: 6px; }
.erp-nav::-webkit-scrollbar-track { background: transparent; }

.erp-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background .2s ease;
}

.erp-sidebar:hover .erp-nav::-webkit-scrollbar-thumb,
.erp-nav:focus-within::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
}

.erp-nav::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .6); }

.erp-nav .titulo {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    padding: .8rem .6rem .3rem;
}

/* El primer grupo no necesita separarse de la marca. */
.erp-nav .titulo:first-child { padding-top: .3rem; }

.erp-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .48rem .65rem;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-sidebar-fg);
    text-decoration: none;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.erp-nav a:hover {
    background: var(--erp-sidebar-active);
    color: #e2e8f0;
}

/* El indicador usa el acento, no el primario: el primario corporativo es
   pizarra oscura y sobre la barra lateral no se veria. */
.erp-nav a.activo {
    background: var(--erp-sidebar-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--erp-acento, var(--bs-primary));
}

.erp-nav a.disabled { pointer-events: none; }

.erp-nav svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: .85;
}

/* Creditos del desarrollador, al pie de la barra lateral. */
.erp-pie {
    padding: .65rem 1.1rem calc(.65rem + var(--erp-safe-b));
    border-top: 1px solid rgba(255, 255, 255, .07);
    flex: 0 0 auto;
}

.erp-pie a {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .66rem;
    line-height: 1.4;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: color .12s ease;
}

.erp-pie a:hover { color: #94a3b8; }
.erp-pie strong { color: #cbd5e1; font-weight: 600; }

/* Pantallas bajas (portatiles de 13-14", ventana no maximizada). Se aprieta el
   menu lo justo para que entre entero y no aparezca la barra por 20px de mas. */
@media (max-height: 760px) {
    .erp-nav { padding: .35rem .55rem; }
    .erp-nav a { padding: .4rem .65rem; }
    .erp-nav .titulo { padding: .6rem .6rem .25rem; }
}

@media (max-height: 700px) {
    .erp-pie .texto { display: none; }   /* mas bajas todavia: solo el logotipo */
}

/* Fondo oscurecido detras del menu movil. Existe siempre en el DOM y se
   enciende con .visible: animar opacidad no obliga a recalcular layout. */
.erp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    z-index: 1044;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
}

.erp-backdrop.visible { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------- topbar */

.erp-topbar {
    position: sticky;
    top: 0;
    min-height: var(--erp-topbar-h);
    background: var(--erp-surface);
    border-bottom: 1px solid var(--erp-border);
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0 1.25rem;
    padding-right: calc(1.25rem + var(--erp-safe-r));
    z-index: 1030;
}

.erp-main {
    margin-left: var(--erp-sidebar-w);
    min-height: 100vh;
    min-height: 100dvh;    /* dvh: la barra del navegador movil no deja un hueco */
}

.erp-contenido {
    padding: 1.5rem;
    padding-bottom: calc(2.5rem + var(--erp-safe-b));
    max-width: 1500px;
}

.erp-buscador {
    position: relative;
    max-width: 420px;
    flex: 1;
}

.erp-buscador input {
    padding-left: 2.2rem;
    background: var(--erp-canvas);
    border-color: var(--erp-border);
    border-radius: 999px;
}

.erp-buscador .icono {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--erp-muted);
    pointer-events: none;
}

.erp-resultados {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-sombra-3);
    max-height: 380px;
    overflow-y: auto;
    display: none;
    z-index: 1050;
}

.erp-resultados.visible { display: block; }

.erp-resultados a {
    display: block;
    padding: .65rem .9rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--erp-border);
}

.erp-resultados a:last-child { border-bottom: 0; }
.erp-resultados a:hover,
.erp-resultados a:focus-visible { background: var(--erp-canvas); }

/* Avatar con iniciales en el menu de usuario: en movil reemplaza al nombre. */
.erp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bs-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex: 0 0 auto;
}

/* Boton que abre el menu lateral en movil. */
.erp-hamburguesa {
    display: none;
    border: 1px solid var(--erp-border);
    background: var(--erp-surface);
    color: inherit;
    width: 38px;
    height: 38px;
    border-radius: var(--erp-radius-sm);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------- piezas */

.card {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    background: var(--erp-surface);
    box-shadow: var(--erp-sombra-1);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--erp-border);
    font-weight: 600;
    padding: .85rem 1.1rem;
    border-top-left-radius: var(--erp-radius);
    border-top-right-radius: var(--erp-radius);
}

.stat { padding: 1.15rem 1.25rem; }

.stat .etiqueta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--erp-muted);
    font-weight: 600;
}

.stat .valor {
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-top: .35rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;   /* montos largos no desbordan la tarjeta */
}

.stat .icono {
    width: 40px;
    height: 40px;
    border-radius: var(--erp-radius-sm);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

/* Encabezado de pagina: titulo a la izquierda, acciones a la derecha, y en
   telefono las acciones caen abajo ocupando el ancho completo. */
.erp-encabezado {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.tabla-erp { margin: 0; }

.tabla-erp thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--erp-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--erp-border);
    background: transparent;
    white-space: nowrap;
}

.tabla-erp tbody tr { transition: background .1s ease; }
.tabla-erp tbody tr:hover { background: var(--erp-canvas); }

.tabla-erp td {
    vertical-align: middle;
    border-color: var(--erp-border);
}

.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.badge-estado {
    font-weight: 600;
    font-size: .72rem;
    padding: .32rem .62rem;
    border-radius: 999px;
}

/* Editor de partidas */
.tabla-partidas input,
.tabla-partidas select {
    border-color: transparent;
    background: transparent;
    padding: .3rem .45rem;
}

.tabla-partidas input:focus,
.tabla-partidas select:focus {
    background: var(--erp-surface);
    border-color: var(--bs-primary);
}

.tabla-partidas tr.fila-vacia td {
    color: var(--erp-muted);
    text-align: center;
    padding: 1.75rem;
}

.totales dt {
    font-weight: 500;
    color: var(--erp-muted);
}

.totales dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
    margin-bottom: .35rem;
}

.totales .total-final {
    font-size: 1.3rem;
    font-weight: 700;
    border-top: 2px solid var(--erp-border);
    padding-top: .6rem;
    margin-top: .35rem;
}

/* Animaciones: suaves y cortas, no decorativas. */
@media (prefers-reduced-motion: no-preference) {
    .card { animation: aparecer .18s ease both; }
    @keyframes aparecer {
        from { opacity: 0; transform: translateY(3px); }
        to { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    .erp-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .erp-sidebar.abierto {
        transform: none;
        box-shadow: var(--erp-sombra-3);
    }

    .erp-cerrar-menu { display: grid; place-items: center; }
    .erp-hamburguesa { display: inline-flex; }

    .erp-main { margin-left: 0; }
    .erp-contenido { padding: 1rem; padding-bottom: calc(2rem + var(--erp-safe-b)); }

    /* El cuerpo no se desplaza mientras el menu esta abierto. */
    body.menu-abierto { overflow: hidden; }

    /* Objetivos tactiles: 44px es el minimo comodo con el dedo. */
    .erp-nav a { padding: .72rem .7rem; }

    /* En pantalla tactil no hay hover: la barra se deja visible pero tenue,
       porque es la unica senal de que el menu sigue mas abajo. */
    .erp-nav { scrollbar-color: rgba(148, 163, 184, .3) transparent; }
    .erp-nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .3); }
    .erp-topbar .btn { min-height: 38px; }
}

/* Telefono: la topbar se reordena en dos filas y el buscador pasa abajo, a
   ancho completo. Antes competia por el espacio con los tres botones y quedaba
   reducido a un campo de 60px inservible. */
@media (max-width: 575.98px) {
    .erp-topbar {
        flex-wrap: wrap;
        padding: .5rem .85rem;
        gap: .5rem;
    }

    .erp-buscador {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
    }

    /* El nombre del usuario se reemplaza por el avatar con iniciales. */
    .erp-nombre-usuario { display: none; }
    .erp-topbar .dropdown-toggle::after { display: none; }

    /* "+ Nueva cotizacion" se reduce a su verbo. */
    .erp-cta-largo { display: none; }

    .erp-contenido { padding: .85rem; }

    .erp-encabezado > .erp-acciones { width: 100%; }
    .erp-encabezado > .erp-acciones .btn { flex: 1; }

    h1.h4 { font-size: 1.15rem; }
    .stat { padding: .95rem 1rem; }
    .stat .valor { font-size: 1.35rem; }
}

/* --------------------------------------------------- tablas apiladas en movil

   Las tablas de listado no se leen en un telefono ni con scroll horizontal:
   ocho columnas en 360px son ocho columnas ilegibles. Debajo de 768px cada
   fila se convierte en una tarjeta y cada celda muestra su encabezado desde el
   atributo data-etiqueta del HTML. La tabla sigue siendo una tabla (mismo
   marcado, mismo orden de lectura); solo cambia como se dibuja.
-------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .tabla-apilable thead { display: none; }

    .tabla-apilable,
    .tabla-apilable tbody,
    .tabla-apilable tr,
    .tabla-apilable td {
        display: block;
        width: 100%;
    }

    .tabla-apilable tr {
        border: 1px solid var(--erp-border);
        border-radius: var(--erp-radius-sm);
        padding: .35rem .15rem;
        margin: .6rem .75rem;
        background: var(--erp-surface);
    }

    .tabla-apilable tr:hover { background: var(--erp-surface); }

    .tabla-apilable td {
        border: 0;
        padding: .4rem .85rem;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
        max-width: none !important;   /* pisa los style="max-width" de escritorio */
        white-space: normal;
    }

    .tabla-apilable td::before {
        content: attr(data-etiqueta);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--erp-muted);
        font-weight: 600;
        text-align: left;
        flex: 0 0 auto;
    }

    /* La primera celda hace de titulo de la tarjeta y la ultima de barra de
       acciones: ninguna lleva la columna del encabezado. */
    .tabla-apilable td:not([data-etiqueta])::before { content: none; }

    .tabla-apilable td.celda-titulo {
        display: block;
        text-align: left;
        font-size: 1rem;
        padding-top: .6rem;
        padding-bottom: .55rem;
        border-bottom: 1px solid var(--erp-border);
        margin-bottom: .25rem;
    }

    .tabla-apilable td.celda-acciones {
        display: flex;
        justify-content: flex-start;
        gap: .4rem;
        border-top: 1px solid var(--erp-border);
        margin-top: .25rem;
        padding-top: .6rem;
    }

    .tabla-apilable td.celda-acciones .btn { flex: 1; }

    /* La fila de "sin resultados" y el pie de totales no se apilan. */
    .tabla-apilable td[colspan] { display: block; text-align: center; }
    .tabla-apilable td[colspan]::before { content: none; }
    .tabla-apilable tfoot td { text-align: right; }
}

@media print {
    .erp-sidebar, .erp-topbar, .erp-backdrop, .no-imprimir { display: none !important; }
    .erp-main { margin-left: 0; }
    .card { box-shadow: none; border-color: #ccc; }
}