:root {
    --ancho-menu: 300px;
    --ancho-menu-colapsado: 50px;
    --azul-principal: #0f2f67;
    --azul-borde: #0a234c;
    --azul-hover: #0b2755;
    --verde-submenu: #3b9f6c;
    --verde-submenu-hover: #348f61;
    --gris-fondo: #e7e7e7;
    --gris-panel: #ffffff;
    --texto: #1b1b1b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--texto);
}

.oculto {
    display: none !important;
}

.cabecera-contenido h1,
.cabecera-contenido p {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

.cabecera-contenido h1 {
    letter-spacing: 0.01em;
}

.cabecera-contenido p {
    line-height: 1.45;
}

.fondo-acceso {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f4fb 0%, #dce7f8 100%);
}

.contenedor-acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.panel-acceso {
    width: min(440px, 100%);
    background: #ffffff;
    border: 1px solid #c8d8f1;
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
    padding: 22px;
}

.cabecera-acceso h1 {
    margin: 0 0 8px;
    color: var(--azul-principal);
}

.marca {
    margin: 0;
    color: #3b3b3b;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cabecera-acceso p {
    margin: 0;
    color: #4a4a4a;
}

.form-acceso {
    margin-top: 18px;
    display: grid;
    gap: 8px;
}

.form-acceso input[type="text"],
.form-acceso input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #b9c7dd;
    border-radius: 6px;
    font-size: 14px;
}

.form-acceso input[type="text"]:focus,
.form-acceso input[type="password"]:focus {
    outline: none;
    border-color: var(--azul-principal);
    box-shadow: 0 0 0 3px rgba(24, 86, 173, 0.15);
}

.opcion-recordarme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #2f3f58;
    font-size: 14px;
}

.opcion-recordarme input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-acceso button,
.btn-secundario {
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
}

.form-acceso button {
    margin-top: 10px;
    background: var(--azul-principal);
    color: #ffffff;
}

.form-acceso button:hover {
    background: var(--azul-hover);
}

.mensaje-login {
    min-height: 20px;
    margin: 10px 0 0;
    color: #b13232;
    font-size: 14px;
}

.btn-xs {
    padding: 6px 8px;
    font-size: 12px;
    min-height: 32px;
}

.btn-icono-accion {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.input-con-btn-lupa {
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-con-btn-lupa > input,
.input-con-btn-lupa > select {
    flex: 1 1 auto;
    min-width: 0;
}

.btn-texto-linea {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.celda-acciones-usuarios {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#filtro-sucursal-usuario-sistema {
    min-width: 190px;
    max-width: 260px;
}

#filtro-tipo-usuario-sistema,
#filtro-activo-usuario-sistema {
    min-width: 160px;
}

.tarjeta-usuarios-sistema .acciones-filtros-compactos {
    gap: 6px;
    margin-bottom: 6px;
}

.tarjeta-usuarios-sistema .acciones-filtros-compactos input,
.tarjeta-usuarios-sistema .acciones-filtros-compactos select,
.tarjeta-usuarios-sistema .acciones-filtros-compactos button {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
}

.tarjeta-usuarios-sistema .tabla-listado {
    font-size: 12px !important;
    table-layout: auto;
}

.tarjeta-usuarios-sistema .tabla-listado th,
.tarjeta-usuarios-sistema .tabla-listado td {
    padding: 4px 6px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
    font-size: 12px !important;
}

.tarjeta-usuarios-sistema .tabla-listado th {
    font-size: 12px !important;
}

.tarjeta-usuarios-sistema .btn-xs {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
}

.tarjeta-usuarios-sistema .celda-acciones-usuarios {
    gap: 4px;
    flex-wrap: nowrap;
}

.tarjeta-usuarios-sistema .btn-icono-accion {
    width: 26px !important;
    min-width: 26px !important;
    justify-content: center;
    padding: 0 !important;
}

.tarjeta-usuarios-sistema .badge-estado-usuario {
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.badge-estado-usuario {
    display: inline-block;
    border-radius: 12px;
    padding: 3px 10px;
    font-weight: 700;
    font-size: 12px;
}

.badge-estado-activo {
    color: #0d5a3f;
    background: #d4f2e4;
    border: 1px solid #a7dec6;
}

.badge-estado-inactivo {
    color: #7f1d1d;
    background: #ffe0e0;
    border: 1px solid #efb5b5;
}

.badge-estado-caja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    border: 1px solid transparent;
}

.badge-estado-caja-abierto {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}

.badge-estado-caja-cerrado {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

.badge-estado-caja-neutro {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}

/* Regla global de grillas: hover + anulados */
.tabla-listado tbody tr {
    transition: background-color 120ms ease;
}

.tabla-listado tbody tr:hover td {
    background: #edf4ff !important;
}

.tabla-listado tbody tr.fila-anulada td {
    background: #ffe9e9 !important;
    color: #8d1f1f !important;
    border-color: #f0b3b3 !important;
}

.tabla-listado tbody tr.fila-anulada:hover td {
    background: #ffdfdf !important;
}

.tabla-listado tbody tr.fila-oc-vencida td {
    background: #fff1f1 !important;
    color: #8a1f1f !important;
    border-color: #efb2b2 !important;
}

.tabla-listado tbody tr.fila-oc-vencida:hover td {
    background: #ffe2e2 !important;
}

.tabla-listado tbody tr.fila-qr-on td {
    background: #eaf9ef !important;
}

.tabla-listado tbody tr.fila-qr-on:hover td {
    background: #ddf2e6 !important;
}

.tabla-listado tbody tr.fila-qr-off td {
    background: #fff8df !important;
}

.tabla-listado tbody tr.fila-qr-off:hover td {
    background: #fff2c8 !important;
}

.modal-permisos-contenido {
    width: min(980px, 96vw);
}

.contenedor-permisos-menu {
    max-height: 56vh;
    overflow: auto;
    border: 1px solid #c8d8f1;
    border-radius: 8px;
    padding: 8px;
    background: #f7fbff;
}

.permiso-menu-bloque {
    border: 1px solid #d4e0f2;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.permiso-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1a3f78;
    padding: 8px 10px;
    border-bottom: 1px solid #e4ecf8;
}

.permiso-submenu-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px 10px;
    padding: 8px 10px;
}

.permiso-submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #294d80;
    font-size: 13px;
}

.celda-cargando-tabla {
    text-align: center;
    color: #1e3f72;
    font-weight: 600;
    padding: 14px 8px !important;
}

.celda-cargando-tabla-placeholder {
    padding: 12px 10px !important;
}

.tabla-placeholder-bloque {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(460px, 96%);
}

.tabla-placeholder-lineas {
    width: 100%;
    display: grid;
    gap: 7px;
}

.tabla-placeholder-linea {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e8eef8 25%, #d8e4f5 50%, #e8eef8 75%);
    background-size: 220% 100%;
    animation: tabla-placeholder-shimmer 1.1s ease-in-out infinite;
}

.tabla-placeholder-linea:nth-child(2) {
    width: 92%;
}

.tabla-placeholder-linea:nth-child(3) {
    width: 84%;
}

.tabla-placeholder-texto {
    color: #335d97;
    font-weight: 600;
}

.spinner-fino {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid #a9c0e6;
    border-top-color: #2a66b8;
    animation: giro-spinner-fino 0.75s linear infinite;
    vertical-align: -2px;
}

.spinner-fino-inline {
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -1px;
}

.btn-cargando {
    cursor: wait !important;
    pointer-events: none;
    opacity: 0.82;
}

.btn-cargando .btn-cargando-label {
    white-space: nowrap;
}

@keyframes giro-spinner-fino {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tabla-placeholder-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.rbac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 12px;
}

.rbac-columna {
    background: #f7f9fc;
    border: 1px solid #c8d8f1;
    border-radius: 8px;
    padding: 10px;
    min-height: 360px;
}

.rbac-columna h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--azul-principal);
}

.rbac-columna-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.rbac-seleccionado {
    margin: 0 0 8px;
    color: #1e3f72;
    font-weight: 600;
}

.rbac-tabla-scroll {
    max-height: 520px;
}

#rbac-usuarios-body tr {
    cursor: pointer;
}

#rbac-usuarios-body tr.fila-activa td {
    background: #dff1e5;
}

.rbac-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 520px;
    overflow: auto;
    border: 1px solid #c8d8f1;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
}

.rbac-item-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #d6e2f3;
    border-radius: 6px;
    font-size: 14px;
    color: #153764;
}

/* Backups superadmin: listas de tablas mas compactas */
#bk_tablas_criticas,
#bk_tablas_con_datos_extra,
#bk_tablas_forzar_sin_datos {
    max-height: 180px;
    min-height: 180px;
    overflow: auto;
    padding: 4px;
}

#bk_tablas_criticas .rbac-item-check,
#bk_tablas_con_datos_extra .rbac-item-check,
#bk_tablas_forzar_sin_datos .rbac-item-check {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    padding: 2px 5px;
    font-size: 11px;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.05;
}

#bk_tablas_criticas .rbac-item-check input[type="checkbox"],
#bk_tablas_con_datos_extra .rbac-item-check input[type="checkbox"],
#bk_tablas_forzar_sin_datos .rbac-item-check input[type="checkbox"] {
    width: 11px;
    height: 11px;
    margin: 0;
    flex: 0 0 11px;
}

#bk_tablas_criticas .rbac-item-check span,
#bk_tablas_con_datos_extra .rbac-item-check span,
#bk_tablas_forzar_sin_datos .rbac-item-check span {
    display: inline-block !important;
    line-height: 1.1;
}

.acciones-backups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.acciones-backups .btn-secundario {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.backups-comandos-consola {
    margin-top: 10px;
    border: 1px solid #cfdbef;
    border-radius: 8px;
    background: #f7fbff;
    padding: 8px;
}

.backups-comandos-consola h3 {
    margin: 0 0 6px;
    color: #1e3f72;
    font-size: 13px;
}

.backups-comandos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px;
    font-size: 12px;
}

