/* ============================================================================
   estilos.css
   Estilos propios del ERP Multiempresa. Complementa a Bootstrap 5.
   Define: layout general, barra superior, menú lateral colapsable y utilidades.
   ============================================================================ */

:root {
    --color-primario: #1e3a5f;
    --color-primario-oscuro: #14263f;
    --color-acento: #2f80ed;
    --sidebar-ancho: 250px;
}

body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------- Barra superior ---------------------------- */
.topbar {
    background-color: var(--color-primario);
    height: 56px;
}

/* ---------------------------- Menú lateral ---------------------------- */
.sidebar {
    width: var(--sidebar-ancho);
    min-width: var(--sidebar-ancho);
    background-color: var(--color-primario-oscuro);
    min-height: calc(100vh - 56px);
    transition: margin-left .25s ease;
    overflow-y: auto;
}

.sidebar.collapsed {
    margin-left: calc(var(--sidebar-ancho) * -1);
}

.sidebar .nav-link {
    color: #cdd7e3;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(255,255,255,.08);
    color: #ffffff;
}

.sidebar .submenu .nav-link {
    padding-left: 2.5rem;
    font-size: .9rem;
}

/* Segundo nivel de anidación (p.ej. Inventarios > Transacciones > Movimientos) */
.sidebar .submenu-nivel2 .nav-link {
    padding-left: 3.5rem;
    font-size: .85rem;
}

/* ---------------------------- Contenido ---------------------------- */
.contenido {
    min-height: calc(100vh - 56px);
    width: 100%;
}

