.actions-container {
	margin-left: auto;
	display: flex;
	gap: 10px;
}
.add-tab {
	background-color: #ebfffe; /* Color del botón de añadir */
	border: 1px dashed #1a8f7d; /* Borde punteado azul para indicar interactividad */
	color: black;
	font-size: 20px; /* Aumentar el tamaño de la fuente */
	padding: 10px 15px; /* Igualar el padding con el resto de los tabs */
	cursor: pointer;
	line-height: 0.89; /* Asegurar que la altura sea consistente */
	display: flex; /* Asegura que se mantenga alineado verticalmente */
	align-items: center; /* Centrar verticalmente el contenido */
	border-top-left-radius: 8px; /* Borde redondeado superior izquierdo */
	border-top-right-radius: 8px; /* Borde redondeado superior derecho */
	border-bottom-left-radius: 0; /* Sin borde redondeado inferior izquierdo */
	border-bottom-right-radius: 0; /* Sin borde redondeado inferior derecho */
}
.add-usda-button {
	background-color: #ebfffe;
	border: 1px dashed #1a8f7d;
	color: black;
	font-size: 20px;
	padding: 5px 12px;
	cursor: pointer;
	border-radius: 8px;
	line-height: 1;
	transition: all 0.3s ease;
	margin-bottom: 0px;
}
.add-usda-button:hover {
	background-color: #1a8f7d;
	color: white;
	transform: scale(1.1);
}
body, html {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	color: black;
	padding-bottom: 50px; /* Espacio adicional para evitar que la última tarjeta quede tapada */
}
.bola-usuario {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 5px;
}
.bookmark-vacio-container, .bookmark-relleno-container {
	margin-left: 20px; /* Empuja el contenedor de la imagen a la derecha */
	display: flex;
	align-items: center;
	justify-content: center;
}
.bookmark-vacio, .bookmark-relleno {
	position: absolute;
	top: 75%;  /* Alineación vertical */
	right: 10px; /* Distancia desde el borde derecho */
	transform: translateY(-50%); /* Centra verticalmente */
	width: 26px;  /* Aumenta el ancho */
	height: 26px; /* Aumenta la altura */
	cursor: pointer;
}
.brand-header {
	display: flex;
	justify-content: flex-start; /* Cambiado a flex-start */
	align-items: center;
	gap: 10px; /* Añade un espacio entre el nombre y el logo */
	font-weight: bold;
	background-color: #f2f2f2;
	padding: 8px;
	margin-top: 10px;
	border-radius: 4px;
}
.brand-logo {
	height: 24px; /* Altura fija para el logo */
	width: auto;  /* Ancho automático para mantener la proporción */
	max-width: 80px; /* Límite para logos muy anchos */
}
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-aplicar {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	background-color: #1a8f7d;
	color: white;
	margin: 20px auto 0; /* Centrado horizontal y margen superior */
	display: block; /* Necesario para que funcione el margin auto */
}
.btn-primary {
  background-color: #1a8f7d;
  color: #fff;
}
.btn-secondary {
  background-color: #ccc;
  color: #000;
}
.cantidad {
	display: flex;
	align-items: center;
	margin-right: 10px;
}
.cantidad-container {
	display: flex;
	flex-direction: column; /* Apila los elementos verticalmente */
	align-items: flex-end;  /* Alinea todo a la derecha */
}
.cantidad-input {
	width: 50px;
	text-align: right;
}
#cantidad-input {
	width: 100px;
	padding: 8px;
	margin-top: 0px;
	border-radius: 5px;
	border: 1px solid #ccc;
}
#cantidad2-input {
	border: none;  /* Elimina el borde */
	outline: none;  /* Elimina el borde cuando está enfocado */
	border-bottom: 1px solid #ccc;  /* O puedes darle un borde más sutil */
	font-size: 16px; /* Ajusta el tamaño de la fuente si es necesario */
	padding: 5px; /* Añade espacio interno para una mejor apariencia */
	width: 100%; /* Ancho completo */
	margin-top: 10px; /* Espaciado con respecto al título */
}
.cantidad-valor {
	display: flex;
	align-items: baseline; /* Alinea la base del número y la palabra "gramos" */
	gap: 4px; /* Pequeño espacio entre el número y "gramos" */
}
.card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-title {
	font-weight: bold;
	margin: 0;
	font-size: 20px;
}
.card-value {
	color: #666;
	margin: 5px 0 0;
}
.cardnutrientabrev-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}
#carrusel-dias-container {
	display: flex;
	overflow: hidden;
	transition: transform 0.3s ease; /* Transición suave */
	will-change: transform; /* Optimización para mejorar el rendimiento en animaciones */
}
.carrusel-dias {
	position: sticky;
	top: 39px; /* Ajusta este valor en función de la altura combinada del header y carrusel */
	z-index: 999; /* Menor que el carrusel, pero suficiente para estar encima del contenido */
	display: flex;
	justify-content: center; /* Centrar horizontalmente el carrusel */
	align-items: center; /* Centrar verticalmente los botones si es necesario */
	padding: 0px;
	background-color: #f2f2f2;
}
.carrusel-dias button {
	border: none;
	padding: 10px 13px; /* 10px en arriba/abajo, 20px en izquierda/derecha */
	background-color: #fff;
	margin-right: 0px;
	cursor: pointer;
	text-align: center; /* Asegura que el texto esté centrado */
	font-size: 18px;
	position: relative; /* Permite que los hijos se posicionen absolutamente dentro de este botón */
}
.carrusel-dias button .dia-numerico.active {
	color: white; /* Cambia el color del número a blanco */
}
.carrusel-dias button .dia-semana.active {
	color: white; /* Cambia el color del número a blanco */
}
.carrusel-dias .circle.active {
	background-color: #1a8f7d; /* Color del círculo cuando está activo */
}
.circle {
	width: 30px; /* Ajusta el tamaño según sea necesario */
	height: 30px; /* Ajusta el tamaño según sea necesario */
	border-radius: 50%; /* Hace que el elemento tenga forma de círculo */
	background-color: transparent; /* Fondo por defecto */
	position: absolute; /* Posición absoluta para que se superponga */
	top: 50%; /* Centrado verticalmente */
	left: 50%; /* Centrado horizontalmente */
	transform: translate(-50%, -50%); /* Ajustar el círculo para que esté centrado en el número */
	margin-top: 13px; /* Eliminar cualquier espacio superior que pueda haber */
}
.circle2 {
	width: 30px; /* Ajusta el tamaño según sea necesario */
	height: 30px; /* Ajusta el tamaño según sea necesario */
	border-radius: 50%; /* Hace que el elemento tenga forma de círculo */
	background-color: transparent; /* Fondo por defecto */
	position: absolute; /* Posición absoluta para que se superponga */
	top: 50%; /* Centrado verticalmente */
	left: 50%; /* Centrado horizontalmente */
	transform: translate(-50%, -50%); /* Ajustar el círculo para que esté centrado en el número */
	margin-top: 3px; /* Eliminar cualquier espacio superior que pueda haber */
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
.close-tab {
	margin-left: 0px;
	background: none;
	border: none;
	cursor: pointer;
	color: red; /* Color del aspa */
}
.container {
	max-width: 800px;
	margin: 0 auto 30px; /* Margen superior 0px, márgenes laterales automáticos, margen inferior 20px */
	padding: 15px 15px 40px 15px; /* padding: arriba derecha abajo izquierda */
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative;
	z-index: 1; /* Asegura que el contenido esté detrás del footer */
}
.container--perfil {
    position: relative; /* Establece el contexto de posicionamiento */
}
.container--perfil .card .card-title {
    border-bottom: none; /* Elimina el borde inferior */
    padding-bottom: 0;   /* Elimina el espaciado extra */
}
.create-recipe-button {
	position: fixed;
	right: 20px;
	bottom: 78px; /* Ajusta la distancia desde el footer */
	z-index: 9999; /* Un valor muy alto para asegurar que esté por encima de todo */
	cursor: pointer;
	background-color: white; /* Fondo blanco para mayor contraste */
	border-radius: 50%; /* Forma circular */
	padding: 8px; /* Espacio alrededor del icono */
	box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra para que destaque */
	transition: all 0.3s ease; /* Transición suave para efectos */
}
.create-recipe-button:hover {
	transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
	box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Sombra más pronunciada al pasar el mouse */
}
.create-recipe-button img {
	width: 30px;
	height: 30px;
	display: block; /* Asegura que la imagen se centre correctamente */
}
.custom-checkbox {
	width: 20px;
	height: 20px;
	accent-color: #1A8f7d;
	cursor: pointer;
	margin-right: 10px;
}
.dashboard {
	position: sticky;
	top: 106px; /* Ajusta este valor en función de la altura combinada del header y carrusel */
	z-index: 998; /* Menor que el carrusel, pero suficiente para estar encima del contenido */
	display: flex;
	justify-content: space-around;
	padding: 2px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ddd;
}
/* --- ESTILOS PARA EL NUEVO DASHBOARD NUTRICIONAL --- */
.dashboard-container {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dashboard-toggle {
    display: flex;
    justify-content: center;
    flex-grow: 1; /* NUEVO: Permite que el contenedor ocupe el espacio disponible */
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 4px;
    margin-bottom: 0; /* Aseguramos que no tenga margen inferior aquí */
}

.dashboard-toggle button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background-color: transparent;
    border-radius: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-toggle button.active {
    background-color: #1a8f7d;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.kpi-main-chart {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px auto;
}

.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chart-center-text #energy-consumed {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
}

.chart-center-text span {
    font-size: 1em;
    color: #666;
}

.macros-progress {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.macro-item {
    display: flex;
    flex-direction: column;
}

.macro-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.macro-label {
    font-weight: bold;
}

.macro-values {
    color: #666;
}

.progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.nutrient-details .card {
    margin-bottom: 10px;
}

.nutrient-details .card-header {
    cursor: pointer;
}

.nutrient-details .card-content {
    display: none; /* Oculto por defecto */
    padding-top: 10px;
}

.nutrient-item-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.nutrient-item-detail:last-child {
    border-bottom: none;
}

#trend-view {
    padding-top: 10px;
}

#nutrient-selector {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    font-size: 1em;
    background-color: #f9f9f9;
}
/* --- ESTILOS PARA EL NUEVO DASHBOARD NUTRICIONAL --- */
/* --- ESTILOS PARA DASHBOARD EXPANDIBLE --- */

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el botón de toggle y los selectores de vista */
}

