@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;500;700;800&display=swap');

:root {
    --bg-main: #0f0f1a;
    --bg-gradient: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    --accent: #00d2ff;
    --accent-bright: #b0faff;
    --accent-glow: rgba(0, 210, 255, 0.4);
    --accent-soft: rgba(0, 210, 255, 0.1);
    --text-main: #e0e0e0;
    --text-muted: rgba(224, 224, 224, 0.6);
    --border: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-blur: blur(16px);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-heavy: rgba(255, 255, 255, 0.1);
    --bg-card: rgba(13, 17, 23, 0.4);
    --bg-sidebar: #05000a;
    --danger: #ff4c4c;
    --success: #00ff88;
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    --font-titles: 'Outfit', sans-serif;
    --font-text: 'Inter', sans-serif;
}

/* --- WEB PANELS (LANDING) - V2026: Comportamiento Estricto --- */
.web-panel-card {
    display: flex;
    padding: 15px 20px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--card-radius, 24px);
    width: 100%;
    max-width: 1100px; /* Sincronizado con Web Pública y Master */
    margin-left: auto;
    margin-right: auto;
    transition: all 0.4s;
    overflow: hidden;
    gap: 20px;
    text-align: left;
    min-height: calc(var(--config-height, 400px) + 30px);
    flex-shrink: 0;
    margin-bottom: 0;
    color: var(--config-text-main, var(--text-main, #ffffff)) !important;
}

.web-panel-card h3,
.web-panel-card .panel-html-body,
.web-panel-card p {
    color: var(--config-text-muted, var(--text-muted, rgba(255,255,255,0.7))) !important;
}

/* MODO HORIZONTAL (Izquierda / Derecha) */
.web-panel-card.layout-horizontal {
    flex-direction: row;
    align-items: stretch;
}

.web-panel-card.layout-horizontal.reverse {
    flex-direction: row-reverse;
}

.web-panel-card.layout-horizontal .panel-media-content {
    flex: 0 0 auto;
    flex-shrink: 0 !important;
    height: var(--config-height, 400px); /* Sincronizado con Web Pública */
    max-width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.03);
}

.web-panel-card.layout-horizontal .panel-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-wrap: break-word;
}

/* MODO VERTICAL (Centrado) */
.web-panel-card.layout-vertical {
    flex-direction: column;
    height: auto !important;
    text-align: center;
    align-items: center;
    padding: 15px 20px;
    gap: 10px;
}

.web-panel-card.layout-vertical.reverse {
    flex-direction: column-reverse;
}

.web-panel-card.layout-vertical.text-top {
    flex-direction: column-reverse;
}

.web-panel-card.layout-vertical .panel-media-content {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.web-panel-card.layout-vertical .panel-text-content {
    width: 100%;
    padding: 10px 0 0 0;
}

.panel-text-content h2, 
.panel-text-content h3, 
.panel-text-content .panel-html-body {
    width: 100%;
}

/* Imágenes y Videos */
.panel-media-content {
    border-radius: 16px;
    overflow: hidden;
}

.panel-media-content img, 
.panel-media-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.layout-horizontal .panel-media-content img,
.layout-horizontal .panel-media-content video {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.web-panel-card.layout-vertical.block-vertical-media .panel-media-content {
    height: var(--config-height, 400px);
}

.web-panel-card.layout-vertical.block-vertical-media .panel-media-content img,
.web-panel-card.layout-vertical.block-vertical-media .panel-media-content video {
    object-fit: contain;
    background: rgba(0,0,0,0.05);
}

.web-panel-card.layout-vertical .panel-media-content img,
.web-panel-card.layout-vertical .panel-media-content video {
    height: auto; 
    max-height: 100%;
}

/* Texto */
.panel-text-content h2 {
    color: var(--config-accent, #00d2ff);
    font-family: var(--font-titles);
    line-height: 1.1;
}

.panel-html-body {
    line-height: 1.6;
    opacity: 0.8;
}

/* El botón primario dentro del panel */
.web-panel-card .btn-primary {
    padding: 12px 24px;
    background: var(--accent);
    color: black;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s;
    display: inline-block;
}

.web-panel-card .btn-primary:hover {
    filter: brightness(1.2);
}

.panel-preview-container {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
}

.panels-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
}

/* Reset para la previsualización de bloques en Admin */
.admin-panel-preview {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden; /* Evitamos desbordamientos indeseados */
}

.admin-panel-preview .panel-preview-container {
    width: 100%;
}

.content-area.no-padding {
    padding: 0 !important;
}

.content-area.no-padding .top-header {
    padding: 1.5rem 2.25rem; /* Restauramos algo de padding para el header */
}

.panel-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.panel-badge {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-badge.public {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}

/* --- ANIMACIONES Y SEPARADORES --- */
@keyframes pulseGlow {
    0% { filter: drop-shadow(0 0 2px rgba(var(--accent-rgb, 0,210,255), 0.2)); opacity: 0.9; }
    50% { filter: drop-shadow(0 0 12px rgba(var(--accent-rgb, 0,210,255), 0.6)); opacity: 1; }
    100% { filter: drop-shadow(0 0 2px rgba(var(--accent-rgb, 0,210,255), 0.2)); opacity: 0.9; }
}

.pulse-anim {
    animation: pulseGlow 3s infinite ease-in-out;
}

/* BRANDING HERO (Resaltado de Gráfico) - Sincronizado con Master */
.web-panel-card.branding-hero {
    overflow: visible !important;
}

.web-panel-card.branding-hero .panel-media-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.web-panel-card.branding-hero .panel-media-content img {
    object-fit: contain !important;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(var(--accent-rgb, 0, 210, 255), 0.4)) 
            drop-shadow(0 0 25px rgba(var(--accent-rgb, 0, 210, 255), 0.2)) !important;
}

.panel-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0 10px 0;
    gap: 15px;
    opacity: 0.6;
}

.panel-separator::before,
.panel-separator::after {
    content: '';
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
}

.panel-separator span {
    color: var(--accent);
    font-size: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.editor-card-title {
    font-size: 0.65rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.editor-card-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.2), transparent);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 90%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-text);
    background: var(--bg-gradient);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 18px;
    -webkit-font-smoothing: antialiased;
}

.layout {
    display: flex;
    gap: 18px;
    width: 100%;
    max-width: 1400px;
    height: 90vh; /* Para que la ventana flote en el medio */
    position: relative;
    overflow: hidden;
}

/* --- ESTADO COLAPSADO --- */
.layout.collapsed .sidebar {
    width: 0;
    padding: 2rem 0;
    margin-right: -20px; /* Compensa el gap */
    opacity: 0;
    pointer-events: none;
}

.layout.collapsed .content-area {
    padding-left: 2.5rem;
}

