:root {
    --primary-color: #4A5568;
    --secondary-color: #2D3748;
    --background-color: #f7fafc;
    --card-bg: #ffffff;
    --text-color: #2D3748;
    --border-color: #E2E8F0;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --border-radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
}

.page-container {
    display: flex;
}

header {
    background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- LÓGICA DE FIJACIÓN --- */
    position: sticky;
    top: 0;
    z-index: 1010;
}

.menu-toggle-btn {
    display: none; /* Oculto por defecto en escritorio */
    position: absolute;
    left: 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

#indice-categorias {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 100vh;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    padding: 1rem;
    overflow-y: auto;
    z-index: 2000; /* Más alto que el header para superponerse */
    padding-top: 5rem; /* Dejar espacio para el header fijo */
    box-sizing: border-box; /* Asegurar que el padding no añada tamaño */
}

main {
    padding: 2rem;
    width: 100%; /* Ocupa el espacio restante */
    box-sizing: border-box;
    padding-left: 220px; /* Dejamos el espacio para el menú lateral */
}

#indice-categorias h3 { margin: 0 0 1rem 0; font-size: 1rem; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
#indice-categorias a { display: block; padding: 8px 12px; text-decoration: none; color: #4A5568; border-radius: 6px; font-size: 0.9rem; transition: background-color 0.2s, color 0.2s; }
#indice-categorias a:hover { background-color: var(--primary-color); color: white; }