.backups-comandos-grid div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.backups-comandos-grid code {
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 11px;
    color: #0f3567;
}

.rbac-item-check code {
    color: #0f3b77;
    font-size: 12px;
}

.rbac-item-bloqueado {
    opacity: 0.55;
}

.rbac-vacio {
    color: #5a6f8f;
    font-size: 13px;
    padding: 8px;
}

.licencias-grid,
.licencias-resumen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.licencias-col {
    border: 1px solid #c8d8f1;
    background: #f7f9fc;
    border-radius: 8px;
    padding: 10px;
}

.licencias-col h2,
.licencias-col h3 {
    margin: 0 0 10px;
    color: var(--azul-principal);
}

.licencias-col-formulario {
    padding: 12px;
}

.detalle-vigente-licencia {
    border: 1px solid #d6e2f3;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    margin-bottom: 10px;
}

.detalle-vigente-licencia p {
    margin: 0 0 6px;
}

.licencias-form-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 10px;
}

.licencias-form-grid .campo-ancho-total {
    grid-column: 1 / -1;
}

.licencias-campo {
    min-width: 0;
}

.licencias-bloque-modulos {
    border: 1px solid #d6e2f3;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
}

.licencias-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
}

.licencias-acciones .btn-secundario {
    min-height: 32px;
}

.licencias-bloque-modulos-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #1d417a;
    font-size: 13px;
}

.licencias-catalogo-tools {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.licencias-catalogo-tools input {
    min-width: 0;
}

.licencias-catalogo-lista {
    max-height: 360px;
    overflow: auto;
    border: 1px solid #e0e8f6;
    border-radius: 6px;
    padding: 8px;
    display: block;
    background: #f8fbff;
}

/* Modulos a activar: sin scroll interno, mostrar todo el arbol */
#licencias-catalogo-lista.licencias-catalogo-lista {
    max-height: none !important;
    overflow: visible !important;
}

.licencias-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px;
}

.licencias-catalogo-menu {
    border: 1px solid #dce7f8;
    border-radius: 8px;
    background: #fbfdff;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 0;
}

.licencias-catalogo-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    background: #edf4ff;
    margin-bottom: 0;
}

.licencias-check-menu-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.licencias-catalogo-menu h4 {
    margin: 0;
    font-size: 12px;
    color: #1d417a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.licencias-catalogo-menu-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #5a6f8f;
}

.licencias-catalogo-sublista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: none;
    overflow: visible;
    padding: 6px;
}

.licencias-check-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #143863;
    background: #fff;
    border: 1px solid #dce7f8;
    border-radius: 6px;
    padding: 6px 8px;
}

.licencias-catalogo-menu-arbol .licencias-catalogo-menu-header {
    padding: 6px 8px;
}

.licencias-catalogo-menu-arbol .licencias-catalogo-menu h4,
.licencias-catalogo-menu-arbol h4 {
    font-size: 12px;
    letter-spacing: 0.02em;
}

.licencias-check-item-arbol {
    grid-template-columns: auto auto 1fr auto;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    min-height: 28px;
}

.licencias-check-item-arbol input[type="checkbox"] {
    width: 13px;
    height: 13px;
}

.licencias-check-item-arbol .licencias-check-icono {
    color: #4d78b7;
    font-size: 11px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.licencias-check-item-arbol:has(input:checked) .licencias-check-icono {
    opacity: 1;
}

.licencias-check-item-arbol .licencias-check-submenu {
    font-size: 12px;
    font-weight: 600;
}

.licencias-check-item-arbol .licencias-check-codigo {
    font-size: 10px;
    opacity: 0.8;
}

.licencias-catalogo-menu-arbol .licencias-catalogo-menu-meta {
    gap: 6px;
}

.licencias-catalogo-menu-arbol .licencias-btn-menu-todo {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

.licencias-bloque-modulos .licencias-catalogo-tools button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
}

.licencias-check-submenu {
    font-weight: 600;
    color: #173f73;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.licencias-check-codigo {
    margin-left: auto;
    font-size: 10px;
    color: #4f6c99;
}

@media (max-width: 980px) {
    .licencias-acciones {
        justify-content: flex-start;
    }

    .licencias-catalogo-lista {
        max-height: 240px;
    }
}

.licencias-check-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

#form-licencia-guardar label {
    align-content: start;
}

.licencias-ayuda-linea {
    margin-top: -2px;
}

.licencias-col-resumen .rbac-check-list {
    max-height: 300px;
}

.licencias-plan-editor {
    margin-top: 10px;
    border-top: 1px solid #d6e2f3;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.licencias-plan-editor label {
    min-width: 220px;
}

.licencias-planes-fijos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 10px;
}

.licencias-plan-card {
    border: 1px solid #c8d8f1;
    border-radius: 8px;
    background: #f8fbff;
    padding: 10px;
}

.licencias-plan-card-activo {
    border-color: #39b96f;
    box-shadow: 0 0 0 2px rgba(57, 185, 111, 0.22), inset 0 0 0 1px rgba(57, 185, 111, 0.18);
    background: linear-gradient(180deg, #f2fff7 0%, #f8fbff 24%);
}

.licencias-plan-card-activo .licencias-plan-card-cabecera {
    border-radius: 6px;
    padding: 4px 6px;
    background: linear-gradient(180deg, #4ddf39 0%, #31ca1f 100%);
}

.licencias-plan-card-activo .licencias-plan-card-cabecera h3,
.licencias-plan-card-activo .licencias-plan-card-cabecera .rbac-vacio {
    color: #083b1e;
    font-weight: 700;
}

.licencias-alertas-box {
    margin-top: 8px;
    border: 1px solid #f2c66a;
    border-radius: 8px;
    background: #fff9ea;
    padding: 8px 10px;
}

.licencias-alerta-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.licencias-alertas-advertencia {
    border-color: #f2c66a;
    background: #fff9ea;
}

.licencias-alertas-critica {
    border-color: #e5a6a6;
    background: #ffecec;
}

.licencias-alertas-info {
    border-color: #9fc3e8;
    background: #edf5ff;
}

.licencias-alerta-advertencia {
    color: #8f5a00;
}

.licencias-alerta-critica {
    color: #922b2b;
}

.licencias-alerta-info {
    color: #1e3f72;
}

.licencias-alerta-item:last-child {
    margin-bottom: 0;
}

.licencias-alerta-item i {
    margin-top: 2px;
}

.licencias-campo-alerta {
    border-color: #d85c5c !important;
    box-shadow: 0 0 0 2px rgba(216, 92, 92, 0.18) !important;
    background: #fff5f5 !important;
}

.licencias-plan-card-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.licencias-plan-card-cabecera h3 {
    margin: 0;
    color: var(--azul-principal);
    font-size: 18px;
}

.licencias-plan-tree {
    border: 1px solid #d6e2f3;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
    max-height: 320px;
    overflow: auto;
}

.licencias-plan-menu {
    border: 1px solid #dce7f8;
    border-radius: 6px;
    background: #fbfdff;
    margin-bottom: 7px;
    overflow: hidden;
}

.licencias-plan-menu summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 700;
    color: #183f74;
    background: #edf4ff;
}

.licencias-plan-menu summary::-webkit-details-marker {
    display: none;
}

.licencias-plan-menu ul {
    margin: 0;
    padding: 6px 8px 8px 8px;
}

.licencias-plan-menu li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-size: 12px;
    color: #173e73;
    border-bottom: 1px solid #edf2fb;
}

.licencias-plan-menu li:last-child {
    border-bottom: 0;
}

@media (max-width: 1300px) {
    .rbac-grid {
        grid-template-columns: 1fr;
    }

    .licencias-grid,
    .licencias-resumen-grid {
        grid-template-columns: 1fr;
    }

    .licencias-form-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .licencias-planes-fijos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .licencias-catalogo-tools {
        grid-template-columns: 1fr;
    }

    .licencias-catalogo-lista {
        grid-template-columns: 1fr;
    }

    .licencias-form-grid {
        grid-template-columns: 1fr;
    }

    .licencias-acciones {
        justify-content: flex-start;
    }
}

/* Modulo Liquidaciones de Sueldos */
.liquidaciones-layout {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(520px, 1.1fr);
    gap: 10px;
}

.liquidaciones-panel {
    border: 1px solid #d3deef;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
    min-width: 0;
}

.liquidaciones-panel h3 {
    margin: 0 0 8px;
    color: #204a86;
    font-size: 18px;
}

.liquidaciones-filtros {
    grid-template-columns: 140px minmax(280px, 1.4fr) 150px 120px auto;
    align-items: end;
}

.liquidaciones-filtros .acciones-filtros-liquidaciones {
    justify-content: flex-end;
    align-items: center;
    align-self: end;
    gap: 8px;
    flex-wrap: wrap;
}

.liquidaciones-filtros .acciones-filtros-liquidaciones .btn-secundario {
    min-height: 32px;
    height: 32px;
}

.liquidaciones-detalle-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.liquidaciones-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px;
}

.liquidaciones-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid #c5d7f3;
    background: #eef4ff;
    color: #1f477f;
    padding: 3px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.liquidaciones-resumen-novedades {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 1200px) {
    .liquidaciones-layout {
        grid-template-columns: 1fr;
    }

    .liquidaciones-filtros {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .liquidaciones-filtros .acciones-filtros-liquidaciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.fondo-app {
    background: var(--gris-fondo);
    min-height: 100vh;
    margin-left: var(--ancho-menu-colapsado);
    transition: margin-left 300ms ease;
}

.fondo-app.body-expanded {
    margin-left: var(--ancho-menu);
}

#sidemenu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: #0b2346;
    background-image:
        radial-gradient(circle at 0.5px 0.5px, rgba(255, 255, 255, 0.035) 0.45px, transparent 0),
        linear-gradient(220deg, var(--azul-principal) 0%, #163a70 50%, #0a1f3f 100%);
    background-size: 3px 3px, 100% 100%;
    color: #ffffff;
    z-index: 100;
    transition: width 300ms ease;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #2f67ad #12335f;
}

#sidemenu a,
#sidemenu button {
    color: #ffffff;
    text-decoration: none;
}

#sidemenu #header {
    border-bottom: 1px solid var(--azul-borde);
    display: flex;
    align-items: center;
}