/* --- CONTADOR Y TEXTOS GLOBALES --- */
.description {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* --- CONTENEDOR TIPO GLASSMORPHISM --- */
.container {
    background: var(--glass-bg);
    border-radius: 24px;
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar {
    width: 234px;
    padding: 1.8rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.logo-container {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.3));
    text-align: center;
}

h1 { 
    margin-bottom: 0.5rem; 
    font-family: var(--font-titles);
    font-weight: 700; 
    font-size: 2.2rem;
    margin-top: 0;
    letter-spacing: -1px;
    background: linear-gradient(to bottom right, #ffffff 30%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Menú Lateral */
.menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-btn {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 12px 18px;
    text-align: left;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-btn:hover, .menu-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    color: var(--accent);
    transform: translateX(5px);
}

.menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 5px;
}

/* --- MAIN CONTENT AREA --- */
.content-area {
    flex-grow: 1;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* para scrollear internamente */
}

/* --- TOP HEADER (Sustituye a Tabs) --- */
.top-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.hamburger-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #00d2ff;
    transition: all 0.3s;
    border-radius: 2px;
}

.hamburger-btn:hover {
    background: rgba(0, 210, 255, 0.15);
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}

.header-title-container h2 {
    font-family: var(--font-titles);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent-glow);
}

.logout-btn {
    background: rgba(255, 76, 76, 0.1);
    border: 1px solid rgba(255, 76, 76, 0.2);
    width: 43px;
    height: 36px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #ff4c4c;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.logout-btn .power-icon {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    display: inline-block;
    /* Reducimos el desplazamiento hacia abajo (de 2px a -1px) para elevarlo */
    /* Mantenemos el desplazamiento a la derecha (3px) que el usuario validó como centrado */
    transform: translate(3px, -1px); 
    filter: drop-shadow(0 0 5px rgba(255, 76, 76, 0.4));
}

.logout-btn:hover {
    background: #ff4c4c;
    color: white;
    border-color: #ff4c4c;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 76, 76, 0.6);
}

.logout-btn:active {
    transform: scale(0.95);
}

/* --- OVERLAY PARA MOVIL --- */
.sidebar-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 90;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.layout.mobile-open .sidebar-overlay {
    display: block;
    opacity: 1;
}

/* --- TABS (OCULTAS SEGUN PETICION) --- */
.tabs {
    display: none;
}

/* --- TAB CONTENT --- */
.tab-panels {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Importante para flexbox interno */
    overflow: hidden;
}

.tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: fadeIn 0.4s ease-in-out;
}
.tab-content.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- TABLAS --- */
.table-responsive {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: auto; /* Scroll vertical y horizontal dentro del contenedor */
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    scrollbar-width: thin; /* Para navegadores modernos */
    scrollbar-color: rgba(0, 210, 255, 0.3) transparent;
}

/* Estilo para los scrollbars en Chrome/Safari */
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.2);
    border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.4);
}

table {
    width: 100%;
    min-width: 700px; 
    border-collapse: collapse; 
    table-layout: fixed;
}

/* Las tablas dentro de diálogos deben caber sin forzar ancho */
.modal-content table {
    min-width: 0 !important;
    width: 100% !important;
}

th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(26, 30, 46, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Estilos específicos para ID en Navegadores principales (Productos, Combos, Conjuntos) */
#tab-conjuntos table th:nth-child(1), #tab-conjuntos table td:nth-child(1),
#tab-productos table th:nth-child(1), #tab-productos table td:nth-child(1) { 
    width: 50px !important; 
    min-width: 50px !important; 
    max-width: 50px !important;
    text-align: center !important; 
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#tab-conjuntos table th:nth-child(3),
#tab-conjuntos table td:nth-child(3) { width: 55px !important; text-align: center; } /* ORDEN */

#tab-conjuntos table th:nth-child(4),
#tab-conjuntos table td:nth-child(4) { width: 80px !important; text-align: center; } /* HABILITADO */

/* Grafico en Navegadores principales */
#tab-productos table th:nth-child(2), #tab-productos table td:nth-child(2) { 
    width: 60px !important; 
    min-width: 60px !important; 
    max-width: 60px !important;
    text-align: center !important;
    padding: 5px !important;
}

#tab-conjuntos table th:nth-child(2),
#tab-conjuntos table td:nth-child(2) { text-align: left !important; } /* NOMBRE IZQUIERDA EN CONJUNTOS */

/* Alineación Alias en modales */
#modal-select-ing .order-list-table th:nth-child(3),
#modal-select-ing .order-list-table td:nth-child(3),
#modal-edit-conj .detail-table th:nth-child(5), /* Desplazado por IMG */
#modal-edit-conj .detail-table td:nth-child(5) { 
    text-align: left !important; 
    padding-left: 10px !important;
}