.categoria-seccion { background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 2rem;}
.categoria-header { background-color: #EDF2F7; padding: 1rem 1.5rem; font-size: 1.3rem; font-weight: bold; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.categoria-header:hover { background-color: #E2E8F0; }
.toggler-icon { font-size: 1rem; transition: transform 0.3s ease; }
.collapsed .toggler-icon { transform: rotate(-90deg); }
.categoria-productos {
display: grid;
/* Inicia en estado expandido, permitiendo que el contenido defina la altura */
grid-template-rows: 1fr;
transition: grid-template-rows 0.4s ease-in-out;
}
.categoria-productos.collapsed {
/* En estado colapsado, la altura de la fila es 0, ocultando el contenido */
grid-template-rows: 0fr;
}
/* Es importante que el contenido directo dentro del grid no tenga overflow visible */
.categoria-productos > * {
overflow: hidden;
}

.catalogo-tabla-wrapper { overflow-x: auto; width: 100%; }
.catalogo-tabla { width: 100%; border-collapse: collapse; min-width: 800px; /* Ancho mínimo para forzar scroll en móviles */ }
.catalogo-tabla th, .catalogo-tabla td { padding: 0.75rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
.catalogo-tabla tbody tr:last-child td { border-bottom: none; }

.hidden { display: none !important; }
#loading-state { text-align: center; padding: 4rem 0; }
.spinner { border: 6px solid #f3f3f3; border-top: 6px solid var(--primary-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 1rem auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.producto-no-disponible { background-color: #fef2f2; color: #9ca3af; text-decoration: line-through; }
.col-titulo { min-width: 250px; }
.col-autor { min-width: 150px; }
.col-reseña { min-width: 200px; white-space: normal; word-break: break-word; font-size: 0.85rem; color: #555; vertical-align: top; }
.col-precio { text-align: right; font-family: monospace; }
.col-fotos { min-width: 150px; }
.fotos-links a { display: inline-block; margin: 2px; background-color: #eef2ff; color: #4338ca; padding: 4px 8px; border-radius: 4px; text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.fotos-links a:hover { background-color: #e0e7ff; }
.foto-link { position: relative; display: inline-block; }
.foto-tooltip { 
    display: none; 
}
.foto-tooltip img { width: 100%; height: auto; display: block; border-radius: 6px; }
.foto-link:hover .foto-tooltip { visibility: visible; opacity: 1; }

.tooltip-flotante {
    width: 200px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 5px;
    position: absolute;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none; /* <--- AÑADE ESTA LÍNEA DE NUEVO */
}

.tooltip-flotante.visible {
    opacity: 1;
    visibility: visible;
}

.tooltip-flotante img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 6px; 
}

/* --- ESTILOS PARA IMPRESIÓN / PDF --- */
@media print {
    body, main { padding-left: 0; }
    header, #indice-categorias { display: none; }
    main { padding: 0; }
    .page-container { display: block; }
    .categoria-seccion { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
    .catalogo-tabla th, .catalogo-tabla td { padding: 4px 8px; font-size: 8pt; }
    .foto-link, .publicado-check { display: none; }
}

/* --- ESTILOS MODAL DE EXPORTACIÓN --- */
.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 500px;
}
.export-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
.export-options-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-cerrar-modal {
    background-color: #e2e8f0;
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-exportar {
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: auto;
}
.btn-exportar:hover {
    background-color: rgba(255,255,255,0.4);
}

/* --- ESTILOS BOTÓN CERRAR MENÚ --- */
.btn-cerrar-indice {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2010;
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-cerrar-indice:hover {
    background-color: #cbd5e0;
}

/* Hacemos visible el botón solo en la vista móvil */
@media (max-width: 992px) {
    .btn-cerrar-indice {
        display: block;
    }
}

/* --- AJUSTES VISUALES FINALES PARA EL MENÚ DE CATEGORÍAS --- */

/* 1. Sombreado del Menú Lateral */
#indice-categorias {
    background-color: #BCA67D; /* El color de sombreado que pediste */
    border-right: 1px solid #A9946B; /* Un borde un poco más oscuro que combina */
}

/* Ajustamos el color del texto para que sea legible sobre el nuevo fondo */
#indice-categorias h3 {
    color: #FFFFFF; /* Texto blanco para el título "Categorías" */
    border-bottom-color: rgba(255, 255, 255, 0.3); /* Un borde inferior más sutil */
}

#indice-categorias a {
    color: #F8F5F0; /* Un color crema muy claro para los enlaces, se ve más elegante que el blanco puro */
}

/* 2. Resaltado de la Categoría Seleccionada y Hover */

/* Cuando el ratón pasa por encima de un enlace */
#indice-categorias a:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Un sombreado oscuro semitransparente */
    color: white;
}

/* Cuando un enlace está SELECCIONADO (la clase que añadiremos con JS) */
#indice-categorias a.active-category {
    background-color: #4A5568; /* El color azul del encabezado */
    color: white;
    font-weight: bold; /* Le damos más énfasis */
}

/* --- ESTILO PARA RESALTAR PRECIOS CAMBIADOS EN CATÁLOGO PÚBLICO --- */

.precio-actualizado-publico td.col-precio {
    background-color: #fef9c3; /* Un amarillo suave y legible */
    font-weight: bold;
}

/* --- ESTILO PARA LA FECHA DE REFERENCIA EN EL GESTOR --- */

.lista-precio-meta {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 1rem;
    font-style: italic;
}

/* ================================================================= */
/* == AJUSTES DE USABILIDAD Y ESTILO (VERSIÓN 5 - FINAL VISUAL)   == */
/* ================================================================= */

/* --- C. AJUSTES DEL ENCABEZADO PRINCIPAL --- */
.page-template-page-catalogo header.catalogo-header {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    display: flex !important; /* <--- AÑADE ESTO */
    justify-content: center !important; /* <--- AÑADE ESTO (Centra el título) */
    align-items: center !important; /* <--- AÑADE ESTO (Alinea verticalmente) */
    gap: 1rem; /* <--- OPCIONAL: añade espacio entre elementos */
    padding-left: 2rem !important;  /* Añade espacio a la izquierda */
    padding-right: 2rem !important; /* Añade espacio a la derecha */
}

.page-template-page-catalogo header.catalogo-header h1 {
    font-size: 2.2rem !important;     /* Aumenta el tamaño del título */
    color: white !important;          /* Asegura el color blanco */
}

/* --- A. TAMAÑO DE FUENTE DEL PANEL DE CATEGORÍAS --- */
.page-template-page-catalogo #indice-categorias h3 {
    font-size: 1.8rem !important;      /* Aumentamos el título "Categorías" */
}
.page-template-page-catalogo #indice-categorias a {
    font-size: 14px !important;       /* Tamaño de los enlaces del menú */
}

/* --- B. TAMAÑO DE FUENTE DE LA CABECERA DE CATEGORÍA EN LA TABLA --- */
.page-template-page-catalogo .categoria-header {
    font-size: 1.4rem !important;      /* Aumentamos el título como "AGAPE" */
    padding-top: 1.2rem !important;    /* Más espacio interno para que se vea mejor */
    padding-bottom: 1.2rem !important;
}

/* --- TAMAÑO DE FUENTE GENERAL DE LA TABLA (Mantenido) --- */
.page-template-page-catalogo .catalogo-tabla th,
.page-template-page-catalogo .catalogo-tabla td {
    font-size: 14px !important; 
    line-height: 1.5 !important;
    vertical-align: middle !important; /* Centra verticalmente el texto en las celdas */
}