#sidemenu #title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px;
    cursor: pointer;
}

#sidemenu #title .logo-expandido {
    display: block;
    width: 122px;
    max-height: 34px;
    object-fit: contain;
}

#sidemenu #title .logo-colapsado {
    display: none;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#sidemenu #menu-btn {
    cursor: pointer;
    width: var(--ancho-menu-colapsado);
    padding: 10px;
}

#sidemenu #menu-btn:hover {
    background: var(--azul-hover);
}

#sidemenu .btn-hamburguesa {
    width: 100%;
    height: 2px;
    background: #ffffff;
    margin: 5px 0;
}

#sidemenu #profile {
    border-bottom: 1px solid var(--azul-borde);
    text-align: center;
}

#sidemenu #profile #photo {
    background: var(--verde-submenu);
    padding: 10px 8px 6px;
    font-size: 58px;
    line-height: 1;
}

#sidemenu #profile #name {
    background: var(--verde-submenu);
    padding: 8px;
    font-size: 14px;
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.1px;
    overflow: hidden;
    white-space: nowrap;
}

#sidemenu #menu-items .item,
#sidemenu #menu-items .item-link,
#sidemenu #menu-items .item button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

#sidemenu::-webkit-scrollbar {
    width: 6px;
}

#sidemenu::-webkit-scrollbar-track {
    background: #12335f;
}

#sidemenu::-webkit-scrollbar-thumb {
    background: #2f67ad;
    border-radius: 8px;
}

#sidemenu::-webkit-scrollbar-thumb:hover {
    background: #3e7ac5;
}

#sidemenu #menu-items .linea {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    padding-right: 8px;
}

#sidemenu #menu-items .icon {
    width: 34px;
    min-width: 34px;
    text-align: center;
    margin-left: 8px;
    padding: 0;
    font-size: 16px;
    color: #7dd8ff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    height: 34px;
}

#sidemenu.menu-expanded #menu-items .icon {
    color: #0f2f67;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.95);
}

#sidemenu #menu-items .title {
    padding: 8px;
    font-size: 14px;
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
}

#sidemenu #menu-items .item:hover,
#sidemenu #menu-items .item-link:hover,
#sidemenu #menu-items .item button:hover {
    background: var(--azul-hover);
}

#sidemenu #menu-items .item.separador {
    height: 1px;
    margin: 2px 10px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.menu-expanded {
    width: var(--ancho-menu);
}

.menu-expanded #title {
    width: calc(var(--ancho-menu) - var(--ancho-menu-colapsado));
}

.menu-expanded #title .logo-expandido {
    display: block;
}

.menu-expanded #title .logo-colapsado {
    display: none;
}

.menu-collapsed {
    width: var(--ancho-menu-colapsado);
}

.menu-collapsed #title {
    display: flex;
    width: 100%;
    padding: 6px 0 8px;
}

.menu-collapsed #title .logo-expandido {
    display: none;
}

.menu-collapsed #title .logo-colapsado {
    display: block;
}

.menu-collapsed #name,
.menu-collapsed .title {
    width: 0;
    padding: 0;
    overflow: hidden;
}

.menu-collapsed #menu-items .flecha {
    display: none !important;
}

.menu-collapsed #profile {
    display: none;
}

#sidemenu.menu-collapsed #menu-items .title {
    display: none !important;
}

#sidemenu.menu-collapsed #menu-items .linea {
    justify-content: center;
    padding-right: 0;
}

#sidemenu.menu-collapsed #menu-items .icon {
    margin-left: 0;
}

#sidemenu.menu-collapsed #header {
    display: block;
}

#sidemenu.menu-collapsed #menu-btn {
    width: 100%;
}

#sidemenu #profile #photo i {
    display: inline-block;
    color: #ffffff;
    background: #0f2f67;
    border: 0;
    border-radius: 999px;
    padding: 6px;
}

#sidemenu #profile #name span {
    font-weight: 600;
}

.menu-collapsed #profile,
.menu-collapsed #name,
.menu-collapsed .title {
    overflow: hidden;
}

.contenido-principal {
    padding: 16px;
}

.cabecera-contenido {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border: 1px solid #cfdbef;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(18, 43, 82, 0.08);
}

.cabecera-contenido h1 {
    margin: 0;
    color: var(--azul-principal);
    font-size: 22px;
}

.cabecera-contenido p {
    margin: 6px 0 0;
    color: #4b4b4b;
    font-size: 10pt;
}

.cabecera-contenido-con-control {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.cabecera-titulos-modulo {
    min-width: 0;
    flex: 1 1 auto;
}

.cabecera-control-modulo-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 280px;
}

.cabecera-control-modulo-derecha .cabecera-badge-modo-calculo {
    margin-top: 0;
}

.acciones-filtros-cabecera-modulo {
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .cabecera-contenido-con-control {
        flex-direction: column;
        align-items: stretch;
    }

    .cabecera-control-modulo-derecha {
        min-width: 0;
        align-items: flex-start;
    }

    .acciones-filtros-cabecera-modulo {
        justify-content: flex-start;
    }
}

.cabecera-badge-modo-calculo {
    margin-top: 10px;
}

.badge-modo-calculo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid transparent;
}

.badge-modo-calculo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

.badge-modo-legacy {
    color: #6b3f00;
    background: #fff4dd;
    border-color: #f0d9a8;
}

.badge-modo-markup {
    color: #0f4f3a;
    background: #e4fbf1;
    border-color: #a6e8cc;
}

.tablero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.tarjeta-modulo {
    background: var(--gris-panel);
    border: 1px solid #d3deef;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 10px 20px rgba(17, 38, 71, 0.08);
}

.tarjeta-modulo h2 {
    margin-top: 0;
    color: #1e3f72;
    font-size: 18px;
}

.tarjeta-modulo p {
    margin: 0 0 12px;
    color: #4a4a4a;
    font-size: 14px;
}

.tarjeta-modulo a {
    color: #033780;
    font-weight: 700;
    text-decoration: none;
}

.tarjeta-modulo a:hover {
    text-decoration: underline;
}

.tarjeta-modulo.tarjeta-modulo-verde {
    border-color: #8ac9a9;
    background: linear-gradient(180deg, #effaf4 0%, #e8f5ee 100%);
}

.tarjeta-modulo.tarjeta-modulo-verde h2 {
    color: #1d6b41;
}

.tarjeta-modulo.tarjeta-modulo-amarillo {
    border-color: #d2c08a;
    background: linear-gradient(180deg, #fffbea 0%, #f8f1d8 100%);
}

.tarjeta-modulo.tarjeta-modulo-amarillo h2 {
    color: #735500;
}

.tarjeta-modulo.tarjeta-modulo-afip {
    min-width: 0;
}

.tarjeta-modulo.tarjeta-modulo-rosado {
    border-color: #d7a2b6;
    background: linear-gradient(180deg, #fff2f7 0%, #ffe6ef 100%);
}

.tarjeta-modulo.tarjeta-modulo-rosado h2 {
    color: #8a2d53;
}

@media (min-width: 980px) {
    .tablero .tarjeta-modulo.tarjeta-modulo-afip {
        grid-column: span 1;
    }
}

.btn-secundario {
    background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%);
    color: #14345f;
    border: 1px solid #b4c6e6;
}

.btn-secundario:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #e2ebfa 100%);
    border-color: #99b3df;
}

.sync-tabs {
    align-items: center;
}

.sync-tab.activo,
.sync-tab[aria-selected="true"] {
    background: linear-gradient(180deg, #1f57a4 0%, #163d78 100%);
    color: #ffffff;
    border-color: #163d78;
    box-shadow: 0 0 0 2px rgba(31, 87, 164, 0.18);
}

.sync-tab.activo:hover,
.sync-tab[aria-selected="true"]:hover {
    background: linear-gradient(180deg, #244f95 0%, #15386e 100%);
    color: #ffffff;
}

/* Colores semanticos reutilizables para acciones (sin alterar tamanos compactos) */
.btn-accion-editar {
    color: #0f4b7f;
    border-color: #8dc0e8;
    background: #e4f4ff;
}

.btn-accion-editar:hover {
    background: #d5ebfb;
    border-color: #7fb0d9;
}

.btn-accion-eliminar {
    color: #8b1f1f;
    border-color: #f1aaaa;
    background: #fde3e3;
}

.btn-accion-eliminar:hover {
    background: #ffd7d7;
    border-color: #e99696;
}

.btn-accion-copiar {
    color: #7b5b00;
    border-color: #efd38f;
    background: #fff3cf;
}

.btn-accion-copiar:hover {
    background: #ffeab4;
    border-color: #ddb96a;
}

.btn-accion-imprimir {
    color: #3f4b57;
    border-color: #b9c4cf;
    background: #eef2f5;
}

.btn-accion-imprimir:hover {
    background: #e3e9ef;
    border-color: #a8b6c2;
}

.btn-accion-ver {
    color: #1f4f8f;
    border-color: #9ec4f0;
    background: #e8f3ff;
}

.btn-accion-ver:hover {
    background: #d7eafc;
    border-color: #89b0dd;
}

/* Auto-mapeo semantico para botones legacy del proyecto */
:is(.btn-editar, [class*="btn-editar-"], .btn-tabla[data-accion="editar"], .btn-icono-accion[data-accion="editar"]) {
    color: #0f4b7f !important;
    border-color: #8dc0e8 !important;
    background: #e4f4ff !important;
}

:is(.btn-editar, [class*="btn-editar-"], .btn-tabla[data-accion="editar"], .btn-icono-accion[data-accion="editar"]):hover {
    background: #d5ebfb !important;
}

:is(.btn-eliminar, [class*="btn-eliminar-"], .sp-eliminar, .btn-tabla[data-accion^="eliminar"], .btn-icono-accion[data-accion="eliminar"]) {
    color: #8b1f1f !important;
    border-color: #f1aaaa !important;
    background: #fde3e3 !important;
}

:is(.btn-eliminar, [class*="btn-eliminar-"], .sp-eliminar, .btn-tabla[data-accion^="eliminar"], .btn-icono-accion[data-accion="eliminar"]):hover {
    background: #ffd7d7 !important;
}

:is(.btn-tabla[data-accion="copiar"], .btn-icono-accion[data-accion="copiar"], [class*="btn-copiar-"]) {
    color: #7b5b00 !important;
    border-color: #efd38f !important;
    background: #fff3cf !important;
}

:is(.btn-tabla[data-accion="copiar"], .btn-icono-accion[data-accion="copiar"], [class*="btn-copiar-"]):hover {
    background: #ffeab4 !important;
}

:is([class*="btn-imp-"], [class*="btn-imprimir-"], .btn-icono-accion[data-accion="imprimir"]) {
    color: #3f4b57 !important;
    border-color: #b9c4cf !important;
    background: #eef2f5 !important;
}

:is([class*="btn-imp-"], [class*="btn-imprimir-"], .btn-icono-accion[data-accion="imprimir"]):hover {
    background: #e3e9ef !important;
}

:is(.btn-ver, [class*="btn-ver-"], .btn-icono-accion[data-accion="ver"]) {
    color: #1f4f8f !important;
    border-color: #9ec4f0 !important;
    background: #e8f3ff !important;
}

:is(.btn-ver, [class*="btn-ver-"], .btn-icono-accion[data-accion="ver"]):hover {
    background: #d7eafc !important;
}

@media (max-width: 760px) {
    .fondo-app {
        margin-left: 0;
    }

    .fondo-app.body-expanded {
        margin-left: 0;
    }

    #sidemenu {
        width: var(--ancho-menu);
        transform: translateX(-100%);
        transition: transform 250ms ease;
    }

    #sidemenu.menu-expanded {
        transform: translateX(0);
    }

    #sidemenu.menu-collapsed {
        transform: translateX(-100%);
    }

    #sidemenu.menu-collapsed #title,
    #sidemenu.menu-collapsed #name,
    #sidemenu.menu-collapsed .title {
        width: 0;
        padding: 0;
        overflow: hidden;
    }
}