/* Anchos de columna especificos */
/* ID: reducido (estático 55px como Grupos) */
th:nth-child(1), td:nth-child(1) { 
    width: 55px !important; 
    min-width: 55px !important;
    max-width: 55px !important;
    text-align: center; 
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Corto / Álias: (aprox 120px base, ampliado en grupos) */
th:nth-child(3), td:nth-child(3) { width: 135px; text-align: left !important; }
#tab-grupos th:nth-child(3), #tab-grupos td:nth-child(3) { width: 240px !important; }

/* Grafico: (aprox 60px) */
th:nth-child(2), td:nth-child(2) { 
    width: 65px !important; 
    min-width: 65px !important;
    max-width: 65px !important;
    text-align: center;
    padding: 5px !important;
}

/* Eliminar reglas redundantes o contradictorias para imágenes de tabla */
table img.table-img {
    max-width: 40px !important; /* Reducido para V75 */
    max-height: 40px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Largo / Nombre: FLEXIBLE (Se estira para absorber el espacio de los 1000px) */
#tab-grupos th:nth-child(5), #tab-grupos td:nth-child(5) { width: 60px !important; text-align: center; } /* Orden en Grupos */
#tab-grupos th:nth-child(4), #tbody-grupos td:nth-child(4),
#tab-ingredientes th:nth-child(4), #tbody-ingredientes td:nth-child(4) { 
    width: auto !important; 
}

/* Orden e ID secundarios en tablas de detalle y utilidad */
.col-small, 
#tab-grupos th:nth-child(5), #tbody-grupos td:nth-child(5),
#tab-conjuntos th:nth-child(3), #tbody-conjuntos td:nth-child(3),
.detail-table th:nth-child(1), .detail-table td:nth-child(1),
.detail-table th:nth-child(2), .detail-table td:nth-child(2),
.read-only-table th:nth-child(1), .read-only-table td:nth-child(1) { 
    width: 55px !important; 
    min-width: 55px !important;
    max-width: 55px !important;
    text-align: center; 
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Ancho ampliado para ID en listas de selección (+50px) */
.order-list-table th:nth-child(1), 
.order-list-table td:nth-child(1) {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    text-align: center;
}

/* Gráfico más pequeño en listas de selección (como en navegadores) */
.order-list-table th:nth-child(2), 
.order-list-table td:nth-child(2) {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    text-align: center;
}

/* Alineación a la izquierda para Nombre en Gestor de Orden Genérico */
#modal-orden-gen .order-list-table th:nth-child(2),
#modal-orden-gen .order-list-table td:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding-left: 15px !important;
}

/* Alineación a la izquierda para Nombre/àlias en listas de selección */
.order-list-table th:nth-child(3), 
.order-list-table td:nth-child(3) {
    text-align: left !important;
    padding-left: 10px !important;
}

/* Padding reducido para tablas de selección para hacerlas más compactas */
.order-list-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.order-list-table th, 
.order-list-table td {
    padding: 10px 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alineación de TEXTO para Alias (Columna 4 de detalles tras añadir IMG) */
.detail-table th:nth-child(4), .detail-table td:nth-child(4) {
    text-align: left !important;
    padding-left: 8px !important;
}

/* Forzar centrado para el resto de columnas de detalle (1, 2, 3, 5, etc.) */
.detail-table th:nth-child(1), .detail-table td:nth-child(1),
.detail-table th:nth-child(2), .detail-table td:nth-child(2),
.detail-table th:nth-child(3), .detail-table td:nth-child(3),
.detail-table th:nth-child(5), .detail-table td:nth-child(5) {
    text-align: center !important;
}

/* Álias en tabla de detalles: Flexible */
.detail-table th:nth-child(4), .detail-table td:nth-child(4) {
    width: auto !important;
}

/* Precio / Importe: reducido (aprox 80px) */
#tab-ingredientes th:nth-child(5), #tbody-ingredientes td:nth-child(5),
#tab-combos th:nth-child(6), #tbody-combos td:nth-child(6),
#tab-productos th:nth-child(7), #tbody-productos td:nth-child(7),
.detail-table th:nth-child(3), .detail-table td:nth-child(3) { 
    width: 85px; 
    text-align: right; 
}

/* Nuevas columnas en Productos */
#tab-productos th:nth-child(5), #tbody-productos td:nth-child(5) { width: 120px !important; text-align: left; } /* Grupo Productos */
#tab-productos th:nth-child(6), #tbody-productos td:nth-child(6) { width: 120px !important; text-align: left; } /* Clase */

/* Estado / Hab / Check: pequeño */
th:last-child, td:last-child { width: 80px; text-align: center; }

th, td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

td {
    font-size: 0.95rem;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* --- LOADERS FLOTANTES (V2026) --- */
.table-floating-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none; /* Se activa por JS */
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    background: rgba(15, 15, 26, 0.2);
    backdrop-filter: blur(2px);
    border-radius: 24px;
}

.table-floating-loader .table-loading-container {
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 40px;
    border-radius: 20px;
    border: 1px solid var(--accent-soft);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* --- LOADERS FLOTANTES (V2026) --- */
.table-floating-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none; /* Se activa por JS */
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    background: rgba(15, 15, 26, 0.2);
    backdrop-filter: blur(2px);
    border-radius: 24px;
}

.table-floating-loader {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1000;
    pointer-events: none;
    display: none;
    overflow: visible;
}

.table-floating-loader .table-loading-container-sticky {
    position: absolute;
    top: 150px; /* Distancia desde la parte superior del visor */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    padding: 20px 40px;
    border-radius: 20px;
    border: 2px solid var(--accent);
    box-shadow: 0 15px 50px rgba(0,0,0,0.8), 0 0 20px var(--accent-glow);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: fit-content;
    white-space: nowrap;
}

/* --- SELECCION DE FILA (GENERAL Y MODALES) --- */
tr.selected td, tr.selected-row td {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-bottom: 1px solid var(--accent-soft);
    box-shadow: inset 4px 0 0 var(--accent);
}

tr.selected td:first-child, tr.selected-row td:first-child {
    border-left: 4px solid #00d2ff;
    box-shadow: inset 4px 0 10px -2px rgba(0, 210, 255, 0.3);
}

tr.selected, tr.selected-row {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 5;
    position: relative;
}

/* --- FILA ATENUADA (EXISTENTE) --- */
.row-attenuated {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.row-attenuated td {
    color: rgba(255, 255, 255, 0.3) !important;
}
.row-attenuated:hover td {
    background: transparent !important;
}

/* --- BARRA DE ACCIONES --- */
.action-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.action-btn {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-btn:hover:not(:disabled) {
    background: rgba(0, 210, 255, 0.15);
    border-color: rgba(0, 210, 255, 0.5);
    color: #00d2ff;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.2);
}

.action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(1);
}

.action-separator {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 5px 8px;
    align-self: stretch;
}

/* --- BARRA DE FILTROS --- */
.filter-bar {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group input, .filter-group select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s;
}

.filter-group input:focus, .filter-group select:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
}

.filter-group input {
    width: 250px;
}

/* --- MODALES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    width: 100%;
    max-width: 450px;
    padding: 27px;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.form-group-modal {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group-modal label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 3px;
    font-weight: 500;
}

.form-group-modal input, 
.form-group-modal select,
.multiline-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 9px 13px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
    width: 100%;
}

.form-group-modal input[type="checkbox"],
.form-group-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.form-group-modal select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300d2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 40px;
    cursor: pointer;
}

.form-group-modal select option {
    background: #2d2d44;
    color: white;
}

.form-group-modal input:focus,
.form-group-modal select:focus,
.multiline-input:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.form-group-modal input:disabled,
.form-group-modal select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.2);
}

.multiline-input {
    height: 80px;
    resize: none;
    line-height: 1.4;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* --- ICONOS DE ESTADO (Habilitado/Deshabilitado) --- */
.status-icon {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
}

.status-on {
    color: #00ff88; /* Verde vibrante */
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.status-off {
    color: #ff4c4c; /* Rojo vibrante */
    text-shadow: 0 0 8px rgba(255, 76, 76, 0.4);
}

.extra-unit-info {
    color: #00ff88;
    font-size: 0.85rem;
    margin-left: 8px;
    font-weight: 500;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.2);
}

/* Colores específicos para acciones críticas */
#btn-del-ing:hover:not(:disabled) {
    background: rgba(255, 76, 76, 0.15);
    border-color: rgba(255, 76, 76, 0.5);
    color: #ff4c4c;
    box-shadow: 0 4px 15px rgba(255, 76, 76, 0.2);
}

/* Modal Tabs System */
.modal-tabs {
    display: flex;
    gap: 5px;
    margin: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1px;
}

.modal-tab-item {
    padding: 9px 18px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.modal-tab-item:hover {
    color: #00d2ff;
    background: rgba(210, 255, 255, 0.03);
}

.modal-tab-item.active {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.1);
}

.modal-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

/* Carga Data */
.loader {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* --- SCROLLBAR PARA EL CONTENEDOR MAIN --- */
.tab-panels::-webkit-scrollbar {
    width: 8px;
}
.tab-panels::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.tab-panels::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.3);
    border-radius: 4px;
}
.tab-panels::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.5);
}