/* ---------------------------- Tarjetas de indicadores (dashboard) ---------------------------- */
.tarjeta-indicador {
    border: none;
    border-radius: .75rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.tarjeta-indicador .icono {
    font-size: 2.2rem;
    opacity: .85;
}

.bg-indicador-1 { background: linear-gradient(135deg, #2f80ed, #1e3a5f); }
.bg-indicador-2 { background: linear-gradient(135deg, #27ae60, #145a32); }
.bg-indicador-3 { background: linear-gradient(135deg, #f2994a, #b9770e); }
.bg-indicador-4 { background: linear-gradient(135deg, #eb5757, #922b21); }
.bg-indicador-5 { background: linear-gradient(135deg, #9b59b6, #5b2c6f); }
.bg-indicador-6 { background: linear-gradient(135deg, #17a2b8, #0e6674); }

/* ---------------------------- Login ---------------------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
}

.login-card {
    max-width: 400px;
    width: 100%;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ---------------------------- Modales con formulario ---------------------------- */
/* Todos los modales de la app envuelven modal-header/modal-body/modal-footer
   dentro de un <form> (para que un solo submit cubra todo el modal). Bootstrap
   necesita que esos tres sean HIJOS DIRECTOS de .modal-content (display:flex)
   para calcular el alto y activar el scroll interno de modal-dialog-scrollable;
   el <form> de por medio rompe esa relación y el modal se desborda de la
   pantalla en vez de scrollear internamente. display:contents saca al <form>
   del árbol de cajas sin quitarlo del DOM, así FormData/submit siguen intactos.
*/
.modal-content > form {
    display: contents;
}

/* ---------------------------- POS (Punto de Venta) ---------------------------- */
.pos-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: calc(100vh - 56px - 2rem); /* alto de viewport menos topbar y padding del <main> */
}

.pos-productos-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.pos-buscador-wrapper {
    position: relative;
    margin-bottom: .75rem;
}

.pos-buscador-icono {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-acento);
    font-size: 1.3rem;
    pointer-events: none;
}

.pos-buscador {
    padding-left: 2.75rem;
}

.pos-productos-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    align-content: start;
    padding: .25rem;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pos-producto-card {
    border: 1px solid #e3e6ea;
    border-radius: .6rem;
    padding: .75rem .6rem;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pos-producto-card:hover {
    border-color: var(--color-acento);
    box-shadow: 0 4px 10px rgba(47,128,237,.15);
    transform: translateY(-2px);
}

.pos-producto-card .pos-producto-nombre {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 2.1em;
}

.pos-producto-card .pos-producto-precio {
    color: var(--color-acento);
    font-weight: 700;
}

.pos-producto-card .pos-producto-existencia {
    font-size: .72rem;
    color: #888;
}

.pos-producto-card.agotado {
    opacity: .45;
    cursor: not-allowed;
}

.pos-producto-card.agotado:hover {
    transform: none;
    box-shadow: none;
    border-color: #e3e6ea;
}

.pos-carrito-col {
    flex: 0 0 380px;
    height: 100%;
}

.pos-carrito-card {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pos-config {
    border-bottom: 1px solid #eee;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
    font-size: .9rem;
}

.pos-carrito-lista {
    flex: 1;
    overflow-y: auto;
    margin-bottom: .5rem;
}

.pos-carrito-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.pos-carrito-item .pos-item-nombre {
    font-size: .85rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-carrito-item .pos-item-precio {
    font-size: .78rem;
    color: #888;
}

.pos-qty-control {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.pos-qty-control button {
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    padding: 0;
}

.pos-qty-control input {
    width: 2.6rem;
    text-align: center;
    padding: .1rem;
    font-size: .85rem;
}

/* La cantidad del carrito se captura con type="text" para que el navegador no
   dibuje sus flechas de subir/bajar junto a los botones − / +. Esto es el
   resguardo por si alguna vez vuelve a ser type="number". */
.pos-qty-control input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pos-qty-control input[type="number"]::-webkit-outer-spin-button,
.pos-qty-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pos-item-subtotal {
    font-weight: 700;
    font-size: .85rem;
    min-width: 70px;
    text-align: right;
}

.pos-totales {
    border-top: 1px solid #eee;
    padding-top: .5rem;
    margin-bottom: .75rem;
}

.pos-total-final {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-primario);
    margin-top: .25rem;
}

.pos-btn-cobrar {
    font-weight: 700;
    letter-spacing: .3px;
}

@media (max-width: 991.98px) {
    .pos-layout {
        flex-direction: column;
        height: auto;
        /* En fila (escritorio), flex-start alinea arriba las dos columnas sin
           estirarlas verticalmente. Al apilarse en columna aquí, ese mismo
           align-items pasa a controlar el eje horizontal y, sin stretch,
           cada columna se encoge a su contenido en vez de ocupar el ancho
           completo (por eso el buscador quedaba angosto en móvil). */
        align-items: stretch;
    }
    .pos-productos-col { height: 55vh; }
    .pos-carrito-col { flex-basis: auto; width: 100%; height: auto; }
    .pos-carrito-card { height: auto; }
    .pos-carrito-lista { max-height: 40vh; }
}

@media (max-width: 575.98px) {
    /* En celulares angostos, form-control-lg + el padding del ícono no dejan
       suficiente espacio para el placeholder completo del buscador. */
    .pos-buscador {
        font-size: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: 2.4rem;
    }
    .pos-buscador-icono {
        left: .75rem;
        font-size: 1.1rem;
    }
    .pos-productos-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* ---------------------------- Utilidades generales ---------------------------- */
.cursor-pointer { cursor: pointer; }
.tabla-acciones a, .tabla-acciones button { margin-right: .25rem; }
.badge-estado-activo { background-color: #27ae60; }
.badge-estado-inactivo { background-color: #95a5a6; }

/* ---------------------------- Flujo de aprobación (diagrama de pasos) ---------------------------- */
/* Usado en compras/detalle_solicitud.php (ver construirFlujoAprobacionHtml()
   en assets/js/detalle_solicitud.js) para mostrar visualmente el flujo de
   aprobación multinivel corriendo sobre una solicitud de compra. Clase
   acotada (sin selectores globales) para poder vivir dentro de cualquier
   tarjeta sin filtrar estilos al resto de la aplicación. */
.flujo-aprobacion { display: flex; flex-wrap: wrap; align-items: stretch; }
.flujo-aprobacion .paso-flujo {
    flex: 1 1 160px; min-width: 160px; max-width: 220px;
    border: 1px solid #dee2e6; border-radius: .5rem; padding: .75rem; text-align: center;
    background: #fff; position: relative;
}
.flujo-aprobacion .paso-flujo + .paso-flujo { margin-left: 1.75rem; }
.flujo-aprobacion .paso-flujo + .paso-flujo::before {
    content: ''; position: absolute; left: -1.75rem; top: 50%; width: 1.75rem; height: 2px;
    background: #adb5bd; transform: translateY(-50%);
}
.flujo-aprobacion .paso-flujo.paso-pendiente { border-color: #ffc107; background: #fffbf0; }
.flujo-aprobacion .paso-flujo.paso-aprobado { border-color: #198754; background: #f1f9f4; }
.flujo-aprobacion .paso-flujo.paso-rechazado { border-color: #dc3545; background: #fdf1f2; }
.flujo-aprobacion .paso-flujo .paso-icono { font-size: 1.4rem; }
.flujo-aprobacion .paso-flujo.paso-pendiente .paso-icono { color: #b8860b; }
.flujo-aprobacion .paso-flujo.paso-aprobado .paso-icono { color: #198754; }
.flujo-aprobacion .paso-flujo.paso-rechazado .paso-icono { color: #dc3545; }
.flujo-aprobacion .paso-flujo .paso-nombre { font-weight: 600; font-size: .85rem; margin-top: .25rem; }
.flujo-aprobacion .paso-flujo .paso-usuario { font-size: .8rem; color: #6c757d; }
.flujo-aprobacion .paso-flujo .paso-fecha { font-size: .72rem; color: #6c757d; margin-top: .25rem; word-break: break-word; }

@media (max-width: 767.98px) {
    .flujo-aprobacion { flex-direction: column; }
    .flujo-aprobacion .paso-flujo { max-width: none; }
    .flujo-aprobacion .paso-flujo + .paso-flujo { margin-left: 0; margin-top: 1.75rem; }
    .flujo-aprobacion .paso-flujo + .paso-flujo::before {
        left: 50%; top: -1.75rem; width: 2px; height: 1.75rem; transform: translateX(-50%);
    }
}

/* ---------------------------- Paginación con muchas páginas ---------------------------- */
/* Módulos con tablas que pueden crecer bastante (ej. auditoria) generan un
   botón por página sin límite — sin esto, `.pagination` (flex, sin wrap por
   defecto en Bootstrap) se desborda horizontalmente en pantallas angostas en
   vez de quedar contenido, como sí ocurre con las tablas gracias a
   .table-responsive. Aplicar esta clase al <nav> que envuelve el <ul.pagination>. */
.pagination-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pagination-scroll .pagination {
    flex-wrap: nowrap;
}

/* ------------------- Árbol de permisos (Administración > Permisos) -------------------
   Tres niveles: sección del menú -> módulo del catálogo -> las seis acciones.
   Todo el acordeón es CSS + el atributo `hidden`, sin bootstrap.Collapse: la
   búsqueda necesita abrir niveles de forma inmediata y sincrónica, y una
   transición a medias dejaría el estado visual peleado con el del repintado. */
.arbol-permisos {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    overflow: hidden;
}
.arbol-permisos .seccion-permisos + .seccion-permisos { border-top: 1px solid var(--bs-border-color); }

.cabecera-permisos {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}
.cabecera-permisos.nivel-modulo { background-color: var(--bs-tertiary-bg); }
.seccion-permisos.abierta > .cabecera-permisos.nivel-modulo { border-bottom: 1px solid var(--bs-border-color); }
.cabecera-permisos.nivel-submodulo { padding-left: 1.75rem; }
.submodulo-permisos + .submodulo-permisos > .cabecera-permisos { border-top: 1px dashed var(--bs-border-color); }

/* El botón ocupa el resto de la fila para que se pueda abrir tocando en
   cualquier parte del título, sin robarle el clic a la casilla del grupo. */
.cabecera-permisos .btn-arbol {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    background: none;
    border: 0;
    padding: .125rem 0;
    text-align: left;
    color: inherit;
}
.cabecera-permisos .btn-arbol:hover .titulo { text-decoration: underline; }
.cabecera-permisos .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-permisos.nivel-modulo .titulo { font-weight: 600; }
.cabecera-permisos .chevron { font-size: .75rem; color: var(--bs-secondary-color); flex-shrink: 0; }

.contador-permisos {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    white-space: nowrap;
}

/* Las acciones se reparten en columnas y se apilan solas en pantallas
   angostas: la pantalla debe servir igual en tablet (§10). */
.lista-permisos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .25rem 1rem;
    padding: .5rem .75rem .75rem 3rem;
}
.permiso-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    cursor: pointer;
}
.permiso-item:hover { background-color: var(--bs-tertiary-bg); }
.permiso-item input:disabled { cursor: not-allowed; }
.permiso-item.sensible > span { font-weight: 500; }
.permiso-item.resaltado { background-color: var(--bs-warning-bg-subtle); }

.resumen-permisos { min-height: 2.5rem; }

@media (max-width: 575.98px) {
    .cabecera-permisos.nivel-submodulo { padding-left: 1rem; }
    .lista-permisos { padding-left: 1.5rem; grid-template-columns: 1fr; }
}

/* ---------------------------- Responsivo ---------------------------- */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        z-index: 1040;
        left: 0;
        top: 56px;
        margin-left: calc(var(--sidebar-ancho) * -1);
    }
    .sidebar.mostrar {
        margin-left: 0;
        box-shadow: 4px 0 10px rgba(0,0,0,.2);
    }
    .sidebar.collapsed { margin-left: calc(var(--sidebar-ancho) * -1); }
}

/* =====================================================================
   Catálogo de Cuentas: árbol + panel lateral (contabilidad/cuentas_contables.php)
   ===================================================================== */
.catalogo-cuentas .arbol-cuentas { max-height: calc(100vh - 290px); min-height: 320px; overflow-y: auto; }
.catalogo-cuentas .arbol-cuentas-encabezado {
    padding: .45rem .75rem .45rem 2.3rem; font-size: .75rem; font-weight: 600; text-transform: uppercase;
    color: var(--bs-secondary-color); border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
}
.catalogo-cuentas .col-tipo { width: 120px; flex-shrink: 0; }
.catalogo-cuentas .col-naturaleza { width: 90px; flex-shrink: 0; }
.catalogo-cuentas .nodo-cuenta {
    display: flex; align-items: center; gap: .5rem; padding-top: .45rem; padding-bottom: .45rem; padding-right: .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent); cursor: pointer; border-left: 3px solid transparent;
}
.catalogo-cuentas .nodo-cuenta:hover { background: var(--bs-tertiary-bg); }
.catalogo-cuentas .nodo-cuenta:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.catalogo-cuentas .nodo-cuenta.seleccionado { background: rgba(var(--bs-primary-rgb), .08); border-left-color: var(--bs-primary); }
.catalogo-cuentas .nodo-cuenta.inactiva .nombre-cuenta,
.catalogo-cuentas .nodo-cuenta.inactiva .codigo-cuenta { color: var(--bs-secondary-color); text-decoration: line-through; }
.catalogo-cuentas .nodo-cuenta.coincide { background: rgba(var(--bs-warning-rgb), .08); }
.catalogo-cuentas .toggle-nodo { width: 1.1rem; color: var(--bs-secondary-color); line-height: 1; }
.catalogo-cuentas .toggle-espacio { width: 1.1rem; flex-shrink: 0; }
.catalogo-cuentas .codigo-cuenta { font-family: var(--bs-font-monospace); font-size: .8rem; color: var(--bs-secondary-color); min-width: 3.5rem; }
.catalogo-cuentas .elemento-cuenta { font-weight: 600; font-size: .8rem; }
.elemento-cuenta.elemento-ACTIVO     { background: #d1f0e0; color: #146c43; }
.elemento-cuenta.elemento-PASIVO     { background: #fde2c8; color: #9a4a0b; }
.elemento-cuenta.elemento-PATRIMONIO { background: #dbe4ff; color: #2b3f8f; }
.elemento-cuenta.elemento-INGRESO    { background: #cff4fc; color: #055160; }
.elemento-cuenta.elemento-COSTO      { background: #f8d7da; color: #842029; }
.elemento-cuenta.elemento-GASTO      { background: #fff3cd; color: #7a5c00; }
.catalogo-cuentas .panel-cuenta { position: sticky; top: 1rem; }
.catalogo-cuentas .panel-cuenta .card-body { max-height: calc(100vh - 230px); overflow-y: auto; }
.catalogo-cuentas .detalle-cuenta dd { word-break: break-word; }
@media (max-width: 991.98px) {
    .catalogo-cuentas .arbol-cuentas { max-height: 60vh; }
    .catalogo-cuentas .panel-cuenta { position: static; }
    .catalogo-cuentas .panel-cuenta .card-body { max-height: none; }
}