/* Regla global Gestion: botones y modales con radio 7px */
button,
.btn-secundario,
.btn-xs,
.btn-tabla,
.btn-icono-accion,
.btn-cargar-img-articulo,
.ui-btn,
.btn-lupa-filtro,
.btn-mini-accion,
.btn-cerrar-modal {
    border-radius: 7px !important;
}

.modal-articulo-contenido,
.modal-buscador-contenido,
.ui-modal-card,
.modal-permisos-contenido {
    border-radius: 7px !important;
}

/* ---- Formularios transaccionales ---- */
.formulario-preimpreso-wrapper {
    --ft-control-h: 30px;
}

.formulario-cabecera-guia {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.formulario-cabecera-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.formulario-resumen-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
}

.resumen-doc-chip {
    border: 1px solid var(--borde-suave);
    border-radius: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5fd 100%);
    display: grid;
    gap: 4px;
}

.resumen-doc-chip span {
    color: #5b7096;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.resumen-doc-chip strong {
    color: var(--color-azul);
    font-size: 16px;
    font-weight: 800;
}

.formulario-paso {
    border: 2px solid #2a63b8;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
    box-shadow: inset 0 0 0 1px #e4ecf9;
    padding: 8px 10px;
}

.formulario-paso-cabecera {
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.formulario-paso-cabecera h3 {
    margin: 0;
    color: var(--color-azul);
    display: flex;
    align-items: center;
    gap: 8px;
}

.formulario-paso-cabecera small {
    color: #4f6389;
    font-size: 11px;
}

.formulario-paso-cabecera-titulo {
    min-width: 320px;
    flex: 1 1 auto;
}

.formulario-paso-cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
}

.formulario-preimpreso-wrapper .cabecera-contenido {
    border: 2px solid #2a63b8;
    border-radius: 8px;
    padding: 8px 10px;
}

.formulario-bloque-preimpreso .formulario-paso-cabecera {
    border-bottom: 1px dashed #9db7e3;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.formulario-subbloque-logistica {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #9db7e3;
}

#paso-encabezado.formulario-encabezado-colapsado #form-encabezado-formulario,
#paso-encabezado.formulario-encabezado-colapsado #ft-acordeon-avanzado,
#paso-encabezado.formulario-encabezado-colapsado #paso-logistica {
    display: none;
}

#paso-encabezado.formulario-encabezado-colapsado .formulario-paso-cabecera {
    margin-bottom: 0;
}

.paso-num {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a63b8;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.input-accion-inline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}

.formulario-preview-item {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid #c3d1e8;
    border-radius: 8px;
    background: #eff4fc;
    color: #1d3f72;
    font-weight: 700;
    padding: 8px 10px;
    font-size: 13px;
}

.formulario-preview-item.error {
    border-color: #d88d8d;
    background: #fff0f0;
    color: #9b1f1f;
}

#paso-encabezado input[aria-invalid="true"],
#paso-encabezado select[aria-invalid="true"],
#paso-encabezado textarea[aria-invalid="true"] {
    border-color: #cf5555;
    box-shadow: 0 0 0 2px rgba(207, 85, 85, 0.15);
}

.grilla-formulario-logistica {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.grilla-formulario-transaccion {
    grid-template-columns: repeat(8, minmax(120px, 1fr));
}

.formulario-vinculo-oc-cabecera {
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.formulario-vinculo-oc-cabecera .badge-modo-calculo {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.grilla-avanzada-formulario {
    margin-top: 6px;
}

.formulario-avanzado-acordeon {
    margin-top: 6px;
    border: 1px solid #bfd0ea;
    border-radius: 8px;
    padding: 4px 6px;
    background: #f5f9ff;
}

.formulario-avanzado-acordeon > summary {
    cursor: pointer;
    color: #234e8e;
    font-weight: 800;
    list-style: none;
}

.formulario-avanzado-acordeon > summary::-webkit-details-marker {
    display: none;
}

.formulario-avanzado-acordeon > summary::before {
    content: '\25B8';
    margin-right: 6px;
    color: #2a63b8;
}

.formulario-avanzado-acordeon[open] > summary::before {
    content: '\25BE';
}

.grilla-formulario-items {
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    align-items: end;
}

.grilla-formulario-item-previewcampos {
    margin-top: 6px;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
}

.grilla-formulario-item-previewcampos > label {
    flex: 0 0 84px;
    min-width: 84px;
    white-space: nowrap;
    text-align: left;
}

.grilla-formulario-item-previewcampos input[disabled] {
    background: #ffe9cf;
    border-color: #f0ba7e;
    color: #6f3e06;
    font-weight: 700;
    height: 28px;
    min-height: 28px;
    padding: 3px 7px;
    font-size: 12px;
    text-align: left;
}

.preview-destacado-naranja input[disabled] {
    background: #ffdcae;
    border-color: #e7a45a;
}

#wrap-fi-vista-descripcion {
    /* 4x Presentacion (ancho fijo para evitar solapamientos) */
    flex: 0 0 320px !important;
    min-width: 320px;
    max-width: 320px;
}

#wrap-fi-vista-presentacion,
#wrap-fi-vista-unxbulto,
#wrap-fi-vista-bultosxpalet,
#wrap-fi-vista-bultosxbase,
#wrap-fi-vista-stock {
    flex: 0 0 80px !important;
    min-width: 80px;
    max-width: 80px;
}

#wrap-fi-vista-costo,
#wrap-fi-vista-precio {
    flex: 0 0 104px !important;
    min-width: 104px;
}

.modal-supervisor-formulario {
    max-width: 540px;
}

.modal-editar-item-formulario {
    max-width: 860px;
}

.texto-error-formulario {
    margin: 4px 0 0 0;
    color: #9b1f1f;
    font-weight: 700;
    font-size: 12px;
}

.grilla-formulario-vinculos {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    align-items: end;
    margin-bottom: 8px;
}

.grilla-totales-transaccion {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    margin-top: 6px;
}

.grilla-formulario-items .acciones-filtros,
.grilla-formulario-vinculos .acciones-filtros {
    justify-content: flex-end;
}

.grilla-formulario-items .btn-secundario,
.grilla-formulario-vinculos .btn-secundario {
    width: 100%;
}

.acciones-totales-transaccion {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 8px;
}

.acciones-totales-transaccion .btn-secundario {
    white-space: nowrap;
}