#dashboard-collapse-toggle {
    background-color: white; /* Para que el círculo de fondo sea blanco */
    border: none; /* Elimina el borde completamente */
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px; 
}

#dashboard-collapse-toggle img {
    width: 24px;   
    height: 24px;  
    transition: none; /* Asegura que no haya ninguna animación de giro */
}

.dashboard-toggle {
    margin-bottom: 0; /* Quitamos el margen original porque ahora está en .dashboard-header */
}

.dashboard-container.collapsed .dashboard-header {
    margin-bottom: 0;
}

#collapsed-view {
    padding: 5px 0;
    flex-grow: 1; /* NUEVO: Hace que la vista contraída ocupe el espacio disponible */
    display: none; /* Se mantiene oculto por defecto, JS lo cambiará a 'block' */
}

.summary-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.summary-progress-bar {
    flex-grow: 1;
    display: flex;
    height: 12px;
    background-color: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.summary-bar-segment {
    height: 100%;
    transition: width 0.5s ease-in-out;
}

/* Colores para la barra de resumen (iguales que en la vista expandida) */
#summary-proteins { background-color: #facc08; }
#summary-carbs { background-color: #772f92; }
#summary-fats { background-color: #f15522; }

/* Estilos para los detalles de macros en la vista contraída */
.collapsed-details {
    display: flex;
    justify-content: space-between; /* Distribuye espacio entre Kcal y Macros */
    align-items: center;
    width: 100%;
    margin-top: 8px; /* Separación sutil de la barra */
}

/* El contenedor de las kcal totales en modo contraído (ajuste) */
#summary-kcal {
    font-size: 15px;
    font-weight: 800; /* Extra bold para destacar las calorías */
    color: #333;
}

/* Contenedor de los 3 macros */
.collapsed-macros-row {
    display: flex;
    gap: 12px; /* Espacio entre cada macro */
}

/* Cada item individual (bolita + valor) */
.c-macro-item {
    display: flex;
    align-items: center;
    font-size: 13px; /* Tamaño de los gramos */
    color: #555;
    font-weight: 600;
}

/* Badge circular con letra*/
.c-macro-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;  /* Tamaño contenido */
    height: 18px;
    border-radius: 50%;
    margin-right: 5px;
    font-size: 10px; /* Letra pequeña y sutil */
    font-weight: 800;
    color: white; /* Texto blanco por defecto */
    line-height: 1; /* Centrado vertical perfecto */
}

/* Colores Específicos */

/* Proteínas: Amarillo (Texto oscuro para contraste) */
.c-macro-badge.prot { 
    background-color: #facc08; 
    color: #333; 
}

/* Carbohidratos: Lila */
.c-macro-badge.carb { 
    background-color: #772f92; 
}

/* Grasas: Naranja */
.c-macro-badge.fat  { 
    background-color: #f15522; 
}

.date-range-picker {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.debug-message {
	color: red;
	text-align: center;
	margin-bottom: 20px;
}
.dia-numerico {
	font-size: 18px; /* Tamaño del texto para el número */
	font-weight: bold;
	display: block; /* Asegura que esté en su propia línea */
	margin-top: 10px; /* Eliminar cualquier espacio superior que pueda haber */
	position: relative; /* Permite que el número se mantenga en su lugar al agregar el círculo */
	z-index: 1; /* Asegura que el texto esté por encima del círculo */
	color: black; /* Color por defecto para el día numérico */
}	
.dia-semana {
	font-size: 14px; /* Tamaño del texto para el día de la semana */
	display: block; /* Asegura que esté en su propia línea */
	margin-bottom: 5px; /* Reducir el espacio entre dia-semana y dia-numerico */
}
.dia2-semana {
	font-size: 14px; /* Tamaño del texto para el número */
	font-weight: bold;
	display: block; /* Asegura que esté en su propia línea */
	margin-top: 10px; /* Eliminar cualquier espacio superior que pueda haber */
	position: relative; /* Permite que el número se mantenga en su lugar al agregar el círculo */
	z-index: 1; /* Asegura que el texto esté por encima del círculo */
	color: black; /* Color por defecto para el día numérico */
	margin-bottom: 5px; /* Reducir el espacio entre dia-semana y dia-numerico */
}
.edit-icon {
	cursor: pointer;
	width: 22px;
	height: 22px;
	color: #999;
}
.editable {
	background-color: #ebfffe; /* Color de fondo ligero para indicar que es editable */
	border: 1px dashed #1a8f7d; /* Borde punteado azul para indicar interactividad */
	padding: 5px; /* Espaciado interno para que se vea más amigable */
	border-radius: 5px; /* Bordes redondeados */
	max-width: 135px; /* Limita el ancho máximo */
	width: auto; /* Toma el ancho que necesite, hasta el máximo */
	font-size: inherit; /* Mantiene el tamaño de fuente */
	font-weight: inherit; /* Mantiene el peso de fuente */
}
.editable2 {
	background-color: #ebfffe; /* Color de fondo ligero para indicar que es editable */
	border: 1px dashed #1a8f7d; /* Borde punteado azul para indicar interactividad */
	padding: 5px; /* Espaciado interno para que se vea más amigable */
	border-radius: 5px; /* Bordes redondeados */
	max-width: 135px; /* Limita el ancho máximo */
	width: auto; /* Toma el ancho que necesite, hasta el máximo */
	font-size: inherit; /* Mantiene el tamaño de fuente */
	font-weight: inherit; /* Mantiene el peso de fuente */
}
.editar-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.2em;
}
.editar2-btn {
	border: none;
	background: none;
	font-size: 0.8em;
	cursor: pointer;
	margin-left: 2px;
}
.editor-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    overflow: hidden; /* Mantiene la barra dentro de los bordes redondeados */
    margin-top: 5px;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    background-color: #f0f4f8; /* Color gris suave */
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.editor-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    font-family: monospace, serif;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background-color 0.2s;
}

.editor-btn:hover {
    background-color: #e2e2e2;
}

.editor-btn:active {
    background-color: #d0d0d0;
    transform: translateY(1px);
}

/* --- AJUSTES PARA LOS ICONOS SVG DE LA BARRA DE HERRAMIENTAS --- */
.editor-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor; /* Esto hace que el icono tome el color del texto del botón (#333) */
    display: block; /* Elimina espacios extra debajo del icono */
}

/* Ajuste específico para que los botones con iconos se alineen bien con los de texto */
.editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.editor-select {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 14px;
    height: 32px; /* Misma altura que los botones */
    cursor: pointer;
    color: #333;
    outline: none;
}