/* --- TRUNCADO DE TEXTO (Mantenido) --- */
.page-template-page-catalogo td.col-titulo,
.page-template-page-catalogo td.col-autor,
.page-template-page-catalogo td.col-reseña,
.page-template-page-catalogo td.col-fotos {
    max-width: 250px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- INICIO: ESTILOS PARA CELDAS EXPANDIBLES (PUNTO D) --- */

/* Cuando una celda se expande, le quitamos las restricciones */
.page-template-page-catalogo td.cell-expanded {
    white-space: normal !important; /* Permite que el texto salte de línea */
    max-width: none;               /* Elimina el ancho máximo */
    overflow: visible;             /* El contenido ya no se oculta */
    text-overflow: clip;           /* Quitamos los puntos suspensivos */
}

/* Le damos un feedback visual a la celda expandida */
.page-template-page-catalogo td.cell-expanded {
    background-color: #fef9c3; /* Un amarillo suave para destacar */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1); /* Sombra interior */
    transition: background-color 0.3s ease;
}

/* Cambiamos el cursor en las celdas truncadas para indicar que son clickables */
.page-template-page-catalogo td.col-titulo,
.page-template-page-catalogo td.col-autor,
.page-template-page-catalogo td.col-reseña,
.page-template-page-catalogo td.col-fotos {
    cursor: pointer; /* Cambiamos el cursor de 'help' a 'pointer' */
}

/* --- FIN: ESTILOS PARA CELDAS EXPANDIBLES --- */

/* ==================================================================== */
/* == FASE 3.2: AJUSTES FINALES DE LAYOUT Y MENÚ DE COLUMNAS       == */
/* ==================================================================== */

/* --- 1. CORRECCIÓN DEL LAYOUT DEL HEADER --- */

.page-template-page-catalogo header.catalogo-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    /* ELIMINAMOS justify-content: center; de aquí */
}

.page-template-page-catalogo header.catalogo-header h1 {
    font-size: 1.8rem !important;
    color: white !important;
    /* La magia para centrar el título: */
    margin-left: auto;  /* Empuja el título lejos del botón de la izquierda */
    margin-right: auto; /* Empuja el título lejos de los botones de la derecha */
}

/* --- 2. AGRUPAR LOS BOTONES DE LA DERECHA Y CORREGIR ESTILOS --- */

/* Creamos un nuevo contenedor para los botones de la derecha */
.header-actions-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Anulamos el margen del botón de exportar para que se alinee con el nuevo contenedor */
.btn-exportar {
    margin-left: 0; 
}

/* --- 3. CORRECCIÓN DE ESTILOS DEL MENÚ DE COLUMNAS --- */

.column-toggle-container {
    position: relative;
}

#column-toggle-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
#column-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

#column-toggle-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1rem;
    margin-top: 5px;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 150px;
}

/* LA REGLA CLAVE QUE FALTABA: Dar color al texto de los labels */
#column-toggle-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-color) !important; /* <--- AÑADE ESTO para darle color al texto */
}
#column-toggle-dropdown input {
    width: auto;
    margin: 0;
}

.col-hidden {
    display: none !important;
}

/* --- FASE 4: MENÚ LATERAL PLEGABLE --- */

/* 1. Hacemos el botón hamburguesa SIEMPRE visible */
.menu-toggle-btn {
    display: block !important;
    position: static !important; /* Lo sacamos de la posición absoluta */
    order: -1; /* Lo ponemos al principio del header */
}

/* 2. Ajustamos el header para que el título siga centrado */
.page-template-page-catalogo header.catalogo-header {
    justify-content: flex-start !important; /* Alineamos todo a la izquierda */
}
.page-template-page-catalogo header.catalogo-header h1 {
    flex-grow: 1; /* Hacemos que el título ocupe el espacio sobrante */
    text-align: center; /* Centramos el texto dentro de ese espacio */
    margin-left: 0; /* Reseteamos los márgenes automáticos de antes */
    margin-right: 0;
}
.header-actions-right {
    margin-left: 0; /* Reseteamos el margen que le habíamos puesto */
}

/* 3. Lógica de transición para el panel y el contenido principal */
#indice-categorias {
    transition: transform 0.3s ease-in-out; /* Animación de deslizamiento */
}
main {
    transition: padding-left 0.3s ease-in-out; /* Animación del padding */
}

/* 4. La clase que controla el estado "plegado" */
.sidebar-collapsed #indice-categorias {
    transform: translateX(-100%); /* Desliza el panel fuera de la pantalla */
}
.sidebar-collapsed main {
    padding-left: 2rem; /* Reduce el padding del contenido principal */
}

/* ============================================================= */
/* == FASE 2.1: RESALTADO DE PRECIOS EN CATÁLOGO PÚBLICO      == */
/* ============================================================= */

/* Regla para resaltar la celda del precio cuando el producto
   tiene la clase 'precio-actualizado-publico' en su fila (tr) */
.precio-actualizado-publico td.col-precio {
    background-color: #fef9c3 !important; /* Elige el color que prefieras. Este es un amarillo suave. */
    font-weight: bold !important;
    /* Opcional: añade un borde para más énfasis */
    outline: 1px solid #fde047; 
}