.formulario-observacion-full {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.formulario-observacion-full textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

.btn-peligro {
    background: linear-gradient(180deg, #c64545 0%, #9f2727 100%);
    border-color: #8f1f1f;
    color: #fff;
}

.btn-peligro:hover {
    background: linear-gradient(180deg, #b63d3d 0%, #861f1f 100%);
}

.texto-ayuda {
    color: #5f7196;
    font-size: 11px;
    font-weight: 700;
}

.formulario-preimpreso-wrapper .grilla-filtros {
    gap: 6px 8px;
}

.formulario-preimpreso-wrapper .grilla-filtros label {
    font-size: 12px;
    gap: 3px;
}

.formulario-preimpreso-wrapper .grilla-filtros input,
.formulario-preimpreso-wrapper .grilla-filtros select {
    height: var(--ft-control-h);
    min-height: var(--ft-control-h);
    padding: 4px 8px;
    font-size: 12px;
}

.formulario-preimpreso-wrapper .grilla-filtros textarea {
    padding: 6px 8px;
    font-size: 12px;
}

.campo-obligatorio > span,
.campo-obligatorio::before {
    content: '';
}

.campo-obligatorio {
    position: relative;
}

.label-text-ft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.campo-obligatorio .label-text-ft::after {
    content: '*';
    color: #b02b2b;
    font-weight: 800;
}

@media (max-width: 1250px) {
    .formulario-resumen-top {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    .grilla-formulario-transaccion {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
    .grilla-formulario-logistica,
    .grilla-formulario-items,
    .grilla-formulario-vinculos,
    .grilla-totales-transaccion {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 760px) {
    .formulario-cabecera-guia {
        flex-direction: column;
    }
    .formulario-resumen-top {
        grid-template-columns: 1fr;
    }
    .grilla-formulario-transaccion,
    .grilla-formulario-logistica,
    .grilla-formulario-items,
    .grilla-formulario-vinculos,
    .grilla-totales-transaccion {
        grid-template-columns: 1fr !important;
    }

    .acciones-totales-transaccion {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .acciones-totales-transaccion .btn-secundario {
        width: 100%;
    }
}

/* ---- Formularios refactor ---- */
.formularios-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 10px;
}

.formularios-panel-izquierdo,
.formularios-panel-derecho {
    min-width: 0;
}

.formularios-panel-izquierdo .lista-buzones-oferta {
    max-height: 68vh;
}

.label-filtro-inline {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-azul);
    margin-bottom: 6px;
}

.label-filtro-inline input {
    margin-top: 4px;
    width: 100%;
}

.formularios-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.panel-obsoletos-formularios {
    margin-top: 10px;
    border: 1px solid var(--borde-suave);
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

.panel-obsoletos-formularios h4 {
    margin: 0 0 4px;
    color: var(--color-azul);
}

.panel-obsoletos-formularios p {
    margin: 0 0 6px;
    color: #4b5f84;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .formularios-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .formularios-kpis {
        grid-template-columns: 1fr;
    }
}
.grilla-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.grilla-filtros label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1e3f72;
}

.grilla-filtros input,
.grilla-filtros select,
.grilla-filtros textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
}

.grilla-filtros .input-error-validacion {
    border-color: #c63333 !important;
    box-shadow: 0 0 0 2px rgba(198, 51, 51, 0.16);
    background: #fff5f5 !important;
}

.campo-error-validacion {
    display: block;
    font-size: 11px;
    color: #b32626;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.2;
}

/* UX: campos bloqueados muestran candado al pasar el mouse */
input[readonly]:hover,
input[readonly]:focus,
input:disabled:hover,
input:disabled:focus,
select:disabled:hover,
select:disabled:focus,
textarea[readonly]:hover,
textarea[readonly]:focus,
textarea:disabled:hover,
textarea:disabled:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23516279' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
    padding-right: 28px;
}

input[readonly],
input:disabled,
select:disabled,
textarea[readonly],
textarea:disabled {
    cursor: not-allowed;
}

.campo-con-accion-wrap {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 6px;
    align-items: center;
}

.campo-con-accion-wrap-triple {
    display: grid;
    grid-template-columns: 1fr 34px 34px;
    gap: 6px;
    align-items: center;
}

.campo-con-accion-wrap-boton {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

.campo-filtro-compuesto {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px;
    align-items: center;
}

.campo-filtro-lupa {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 6px;
    align-items: center;
}

.btn-lupa-filtro {
    width: 34px;
    height: 32px;
    border: 1px solid #1e4ea0;
    background: #1e5bb8;
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.btn-lupa-filtro:hover {
    background: #18488f;
}

.btn-lupa-filtro i {
    pointer-events: none;
}

.btn-mini-accion {
    width: 34px;
    height: 32px;
    border: 1px solid #0d7f3b;
    background: linear-gradient(180deg, #25b75a 0%, #199348 100%);
    color: #ffffff;
    border-radius: 6px;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.btn-mini-accion:hover {
    background: linear-gradient(180deg, #1fa851 0%, #157e3d 100%);
}

.acciones-filtros {
    display: flex;
    align-items: end;
    gap: 8px;
}

/* Empresas/Clientes: evitar desborde de botonera en filtros */
#form-filtros-empresas .acciones-filtros {
    grid-column: 1 / -1;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#form-filtros-empresas .acciones-filtros .btn-secundario {
    flex: 0 1 auto;
    max-width: 100%;
}

#tabla-empresas-clientes {
    min-width: 1900px;
}

#form-filtros-documentos .campo-registros-documentos {
    max-width: 130px;
    min-width: 130px;
}

#form-filtros-documentos #doc_registros {
    width: 96px;
    min-width: 96px;
}

#form-filtros-documentos {
    grid-template-columns: repeat(5, minmax(170px, 1fr)) auto;
    align-items: end;
    gap: 8px 10px;
}

#form-filtros-documentos .acciones-filtros-documentos {
    grid-column: auto;
    justify-content: flex-end;
    align-items: center;
    align-self: end;
    flex-wrap: nowrap;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    gap: 8px;
}

#form-filtros-documentos .acciones-filtros-documentos .btn-secundario {
    white-space: nowrap;
    min-height: 32px;
    height: 32px;
}

.contenedor-resumen-filtros-documentos {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #d7e2f2;
    border-radius: 8px;
    background: #f8fbff;
}

#resumen-filtros-documentos {
    min-height: 26px;
    gap: 5px;
}

#resumen-filtros-documentos .tag-filtro {
    padding: 2px 7px;
    font-size: 10px;
    gap: 4px;
    border-radius: 999px;
}

#resumen-filtros-documentos .tag-filtro button {
    width: 16px;
    min-width: 16px;
    height: 16px;
    aspect-ratio: 1 / 1;
    border: 1px solid #8ea9d8;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #ffffff;
    color: #224a88;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    padding: 0;
}

#resumen-filtros-documentos .tag-filtro button:hover {
    background: #e8f0ff;
    border-color: #6f90c4;
}

.acciones-filtros label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1e3f72;
    min-width: 170px;
}

.acciones-filtros input,
.acciones-filtros select {
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    font-size: 12px;
    background: #f9fbff;
    color: #17355f;
}

.acciones-filtros input:focus,
.acciones-filtros select:focus {
    outline: none;
    border-color: #2c62b3;
    box-shadow: 0 0 0 2px rgba(44, 98, 179, 0.15);
    background: #ffffff;
}

@media (max-width: 1320px) {
    #form-filtros-documentos {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    #form-filtros-documentos .acciones-filtros-documentos {
        grid-column: 1 / -1;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-top: 6px;
        border-top: 1px solid #d8e2f2;
    }
}

@media (max-width: 860px) {
    #form-filtros-documentos {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

#modal-historico-modificados .acciones-filtros {
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#modal-historico-modificados .acciones-filtros label {
    min-width: 180px;
}

#modal-historico-modificados .acciones-filtros input {
    background: #f7faff;
    border-color: #b7c9e6;
}

#btn-procesar-articulos-modificados {
    margin-left: auto;
}

.barra-filtros-articulos {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.barra-filtros-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filtro-registros-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1e3f72;
    font-size: 12px;
    font-weight: 700;
}

.filtro-registros-inline select {
    min-width: 84px;
    border: 1px solid #b9c9e6;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    color: #133c72;
}

#resumen-filtros-articulos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    align-items: center;
}

.filtros-activos-articulos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    align-items: center;
}

.tag-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #b9cbe9;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eef4ff;
    color: #204883;
    font-size: 12px;
    font-weight: 700;
}

.tag-filtro button {
    border: 0;
    background: transparent;
    color: #204883;
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    line-height: 1;
}

.tag-filtro-vacio {
    font-size: 13px;
    color: #2a4b7f;
    font-weight: 700;
}

.ayuda-filtro-especial {
    font-size: 11px;
    color: #4b5f85;
    line-height: 1.3;
}

.ayuda-filtro-especial code {
    background: #eef3ff;
    border: 1px solid #ccd9f0;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 11px;
    color: #284c86;
}

.ayuda-filtro-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
}

.etiqueta-filtro-con-ayuda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.icono-ayuda-filtro {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    border: 1px solid #9fb5dc;
    background: #edf3ff;
    color: #1f4f97;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}

.tooltip-ayuda-filtro {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 240px;
    max-width: 300px;
    background: #ffffff;
    border: 1px solid #cdd9ef;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(14, 31, 59, 0.18);
    color: #3a4f77;
    font-size: 11px;
    line-height: 1.3;
    padding: 6px 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    z-index: 10;
}

.ayuda-filtro-inline:hover .tooltip-ayuda-filtro,
.icono-ayuda-filtro:focus + .tooltip-ayuda-filtro {
    opacity: 1;
    visibility: visible;
}

.tabla-scroll {
    overflow-x: auto;
}

.tabla-listado {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.tabla-listado th,
.tabla-listado td {
    border: 1px solid #d5dbe6;
    padding: 8px;
    font-size: 13px;
    text-align: left;
}

.tabla-listado thead th {
    background: linear-gradient(180deg, #edf3ff 0%, #e2ebfa 100%);
    color: #1e3f72;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tabla-listado.tabla-compacta {
    min-width: 680px;
}

.tabla-listado.tabla-compacta th,
.tabla-listado.tabla-compacta td {
    padding: 5px 6px;
    font-size: 12px;
    line-height: 1.2;
}

.ayuda-vista-stock {
    margin: 8px 0 0;
    color: #1e3f72;
    font-size: 13px;
    line-height: 1.4;
}

.ayuda-vista-stock strong {
    display: block;
    margin-bottom: 3px;
    color: #0d3269;
    font-size: 16px;
    line-height: 1.2;
}

.ayuda-vista-stock span {
    display: block;
}

.fila-stock-articulo {
    cursor: pointer;
}

.fila-stock-articulo:hover {
    background: #eef5ff;
}

.tabla-empleados-nowrap {
    min-width: 2100px;
}

.tabla-empleados-nowrap th,
.tabla-empleados-nowrap td {
    white-space: nowrap;
    vertical-align: middle;
}

.tabla-empleados-nowrap td:nth-child(6),
.tabla-empleados-nowrap td:nth-child(12) {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#modal-empleado .modal-articulo-contenido {
    width: min(1300px, 96vw);
}

#modal-empleado .detalle-campo-observacion {
    grid-column: 1 / -1;
}

#modal-adelanto-masivo .modal-articulo-contenido {
    width: min(1180px, 96vw);
}

#modal-adelanto-masivo .detalle-campo-observacion {
    grid-column: 1 / -1;
}