.editor-select:focus {
    border-color: #1a8f7d;
}

.eliminar-ingrediente-container, .eliminar-receta-container {
	margin-left: 20px; /* Empuja el contenedor de la imagen a la derecha */
	display: flex;
	align-items: center;
	justify-content: center;
}
.eliminar-ingrediente, .eliminar-receta {
	position: absolute;
	top: 75%;  /* Alineación vertical */
	right: 10px; /* Distancia desde el borde derecho */
	transform: translateY(-50%); /* Centra verticalmente */
	width: 26px;  /* Aumenta el ancho */
	height: 26px; /* Aumenta la altura */
	cursor: pointer;
}
.espacio h2 {
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.espacios-dia {
	padding: 20px;
}

/* ESTILOS PARA EL BOTÓN FLOTANTE Y MENÚ EN RECETAS.HTML */
.fab-container {
    position: fixed;
    right: 20px;
    bottom: 78px;
    z-index: 9999;
}

/* Reutilizamos .opciones-popup pero aseguramos su posición relativa al botón */
.fab-popup {
    display: none;
    position: absolute;
    bottom: 60px; /* Aparece encima del botón + */
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 5px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 180px;
    flex-direction: column;
}

.fab-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #333;
    text-decoration: none; /* Por si usamos <a> */
}

.fab-option:hover {
    background-color: #f4f4f4;
}

.fab-option img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* ESTILOS PARA EL LISTADO DE INGREDIENTES/SUPERMERCADOS */
.brand-group-header {
    background-color: #e8f5e9; /* Verde muy suave */
    color: #1a8f7d;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 16px;
    border-left: 4px solid #1a8f7d;
    margin-top: 15px;
    margin-bottom: 5px;
    border-radius: 0 4px 4px 0;
}

.ingredient-item-row {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
}

.ingredient-item-row:last-child {
    border-bottom: none;
}

.ing-img-container {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f4f4f4;
    flex-shrink: 0;
}

.ing-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ing-info {
    flex-grow: 1;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
}

.ing-name {
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

.ing-brand-sub {
    font-size: 12px;
    color: #888;
}

.swap-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.swap-btn img {
    width: 28px;
    height: 28px;
}

/* Ajuste para el modal de ingredientes que ocupe casi toda la pantalla */
.modal-full-height {
    height: 85%;
    max-height: 85%;
    display: flex;
    flex-direction: column;
}

.modal-content-scroll {
    overflow-y: auto;
    flex-grow: 1;
}

.filter-button {
	margin-right: 10px;
	padding: 5px 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	white-space: nowrap;
}
.filter-group {
	margin-bottom: 20px;
}
.filter-group h3 {
	margin-bottom: 10px;
	font-size: 17px;  /* Ajustar el tamaño de la letra si es necesario */
}
.filter-group label {
	display: block;
	margin-bottom: 5px;
}
.filters {
	display: flex;
	overflow-x: auto;
	padding: 10px 0;
}
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
	background-color: #1a8f7d !important;  /* Color de fondo verde */
	border-color: #1a8f7d !important;      /* Color del borde */
	color: #fff !important;                /* Color del texto (blanco para contraste) */
}
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover {
	background-color: #167764 !important;  /* Color ligeramente más oscuro para el hover */
}
.info-card {
    background-color: #f9f9f9;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
	margin-bottom: 10px;
}

/* Contenedor específico para la tarjeta de IG y CG */
.glycemic-card-content {
    display: flex;
    justify-content: space-around; /* Coloca IG a la izquierda y CG a la derecha */
    align-items: center;
}