/* --- FASE 3: ESTILOS PARA ACCIONES DEL SIDEBAR --- */
.sidebar-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}
/* Estilo para el nuevo botón "Limpiar Marcas" */
.btn-limpiar {
    background-color: #e53e3e;
    color: white;
    border: 1px solid white; /* Antes era #c53030, ahora es blanco */
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-left: 1rem; /* Añade espacio con los otros botones */
}
.btn-limpiar:hover {
    background-color: #c53030;
}

/* ======================================================== */
/* == FASE 4: BOTÓN PARA VOLVER ARRIBA ("SCROLL TO TOP") == */
/* ======================================================== */

#btn-scroll-to-top {
    position: fixed; /* Se mantiene fijo en la pantalla */
    bottom: 20px;
    left: 20px;
    z-index: 1000; /* Se asegura de que esté por encima del contenido */

    width: 50px;
    height: 50px;
    border-radius: 50%; /* Círculo perfecto */

    background-color: var(--primary-color); /* Usa el color principal del header */
    color: white;
    
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    font-size: 1.8rem; /* Tamaño de la flecha */
    font-weight: bold;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    
    /* Lógica de aparición y desaparición */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

#btn-scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#btn-scroll-to-top:hover {
    background-color: var(--secondary-color); /* Un tono más oscuro al pasar el ratón */
}

/* ============================================================= */
/* == FASE 4: ESTILOS PARA PRODUCTOS "NOVEDAD"                == */
/* ============================================================= */

/* 1. Estilo para la fila completa cuando un producto es novedad */
.fila-novedad {
    /*background-color: #d6cf98 !important; /* Verde muy pálido */
    border-left: 4px solid #475063 !important;
    border-right: 3px solid #475063;
    background: linear-gradient(
        to bottom,
        rgba(71, 80, 99, 0.5) 0%,    /* dorado muy fino arriba */
        rgba(255, 255, 255, 0.95) 20%, /* ya empieza a aclarar */
        rgba(255, 255, 255, 0.95) 80%, /* centro claro extendido */
        rgba(71, 80, 99, 0.5) 100%   /* dorado muy fino abajo */
        ) !important;
}

/* 2. Estilo para la etiqueta "¡Novedad!" */
.novedad-badge {
    display: inline-block;
    margin-left: 10px;
    background-color: #BCA57B; /* Verde éxito */
    color: white;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Añade esto a tu archivo de estilos del catálogo público */
.catalogo-tabla .col-stock {
    width: 80px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.1em;
}

/* --- AÑADE UN EMOJI ANTES DE CADA LINK DE FOTO --- */

.foto-link::before {
  content: '🖼️ '; /* El emoji de cuadro + un espacio */
  display: inline-block; /* Asegura que el emoji se comporte bien */
  margin-right: 4px;   /* Un pequeño espacio extra */
  vertical-align: middle; /* Alinea el emoji con el texto */
}

/* == SOLUCIÓN EXPANSIÓN DE CELDAS Y SELECCIÓN DE TEXTO            == */
/* ==================================================================== */

/* 1. Por defecto, las celdas truncables ocultan el contenido extra */
.catalogo-tabla td.truncable .cell-content {
    max-height: 3.2em; /* Altura aprox. para 2 líneas de texto */
    overflow: hidden;
    position: relative;
    padding-right: 30px; /* Espacio para el botón de expandir */
}

/* 2. El botón para expandir/contraer */
.btn-expand-cell {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--primary-color);
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-expand-cell:hover {
    background-color: #cbd5e0;
}

/* 3. Cuando la celda está expandida... */
.catalogo-tabla td.cell-expanded .cell-content {
    max-height: none; /* ...eliminamos el límite de altura. */
}
.catalogo-tabla td.cell-expanded {
    background-color: #fef9c3; /* Resaltado amarillo */
}

/* 4. Hacemos que la celda sea relativa para posicionar el botón dentro */
.catalogo-tabla td.truncable {
    position: relative;
}

/* 5. Eliminamos las reglas antiguas que ya no necesitamos */
.page-template-page-catalogo td.col-titulo,
.page-template-page-catalogo td.col-autor,
.page-template-page-catalogo td.col-reseña,
.page-template-page-catalogo td.col-fotos {
    max-width: none; /* Ya no necesitamos anchos máximos fijos */
    white-space: normal !important; /* Permitimos el salto de línea siempre */
    overflow: visible;
    text-overflow: clip;
    cursor: text; /* El cursor vuelve a ser el normal para texto */
}

.page-template-page-catalogo td.cell-expanded {
   box-shadow: none; /* Quitamos la sombra que ya no es necesaria */
}

/* AÑADE ESTO AL FINAL DE TU ARCHIVO catalogo.css */

/*
 * Sobrescribe el emoji por defecto cuando el enlace
 * tiene la clase 'video-link'.
*/
.video-link::before {
  content: '🎬 '; /* Emoji de claqueta de cine + un espacio */
}