:root {
    --color-fondo-principal: #fef8f6; /* Color crema clarito del fondo */
    --color-fondo-sidebar: #f8f0ef;
    --color-vino-oscuro: #6e2229; /* Color principal de la marca */
    --color-texto-principal: #333333;
    --color-texto-secundario: #666666;
    --color-borde: #e0e0e0;
    --color-blanco: #ffffff;
    --color-verde-exito: #28a745;
    --color-verde-fondo: #e6f4ea;
    --color-amarillo-destacado: #b8860b;
    --color-amarillo-fondo: #fcf6e3;
    --color-rojo-alerta: #dc3545;
    --color-rojo-fondo: #fce8e8;

    --fuente-principal: 'Inter', sans-serif;
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo-principal);
    color: var(--color-texto-principal);
    font-size: 14px;
}

/* Layout Principal */
.contenedor-principal {
    display: flex;
    min-height: 100vh;
}

/* --- Barra Lateral (Sidebar) --- */
.barra-lateral {
    width: 250px;
    background-color: var(--color-fondo-sidebar);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-borde);
    flex-shrink: 0;
}

.logo-contenedor {
    display: flex;
    align-items: center;
    padding: 0 20px 20px 20px;
    gap: 10px;
}

.icono-logo {
    background-color: var(--color-vino-oscuro);
    color: var(--color-blanco);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-logo {
    display: flex;
    flex-direction: column;
}

.nombre-marca {
    font-weight: 600;
    color: var(--color-vino-oscuro);
    font-size: 14px;
}

.tipo-negocio {
    font-size: 12px;
    color: var(--color-amarillo-destacado);
    font-weight: 700;
    line-height: 1.2;
}

.selector-sucursal {
    padding: 15px 20px;
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 20px;
}

.etiqueta-sucursal {
    font-size: 11px;
    color: var(--color-texto-secundario);
    display: block;
    margin-bottom: 5px;
}

.sucursal-actual {
    font-weight: 600;
    color: var(--color-vino-oscuro);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.menu-navegacion {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-menu {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: var(--color-texto-principal);
    text-decoration: none;
    gap: 15px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.item-menu:hover {
    background-color: rgba(0,0,0,0.05);
}

.item-menu.activo {
    background-color: var(--color-vino-oscuro);
    color: var(--color-blanco);
}

.estado-sincronizacion {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--color-borde);
    font-size: 12px;
    color: var(--color-texto-secundario);
}

.indicador-estado {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
}

.indicador-estado.activo {
    background-color: var(--color-verde-exito);
}

.version-app {
    padding: 0 20px;
    font-size: 11px;
    color: #999;
}

/* --- Contenido Principal --- */
.contenido-principal {
    flex-grow: 1;
    padding: 20px 40px;
    background-color: var(--color-blanco);
    border-top-left-radius: 20px; /* Para simular el diseño de la imagen */
    box-shadow: -5px 0 15px rgba(0,0,0,0.02);
}

/* Cabecera Superior */
.cabecera-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-borde);
}

.buscador-global {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8px 15px;
    border-radius: 6px;
    width: 300px;
}

.buscador-global input {
    border: none;
    background: transparent;
    margin-left: 10px;
    outline: none;
    width: 100%;
    color: var(--color-texto-principal);
}

.acciones-usuario {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-sitio-web {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #f0f0f0;
    border: 1px solid var(--color-borde);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.perfil-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.info-usuario {
    display: flex;
    flex-direction: column;
}

.nombre-usuario {
    font-weight: 600;
    font-size: 13px;
}

.rol-usuario {
    font-size: 11px;
    color: var(--color-amarillo-destacado);
    font-weight: 600;
}

.avatar-usuario {
    background-color: var(--color-vino-oscuro);
    color: var(--color-blanco);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-salir {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-texto-secundario);
}

/* Título de Sección y Botones */
.encabezado-seccion {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.titulos-seccion {
    max-width: 60%;
}

.etiqueta-modulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.etiqueta-modulo h2 {
    font-size: 12px;
    color: var(--color-amarillo-destacado);
    letter-spacing: 1px;
    margin: 0;
}

.badge-operaciones {
    background-color: var(--color-rojo-fondo);
    color: var(--color-vino-oscuro);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.titulo-principal {
    font-size: 20px;
    color: var(--color-vino-oscuro);
    margin-bottom: 8px;
}

.descripcion-seccion {
    color: var(--color-texto-secundario);
    font-size: 13px;
    line-height: 1.5;
}

.botones-accion-principal {
    display: flex;
    gap: 15px;
}

.btn-secundario, .btn-primario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    border: none;
}

.btn-secundario {
    background-color: #f5f5f5;
    color: var(--color-texto-principal);
    border: 1px solid var(--color-borde);
}

.btn-primario {
    background-color: var(--color-vino-oscuro);
    color: var(--color-blanco);
}

/* Tarjetas KPI */
.tarjetas-resumen {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.tarjeta-kpi {
    flex: 1;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.cabecera-kpi {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.titulo-kpi {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    line-height: 1.3;
}

.icono-kpi {
    padding: 6px;
    border-radius: 4px;
    display: flex;
}

.icono-kpi.fondo-gris { background-color: #f0f0f0; }
.icono-kpi.fondo-verde-claro { background-color: var(--color-verde-fondo); }
.icono-kpi.fondo-amarillo-claro { background-color: var(--color-amarillo-fondo); }

.valor-kpi {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-texto-principal);
}

.descripcion-kpi {
    font-size: 12px;
    color: var(--color-texto-secundario);
    line-height: 1.3;
}

.color-verde { color: var(--color-verde-exito) !important; }
.color-amarillo { color: var(--color-amarillo-destacado) !important; }

/* Filtros de Tabla */
.barra-filtros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--color-borde);
}

.grupo-filtros {
    display: flex;
    gap: 15px;
}

.buscador-tabla {
    display: flex;
    align-items: center;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    padding: 6px 12px;
    border-radius: 4px;
    width: 250px;
}

.buscador-tabla input {
    border: none;
    outline: none;
    margin-left: 8px;
    width: 100%;
}

.selector-filtro select {
    padding: 8px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    background-color: var(--color-blanco);
    outline: none;
    color: var(--color-texto-principal);
    cursor: pointer;
}

.info-resultados {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--color-texto-secundario);
}

.btn-limpiar-filtros {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--color-texto-secundario);
    cursor: pointer;
    font-size: 12px;
}

/* Tabla de Productos */
.contenedor-tabla {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.tabla-productos {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.tabla-productos th {
    background-color: #f5f2f0;
    padding: 12px 15px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    border-bottom: 1px solid var(--color-borde);
}

.tabla-productos td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Estilos de Columnas Específicas */
.col-checkbox { width: 40px; text-align: center; }
.col-foto-sku { display: flex; align-items: center; gap: 15px; }

.img-producto {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-borde);
}

.info-sku { display: flex; flex-direction: column; }
.codigo-sku { font-weight: 600; color: var(--color-vino-oscuro); font-size: 13px; }
.id-producto { font-size: 11px; color: var(--color-texto-secundario); }

.col-producto-desc { display: flex; flex-direction: column; gap: 4px; }
.nombre-producto { font-weight: 600; font-size: 13px; }
.categoria-producto { font-size: 11px; color: var(--color-texto-secundario); display: flex; align-items: center; gap: 5px; }
.punto-categoria { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-vino-oscuro); display: inline-block; }
.punto-categoria.rojo { background-color: var(--color-rojo-alerta); }
.punto-categoria.naranja { background-color: #fd7e14; }

.col-precio-info { display: flex; flex-direction: column; gap: 4px; }
.precio-valor { font-weight: 600; font-size: 13px; }
.etiqueta-visible-web { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--color-verde-exito); background-color: var(--color-verde-fondo); padding: 2px 6px; border-radius: 4px; width: fit-content; }
.etiqueta-visible-web.oculto { color: var(--color-amarillo-destacado); background-color: var(--color-amarillo-fondo); }

.badge-destacado { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 8px; border-radius: 12px; width: fit-content;}
.badge-destacado.si { background-color: var(--color-amarillo-fondo); color: var(--color-amarillo-destacado); font-weight: 600; }
.badge-destacado.no { color: var(--color-texto-secundario); }

.badge-estatus { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 10px; border-radius: 12px; font-weight: 500; width: fit-content;}
.badge-estatus.publicado { background-color: #d4edda; color: #155724; }
.badge-estatus.borrador { background-color: #fff3cd; color: #856404; }
.punto-estatus { width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.col-acciones-botones { display: flex; gap: 10px; }
.btn-accion-modificar, .btn-accion-baja { 
    display: flex; align-items: center; gap: 4px; 
    padding: 6px 10px; border-radius: 4px; border: none; 
    font-size: 11px; cursor: pointer; font-weight: 500; 
}
.btn-accion-modificar { background-color: #f0f0f0; color: var(--color-texto-principal); }
.btn-accion-baja { background-color: var(--color-rojo-fondo); color: var(--color-rojo-alerta); }

.icono-pequeno { font-size: 14px !important; }

/* Paginación y Pie */
.pie-pagina-tabla {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid var(--color-borde);
}

.resumen-productos { font-size: 13px; }
.texto-negrita { font-weight: 600; }
.color-vino { color: var(--color-vino-oscuro); }

.paginacion-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--color-texto-secundario);
}

.divisor-vertical {
    height: 15px;
    width: 1px;
    background-color: var(--color-borde);
}

.controles-paginacion {
    display: flex;
    gap: 5px;
}

.btn-pagina {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-texto-secundario);
    padding: 5px 10px;
}

.btn-pagina.numero {
    border-radius: 4px;
}

.btn-pagina.numero.activo {
    background-color: var(--color-vino-oscuro);
    color: var(--color-blanco);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .contenedor-principal { flex-direction: column; display: flex; }
    .barra-lateral { width: 100%; height: auto; padding: 15px; }
    .menu-navegacion { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .tarjetas-resumen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
}

@media (max-width: 768px) {
    .cabecera-superior { flex-direction: column; align-items: flex-start; gap: 15px; }
    .acciones-usuario { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .titulos-seccion { text-align: center; }
    .botones-accion-principal { display: flex; flex-direction: column; width: 100%; gap: 10px; margin-top: 15px; }
    .botones-accion-principal button { width: 100%; }
    .tarjetas-resumen { grid-template-columns: 1fr; }
    .barra-filtros .grupo-filtros { display: flex; flex-direction: column; width: 100%; gap: 10px; }
    .contenedor-tabla { overflow-x: auto; display: block; width: 100%; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .pie-pagina-tabla { display: flex; flex-direction: column; gap: 15px; text-align: center; }
}