.glycemic-section {
    text-align: center;
}
.glycemic-value {
    font-weight: bold;
    font-size: 1.8em;
    line-height: 1;
}
.fodmap-card-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y los círculos */
    gap: 10px;
}
.info-card h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
    font-size: 1em;
    font-weight: bold;
}
.fodmap-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Hacemos el placeholder invisible por defecto */
    background-color: transparent;
    border: 1px solid transparent; 
}
.fodmap-indicator.low {
    background-color: #28a745; /* Verde */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.fodmap-indicator.medium {
    background-color: #FFA500; /* Naranja */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.fodmap-indicator.high {
    background-color: #dc3545; /* Rojo */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.fodmap-levels {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.fodmap-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55px; /* Tamaño reducido de 65px a 60px */
    height: 55px; /* Tamaño reducido de 65px a 60px */
    border-radius: 50%;
    color: white !important;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-align: center;
}
.fodmap-level span {
    font-size: 0.8em;
    line-height: 1.1;
}
.fodmap-level b {
    font-size: 1.1em;
    margin-top: 2px;
}
/* Clases de color para los niveles Bajo, Medio y Alto */
.fodmap-level.low { background-color: #28a745; }
.fodmap-level.medium { background-color: #FFA500; }
.fodmap-level.high { background-color: #dc3545; }

.glycemic-value.low { color: #28a745; /* Verde */ }
.glycemic-value.medium { color: #FFA500; /* Naranja */ }
.glycemic-value.high { color: #dc3545; /* Rojo */ }
/* *** MODIFICACIÓN 2: ESPACIADO DE LA TARJETA USDA *** */
.usda-card {
    margin-top: 10px; /* Añade el mismo espacio superior que las otras tarjetas */
}
@media (max-width: 480px) {
    .glycemic-card-content {
        gap: 10px; /* Añade un pequeño espacio si se envuelven */
    }
}
.footer {
	background-color: white;
	color: black;
	text-align: center;
	padding: 10px 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 10000; /* Asegura que el footer esté en el frente */
	box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Agrega una pequeña sombra para separarlo visualmente */
}
.footer-icons {
	display: flex;
	justify-content: space-around;
	max-width: 600px;
	margin: auto;
}
.footer-icon {
	text-decoration: none;
	color: black;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1; /* <-- AÑADIR ESTA LÍNEA */
}
.footer-icon img {
	width: 24px;
	height: 24px;
	margin-bottom: 5px;
}
.footer-icon.active {
    position: relative; /* Necesario para el pseudo-elemento */
}
.footer-icon.active::before {
    content: '';
    position: absolute;
    top: -10px; /* Posiciona la línea encima del contenedor del icono */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Ancho de la línea, 80% del ancho del icono */
    height: 3px;
    background-color: #1a8f7d; /* Color verde corporativo */
    border-radius: 2px; /* Bordes redondeados para la línea */
}
.footer-icon.active span {
    color: #1a8f7d;
    font-weight: bold;
}
#guardar-cambios {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	background-color: #1a8f7d;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	z-index: 10000;
}
h1 {
	color: #333;
	text-align: center;
	margin-bottom: 20px;
	font-size: 24px;
}
h2 {
	color: #333;
	border-bottom: 2px solid #d7d7d7;
	padding-bottom: 5px;
	margin-top: 10px;
	font-size: 1.4em;
}
header {
	position: sticky;
	top: 0; /* Se mantendrá en la parte superior de la pantalla */
	z-index: 1000; /* Elevar el z-index para que esté encima del contenido */
	display: flex;
	justify-content: space-between;
	padding: 5px 5px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ddd;
}
.header-content {
	display: flex;
	align-items: center; /* Centra verticalmente el contenido */
	overflow-x: auto;
	padding: 0px 0;
	font-size: 20px;
}
.img-container {
	position: relative;
	display: inline-block;
}
.image-zoom-close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	cursor: pointer;
}
.image-zoom-close:hover,
.image-zoom-close:focus {
	color: #bbb;
	text-decoration: none;
}
.image-zoom-content {
	margin: auto;
	display: block;
	max-width: 90%;
	max-height: 80%;
}
.image-zoom-modal {
	display: none; /* Oculto por defecto */
	position: fixed;
	z-index: 10002; /* Por encima de todo lo demás */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.9);
	justify-content: center;
	align-items: center;
}
.imagen-container {
	position: relative;
	width: 40px;
	height: 40px;
}
.imagen-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 128, 128, 0.5);
	display: none;
}
.indicators-wrapper {
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.ingredient-list {
	margin-top: 5px;
	display: flex;
	flex-direction: column; /* Alinea los ingredientes en columnas */
	gap: 5px; /* Espacio entre los ingredientes */
}
.ingrediente-actions {
    margin-left: auto; /* Empuja los botones a la derecha */
    display: flex;
    gap: 10px; /* Espacio entre los iconos */
}
.ingrediente-actions img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.ingrediente-card, .ingrediente-info {
	display: block; /* Asegura que el título esté separado de la lista de ingredientes */
	align-items: center;
	gap: 15px;
}
.ingrediente-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
}
.ingrediente-equivalencia {
	font-size: 0.85em;      /* Un poco más pequeño que el texto principal */
	color: #666;           /* Un gris suave para que no domine */
	font-style: italic;     /* Estilo itálico para diferenciarlo */
	margin: 0;              /* Eliminar márgenes por defecto del párrafo */
	padding: 0;
	line-height: 1.2;
}
.ingrediente-info {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 5px;
	font-size: 1em;
}
.ingrediente-info img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0; /* Evita que la imagen se encoja */
}
.ingrediente-nombre {
	margin: 0;
	padding: 0;
	line-height: 1.3; /* Ajusta ligeramente la altura de línea si es necesario */
}
.ingrediente-texto {
	display: flex;
	flex-direction: column;
	gap: 0; /* CORRECCIÓN: Cambiado de 2px a 0 para juntar las líneas */
}
.ingredientes-title {
	font-size: 24px;
	margin-bottom: 2px;
	text-align: left; /* Esto hará que el título quede a la izquierda, si lo prefieres */
}
.input-edit {
	width: 100%;
	padding: 2px;
	margin-top: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: white; /* Fondo blanco por defecto */
}
.input-edit:focus {
	background-color: white; /* Fondo blanco cuando el select está en foco */
	border-color: #aaa; /* O un borde distinto, si lo prefieres */
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.input-group label {
  font-weight: bold;
}
.instrucciones-input {
	width: 100%; /* Ajusta el ancho al 100% del contenedor */
	box-sizing: border-box; /* Incluye el padding y borde en el cálculo del ancho */
	overflow-y: hidden; /* Oculta la barra de desplazamiento vertical cuando no es necesaria */
	resize: none; /* Desactiva el ajuste manual del tamaño por el usuario */
}
.item-list {
	padding: 5px;
}
@keyframes pulse {
	0% { background-color: #e2e2e2; }
	50% { background-color: #f0f0f0; }
	100% { background-color: #e2e2e2; }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.logo-link-container {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-grow: 1;
}
.macro-item {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.macronutrientes div {
	text-align: center;
}
.main-filter-button {
	margin-right: 10px;
	padding: 5px 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.main-filter-button:hover {
	background-color: #f4f4f4; /* Cambiar el fondo cuando se pasa el ratón */
}
.main-filter-button.filter-active {
  border: 1px solid #1a8f7d; /* Borde verde corporativo y un poco más grueso */
  padding: 4px 14px; /* Ajustamos el padding para compensar el borde más grueso */
}
.modo-icono {
	width: 24px; /* Tamaño del icono */
	height: 24px; /* Tamaño del icono */
	margin-right: 5px; /* Espacio entre el icono y el tiempo */
}
.modo-preparacion {
	display: flex;
	align-items: center; /* Alinear verticalmente el icono y el tiempo */
	margin-right: 10px; /* Espacio entre modos */
}	
.modal {
	display: none; /* Oculto por defecto */
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	padding-top: 30px;
	z-index: 99999; /* Un valor muy alto para asegurar que esté por encima de todo */
}
.modal-action-button {
	font-weight: bold; /* Hacer el texto en negrita */
	background: none; /* Eliminar el fondo */
	border: none; /* Eliminar el borde */
	color: #1a8f7d; /* Cambiar el color del texto */
	padding: 0; /* Eliminar el padding */
	font-weight: bold; /* Mantener el texto en negrita */
	cursor: pointer; /* Hacer que siga teniendo apariencia de clic */
	line-height: 1.2; /* Aumentar o reducir para ajustar la altura de la línea */
	font-size: 14px;  /* Ajustar el tamaño de la letra si es necesario */
}
.modal-action-button:hover {
	color: #007b8f; /* Cambiar el color en hover */
}
.modal2-action-button {
	padding: 8px 20px !important;
	border: none !important;
	border-radius: 5px !important;
	cursor: pointer !important;
	background: none !important;
	color: #1a8f7d !important;
	font-weight: bold !important;
}
.modal2-action-button:hover {
	background: #f4f4f4 !important;
}
.modal2-action-button.confirm {
	background: #1a8f7d !important;
	color: white !important;
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal--compacto .modal-content {
    margin-top: 25%; /* Usamos un margen más grande para centrarlo mejor verticalmente */
    margin-bottom: auto;
}
.modal-content h2 {
	margin-top: 2px; /* Ajusta este valor según lo necesites */
	font-size: 20px;  /* Ajustar el tamaño de la letra si es necesario */
	flex-shrink: 0;
}
.modal-content {
	background-color: #ffffff;
	margin: 5% auto;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px; /* Igualar los bordes redondeados del modal 2 */
	width: 85%; /* Cambia la anchura a 80% para igualar al modal 2 */
	max-width: 500px; /* Límite para pantallas grandes */
	max-height: 85vh; /* Altura máxima relativa a la pantalla */
	display: flex; /* Activa Flexbox */
    flex-direction: column; /* Apila los elementos verticalmente */
	overflow: hidden; /* Mantenemos el overflow hidden aquí */
}
/* El nuevo contenedor para los filtros que SÍ tendrá scroll */
.modal-scrollable-content {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    overflow-y: auto; /* ¡Aquí es donde aparece el scroll! */
    margin: 15px 0; /* Espacio visual */
}

/* El nuevo contenedor para los botones que se quedará fijo abajo */
.modal-footer-actions {
    flex-shrink: 0; /* Evita que se encoja */
    display: flex;
    justify-content: flex-end;
    gap: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Línea separadora sutil */
}
.modal-filter-button,
.modal-filter-button-day {
	margin-right: 5px; /* Espacio horizontal */
	margin-bottom: 5px; /* Espacio vertical entre los botones */
	padding: 5px 15px;
	background-color: #fff; /* Color de fondo por defecto */
	border: 1px solid #1a8f7d; /* Color del borde cuando está deseleccionado */
	border-radius: 20px;
	color: #1a8f7d; /* Color de la letra cuando está deseleccionado */
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* Elimina el highlight de toque en móviles */
	transition: none; /* Asegúrate de que no haya transición */
}
.modal-filter-button.selected,
.modal-filter-button-day.selected,
.modal-filter-button.selected:focus {
	background-color: #1a8f7d; /* Color de fondo cuando está seleccionado */
	color: #fff; /* Color de la letra cuando está seleccionado */
	border-color: #1a8f7d; /* Mantiene el borde del mismo color */
	outline: none;
	transition: none; /* Asegúrate de que no haya transición */
}
.modal-filter-button:not(.selected),
.modal-filter-button-day:not(.selected) {
	background-color: #fff; /* Restaurar fondo a blanco */
	color: #1a8f7d; /* Restaurar color de texto */
	border-color: #1a8f7d; /* Mantiene el borde del mismo color */
	transition: none; /* Asegúrate de que no haya transición */
}
.modal-filter-button:hover,
.modal-filter-button-day:hover {
	background-color: #f9f9f9; /* Cambiar el fondo cuando se pasa el ratón, puede ser diferente del anterior */
}
.modal-filter-button:active {
	background-color: #1a8f7d;
	color: #fff;
}
.modal-filter-button:focus {
	outline: 2px solid #52a99d; /* Un verde más suave para el contorno */
	outline-offset: 1px;
}
.modal-filter-button:focus,
.modal-filter-button:active,
.modal-filter-button-day:focus,
.modal-filter-button-day:active {
	outline: none;
	background-color: #1a8f7d; /* Color definitivo al hacer click */
	color: #fff; /* Cambia al color final */
	border-color: #1a8f7d; /* Asegura el color de borde final */
}
.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#modal-options {
	display: flex;
	flex-direction: column;
	gap: 15px; /* Espacio entre los botones */
}
.modal-option {
	background-color: #1a8f7d; /* Color de fondo para los botones */
	color: white; /* Color del texto */
	border: none; /* Sin borde */
	border-radius: 8px; /* Bordes redondeados */
	padding: 10px 15px; /* Espaciado */
	cursor: pointer; /* Cambia el cursor al pasar */
	transition: background-color 0.3s ease; /* Transición suave */
	font-size: 1em; /* Tamaño de la fuente */
}
.modal-option:hover {
	background-color: #007a8a; /* Color más oscuro al pasar el ratón */
}
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para oscurecer */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
}
.modal-seleccion {
	position: fixed;
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
	background-color: white;
	border-radius: 8px;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
	padding: 20px;
	z-index: 10000;
	overflow-y: auto;
}
.modal-seleccion--menu {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    height: auto; /* ¡Esta es la clave! La altura se ajusta al contenido */
    max-height: 80%; /* Mantenemos un límite por si hay muchos menús */
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}
.modalspinner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	background-color: white;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	z-index: 100001;
	padding: 20px;
	border-radius: 8px;
	text-align: center; /* Asegura que el texto esté centrado */
}
.modalspinner-body {
	font-size: 18px;
	color: #333;
	margin-top: 10px; /* Separación entre el spinner y el texto */
}
.no-link-style {
	color: inherit;      /* Mantiene el color original */
	text-decoration: none; /* Elimina el subrayado */
}
.no-link-style:hover {
	color: inherit;      /* Mantiene el color en hover */
}
.nova-card {
	display: flex;
	align-items: center;
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 10px;
}
.nova-card img {
	width: auto;
	height: 55px;
	margin-right: 15px;
}
.nova-text {
	font-size: 1.1em;
	font-weight: bold;
	color: #333;
}
.nutri-nova-container {
	display: flex;
	justify-content: flex-start;  /* Alinear las imágenes a la izquierda */
	align-items: center;          /* Alinear verticalmente al centro */
	gap: 15px;                    /* Espaciado fijo entre las imágenes */
	margin-top: 10px;
}
.nutrientabrev-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 0;
}
.nutrientabrev-icon {
	width: 1.5rem;
	height: 1.5rem;
}
.nutrientabrev-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 0.2rem;
	width: 100%;
}
.nutrientabrev-label {
	margin-bottom: 0.5rem;
	margin-top: 5px;
	font-size: 12px;
	color: #666666;
}
.nutrientabrev-percent {
	margin-bottom: 0.5rem;
	font-size: 14px;
	color: #666666;
}
.nutrientabrev-unit {
	font-size: 14px;
	font-weight: 600;
	margin-top: 0.001rem;
}
.nutrientabrev-value {
	font-size: 16px;
	font-weight: 600;
	margin-top: 0.5rem;
}
.nutrient-card {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #d7d7d7;
}
.nutrient-card:last-child {
	border-bottom: none;
}
#nutrient-details-container .card .card-title {
    border-bottom: none;      /* Elimina la línea inferior (el subrayado) */
    padding-bottom: 0;        /* Elimina el espaciado extra que tenía la línea */
    font-size: 1.1em;         /* Reduce el tamaño de la fuente del título */
    margin-top: 0;            /* Opcional: Reduce el espacio superior si es necesario */
    margin-bottom: 5px;       /* Ajusta el espacio inferior si es necesario */
}
.nutrient-item {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px solid #d7d7d7;
}
.nutrient-item:last-child {
	border-bottom: none;
}
.nutrient-label {
	font-weight: bold;
}
.nutrient-name {
	font-weight: normal;
}
.nutrient-section {
	margin-bottom: 30px;
}
.nutriscore-card {
	display: flex;
	align-items: center;
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 10px;
}
.nutriscore-card img {
	width: auto;
	height: 55px;
	margin-right: 15px;
}
.nutriscore-text {
	font-size: 1.1em;
	font-weight: bold;
	color: #333;
}
.nutriscore-card-buscador img, .nova-card-buscador img {
	height: 40px; /* Ajustar a la misma altura */
	width: auto;  /* Mantener proporciones */
}
.ocultar-icono {
	display: none;
	pointer-events: none; /* Deshabilita los clics en el ícono */
}
.opcion {
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.opcion:hover {
	background-color: #f4f4f4;
}
.opcion img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}
.opciones-button {
	position: fixed;
	right: 20px;
	bottom: 78px; /* Ajusta la distancia desde el footer */
	z-index: 9999; /* Un valor muy alto para asegurar que esté por encima de todo */
	cursor: pointer;
	background-color: white; /* Fondo blanco para mayor contraste */
	border-radius: 50%; /* Forma circular */
	padding: 8px; /* Espacio alrededor del icono */
	box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra para que destaque */
	transition: all 0.3s ease; /* Transición suave para efectos */
}
.opciones-button:hover {
	transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
	box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Sombra más pronunciada al pasar el mouse */
}
.opciones-button img {
	width: 30px;
	height: 30px;
	display: block; /* Asegura que la imagen se centre correctamente */
}
.opciones-popup {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 120px; /* Ajusta según la altura del pop-up */
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 10px;
	z-index: 9998; /* Justo por debajo de los botones de opciones */
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);  /* Fondo semi-transparente */
	cursor: pointer;  /* Mostrar que es clicable */
	opacity: 1;  /* Siempre visible */
}
.overlay img {
	width: 50px;
	height: 50px;
	cursor: pointer;
}
#page-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0; /* Anula el padding-bottom global */
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
#page-login .login-container {
    background-color: white;
    padding: 2rem;
    padding-bottom: 3rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin-top: -100px;
}
#page-login .app-icon {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 60px;
}
#page-login h2 {
    text-align: center;
    color: #333;
    margin-top: 0;
    margin-bottom: 2rem;
    border-bottom: none; /* Anula el borde de la regla h2 global */
    padding-bottom: 0; /* Anula el padding de la regla h2 global */
    font-size: 1.5rem; /* Tamaño de fuente consistente para el título */
}
#page-login .input-container {
    position: relative;
    margin-bottom: 1rem;
}
#page-login input[type="text"]::placeholder, 
#page-login input[type="password"]::placeholder {
    font-size: 16px;
    color: #888;
}
#page-login input[type="text"], 
#page-login input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f4f4f4;
    color: #333;
}
#page-login input[type="submit"] {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding: 0.75rem;
    background-color: #1a8f7d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1.25rem;
}
#page-login input[type="submit"]:hover {
    background-color: #007a8f;
}
#page-menu .espacio h2 {
    border-bottom: none;
    padding-bottom: 0;
}
#page-menu-detail .espacio h2 {
    border-bottom: none;
    padding-bottom: 0;
}
#page-menu-detail .dashboard {
    /* top: 80px;  <-- ELIMINAMOS O COMENTAMOS ESTA LÍNEA ANTIGUA */
    position: relative; /* Cambiamos sticky por relative para que se mueva con el scroll */
    top: auto;          /* Reseteamos la posición top */
    z-index: 900;       /* Menor que el carrusel (999) para que pase por debajo al subir */
}
#page-menu-detail .carrusel-dias {
    top: 40px; /* Un poco más abajo que el header */
}
#page-menu-detail .carrusel-dias .circle {
    margin-top: 0; /* Anulamos el margen que lo empujaba hacia abajo */
	z-index: 1; /* NUEVO: Pone el círculo detrás del texto */
	transform: translate(-50%, -60%); /* Ajuste sutil: -50% es centrado, -60% lo sube un poco */
}
#page-menu-detail .carrusel-dias button .dia-semana {
    font-weight: bold; /* NUEVO: Asegura que el texto esté en negrita */
    position: relative; /* NUEVO: Necesario para que z-index funcione */
    z-index: 2; /* NUEVO: Pone el texto por encima del círculo */
}
#page-menu-detail .carrusel-dias button .dia-semana.active {
    color: white;
}
#plato-nombre, #categoria-nombre {
	font-size: 1em;
	margin: 0; /* Elimina el margen por defecto */
	color: #666;
}
.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 20px 30px; /* Ajusta el padding para mayor espacio interno */
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	z-index: 10000;
	width: 300px; /* Incrementa el ancho del Pop-Up */
	max-width: 70%; /* Asegúrate de que no se salga de la pantalla en dispositivos pequeños */
}
.popup-buttons {
	display: flex;
	justify-content: space-around; /* Asegura que los botones estén bien separados */
	margin-top: 20px;
	padding-bottom: 10px; /* Añade espacio entre los botones y la parte inferior del Pop-Up */
}
.popup-buttons button {
	padding: 10px 20px; /* Ajusta el tamaño de los botones */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px; /* Tamaño de fuente más grande para los botones */
	font-weight: bold; /* Aplica negrita a los textos de los botones */
}
.popup-buttons button#cancelar-eliminar {
	background-color: #f4f4f4;
}
.popup-buttons button#aceptar-eliminar {
	background-color: #ee1d26;
	color: white;
}
.popup-buttons button#cancelar-edicion {
	background-color: #f4f4f4;
	color: #333;
}
.popup-buttons button#guardar-edicion {
	background-color: #1a8f7d;
	color: white;
}
.popup-content {
	margin-bottom: 5px; /* Añade espacio entre la frase y los botones */
}
.preparacion-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 40px;
}
.preparacion-tab:hover {
	background-color: #e0e0e0;
}
.preparacion-tab:active {
	transform: scale(0.95);
}
.preparacion-tab.active {
	background-color: #1a8f7d;
	color: white;
}
.preparacion-tabs {
	display: flex;
	align-items: center;
	margin-bottom: 0px;
}
.product-brand, .product-country, .product-id {
	font-size: 14px;
	color: #666;
	margin-bottom: 3px;
	white-space: nowrap;     /* Evita que el texto salte a una nueva línea */
	overflow: hidden;        /* Oculta el texto que se desborda del contenedor */
	text-overflow: ellipsis; /* Muestra "..." para indicar que el texto está cortado */
}
#product-detail .nutrient-section {
    margin-top: 30px;
}
.product-card {
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; /* Para que el hijo (imagen de bookmark) use este como contenedor de referencia */
	display: flex; /* Alinea horizontalmente el contenido */
	align-items: center; /* Centra verticalmente los elementos dentro de la tarjeta */
}
.product-card-content {
	display: flex; /* Alinea horizontalmente la imagen y los detalles */
	align-items: center; /* Centra verticalmente la imagen y los detalles */
	min-width: 0; /* Permite que este contenedor se encoja y respete los límites */
	width: 100%; /* Asegura que ocupe todo el espacio disponible */
}
.product-detail {
	margin-bottom: 10px;
}
.product-detail strong {
	display: block;
	margin-bottom: 5px;
}
.product-details {
	flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
	min-width: 0; /* Permite que el contenedor se encoja y el texto se trunque */
}
.product-image {
	width: 110px; /* Ajusta el tamaño al contenedor */
	height: 130px; /* Ajusta el tamaño al contenedor */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
	border-radius: 5px; /* Bordes redondeados para la imagen */
}
.product-image-container {
	margin-right: 20px; /* Espacio entre la imagen y el contenido */
	width: 110px; /* Tamaño de la imagen */
	height: 130px; /* Tamaño de la imagen */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	border-radius: 5px; /* Bordes redondeados */
}
.product-list {
	margin-top: 120px; /* Ajusta según la altura de la barra de búsqueda y filtros */
	padding: 10px;
	padding-bottom: 70px; /* Espacio adicional para evitar que la última tarjeta quede tapada */
}
.product-name {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
	padding-right: 25px; 
}
.product-price {
	font-weight: bold;
	font-size: 1.1em;
	color: #333;
	background-color: rgba(255, 255, 255, 0.85); /* Fondo semitransparente para legibilidad */
	padding: 2px 6px;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	margin-left: 15px; /* Espacio a la izquierda del precio */
}
.product-row {
	display: flex;
	align-items: center;
	padding: 10px 5px;
	border-bottom: 1px solid #ddd;
}
.product-row-left {
	display: flex;
	align-items: center;
	flex-shrink: 0; /* No permite que esta sección se encoja */
}
.product-row-center {
	flex-grow: 1; /* Ocupa todo el espacio sobrante */
	min-width: 0; /* Esencial para que el texto con ellipsis funcione correctamente */
	padding: 0 10px;
}
.product-row-right {
	display: flex;
	align-items: center;
	flex-shrink: 0; /* No permite que esta sección se encoja */
}
.product-section, .nutrient-section {
	margin-bottom: 30px;
}
.product-url {
	color: #4CAF50;
	text-decoration: none;
}
.product2-card {
	background-color: white;
	border-radius: 10px;
	padding: 5px;
	margin-bottom: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; /* Para que el hijo (imagen de eliminación) use este como contenedor de referencia */
	display: flex; /* Alinea horizontalmente el contenido */
	align-items: center; /* Centra verticalmente los elementos dentro de la tarjeta */
}
.product2-card-content {
	display: flex; /* Alinea horizontalmente la imagen y los detalles */
	align-items: center; /* Centra verticalmente la imagen y los detalles */
}
.product2-details {
	flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
}
.product2-id {
	font-size: 14px;
	color: #666;
	margin-bottom: 3px;
}
.product2-image {
	width: 100%; /* Ocupa el 100% del contenedor padre */
	height: 100%;
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
	object-position: center; /* Enfoca el centro de la imagen */
	border-radius: 5px; /* Bordes redondeados para la imagen */
}
.product2-image-container {
	flex-shrink: 0; /* Previene que el contenedor se encoja */
	margin-right: 20px; /* Espacio entre la imagen y el contenido */
	width: 80px; /* Tamaño de la imagen */
	height: 95px; /* Tamaño de la imagen */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	border-radius: 5px; /* Bordes redondeados */
}
.product2-name {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}
.producto-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
	position: relative; /* Para que el hijo (imagen de bookmark) use este como contenedor de referencia */
	display: flex; /* Usa flexbox para disposición en fila */
	align-items: center; /* Centra verticalmente los elementos */
	gap: 15px; /* Espacio entre la imagen y el contenido */
}
.producto-card .producto-card-image {
	width: 140px; /* Tamaño de la imagen */
	height: 140px; /* Tamaño de la imagen */
	border-radius: 5px; /* Bordes redondeados para la imagen */
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
}
.producto-imagen {
	width: 40px;
	height: 40px;
	object-fit: cover;
}
.producto-info {
	/* Contenedor para el nombre y el texto */
	display: flex;
	flex-direction: column; /* Alinea el nombre y el texto en una columna */
	text-align: left; /* Alinea el texto a la izquierda */
	gap: 5px; /* Espacio entre los elementos */
}
.producto-nombre {
	font-weight: bold;
	white-space: normal; /* Permite que el texto salte a la siguiente línea */
	word-wrap: break-word; /* Asegura que palabras largas no se desborden */
}
.producto-text {
	font-size: 1em;
	color: #666;
	margin: 0; /* Elimina el margen por defecto */
}
.producto-titulo {
	font-size: 1.4em;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	text-align: left; /* Alinea el texto a la izquierda */
	padding-right: 35px; /* Espacio para que el texto no choque con el indicador */
}
.producto-unidades {
	display: block; /* Para que aparezca en una línea nueva debajo de la cantidad */
	font-size: 0.8em;
	color: #666;
	font-style: italic;
	margin-top: 2px; /* Pequeño espacio superior */
}
.progress-bar {
	background-color: #e0e0e0;  /* Fondo gris para el total del objetivo */
	border-radius: 10px;         /* Bordes redondeados de la barra */
	width: 100%;                 /* Ancho completo del contenedor */
	height: 0.5rem;              /* Altura de la barra de progreso */
	margin-bottom: 0.5rem;       /* Espacio entre la barra y el valor o texto siguiente */
	position: relative;          /* Relativo para posicionar bien los elementos */
}
.progress-fill {
	height: 100%;                /* Ocupa el 100% de la altura de .progress-bar */
	border-radius: 10px;         /* Bordes redondeados para el relleno */
	transition: width 0.5s ease; /* Transición suave al cambiar el ancho */
}
.raciones-btn {
	background-color: #2f2f2f;
	border: 1px solid #d7d7d7;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 18px;
	color: white; /* Color del texto en blanco */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
	transition: background-color 0.1s; /* Suavizar el cambio de color */
}
.raciones-btn:hover {
	background-color: #e0e0e0; /* Color al pasar el ratón */
}
.raciones-btn:active {
	background-color: #2f2f2f; /* Color original cuando se presiona */
	transform: scale(0.95); /* Efecto de reducción al presionar */
}
.raciones-btn:focus {
	background-color: #2f2f2f; /* Color original al enfocar */
	outline: none; /* Quitar contorno por defecto */
}
.raciones-selector {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0;
	flex-wrap: wrap; /* Permite que los elementos se envuelvan en móviles */
}
#raciones-count {
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px;
}	
.rating {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 5px;
}
.rating.excellent {
	background-color: #4CAF50;
}
.rating.mediocre {
	background-color: #FFC107;
}
#reader {
	width: 100%;
	max-width: 300px; /* ajusta según sea necesario */
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
#reader video {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.receta-card {
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-wrap: wrap; /* Permite que los elementos se envuelvan en dispositivos pequeños */
	justify-content: space-between; /* Alinea el contenido entre los extremos */
	align-items: center; /* Centra verticalmente los elementos dentro de la tarjeta */
	position: relative; /* SOLUCIÓN: Añadido para posicionar correctamente el icono de eliminar */
}
.receta-card-content {
	display: flex; /* Alinea horizontalmente la imagen y los detalles */
	align-items: center; /* Centra verticalmente la imagen y los detalles */
}
.receta-details {
	flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
	display: flex;
	flex-direction: column; /* Apila verticalmente el contenido */
	gap: 5px; /* Espacio entre los elementos del contenido */
}
.receta-image {
	width: 110px; /* Ajusta el tamaño al contenedor */
	height: 130px; /* Ajusta el tamaño al contenedor */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
	border-radius: 5px; /* Bordes redondeados para la imagen */
}
.receta-image-container {
	margin-right: 20px; /* Espacio entre la imagen y el contenido */
	width: 110px; /* Tamaño de la imagen */
	height: 130px; /* Tamaño de la imagen */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	border-radius: 5px; /* Bordes redondeados */
}
.receta-list {
	margin-top: 120px; /* Ajusta según la altura de la barra de búsqueda y filtros */
	padding: 10px;
	padding-bottom: 70px; /* Espacio adicional para evitar que la última tarjeta quede tapada */
}
.receta-name {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}
.receta-plato, .receta-temporadas, .receta-fases, .receta-category, .receta-nutrition, .modo-tiempo, .receta-id {
	font-size: 14px;
	color: #666;
	margin-bottom: 3px;
	flex-grow: 1; /* Ocupa todo el espacio disponible a la derecha */
}
.receta-preparation {
	display: flex;
	justify-content: flex-start; /* Alinear a la derecha */
	align-items: center; /* Centrar verticalmente */
	gap: 7px; /* Espacio entre los íconos */
	margin-top: 1px; /* Espacio entre kcal y modos de preparación */
}
.receta-preparation img {
	width: 24px; /* Tamaño del icono */
	height: 24px; /* Tamaño del icono */
	vertical-align: middle; /* Alinear verticalmente con el texto */
}
.receta-preparation-container {
	display: flex;
	justify-content: flex-start; /* Alineamos los modos completamente a la derecha */
	align-items: center; /* Centrado vertical de los iconos */
	margin-right: auto; /* Alinea este contenedor completamente a la derecha */
	gap: 7px; /* Espacio entre los iconos */
	padding-top: 1px; /* Espacio entre el texto y los modos */
}
.receta-text {
	display: flex;
	flex-direction: column; /* Colocamos los elementos del texto en columna */
}
.receta-url {
	color: #4CAF50;
	text-decoration: none;
}
.receta2-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
	position: relative; /* Para que el hijo (ChatGPT) use este como contenedor de referencia */
	display: flex; /* Usa flexbox para disposición en fila */
	align-items: center; /* Centra verticalmente los elementos */
	gap: 15px; /* Espacio entre la imagen y el contenido */
}
.receta2-card img {
	width: 150px; /* Tamaño de la imagen */
	height: 150px; /* Tamaño de la imagen */
	border-radius: 5px; /* Bordes redondeados para la imagen */
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
}
.receta2-image {
	max-width: 100%;
	height: auto;
	margin-top: 10px;
}
.receta2-info {
	/* Contenedor para el nombre y el texto */
	display: flex;
	flex-direction: column; /* Alinea el nombre y el texto en una columna */
	text-align: left; /* Alinea el texto a la izquierda */
	gap: 5px; /* Espacio entre los elementos */
}
.receta2-text {
	font-size: 1em;
	color: #666;
	margin: 0; /* Elimina el margen por defecto */
}
.receta2-titulo {
	font-size: 1.4em;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	text-align: left; /* Alinea el texto a la izquierda */
}
/* Anulamos cualquier estilo flex conflictivo en el contenedor principal de la tarjeta del modal */
.receta3-card {
	background-color: white;
	border-radius: 10px;
	padding: 5px;
	margin-bottom: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; /* Para que el hijo (imagen de eliminación) use este como contenedor de referencia */
	display: flex; /* Alinea horizontalmente el contenido */
	align-items: center; /* Centra verticalmente los elementos dentro de la tarjeta */
}