#modal-adelanto-masivo .tabla-scroll-modal {
    max-height: 40vh;
    overflow: auto;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
    margin-top: 8px;
}

#modal-adelanto-masivo .tabla-empleados-nowrap {
    min-width: 860px;
}

#modal-adelanto-masivo #adelanto-masivo-resumen {
    font-size: 12px;
    color: #1e3f72;
    font-weight: 700;
}

#modal-adelanto-masivo .acciones-filtros {
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

#modal-adelanto-masivo .tabla-listado td:first-child,
#modal-adelanto-masivo .tabla-listado th:first-child {
    width: 42px;
    text-align: center;
}

.tabla-documentos-nowrap {
    min-width: 2200px;
}

.tabla-documentos-nowrap th,
.tabla-documentos-nowrap td {
    white-space: nowrap;
    vertical-align: middle;
}

.tabla-documentos-nowrap td:nth-child(4),
.tabla-documentos-nowrap td:nth-child(5),
.tabla-documentos-nowrap td:nth-child(16),
.tabla-documentos-nowrap td:nth-child(17) {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-listado.tabla-caja-tickets-auto {
    width: max-content;
    min-width: 100%;
}

.tabla-listado.tabla-caja-tickets-auto th,
.tabla-listado.tabla-caja-tickets-auto td {
    white-space: nowrap;
}

.fila-buscador-filtro {
    cursor: pointer;
}

.fila-buscador-filtro:hover {
    background: #eaf2ff;
}

.paginador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 10px;
}

.formulario-articulo h2 {
    margin-top: 0;
    color: #1e3f72;
    font-size: 18px;
}

.btn-tabla {
    border: 1px solid #bfcce2;
    background: #ffffff;
    color: #1e3f72;
    border-radius: 6px;
    padding: 4px 8px;
    margin-right: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.btn-tabla:hover {
    background: #eaf0fb;
}

#sidemenu #menu-items .btn-menu-grupo {
    width: 100%;
    background: transparent;
    border: 0;
    color: #ffffff;
    text-align: left;
    padding: 0;
}

#sidemenu #menu-items .flecha {
    margin-left: auto;
    padding-right: 10px;
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    color: #ffffff;
    opacity: 0.95;
    transition: transform 220ms ease, color 160ms ease, opacity 160ms ease;
    transform-origin: center;
}

#sidemenu #menu-items .btn-menu-grupo.menu-abierto .flecha {
    transform: rotate(90deg);
}

#sidemenu #menu-items .btn-menu-grupo.menu-abierto .flecha i {
    color: #b9e9ff;
}

#sidemenu #menu-items .sub_menu_items {
    display: none;
    background: var(--verde-submenu);
}

#sidemenu #menu-items .sub_menu_items-expanded {
    display: block;
}

/* Seguridad visual: si el menu lateral esta colapsado, nunca mostrar submenus. */
#sidemenu.menu-collapsed #menu-items .sub_menu_items,
#sidemenu.menu-collapsed #menu-items .sub_menu_items-expanded {
    display: none !important;
}

#sidemenu #menu-items .sub_item {
    display: block;
    text-decoration: none;
    color: #ffffff;
}

#sidemenu #menu-items .sub_item .title,
#sidemenu #menu-items .sub_item .icon {
    font-size: 14px;
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.1px;
}

#sidemenu #menu-items .sub_menu_items .linea {
    min-height: 34px;
}

#sidemenu #menu-items .sub_item:hover {
    background: var(--verde-submenu-hover);
}

#sidemenu #menu-items .sub_item_active,
#sidemenu #menu-items .item-link.sub_item_active {
    background: var(--verde-submenu);
}

.layout-articulos {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 8px minmax(520px, 1.35fr);
    gap: 10px;
    align-items: start;
}

.modulo-articulos-unificado {
    padding: 0;
    overflow: hidden;
}

.modulo-articulos-unificado .barra-filtros-articulos {
    padding: 12px 14px;
    border-bottom: 1px solid #d3deef;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.modulo-articulos-unificado .layout-articulos {
    padding: 0;
    gap: 0;
}

.panel-listado-articulos {
    min-height: 680px;
    padding: 10px;
    border-right: 1px solid #d3deef;
}

.tabla-articulos-scroll {
    max-height: 560px;
    overflow: auto;
}

.fila-articulo {
    cursor: pointer;
}

.fila-articulo:hover {
    background: #eef3fb;
}

.fila-seleccionada {
    background: #d9efdc !important;
}

.panel-detalle-articulos {
    min-height: 680px;
    padding: 10px;
}

.divisor-panel-articulos {
    width: 8px;
    min-height: 100%;
    cursor: col-resize;
    background: linear-gradient(180deg, #d7e3f5 0%, #c8d8ef 100%);
    border-left: 1px solid #c4d2e9;
    border-right: 1px solid #c4d2e9;
}

.divisor-panel-articulos:hover {
    background: linear-gradient(180deg, #c9daf3 0%, #b7cdec 100%);
}

.detalle-superior {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 10px;
    align-items: start;
}

.acciones-detalle-articulo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: end;
}

.acciones-detalle-articulo label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1e3f72;
}

.acciones-detalle-articulo select {
    min-width: 220px;
    border: 1px solid #b9c9e6;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    color: #133c72;
}

.acciones-detalle-articulo input {
    min-width: 260px;
    border: 1px solid #b9c9e6;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    color: #133c72;
    height: 30px;
}

.filtro-busqueda-maestro-inline {
    min-width: 280px;
}

.filtro-busqueda-maestro-inline input {
    width: 100%;
    min-width: 260px;
    height: 30px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    font-size: 12px;
    background: #f9fbff;
    color: #17355f;
}

.filtro-busqueda-maestro-inline input:focus {
    outline: none;
    border-color: #2c62b3;
    box-shadow: 0 0 0 2px rgba(44, 98, 179, 0.15);
    background: #ffffff;
}

.detalle-articulo-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.detalle-campo {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.detalle-campo label {
    font-size: 12px;
    font-weight: 700;
    color: #1e3f72;
}

.detalle-campo input {
    width: 100%;
    min-width: 0;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 13px;
    background: #f9fbff;
}

#d_codigo,
#incodigo {
    background: #cfeeff !important;
    font-size: 14px !important;
    font-weight: 700;
}

.detalle-campo-largo {
    grid-column: span 2;
}

.detalle-campo.detalle-campo-ancho-15 {
    min-width: 0;
}

.resaltar-amarillo {
    background: #f8d84f !important;
    font-weight: 700;
}

.resaltar-verde {
    background: #2fa86c !important;
    color: #ffffff;
    font-weight: 700;
}

.resaltar-gris-suave {
    background: #d8e0ec !important;
}

.resaltar-violeta-medio {
    background: #c6afea !important;
    font-weight: 700;
}

.modal-articulo {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 300;
    padding: 18px;
}

.modal-articulo.oculto {
    display: none;
}

.modal-articulo-contenido {
    width: min(1280px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #ccd7eb;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    padding: 14px;
}

.modal-articulo-contenido.modal-bloqueado-rebote {
    animation: modalBloqueadoRebote 200ms ease;
}

@keyframes modalBloqueadoRebote {
    0% { transform: scale(1); }
    35% { transform: scale(0.992); }
    70% { transform: scale(1.004); }
    100% { transform: scale(1); }
}

.modal-articulo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modal-articulo-cabecera h2 {
    margin: 0;
    color: #2f57a8;
}

.btn-cerrar-modal {
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: #576277;
    cursor: pointer;
}

.ui-toast-host {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 24px));
}

.ui-toast {
    background: #ffffff;
    border: 1px solid #d4deef;
    border-left: 5px solid #2f5ea8;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(10, 25, 52, 0.2);
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    animation: uiToastIn 160ms ease-out;
}

.ui-toast.ui-toast-ok {
    border-left-color: #178a4a;
}

.ui-toast.ui-toast-error {
    border-left-color: #b13b3b;
}

.ui-toast.salir {
    animation: uiToastOut 160ms ease-in forwards;
}

@keyframes uiToastIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes uiToastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.ui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 35, 0.52);
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 16px;
}

.ui-modal-card {
    width: min(520px, 100%);
    background: #ffffff;
    border: 1px solid #cfdbef;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    padding: 14px;
}

.ui-modal-titulo {
    color: #1f4f97;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ui-modal-mensaje {
    color: #2b3b57;
    font-size: 14px;
    margin-bottom: 10px;
}

.ui-modal-cuerpo {
    margin-bottom: 10px;
}

.ui-campo {
    margin-bottom: 10px;
}

.ui-campo-label {
    display: block;
    font-size: 12px;
    color: #25477d;
    margin-bottom: 5px;
    font-weight: 700;
}

.ui-campo-error {
    min-height: 18px;
    font-size: 12px;
    color: #b13232;
    font-weight: 700;
}

.ui-input {
    width: 100%;
    border: 1px solid #b9c9e6;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
}

.ui-select {
    appearance: auto;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}

.ui-modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ui-btn {
    border-radius: 7px;
    border: 1px solid #bccce8;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ui-btn-primario {
    background: #1f5db8;
    border-color: #194d99;
    color: #ffffff;
}

.ui-btn-secundario {
    background: #ffffff;
    color: #1f3c6d;
}

@media (max-width: 1200px) {
    .layout-articulos {
        grid-template-columns: 1fr;
    }

    .detalle-articulo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .detalle-articulo-grid {
        grid-template-columns: 1fr;
    }

    .detalle-campo-largo {
        grid-column: span 1;
    }
}

/* Ajuste visual compacto para articulos */
.panel-listado-articulos,
.panel-detalle-articulos {
    padding: 10px;
}

.tabla-listado th,
.tabla-listado td {
    padding: 6px 7px;
    font-size: 12px;
}

.grilla-filtros label {
    font-size: 12px;
    gap: 4px;
}

.grilla-filtros input,
.grilla-filtros select,
.grilla-filtros textarea,
.detalle-campo input {
    padding: 6px 7px;
    font-size: 12px;
    min-height: 30px;
}