/* --- ESTILO PARA EL BUSCADOR DEL PICKER (MODAL-SELECT-ING) --- */
#search-select-ing {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#search-select-ing:focus {
    border-color: #00d2ff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);
}

/* Alineaciones para la tabla del picker */
#tbody-select-ing td:nth-child(1) { text-align: center; color: #00d2ff; font-weight: bold; width: 60px; }
#tbody-select-ing td:nth-child(2) { font-weight: 500; width: 180px; }
#tbody-select-ing td:nth-child(3) { text-align: left; opacity: 0.7; font-size: 0.85rem; width: auto; white-space: normal; }
#tbody-select-ing td:nth-child(4) { text-align: center; width: 70px; }

.legal-footer span, .pow-footer span {
    font-weight: bold;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.pow-footer { margin-top: 15px; }

.pow-footer a {
    color: white;
    text-decoration: none;
    margin: 0 8px;
    transition: opacity 0.3s;
}

.pow-footer a:hover {
    text-decoration: underline;
    opacity: 1;
    color: #00d2ff;
}

/* --- NOTIFICACIONES (TOASTS) --- */
#toast-container {
    position: fixed; 
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    gap: 12px;
    pointer-events: none; /* No bloquear clicks si no hay toasts */
}

.toast {
    background: rgba(15, 23, 42, 0.85); /* Fondo mas oscuro y elegante */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 14px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    min-width: 320px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: toastSlideUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    cursor: default;
    pointer-events: auto; /* Re-activar clicks para el toast */
}

.toast-success { border-left: 4px solid #00ff88; }
.toast-error { border-left: 4px solid #ff4c4c; }
.toast-info { border-left: 4px solid #00d2ff; }

@keyframes toastSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast.fade-out {
    animation: toastFadeDown 0.3s ease-in forwards;
}

@keyframes toastFadeDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.95); }
}

/* --- ESTILOS PARA TABLAS DE DETALLE (DENTRO DE MODALES) --- */
.detail-container {
    background: rgba(255, 255, 255, 0.05);
    padding: 13px;
    border-radius: 12px;
    margin-top: 9px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    min-width: auto; /* No forzar el ancho mínimo de las tablas principales */
    table-layout: auto;
}

.detail-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(26, 30, 46, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.detail-table td {
    padding: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.detail-table select, .detail-table input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
}

.detail-table select:focus, .detail-table input:focus {
    border-color: #00d2ff;
}

/* --- ESTRUCUTRA DE FORMULARIO EN MODAL --- */
.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row:last-child {
    margin-bottom: 0;
}

/* --- CUERPO UNIFICADO DE DETALLE (PRODUCTOS/COMBOS) --- */
.unified-detail-body {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-top: 10px;
}

.unified-detail-body .modal-tabs {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    gap: 0;
}

.unified-detail-body .modal-tab-item {
    border-radius: 0;
    margin: 0;
    padding: 10px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.unified-detail-body .modal-tab-item.active::after {
    bottom: 0;
}

.detail-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 45px;
}

.unified-detail-body .detail-container {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    margin-top: 0;
}

.unified-detail-body .detail-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(26, 30, 46, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.unified-detail-body .detail-table td {
    padding: 7px 8px; /* Mas compacto */
}

/* Ajustes de botones pequeños para la barra compacta */
.btn-small {
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
}

/* --- MAESTRO-DETALLE EN MODALES --- */
.modal-master-detail {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 70vh; /* Aumentado verticalmente */
    min-height: 400px;
}

/* Rediseño específico para tablas de previsualización (evitar amontonamiento) */
.preview-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.preview-table th, .preview-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

/* Columna 1: ID (70px) */
.preview-table th:nth-child(1), 
.preview-table td:nth-child(1) {
    width: 70px !important;
    min-width: 70px !important;
    text-align: left !important;
    padding-left: 10px !important;
}

/* Columna 2: Nombre/Alias (Flexible) */
.preview-table th:nth-child(2), 
.preview-table td:nth-child(2) {
    width: auto !important;
    text-align: left !important;
    padding-left: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Columna 3: Orden/Estado (80px) */
.preview-table th:nth-child(3), 
.preview-table td:nth-child(3) {
    width: 80px !important;
    min-width: 80px !important;
    text-align: left !important;
    padding-left: 10px !important;
}

.master-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-section {
    flex: 1; 
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    min-height: 250px;
    overflow: hidden;
}

/* Estilos para el sub-modal de configuración */
#modal-edit-detail-prod .master-section {
    background: rgba(0, 210, 255, 0.02) !important;
    border: 1px solid rgba(0, 210, 255, 0.08) !important;
    margin-bottom: 20px;
    box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.03);
}

.checkbox-group-modal:hover label {
    filter: brightness(1.2);
    text-shadow: 0 0 8px currentColor;
}

.checkbox-group-modal input:checked {
    box-shadow: 0 0 10px currentColor;
}

#modal-edit-detail-prod .detail-actions-bar {
    background: rgba(255,255,255,0.02);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.modal-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

/* --- BOTONES DE BORRAR ESPECIFICOS --- */
#btn-del-conj:hover:not(:disabled),
#btn-del-prod:hover:not(:disabled),
#btn-del-combo:hover:not(:disabled) {
    background: rgba(255, 76, 76, 0.15);
    border-color: rgba(255, 76, 76, 0.5);
    color: #ff4c4c;
    box-shadow: 0 4px 15px rgba(255, 76, 76, 0.2);
}
/* --- DROPDOWN DE UTILIDADES --- */
.utils-dropdown {
    position: relative;
    display: inline-block;
}

.utils-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: rgba(30, 30, 47, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none; /* Oculto por defecto */
    flex-direction: column;
    padding: 8px 0;
    animation: menuFadeIn 0.2s ease-out;
}

.utils-menu.active {
    display: flex;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.utils-item {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.utils-item:hover {
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
}

.utils-item.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* Estilos para Sincronización de Ingredientes */
.sync-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}
.sync-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.sync-table td {
    padding: 8px 10px;
    font-size: 0.85em;
    vertical-align: middle;
}
.sync-table th.sync-center, 
.sync-table td.sync-center {
    text-align: center !important;
}
.sync-table td.sync-center {
    padding: 2px !important;
}
.sync-table th.sync-left, 
.sync-table td.sync-left {
    text-align: left !important;
}
.sync-col-check {
    width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
}
.sync-col-graf {
    width: 34px !important;
    max-width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
}
.sync-col-tipo {
    width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
}
.sync-table input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #00d2ff;
    margin: 0 auto;
    display: block;
}
.modal-header-badge img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.utils-header {
    padding: 8px 15px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 5px;
}