/* ¡REGLA CLAVE! Hacemos que el contenedor INTERNO sea flex para alinear la imagen y los detalles */
.receta3-card .receta3-card-content {
    display: flex;
    align-items: center;
}

/* Definimos el tamaño de la imagen y su contenedor para esta vista compacta */
.receta3-card .receta3-image-container {
    width: 80px;
    height: 95px;
    margin-right: 20px; /* Espacio entre imagen y texto */
}

.receta3-card .receta3-image {
	width: 80px; /* Ajusta el tamaño al contenedor */
	height: 95px; /* Ajusta el tamaño al contenedor */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
	border-radius: 5px; /* Bordes redondeados para la imagen */
}
#recetas-detail .ingrediente-texto {
    flex-grow: 1;
}
#recetas-detail .ingrediente-info {
    display: flex;
    align-items: center; /* Centra verticalmente la imagen, la bola y el texto */
    gap: 10px; /* Espacio uniforme entre elementos */
}
#recetas-detail .ingrediente-info img {
    margin-right: 0; 
}
#recetas-detail .ingrediente-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el lápiz y la papelera */
}
#recetas-detail .ingrediente-actions img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}
#recetas-detail .ingrediente-actions .eliminar-ingrediente {
    position: static; /* Anula el "position: absolute" */
    transform: none;  /* Resetea cualquier transformación */
}
#recetas-detail .nutrientabrev-card {
    margin-bottom: 10px; /* Añade un espacio inferior consistente con otras tarjetas */
}
.recipe-item-modal {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: inherit;
}
.recipe-item-modal:hover {
	background-color: #f9f9f9;
}
.recipe-item-modal:last-child {
	border-bottom: none;
}
.recipe-item-modal img {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	margin-right: 15px;
	object-fit: cover;
}
/* Estilo para los enlaces a otras recetas dentro de las instrucciones */
.recipe-link {
    color: #1a8f7d; /* Tu color corporativo */
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted #1a8f7d;
    cursor: pointer;
    padding: 0 2px;
    background-color: #f0fdfa; /* Fondo muy sutil */
    border-radius: 3px;
}
.recipe-link:hover {
    background-color: #1a8f7d;
    color: white;
    border-bottom: none;
}
.recipe-list-modal {
	list-style: none;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}