.detalle-articulo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.acciones-detalle-articulo .btn-secundario,
.acciones-filtros .btn-secundario,
.btn-cargar-img-articulo,
.btn-tabla {
    padding: 6px 9px;
    font-size: 12px;
}

.acciones-detalle-articulo .btn-secundario,
.barra-filtros-articulos .btn-secundario,
.acciones-filtros .btn-secundario {
    background: linear-gradient(180deg, #cfdcf2 0%, #adc4e6 100%);
    border-color: #6f93c4;
    color: #0d3264;
}

.acciones-detalle-articulo .btn-secundario:hover,
.barra-filtros-articulos .btn-secundario:hover,
.acciones-filtros .btn-secundario:hover {
    background: linear-gradient(180deg, #c4d4ee 0%, #9eb9df 100%);
    border-color: #6288bc;
}

.panel-foto-articulo {
    width: 150px;
}

.panel-foto-articulo label {
    display: block;
    margin-bottom: 4px;
    color: #1e3f72;
    font-weight: 700;
    font-size: 12px;
}

.contenedor-foto-articulo {
    width: 150px;
    height: 150px;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    background: #ffffff;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: zoom-in;
}

.contenedor-foto-articulo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.btn-cargar-img-articulo {
    margin-top: 6px;
    border: 1px solid #18853a;
    background: #1ea64b;
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
}

.detalle-observacion-bloque {
    margin-top: 10px;
    display: grid;
    gap: 4px;
}

.detalle-observacion-bloque label {
    color: #1e3f72;
    font-weight: 700;
    font-size: 12px;
}

.detalle-observacion-bloque textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    background: #f9fbff;
}

.campo-observacion-modal {
    grid-column: 1 / -1;
}

.campo-observacion-modal textarea {
    min-height: 90px;
    resize: vertical;
}

.visor-imagen-articulo {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 30, 0.82);
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.visor-imagen-articulo.oculto {
    display: none;
}

.visor-imagen-articulo img {
    max-width: min(92vw, 1300px);
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    background: #ffffff;
}

.visor-imagen-cerrar {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #d8e4f8;
    background: #ffffff;
    color: #204b87;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.modal-articulo-contenido {
    width: min(1180px, 100%);
    padding: 12px;
}

.modal-articulo .grilla-filtros {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 8px;
}

.modal-articulo-cabecera h2 {
    font-size: 32px;
    letter-spacing: 0.02em;
}

#modal-articulo #form-articulo {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
}

#modal-filtros-articulos #form-filtros-articulos {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
}

#modal-filtros-articulos .modal-articulo-contenido {
    width: min(640px, 100%);
}

.modal-buscador-contenido {
    width: min(760px, 100%);
}

/* Patron reutilizable: cabecera/controles fijos y scroll solo en grilla interna */
.modal-contenido-scroll-interno {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.input-buscador-filtro,
#input-buscador-filtro {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #bfcce2;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
}

.modal-buscador-contenido .tabla-scroll {
    flex: 1;
    min-height: 220px;
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
}

.modal-buscador-contenido .tabla-listado {
    min-width: 100%;
    table-layout: fixed;
}

.modal-buscador-contenido .tabla-listado th:first-child,
.modal-buscador-contenido .tabla-listado td:first-child {
    width: 90px;
}

#modal-oc-recepcion .grilla-dos-columnas {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 12px;
    align-items: start;
}

#modal-oc-recepcion .input-oc-recibir {
    width: 96px;
    min-width: 96px;
}

#modal-oc-recepcion footer.acciones-filtros {
    padding: 10px 14px 14px;
    justify-content: flex-end;
}

#modal-articulo .acciones-filtros {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    #modal-oc-recepcion .grilla-dos-columnas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .detalle-articulo-grid {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
    }

    #modal-articulo #form-articulo {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .detalle-superior {
        grid-template-columns: 1fr;
    }

    .layout-articulos {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-listado-articulos {
        border-right: 0;
        border-bottom: 1px solid #d3deef;
    }

    .divisor-panel-articulos {
        display: none;
    }

    .panel-foto-articulo {
        width: 100%;
    }

    .contenedor-foto-articulo {
        width: min(260px, 100%);
        height: 180px;
    }
}

/* Estado forzado de logos del menu lateral */
#sidemenu.menu-expanded #title .logo-expandido {
    display: block !important;
}

#sidemenu.menu-expanded #title .logo-colapsado {
    display: none !important;
}

#sidemenu.menu-collapsed #title .logo-expandido {
    display: none !important;
}

#sidemenu.menu-collapsed #title .logo-colapsado {
    display: block !important;
}

/* Altura small uniforme en todo modulo de gestion */
.tarjeta-modulo input:not([type="checkbox"]):not([type="radio"]),
.tarjeta-modulo select,
.tarjeta-modulo button,
.modal-articulo input:not([type="checkbox"]):not([type="radio"]),
.modal-articulo select,
.modal-articulo button,
.acciones-filtros input:not([type="checkbox"]):not([type="radio"]),
.acciones-filtros select,
.acciones-filtros button,
.grilla-filtros input:not([type="checkbox"]):not([type="radio"]),
.grilla-filtros select,
.grilla-filtros button {
    min-height: 30px;
    height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
}

.tarjeta-modulo textarea,
.modal-articulo textarea {
    font-size: 12px;
}

/* Modulo Ofertas */
.ofertas-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 10px;
}

.ofertas-panel-izquierdo,
.ofertas-panel-derecho {
    border: 1px solid #d3deef;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
}

.ofertas-panel-cabecera,
.ofertas-detalle-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ofertas-panel-cabecera h3,
.ofertas-detalle-cabecera h3 {
    margin: 0;
    color: #204a86;
    font-size: 14px;
}

.ofertas-titulo-con-estado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-buzon-activo {
    color: #0f4f3a;
    background: #e4fbf1;
    border-color: #a6e8cc;
}

.badge-buzon-inactivo {
    color: #7a1f1f;
    background: #ffe9e9;
    border-color: #f2b8b8;
}

.lista-buzones-oferta {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.lista-buzones-oferta .sin-datos {
    padding: 8px;
    color: #5f7091;
}

.item-buzon-oferta {
    border: 1px solid #d7dff0;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #f8fbff;
}

.item-buzon-oferta:hover {
    background: #eef5ff;
}

.item-buzon-oferta.buzon-vencido {
    background: #fff1f1;
    border-color: #efc4c4;
}

.item-buzon-oferta.buzon-vigente {
    background: #ecfbf2;
    border-color: #b7e7cc;
}

.item-buzon-oferta.buzon-activo {
    border-color: #3a70b8;
    box-shadow: inset 0 0 0 1px #3a70b8;
}

.item-buzon-id {
    font-size: 11px;
    color: #1e3f72;
    font-weight: 700;
}

.item-buzon-nombre {
    font-size: 13px;
    font-weight: 700;
    color: #0d2f62;
    margin-top: 2px;
}

.item-buzon-vigencia {
    font-size: 11px;
    color: #4e6290;
    margin-top: 2px;
}

.ofertas-filtros-detalle {
    margin-bottom: 8px;
}

.btn-eliminar-item-oferta {
    border: 1px solid #c85a5a;
    background: #ffe9e9;
    color: #912e2e;
    border-radius: 6px;
    min-width: 28px;
    height: 28px;
    cursor: pointer;
}

.btn-eliminar-item-oferta:hover {
    background: #ffd7d7;
}

.btn-editar-item-lista,
.btn-eliminar-item-lista {
    border: 1px solid #93a6cb;
    background: #f4f7ff;
    color: #1d417e;
    border-radius: 6px;
    min-width: 28px;
    height: 28px;
    cursor: pointer;
}

.btn-editar-item-lista:hover,
.btn-eliminar-item-lista:hover {
    background: #e6eefc;
}

.acciones-item-lista {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

#tabla-items-lista-body td:first-child {
    white-space: nowrap;
}

.col-descripcion-compacta {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campo-con-ayuda {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icono-ayuda-campo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #9ab1d8;
    border-radius: 50%;
    background: #eef4ff;
    color: #2b4f88;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    user-select: none;
}

#markup-item-lista.markup-bajo {
    background: #ffe6e6;
    border-color: #d86b6b;
    color: #a32626;
    font-weight: 700;
}

#badge-markup-alerta {
    white-space: nowrap;
    min-width: 110px;
    justify-content: center;
}

#badge-markup-alerta.markup-alerta {
    color: #7a1f1f;
    background: #ffe9e9;
    border-color: #f2b8b8;
}

.valor-markup-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #9fd9b9;
    background: #e8fbf0;
    color: #0f6a42;
    font-weight: 700;
}

.valor-markup-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e1a9a9;
    background: #ffe8e8;
    color: #8a1f1f;
    font-weight: 700;
}

.valor-precio-real {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e7c56a;
    background: #ffe99f;
    color: #7a5500;
    font-weight: 700;
}

.valor-precio-lista-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #9fd9b9;
    background: #e8fbf0;
    color: #0f6a42;
    font-weight: 700;
}

.valor-precio-lista-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e1a9a9;
    background: #ffe8e8;
    color: #8a1f1f;
    font-weight: 700;
}

.preview-articulo-lista {
    display: block;
    margin: 2px 0 8px 0;
    min-height: 16px;
    font-size: 12px;
    font-weight: 600;
}

.preview-articulo-neutro {
    color: #36527c;
}

.preview-articulo-ok {
    color: #0f6a42;
}

.preview-articulo-error {
    color: #a32626;
}