th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(26, 30, 46, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

td {
    padding: 8px 15px; /* Reducido de 14px 20px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.88rem; /* Reducido de 0.95rem */
    transition: background 0.2s;
    vertical-align: middle;
}

/* Triángulo decorativo */
.utils-menu::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
}

/* --- GESTIÓN DE ORDEN --- */
.order-list-container {
    max-height: 400px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 15px 0;
}

.order-list-table {
    width: 100%;
    border-collapse: collapse;
}

.order-list-row {
    cursor: pointer;
    transition: background 0.2s;
}

.order-list-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.order-list-row.selected {
    background: rgba(0, 210, 255, 0.2) !important;
    color: #00d2ff;
}

.order-list-row td {
    padding: 10px 0; /* Padding horizontal controlado por las reglas nth-child */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
}

.order-warning {
    background: rgba(255, 166, 0, 0.1);
    border: 1px solid rgba(255, 166, 0, 0.3);
    color: #ffa600;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: none; /* Se activa por JS */
}

.order-warning.active {
    display: block;
}
/* --- IMAGENES EN MODAL --- */
.image-edit-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.image-preview-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-img-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.3s;
    display: block;
    margin: auto;
}

.edit-img-preview.no-image {
    opacity: 0.15;
    padding: 20px;
    filter: grayscale(1);
}

.image-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-small {
    padding: 5px 12px;
    font-size: 0.75rem;
}

.btn-danger {
    color: #ff4c4c;
}

.btn-danger:hover {
    background: rgba(255, 76, 76, 0.15) !important;
    border-color: #ff4c4c !important;
}

/* --- TOOLTIP PERSONALIZADO (AYUDA PRECIOS) --- */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 280px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 210, 255, 0.4);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 210, 255, 0.1);
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    text-align: left;
    white-space: normal;
    font-weight: normal;
}

.custom-tooltip.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Triángulo del tooltip */
.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 20px;
    border-width: 8px;
    border-style: solid;
    border-color: rgba(0, 210, 255, 0.4) transparent transparent transparent;
}

/* --- OPTIMIZACIÓN DE COLUMNAS (TABLA INGREDIENTES) --- */
/* INGREDIENTES */
#tab-ingredientes table { table-layout: fixed !important; width: 100% !important; border-collapse: separate; }
#tab-ingredientes th:nth-child(1), #tab-ingredientes td:nth-child(1) { width: 50px !important; text-align: center; }  /* ID */
#tab-ingredientes th:nth-child(2), #tab-ingredientes td:nth-child(2) { width: 75px !important; text-align: center; }  /* Graf. */
#tab-ingredientes th:nth-child(3), #tab-ingredientes td:nth-child(3) { width: 240px !important; text-align: left; }  /* Álias */
#tab-ingredientes th:nth-child(4), #tab-ingredientes td:nth-child(4) { width: auto !important; text-align: left; min-width: 250px !important; } /* Nombre (EXPANSIBLE) */
#tab-ingredientes th:nth-child(5), #tab-ingredientes td:nth-child(5) { width: 95px !important; text-align: right; }   /* Precio */
#tab-ingredientes th:nth-child(6), #tab-ingredientes td:nth-child(6) { width: 65px !important; text-align: center; }  /* Hab. */

#tab-ingredientes td:nth-child(4) {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}

#tab-ingredientes td:nth-child(2) .table-img {
    max-height: 50px;
}

/* GRUPOS */
#tab-grupos table { table-layout: fixed !important; width: 100% !important; }
#tab-grupos th:nth-child(1), #tab-grupos td:nth-child(1) { width: 50px !important; text-align: center; }
#tab-grupos th:nth-child(2), #tab-grupos td:nth-child(2) { width: 70px !important; text-align: center; }
#tab-grupos th:nth-child(3), #tab-grupos td:nth-child(3) { width: 200px !important; text-align: left; }
#tab-grupos th:nth-child(4), #tab-grupos td:nth-child(4) { width: auto !important; text-align: left; min-width: 250px !important; }
#tab-grupos th:nth-child(5), #tab-grupos td:nth-child(5) { width: 85px !important; text-align: center; }
#tab-grupos th:nth-child(6), #tab-grupos td:nth-child(6) { width: 65px !important; text-align: center; }

/* CONJUNTOS */
#tab-conjuntos table { table-layout: fixed !important; width: 100% !important; }
#tab-conjuntos th:nth-child(1), #tab-conjuntos td:nth-child(1) { width: 65px !important; text-align: center; }
#tab-conjuntos th:nth-child(2), #tab-conjuntos td:nth-child(2) { width: auto !important; text-align: left; min-width: 350px !important; }
#tab-conjuntos th:nth-child(3), #tab-conjuntos td:nth-child(3) { width: 85px !important; text-align: center; }
#tab-conjuntos th:nth-child(4), #tab-conjuntos td:nth-child(4) { width: 85px !important; text-align: center; }

/* PRODUCTOS */
#tab-productos table { table-layout: fixed !important; width: 100% !important; }
#tab-productos th:nth-child(1), #tab-productos td:nth-child(1) { width: 50px !important; text-align: center; }
#tab-productos th:nth-child(2), #tab-productos td:nth-child(2) { width: 70px !important; text-align: center; }
#tab-productos th:nth-child(3), #tab-productos td:nth-child(3) { width: 180px !important; text-align: left; }
#tab-productos th:nth-child(4), #tab-productos td:nth-child(4) { width: auto !important; text-align: left; min-width: 200px !important; }
#tab-productos th:nth-child(5), #tab-productos td:nth-child(5) { width: 155px !important; text-align: left; }
#tab-productos th:nth-child(6), #tab-productos td:nth-child(6) { width: 95px !important; text-align: center; }
#tab-productos th:nth-child(7), #tab-productos td:nth-child(7) { width: 90px !important; text-align: right; }
#tab-productos th:nth-child(8), #tab-productos td:nth-child(8) { width: 60px !important; text-align: center; }

/* COMBOS (7 Columnas: ID, Graf, Álias, Nombre, Grupo, Precio, Hab) */
#tab-combos table { table-layout: fixed !important; width: 100% !important; }
#tab-combos th:nth-child(1), #tab-combos td:nth-child(1) { width: 50px !important; text-align: center; }
#tab-combos th:nth-child(2), #tab-combos td:nth-child(2) { width: 70px !important; text-align: center; }
#tab-combos th:nth-child(3), #tab-combos td:nth-child(3) { width: 225px !important; text-align: left; }
#tab-combos th:nth-child(4), #tab-combos td:nth-child(4) { width: auto !important; text-align: left; min-width: 200px !important; }
#tab-combos th:nth-child(5), #tab-combos td:nth-child(5) { width: 105px !important; text-align: left; }
#tab-combos th:nth-child(6), #tab-combos td:nth-child(6) { width: 90px !important; text-align: right; }
#tab-combos th:nth-child(7), #tab-combos td:nth-child(7) { width: 60px !important; text-align: center; }