.recipe-status-indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	top: 15px;
	right: 15px; /* Posicionado a la izquierda */
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.recipe-status-indicator-detail {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	position: absolute;
	top: 15px; /* Alineado con la parte superior */
	right: 15px; /* Movido a la derecha */
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.recipe-status-indicator.en-receta {
	background-color: #28a745; /* Verde */
}
.recipe-status-indicator-detail.en-receta {
	background-color: #28a745; /* Verde */
}
.recipe-status-indicator-detail.en-receta.clickable:hover {
	transform: scale(1.2);
	cursor: pointer;
}
.recipe-status-indicator.no-en-receta {
	background-color: #dc3545; /* Rojo */
}
.recipe-status-indicator-detail.no-en-receta {
	background-color: #dc3545; /* Rojo */
}
.recipes-for-product-modal {
	display: none;
	position: fixed;
	z-index: 10001;
	left: 0; top: 0;
	width: 100%; height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.6);
	padding-top: 60px;
}
.recipes-modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 20px;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.recipes-modal-content h2 {
	margin-top: 0;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}
/* Área de escritura */
.rich-text-editor {
    width: 100%;
    min-height: 150px;
    max-height: 400px;
    padding: 15px;
    border: none;
    border-radius: 0;
    background-color: white;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    outline: none;
    white-space: pre-wrap;
}