.preview-articulo-oferta {
    margin: 4px 0 10px 0;
    padding: 8px 10px;
    border: 1px solid #ffe08a;
    background: linear-gradient(180deg, #fff7da 0%, #ffefba 100%);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(201, 148, 11, 0.18);
}

.preview-articulo-titulo {
    font-size: 12px;
    font-weight: 700;
    color: #8a5200;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.preview-articulo-contenido {
    margin-top: 4px;
    font-size: 13px;
    color: #4b2f00;
    font-weight: 600;
}

.ofertas-campo-ancho {
    grid-column: 1 / -1;
}

.ofertas-modal-buscador-amplio {
    width: min(1200px, 96vw);
}

#modal-buscador-ofertas .btn-cerrar-modal,
#modal-buscador-promociones .btn-cerrar-modal,
#modal-buscador-codigos .btn-cerrar-modal {
    min-height: auto !important;
    height: auto !important;
    width: 34px !important;
    padding: 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #576277 !important;
    border: 0 !important;
    background: transparent !important;
}

#modal-buscador-ofertas #input-buscador-ofertas,
#modal-buscador-ofertas #precio-lote-ofertas {
    min-width: 200px;
}

#modal-buscador-ofertas .modal-articulo-cabecera h3,
#modal-buscador-promociones .modal-articulo-cabecera h3,
#modal-buscador-codigos .modal-articulo-cabecera h3 {
    margin: 0;
    color: #2f57a8;
    font-size: 32px;
    letter-spacing: 0.02em;
    font-weight: 700;
}

#modal-buscador-ofertas .acciones-filtros {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

#modal-buscador-ofertas .campo-modal-ofertas {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #1f477f;
    min-width: 220px;
}

#modal-buscador-ofertas .btn-cargar-seleccion-ofertas {
    margin-left: auto;
    min-width: 170px;
    white-space: nowrap;
}

#modal-buscador-ofertas .tabla-buscador-ofertas th,
#modal-buscador-ofertas .tabla-buscador-ofertas td {
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.15;
}

#modal-buscador-ofertas .tabla-buscador-ofertas th:nth-child(4),
#modal-buscador-ofertas .tabla-buscador-ofertas td:nth-child(4) {
    width: 280px;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1200px) {
    .ofertas-layout {
        grid-template-columns: 1fr;
    }

    .lista-buzones-oferta {
        max-height: 280px;
    }
}

.promociones-layout .promociones-panel-izquierdo {
    min-width: 320px;
}

.promociones-layout .promociones-panel-derecho {
    min-width: 760px;
}

.promociones-resumen {
    margin-bottom: 10px;
}

.promociones-resumen label input[disabled] {
    background: #f1f4fa;
    color: #274778;
    font-weight: 600;
}

.promociones-sinonimos-box {
    margin-top: 12px;
    border: 1px solid #c9b8ea;
    border-radius: 8px;
    padding: 10px;
    background: linear-gradient(180deg, #f2ebff 0%, #faf7ff 100%);
    box-shadow: inset 0 0 0 1px #e9defd;
}

.promociones-items-box {
    margin-top: 10px;
    border: 1px solid #7eb6f3;
    border-radius: 8px;
    padding: 10px;
    background: linear-gradient(180deg, #d9ecff 0%, #edf6ff 100%);
    box-shadow: inset 0 0 0 1px #bfdfff;
}

.btn-ver-sinonimos-promo {
    min-width: 92px;
}

.tabla-listado .btn-eliminar-item-promo,
.tabla-listado .btn-eliminar-sinonimo-promo {
    border: 1px solid #9bb5de;
    background: #e9f0fc;
    color: #1a3f7a;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tabla-listado .btn-eliminar-item-promo:hover,
.tabla-listado .btn-eliminar-sinonimo-promo:hover {
    background: #d8e6fb;
}

.fila-buscador-promociones {
    cursor: pointer;
}

.fila-buscador-promociones:hover {
    background: #eef5ff;
}

#modal-buscador-promociones .acciones-filtros {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

#modal-buscador-promociones .campo-modal-ofertas {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #1f477f;
    min-width: 220px;
}

#modal-buscador-promociones .tabla-buscador-ofertas th,
#modal-buscador-promociones .tabla-buscador-ofertas td {
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.15;
}

#modal-buscador-promociones .tabla-buscador-ofertas th:nth-child(3),
#modal-buscador-promociones .tabla-buscador-ofertas td:nth-child(3) {
    width: 320px;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive first: Ofertas + Listas de Precios */
@media (max-width: 980px) {
    .ofertas-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ofertas-panel-izquierdo,
    .ofertas-panel-derecho {
        padding: 8px;
    }

    .ofertas-panel-cabecera,
    .ofertas-detalle-cabecera {
        align-items: flex-start;
        gap: 6px;
        flex-wrap: wrap;
    }

    .ofertas-titulo-con-estado {
        width: 100%;
    }

    .ofertas-detalle-cabecera .acciones-filtros {
        width: 100%;
        justify-content: flex-start;
    }

    .lista-buzones-oferta {
        max-height: 260px;
    }

    .ofertas-filtros-detalle {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .tabla-listado th,
    .tabla-listado td {
        padding: 5px 6px;
        font-size: 11px;
    }

    #tabla-items-lista-body td:first-child,
    #tabla-items-oferta-body td:first-child {
        min-width: 72px;
    }

    .col-descripcion-compacta {
        max-width: 260px;
    }

    #modal-buscador-ofertas .modal-articulo-cabecera h3,
    #modal-buscador-promociones .modal-articulo-cabecera h3,
    #modal-buscador-codigos .modal-articulo-cabecera h3 {
        font-size: 24px;
    }

    #modal-buscador-ofertas .acciones-filtros,
    #modal-buscador-promociones .acciones-filtros {
        flex-wrap: wrap;
        align-items: flex-end;
    }

    #modal-buscador-ofertas .campo-modal-ofertas,
    #modal-buscador-promociones .campo-modal-ofertas {
        min-width: 180px;
        flex: 1 1 220px;
    }

    #modal-buscador-ofertas .btn-cargar-seleccion-ofertas {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .cabecera-contenido {
        padding: 8px 10px;
    }

    .cabecera-contenido h1 {
        font-size: 24px;
    }

    .cabecera-contenido p {
        font-size: 12px;
        line-height: 1.3;
    }

    .ofertas-panel-cabecera h3,
    .ofertas-detalle-cabecera h3 {
        font-size: 13px;
    }

    .ofertas-filtros-detalle,
    #form-agregar-item-lista.ofertas-filtros-detalle,
    #form-filtro-items-lista.ofertas-filtros-detalle,
    #form-agregar-item-oferta.ofertas-filtros-detalle,
    #form-filtro-items-oferta.ofertas-filtros-detalle {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ofertas-filtros-detalle .acciones-filtros {
        justify-content: flex-start;
    }

    .preview-articulo-lista {
        font-size: 11px;
    }

    .badge-modo-calculo,
    #badge-markup-alerta {
        min-width: 92px;
        font-size: 11px;
        padding: 0 8px;
    }

    .acciones-item-lista {
        gap: 4px;
    }

    .btn-editar-item-lista,
    .btn-eliminar-item-lista {
        min-width: 26px;
        height: 26px;
    }

    .modal-articulo-contenido {
        width: 96vw;
        padding: 10px;
    }

    .modal-articulo .grilla-filtros {
        grid-template-columns: 1fr;
    }

    .modal-buscador-contenido .tabla-scroll {
        min-height: 180px;
    }

    .modal-buscador-contenido .tabla-listado th,
    .modal-buscador-contenido .tabla-listado td {
        font-size: 11px;
        padding: 4px 5px;
    }

    #modal-buscador-ofertas .tabla-buscador-ofertas th:nth-child(4),
    #modal-buscador-ofertas .tabla-buscador-ofertas td:nth-child(4),
    #modal-buscador-promociones .tabla-buscador-ofertas th:nth-child(3),
    #modal-buscador-promociones .tabla-buscador-ofertas td:nth-child(3) {
        width: 200px;
        max-width: 200px;
    }
}

@media (max-width: 520px) {
    .contenido-principal {
        padding: 8px;
    }

    .tarjeta-modulo {
        padding: 8px;
    }

    .ofertas-panel-cabecera,
    .ofertas-detalle-cabecera {
        gap: 4px;
    }

    .ofertas-panel-cabecera .btn-secundario,
    .ofertas-detalle-cabecera .btn-secundario,
    .ofertas-filtros-detalle .btn-secundario {
        width: 100%;
    }

    .acciones-filtros {
        width: 100%;
    }

    .tabla-listado {
        min-width: 760px;
    }
}

/* Overrides responsive fuertes para evitar conflictos de min-width previos */
@media (max-width: 980px) {
    .promociones-layout .promociones-panel-izquierdo,
    .promociones-layout .promociones-panel-derecho {
        min-width: 0 !important;
    }

    .ofertas-panel-derecho .tabla-listado,
    .ofertas-panel-izquierdo .tabla-listado {
        min-width: 100% !important;
    }
}

@media (max-width: 760px) {
    #form-filtros-empresas .acciones-filtros {
        justify-content: stretch;
    }

    #form-filtros-empresas .acciones-filtros .btn-secundario {
        flex: 1 1 100%;
    }

    .grilla-filtros {
        grid-template-columns: 1fr !important;
    }

    .ofertas-panel-cabecera .btn-secundario,
    .ofertas-detalle-cabecera .btn-secundario {
        min-width: 120px;
    }

    .ofertas-panel-derecho .tabla-listado,
    .ofertas-panel-izquierdo .tabla-listado {
        table-layout: fixed;
        width: 100%;
        min-width: 100% !important;
    }

    /* Listas de precios: ocultar columnas secundarias en movil */
    #tabla-items-lista-body td:nth-child(3),
    #tabla-items-lista-body td:nth-child(5) {
        display: none;
    }

    .ofertas-panel-derecho .tabla-listado thead th:nth-child(3),
    .ofertas-panel-derecho .tabla-listado thead th:nth-child(5) {
        display: none;
    }

    /* Ofertas: ocultar EAN en movil */
    .ofertas-panel-derecho .tabla-listado thead th:nth-child(3),
    #tabla-items-oferta-body td:nth-child(3) {
        display: none;
    }

    /* Descripciones con ellipsis para evitar desborde */
    .ofertas-panel-derecho .tabla-listado td:nth-child(4),
    .ofertas-panel-derecho .tabla-listado td:nth-child(3) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}