/* --- RESPONSIVE / MOVIL --- */
@media (max-width: 900px) {
    body { padding: 10px; }
    
    .layout {
        height: 100vh;
        gap: 0;
    }
    
    .sidebar {
        position: absolute;
        left: -300px;
        top: 0;
        bottom: 0;
        width: 280px;
        background: #1e1e2f;
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    }
    
    .layout.mobile-open .sidebar {
        left: 0;
    }
    
    .content-area {
        padding: 1.5rem;
    }
    
    .header-title-container h2 {
    font-family: var(--font-titles);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent-glow);
}
    
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group input {
        width: 100%;
    }
    
    .action-bar {
        overflow-x: auto;
        padding-bottom: 15px;
    }
}

/* --- GLOBAL LOADING OVERLAY --- */
.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 11, 30, 0.85); /* Fondo oscuro coherente con el estilo de la app */
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Por encima de todo, incluidos los modales */
    visibility: hidden;
    opacity: 0;
    /* transition: all 0.3s ease;  <-- ELIMINADO PARA FEEDBACK INSTANTANEO */
}

.global-loader-overlay.active {
    visibility: visible;
    opacity: 1;
}

.loader-content {
    text-align: center;
    color: #00d2ff;
}

.loader-content p {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.premium-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(0, 210, 255, 0.1);
    border-top: 3px solid #00d2ff;
    border-radius: 50%;
    animation: spin-premium 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
    margin: 0 auto;
}

@keyframes spin-premium {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para Edición Inline de Precios (V81) */
.table-input-price {
    background: transparent;
    border: 1px solid transparent;
    color: #00ff88;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: right;
    width: 80px;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.table-input-price:hover {
    background: rgba(0, 210, 255, 0.05);
    border-color: rgba(0, 210, 255, 0.2);
}

.table-input-price:focus {
    background: rgba(0, 0, 0, 0.3);
    border-color: #00d2ff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.3);
}

/* Ocultar flechas del input number para limpieza visual */
.table-input-price::-webkit-outer-spin-button,
.table-input-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.table-input-price {
    -moz-appearance: textfield;
}

/* --- MENÚ MOSTRADOR (V2) --- */
.menu-ribbon-container { position: sticky; top: -2.025rem; background: rgba(30,30,47,0.7); backdrop-filter: blur(10px); z-index: 50; margin: -2.025rem -2.025rem 1.62rem -2.025rem; padding: 1.215rem 2.025rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.menu-ribbon { display: flex; gap: 11.7px; overflow-x: auto; padding-bottom: 8.1px; }
.ribbon-item { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 8.1px 16.2px; border-radius: 27px; white-space: nowrap; cursor: pointer; transition: all 0.3s; font-size: 0.8rem; }
.ribbon-item:hover { background: rgba(0, 210, 255, 0.1); border-color: #00d2ff; }
.menu-display { overflow-y: auto; flex-grow: 1; scroll-behavior: smooth; }
.menu-group-section { margin-bottom: 2.7rem; scroll-margin-top: 90px; }
.menu-group-title { font-size: 1.08rem; color: #00d2ff; margin-bottom: 0.9rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 9px; }
.menu-products-grid { display: grid; grid-template-columns: 1fr; gap: 10.8px; max-width: 750px; margin: 0 auto; width: 100%; }
.product-card { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 12px; 
    padding: 13.5px; 
    transition: 0.3s; 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    gap: 18px; 
    min-height: 81px; 
    height: auto;
    width: 100%; /* Forzar ancho completo del grid */
}

.product-card.combo-card {
    flex-direction: column;
    align-items: stretch;
}

.product-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

.product-card-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
}

.product-img-container { width: 72px; height: 72px; flex-shrink: 0; display: none; background: transparent !important; justify-content: center; align-items: center; align-self: center; }
.show-images .product-img-container { display: flex; }
.product-img-container.empty { background: transparent !important; }
.product-img-container img { object-fit: contain; width: 100%; height: 100%; border-radius: 0; }

.product-card-main { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
.product-card-names { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex-grow: 1; }
.product-short-name { font-size: 1.0rem; font-weight: 600; color: #fff; white-space: normal; line-height: 1.2; }
.product-long-name { font-size: 0.8rem; opacity: 0.65; font-style: italic; white-space: normal; line-height: 1.4; }
.product-price { color: #00ff88; font-weight: bold; font-size: 1.12rem; text-shadow: 0 0 10px rgba(0, 255, 136, 0.2); white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* --- ESTILOS DE BARRAS DE DESPLAZAMIENTO (CRISTAL) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.3); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; transition: all 0.3s; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 255, 0.6); }

@media print { 
    .no-print { display: none !important; } 
    .sidebar { display: none !important; } 
    .content-area { padding: 0; } 
    .menu-ribbon-container { display: none; } 
    .tab-panels { background: #fff !important; color: #000 !important; }
    .product-card { border-color: #ddd !important; background: #fff !important; color: #000 !important; }
    .product-short-name, .product-price { color: #000 !important; }
}

/* --- ESTILIZACIÓN DE SELECTS (DESPLEGABLES) --- */
.filter-bar select, #filters-menu select, #filter-view-menu {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    appearance: auto !important;
}

.filter-bar select:hover, #filters-menu select:hover {
    background: rgba(0, 210, 255, 0.1) !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.2) !important;
}

.filter-bar select option {
    background: #1e1e2f !important;
    color: #fff !important;
}

/* --- VISTA DETALLADA (MENÚ MOSTRADOR) --- */
.product-details-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.show-images .product-details-container {
    padding-left: 0px; /* Sangrado eliminado por petición del usuario */
}

.product-card-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 40px; /* SANGRADO REDUCIDO POR DEFECTO (SIN GRÁFICOS) */
    width: 100%;
    transition: padding-left 0.2s ease;
}

.menu-products-grid.show-images .product-card-details {
    padding-left: 80px; /* SANGRADO COMPLETO SOLO SI HAY GRÁFICOS */
}

.detail-img-container {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
}

.detail-img-container.empty-placeholder {
    background: transparent;
}

.details-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.details-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 210, 255, 0.6);
    margin-bottom: 5px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 210, 255, 0.1);
    padding-bottom: 3px;
    width: fit-content;
    margin-left: 0; /* Alineado al nuevo padding del padre */
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* APRETADO AL MÁXIMO */
    margin-left: 0px; 
}

.detail-item {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex: 1; /* Permite que el nombre ocupe el espacio sobrante */
}

.item-contrib-val {
    width: 90px; /* Columna fija para importes */
    text-align: right;
    font-weight: 700;
    color: #00ff88;
    font-size: 0.88rem;
    white-space: nowrap;
    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
    flex-shrink: 0;
}

.sum-number {
    width: 110px;
    flex-shrink: 0;
}

.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    gap: 6px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.qty-btn:hover {
    background: #00ff88;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
    transform: scale(1.1);
}

.qty-btn:active {
    transform: scale(0.95);
}

input.qty-input {
    width: 28px;
    height: 100%;
    background: transparent;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    outline: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* Ocultar flechas del input number */
input.qty-input::-webkit-outer-spin-button,
input.qty-input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.detail-item.disabled {
    opacity: 0.5;
    text-decoration: line-through;
    filter: saturate(0.8);
}

.detail-item.disabled .item-contrib-val {
    opacity: 0.2;
}

.detail-item.disabled .item-contrib-val {
    opacity: 0.2;
}

.detail-name {
    flex-grow: 0;
}

.detail-price {
    font-size: 0.68rem;
    color: #00ff88;
    opacity: 0.8;
    font-weight: 500;
}

.detail-item.disabled .detail-price {
    display: none; /* No mostrar precio si está deshabilitado */
}

/* --- ESTILOS ALTERNATIVAS ANIDADAS (V3) --- */
.alternatives-container {
    margin-left: 15px;
    margin-top: 4px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 1px solid rgba(0, 210, 255, 0.15);
    padding-left: 12px;
}

/* Sangrado eliminado para que coincida con la nueva alineación dinámica */
.show-images .alternatives-container {
    margin-left: 15px;
}

.alternatives-title {
    font-size: 0.68rem;
    color: rgba(0, 210, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.alternative-item {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
}

.detail-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.detail-img-placeholder {
    display: none; /* Eliminamos el hueco fantasma */
}

.detail-item {
    align-items: center !important; /* Forzar alineación al centro para la imagen */
    gap: 12px !important;
}

.alternative-item .detail-name {
    opacity: 0.9;
}

/* --- ESTILOS DE SUMATORIOS DINÃMICOS --- */
.card-sum-total {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 0.96rem;
    font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

.sum-item-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin-bottom: 12px;
}

.sum-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #00d2ff;
    flex-shrink: 0;
}

.alternative-item-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s;
}

.alternative-item-radio:hover {
    color: #fff;
}

.alternative-item-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #00d2ff;
    cursor: pointer;
    flex-shrink: 0;
}

.alternative-item .detail-price {
    font-size: 0.78rem;
    opacity: 0.6;
}

/* --- SLOT ALTERNATIVES PICKER (COMBOS) --- */
.slot-alternatives-picker {
    width: 100%;
}

/* --- GALERIA DE ACTIVOS --- */

.gallery-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.gallery-item:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: #00d2ff;
    transform: translateY(-2px);
}

.gallery-item.selected {
    background: rgba(0, 210, 255, 0.2);
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.gallery-img-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
}

.gallery-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-item span {
    font-size: 0.75rem;
    color: #fff;
    opacity: 0.7;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-transform: uppercase;
}

.gallery-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}

.gallery-tab {
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: all 0.2s;
}

.gallery-tab:hover { opacity: 1; background: rgba(255,255,255,0.05); }
.gallery-tab.active {
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    border: 1px solid rgba(0, 210, 255, 0.3);
    opacity: 1;
    font-weight: bold;
}

/* --- OPTIMIZACIÓN DE COLUMNAS (TABLA GALERÍA) --- */
#tab-galeria table { table-layout: fixed !important; width: 100% !important; }
#tab-galeria th:nth-child(1), #tab-galeria td:nth-child(1) { width: 50px !important; text-align: center; }
#tab-galeria th:nth-child(2), #tab-galeria td:nth-child(2) { width: 80px !important; text-align: center; }
#tab-galeria th:nth-child(3), #tab-galeria td:nth-child(3) { width: 180px !important; text-align: left; }
#tab-galeria th:nth-child(4), #tab-galeria td:nth-child(4) { width: auto !important; text-align: left; min-width: 250px !important; }
#tab-galeria th:nth-child(5), #tab-galeria td:nth-child(5) { width: 120px !important; text-align: center; }
#tab-galeria th:nth-child(6), #tab-galeria td:nth-child(6) { width: 65px !important; text-align: center; }

/* --- REFUERZO DE ESTILOS GALERÍA (PICKER & ADMIN) --- */
.gallery-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 18px;
    height: 500px;
    min-height: 450px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
}