/* Estilos internos del contenido */
.rich-text-editor ul, .rich-text-editor ol {
    padding-left: 20px;
    margin: 10px 0;
}
.rich-text-editor li {
    margin-bottom: 5px;
}
.rich-text-editor b, .rich-text-editor strong { font-weight: bold; }
.rich-text-editor i, .rich-text-editor em { font-style: italic; }


.search-bar {
	display: flex;
	align-items: center;
	background-color: #f4f4f4;
	border-radius: 20px;
	padding: 5px 15px;
}
.search-bar input {
	flex-grow: 1;
	border: none;
	background: transparent;
	padding: 10px;
	font-size: 16px;
}
.search-bar button {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.search-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px;
	background-color: white;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 1000;
}
.search2-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px;
	background-color: white;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 1000;
}
.search2-bar {
	display: flex;
	align-items: center;
	border-radius: 20px;
	padding: 5px 15px;
	background-color: #ebfffe; /* Color de fondo ligero para indicar que es editable */
	border: 1px dashed #1a8f7d; /* Borde punteado azul para indicar interactividad */
}
.search2-bar input {
	flex-grow: 1;
	border: none;
	background: transparent;
	padding: 10px;
	font-size: 16px;
}
.search2-bar button {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}
select {
	width: 100%; /* Para que el dropdown ocupe todo el ancho del contenedor */
	z-index: 100009; 
	background-color: white; /* Fondo blanco para mayor contraste */
}
.skeleton {
	background-color: #e2e2e2; /* Color gris claro para el esqueleto */
	border-radius: 4px;
	color: transparent; /* Oculta cualquier texto residual */
	user-select: none; /* Evita que el usuario pueda seleccionar el texto fantasma */
	animation: pulse 1.5s infinite ease-in-out;
}
.skeleton-img {
	width: 140px; /* Mismo ancho que la imagen real */
	height: 140px; /* Mismo alto que la imagen real */
	flex-shrink: 0; /* Evita que se encoja */
	background-color: #e2e2e2;
	border-radius: 5px;
	animation: pulse 1.5s infinite ease-in-out;
}
.skeleton-text {
	height: 1em;
	margin-bottom: 0.5em;
}
.small-icon {
	margin-top: 5px;
	width: 110px; /* Cambia el tamaño aquí según tus necesidades */
	height: auto; /* Mantén la proporción de aspecto */
	margin-left: 0px;
	margin-bottom: 0px;
}
.small-icon-fndds {
	margin-top: 5px;
	width: 40px; /* Cambia el tamaño aquí según tus necesidades */
	height: auto; /* Mantén la proporción de aspecto */
	margin-left: 0px;
	margin-bottom: 0px;
}	
.spinner, .spinner-eliminar {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	margin: 0 auto; /* Centrar el spinner horizontalmente */
	animation: spin 1s linear infinite;
}
#spinner-duplicar {
	border-top: 4px solid #1a8f7d; /* Color del spinner de guardar */
}
.spinner-eliminar {
	border-top: 4px solid #ee1d26; /* Color del spinner de eliminar */
}
#spinner-guardar {
	border-top: 4px solid #1a8f7d; /* Color del spinner de guardar */
}
.supermercados-card {
	background-color: #f9f9f9;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px; /* CORRECCIÓN: Cambiado de 20px a 10px */
}
.supermercados-title {
	font-size: 1.4em;
	color: #333;
	border-bottom: 2px solid #d7d7d7;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.tab {
	background-color: #d7d7d7; /* Color de fondo de la pestaña */
	padding: 10px 15px; /* Ajustar el padding */
	margin-right: 0px;
	cursor: pointer;
	line-height: 1.1; /* Asegurar que la altura sea consistente */
	border-top-left-radius: 8px; /* Borde redondeado superior izquierdo */
	border-top-right-radius: 8px; /* Borde redondeado superior derecho */
	border-bottom-left-radius: 0; /* Sin borde redondeado inferior izquierdo */
	border-bottom-right-radius: 0; /* Sin borde redondeado inferior derecho */
}
.tab.active {
	background-color: #2f2f2f; /* Color de fondo activo */
	color: white; /* Color del texto activo */
}
.tab-content {
	background-color: #FFFFFF;
	margin-top: 0px;
	padding: 15px;
	border: 1px solid #2f2f2f;
	border-top-left-radius: 0px; /* Borde redondeado superior izquierdo */
	border-top-right-radius: 8px; /* Borde redondeado superior derecho */
	border-bottom-left-radius: 8px; /* Sin borde redondeado inferior izquierdo */
	border-bottom-right-radius: 8px; /* Sin borde redondeado inferior derecho */
}
.tachado .producto-nombre,
.tachado .producto-marca,
.tachado .cantidad-valor,
.tachado .producto-unidades {
	text-decoration: line-through;
	color: #999;
}
.tachado .imagen-overlay {
	display: block;
}
.tienda-item {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.tienda-item:last-child {
	border-bottom: none;
}
.tienda-logo {
	width: 50px;
	height: 50px;
	margin-right: 15px;
	object-fit: contain;
}
.tienda-link {
	color: #1a8f7d;
	text-decoration: none;
	font-weight: 500;
}
.tienda-link:hover {
	text-decoration: underline;
}
.tienda-price {
	margin-left: auto; /* Empuja el precio a la derecha */
	padding-left: 15px; /* Espacio para que no se pegue al link */
	font-weight: bold;
	font-size: 1.1em;
	color: #333;
	display: flex;
	align-items: center;
}
#titulo-menu-edit {
	background-color: #ebfffe; /* Color de fondo ligero para indicar que es editable */
	border: 1px dashed #1a8f7d; /* Borde punteado azul para indicar interactividad */
	padding: 5px; /* Espaciado interno para que se vea más amigable */
	border-radius: 5px; /* Bordes redondeados */
	max-width: 250px; /* Limita el ancho máximo */
	width: auto; /* Toma el ancho que necesite, hasta el máximo */
	font-size: inherit; /* Mantiene el tamaño de fuente */
	font-weight: inherit; /* Mantiene el peso de fuente */
}
.unidad-texto {
	font-size: 0.9em;
	color: #666;
}
.usda-card {
    background-color: #f9f9f9;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px; 
    position: relative; /* <-- AÑADE ESTA LÍNEA */
}
.usda-card .ingrediente-actions {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.usda-container {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
	padding: 10px;
	background-color: white;
	border-radius: 8px;
}
.usda-container {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
	padding: 0; 
	background-color: transparent;
	border-radius: 8px;
}
.usda-title {
	font-size: 1.4em;
	color: #333;
	border-bottom: 2px solid #d7d7d7;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.user-dropdown {
	width: 80px;                 /* Ajustar el ancho del dropdown */
	border-radius: 8px;         /* Añadir borde redondeado */
	border: 1px solid #ccc;     /* Añadir un borde gris claro */
	padding: 5px;               /* Añadir padding para mejor apariencia */
}
.user-dropdown-container {
	margin-top: 0px;
	display: flex;
	z-index: 100008;
	justify-content: center;    /* Centrar el select horizontalmente */
}
#user-select {
	width: 100%;                /* Para que ocupe todo el ancho disponible */
	padding: 5px;              /* Espacio interno (padding) */
	border-radius: 8px;         /* Bordes redondeados */
	border: 1px solid #ccc;     /* Color y grosor del borde */
	background-color: white;  /* Color de fondo */
	color: #333;                /* Color del texto */
	font-size: 16px;            /* Tamaño de fuente */
	-webkit-appearance: none;   /* Quitar el estilo predeterminado del navegador (Webkit) */
	-moz-appearance: none;      /* Quitar el estilo predeterminado (Firefox) */
	appearance: none;           /* Quitar el estilo predeterminado en otros navegadores */
}
#user-select:focus {
	outline: none;              /* Quitar el borde azul predeterminado al hacer foco */
	border-color: #4caf50;      /* Cambiar color del borde al enfocar */
	box-shadow: 0 0 5px #4caf50; /* Añadir sombra al hacer foco */
}
#user-select option {
	padding: 10px;              /* Espacio interno para las opciones */
	background-color: #fff;     /* Color de fondo para las opciones */
	color: #333;                /* Color del texto de las opciones */
}
/* Ajustes generales para ambas tarjetas en el menú */
.product-card--menu,
.receta-card--menu {
    padding: 5px;
    margin-bottom: 10px;
    /* IMPORTANTE: Quitamos el display:flex del contenedor principal de la tarjeta */
    display: block; 
}

/* Contenedor interno que SÍ debe ser flex para alinear imagen y detalles */
.product-card--menu .product2-card-content,
.receta-card--menu .receta3-card-content { /* Usamos receta3-card-content como en tu JS */
    display: flex;
    align-items: center;
}

/* Ajustes para la imagen en el menú (más pequeña) */
.product-card--menu .product2-image-container,
.receta-card--menu .receta3-image-container {
	margin-right: 20px; /* Espacio entre la imagen y el contenido */
	width: 80px; /* Tamaño de la imagen */
	height: 95px; /* Tamaño de la imagen */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4; /* Color de fondo gris claro para cuando no hay imagen */
	border-radius: 5px; /* Bordes redondeados */
}

.product-card--menu .product2-image,
.receta-card--menu .receta3-image {
	width: 80px; /* Ajusta el tamaño al contenedor */
	height: 95px; /* Ajusta el tamaño al contenedor */
	object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
	border-radius: 5px; /* Bordes redondeados para la imagen */
}

/* El icono de eliminar en el menú debe estar al final de la tarjeta */
.product-card--menu .eliminar-ingrediente,
.receta-card--menu .eliminar-receta {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}