.gallery-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.gallery-item:hover {
    transform: translateY(-5px);
    background: rgba(0, 210, 255, 0.07);
    border-color: rgba(0, 210, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.25);
}

.gallery-item.selected {
    border-color: #00d2ff;
    background: rgba(0, 210, 255, 0.18);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
    transform: scale(1.02);
}

.gallery-img-container {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.gallery-img-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.gallery-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #00ff88;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 255, 136, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-item span {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.gallery-load-more {
    grid-column: 1 / -1;
    padding: 20px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gallery-load-more:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: #00d2ff;
    color: #00d2ff;
    transform: translateY(-2px);
}

.gallery-asset-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.gallery-asset-row.selected {
    background: rgba(0, 210, 255, 0.1) !important;
    border-left: 4px solid #00d2ff;
}

.gallery-asset-row.selected td {
    color: #00d2ff !important;
}






/* --- COMPONENTES RECIEN MIGRADOS --- */
#title { font-family: var(--font-titles); color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); margin: 0; }
#tenant-branding { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.5rem; padding: 0 15px; min-height: 40px; opacity: 1; transition: opacity 0.5s ease; }
#tenant-logo-container { width: 36px; height: 36px; border-radius: 8px; background: var(--glass-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); }
#tenant-logo { width: 100%; height: 100%; object-fit: contain; }
#tenant-name { font-weight: 500; color: white; font-size: 0.95rem; letter-spacing: 0.5px; }
.user-profile-header { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.user-info-text { display: flex; flex-direction: column; align-items: flex-end; }
#user-name-display { font-weight: 600; color: white; font-size: 0.9rem; }
.user-role { font-size: 0.75rem; color: var(--text-muted); }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--success)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 15px var(--accent-glow); border: 2px solid rgba(255,255,255,0.1); }

/* --- ALERGENOS V115 --- */
.alergeno-item-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
}

.alergeno-item-v2:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: var(--accent);
}

.alergeno-item-v2 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    margin-left: auto; /* A la derecha */
}

.alergeno-item-v2 .emoji-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.alergeno-item-v2.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Iconos de Alérgenos (SVG Data URIs) - RECONOCIBLES V115 */
.icon-gluten { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23f1c40f'%3E%3Cpath d='M448 32c-35.3 0-64 28.7-64 64 0 7.8 1.4 15.2 3.9 22.1L244.6 261.4l-31.1-31.1c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l31.1 31.1L53.9 452.1c-6.2 6.2-9.4 14.3-9.4 22.4 0 17.7 14.3 32 32 32 8.1 0 16.2-3.1 22.4-9.4l145.4-145.4 31.1 31.1c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-31.1-31.1 143.3-143.3c6.9 2.5 14.3 3.9 22.1 3.9 35.3 0 64-28.7 64-64S483.3 32 448 32z'/%3E%3C/svg%3E"); }
.icon-crustaceos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23e74c3c'%3E%3Cpath d='M256 32c-12.3 0-24.3 2.1-35.4 5.9C211.4 16.6 193 0 171.2 0c-26.1 0-47.2 21.1-47.2 47.2 0 1.9 .1 3.7 .3 5.5C87.4 72.8 64 111.7 64 156.4V352c0 88.4 71.6 160 160 160h64c88.4 0 160-71.6 160-160V156.4c0-44.7-23.4-83.6-60.1-103.7 .2-1.8 .3-3.6 .3-5.5 0-26.1-21.1-47.2-47.2-47.2-21.8 0-40.2 16.6-49.4 37.9C280.3 34.1 268.3 32 256 32z'/%3E%3C/svg%3E"); }
.icon-huevos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23fdfefe'%3E%3Cpath d='M192 0C86 0 0 86 0 192c0 77.4 46.2 144.1 112 173.1V480c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V365.1c65.8-29 112-95.7 112-173.1C384 86 298 0 192 0z'/%3E%3C/svg%3E"); }
.icon-pescado { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%233498db'%3E%3Cpath d='M0 192c0 44.2 35.8 80 80 80h352c44.2 0 80-35.8 80-80s-35.8-80-80-80H80c-44.2 0-80 35.8-80 80zm256-48c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48z'/%3E%3C/svg%3E"); }
.icon-cacahuetes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23d35400'%3E%3Cpath d='M256 0c-44.2 0-80 35.8-80 80 0 17.7 5.7 34 15.5 47.3L135.3 227.3c-12.5 12.5-12.5 32.8 0 45.3l100 100c12.5 12.5 32.8 12.5 45.3 0l56.2-56.2c13.3 9.8 29.6 15.5 47.3 15.5 44.2 0 80-35.8 80-80s-35.8-80-80-80c-17.7 0-34 5.7-47.3 15.5L256 80c0-44.2-35.8-80-80-80z'/%3E%3C/svg%3E"); }
.icon-soja { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2327ae60'%3E%3Cpath d='M256 32c-123.7 0-224 100.3-224 224s100.3 224 224 224 224-100.3 224-224-100.3-224-224-224zm0 384c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E"); }
.icon-lacteos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ecf0f1'%3E%3Cpath d='M128 0c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H128zm32 64h192c17.7 0 32 14.3 32 32v288c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E"); }
.icon-frutos-secos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23a04000'%3E%3Cpath d='M256 0c-70.7 0-128 57.3-128 128 0 22.9 6 44.4 16.5 63L32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32L367.5 191C378 172.4 384 150.9 384 128 384 57.3 326.7 0 256 0z'/%3E%3C/svg%3E"); }
.icon-apio { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%232ecc71'%3E%3Cpath d='M256 32c-12.5 0-25 2.1-36.9 6.2C200.7 15.5 178.6 0 153.6 0c-30.7 0-55.6 24.9-55.6 55.6 0 2.2 .1 4.4 .4 6.5C59.6 85.8 32 131.7 32 184v232c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V184c0-52.3-27.6-98.2-66.4-121.9 .3-2.1 .4-4.3 .4-6.5 0-30.7-24.9-55.6-55.6-55.6-25 0-47.1 15.5-58.5 38.2C281 34.1 268.5 32 256 32z'/%3E%3C/svg%3E"); }
.icon-mostaza { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23f1c40f'%3E%3Cpath d='M256 0c-44.2 0-80 35.8-80 80 0 17.7 5.7 34 15.5 47.3L135.3 227.3c-12.5 12.5-12.5 32.8 0 45.3l100 100c12.5 12.5 32.8 12.5 45.3 0l100-100c12.5-12.5 12.5-32.8 0-45.3L320.5 127.3c9.8-13.3 15.5-29.6 15.5-47.3 0-44.2-35.8-80-80-80z'/%3E%3C/svg%3E"); }
.icon-sesamo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fdfefe'%3E%3Cpath d='M256 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32S273.7 0 256 0zm0 96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32S273.7 96 256 96zm0 96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32S273.7 192 256 192zm0 96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32S273.7 288 256 288z'/%3E%3C/svg%3E"); }
.icon-sulfitos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2395a5a6'%3E%3Cpath d='M128 32c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H128zm32 64h192v288H160V96z'/%3E%3C/svg%3E"); }
.icon-altramuces { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23f39c12'%3E%3Cpath d='M256 32c-123.7 0-224 100.3-224 224s100.3 224 224 224 224-100.3 224-224-100.3-224-224-224zm0 384c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E"); }
.icon-moluscos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%239b59b6'%3E%3Cpath d='M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm0 384c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E"); }

/* --- WEB PANEL EDITOR (MASTER PARITY) --- */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s;
    overflow-y: auto;
    padding: 30px 0;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal .modal-content {
    background: #0f1115;
    background-image: radial-gradient(at top left, rgba(255, 255, 255, 0.03), transparent);
    border: 1px solid var(--accent);
    max-width: 900px;
    width: 95%;
    max-height: 92vh;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 0 60px rgba(0,0,0,1);
    transform: translateY(17px);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal .modal-header {
    padding: 25px 34px 15px 34px;
    flex-shrink: 0;
}

.modal .modal-body {
    padding: 0 34px 20px 34px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal .modal-footer {
    padding: 15px 34px 25px 34px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 13px;
}

.modal .editor-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 242, 255, 0.15);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.modal .editor-card-title {
    font-size: 0.65rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.modal .editor-card-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.2), transparent);
}

.modal .form-group-modal {
    margin-bottom: 15px;
}

.modal .form-group-modal label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 5px;
}

.modal .form-group-modal input, 
.modal .form-group-modal select, 
.modal .form-group-modal textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: white;
    padding: 10px 12px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.modal .form-group-modal input:focus, 
.modal .form-group-modal select:focus, 
.modal .form-group-modal textarea:focus {
    border-color: var(--accent);
    outline: none;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
}

/* --- NUEVO SPINNER PARA TABLAS (V2026) --- */
.table-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 15px;
    width: 100%;
}

.table-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin-premium 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 15px var(--accent-soft);
}

.table-loading-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    animation: pulse 1.5s infinite;
}