/* css/estilos.css */
/* v2.9.1 - Ajustes scroll completo en menú y panel filtros, sticky headers/footers opcionales */

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

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  color: #333;
}

body.body-no-scroll {
  overflow: hidden !important;
}

/* ----- Menú lateral ----- */
.menu-lateral {
  width: 220px;
  background-color: #2c3e50;
  height: 100vh; /* Fallback */
  height: 100dvh;
  min-height: 100vh; /* Mantener por si acaso */
  min-height: 100dvh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transition: left 0.3s ease; /* Solo transicionar 'left' */
  overflow-y: auto;   /* <<< SCROLL EN EL CONTENEDOR PRINCIPAL DEL MENÚ */
  padding-top: 15px;  /* Espacio superior general */
  padding-bottom: 20px; /* Espacio inferior general para el scroll */
  /* display: flex; QUITADO */
  /* flex-direction: column; QUITADO */
}

/* Ya no necesitamos esto combinado si panel-filtros tiene su propia definición */
/* .menu-lateral,
.panel-filtros { ... } */

.menu-lateral .logo-container {
  padding-left: 20px;
  padding-right: 20px;
  /* flex-shrink: 0; QUITADO */
}

.logo-sidebar {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.menu-lateral i {
  margin-right: 8px;
  vertical-align: middle;
  stroke-width: 1.8;
}

.menu-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0; /* El ul ahora es un bloque normal dentro del .menu-lateral scrolleable */
  /* flex-grow: 1; QUITADO */
  /* overflow-y: auto; QUITADO */
  /* min-height: 0; QUITADO */
}
.menu-lateral li {
  margin-bottom: 10px;
}
.menu-lateral a {
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  transition: background-color 0.3s ease;
}
.menu-lateral a:hover {
  background-color: #34495e;
}

/* Quitado touch-action del ul, el .menu-lateral scrolleable lo manejará */
/* .menu-lateral ul, .panel-filtros-contenido {
    touch-action: pan-y;
} */
/* Si se quiere específicamente para el menú y panel: */
.menu-lateral, .panel-filtros {
    touch-action: pan-y; /* Aplicar al contenedor scrolleable */
}


.menu-lateral .semana-actual-info {
  color: #bdc3c7;
  font-size: 0.9em;
  padding: 15px 20px;
  border-top: 1px solid #34495e;
  line-height: 1.4;
  margin-top: 10px; /* Un pequeño margen para separarlo de la lista si esta es corta */
  /* flex-shrink: 0; QUITADO */
  /* No necesita background-color, position relative o z-index aquí */
}

.boton-hamburguesa {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #2c3e50; /* Color por defecto para otras páginas */
  padding: 0; /* Quitar padding para que el tamaño lo den width/height */
  display: none; /* Oculto por defecto, se muestra en móvil */
  z-index: 1002;
  line-height: 1;
  width: 40px;  /* Definir un tamaño */
  height: 40px; /* Definir un tamaño */
  justify-content: center; /* Para centrar el icono de tres rayas si es un carácter */
  align-items: center;   /* Para centrar el icono de tres rayas si es un carácter */
}

.busqueda-hamburguesa {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.btn-cerrar-menu {
  display: none;
  position: absolute; /* Fijo relativo a .menu-lateral */
  top: 10px;
  right: 10px;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 1100; /* Encima del contenido scrolleable del menú */
}

main.contenido {
  position: relative;
  margin-left: 240px;
  padding: 2rem;
  transition: margin-left 0.3s ease;
}

.barra-busqueda {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin: 0;
}
.barra-busqueda input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.4rem;
  min-width: 0;
}
.barra-busqueda button {
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
}

.filtros-form {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.filtros-categorias,
.filtros-etiquetas {
  display: flex;
  flex-direction: column;
}
.filtros-categorias h3,
.filtros-etiquetas h3 { margin: 0 0 0.5rem 0; }
.filtros-categorias label,
.filtros-etiquetas label { margin-bottom: 0.3rem; cursor: pointer; }

button[type="submit"] {
  align-self: flex-end;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
}
button[type="submit"]:hover { background: #34495e; }

.checkbox-etiquetas { display: flex; flex-wrap: wrap; gap: 1rem; }
.checkbox-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 10px; background: #f0f0f0; border-radius: 6px; cursor: pointer; }
.color-circulo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid #666; vertical-align: middle; }
.etiqueta-wrapper { display: flex; align-items: center; gap: 6px; }
.nombre-etiqueta { display: inline-block; }

.grid-recetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.tarjeta-receta { position: relative; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.icono-menu { position: absolute; top: 8px; right: 8px; z-index: 5; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); transition: background-color 0.2s ease; }
.icono-menu:hover { background-color: rgba(255, 255, 255, 1); }
.icono-menu img { width: 24px; height: 24px; display: block; }
.enlace-receta { display: block; color: inherit; text-decoration: none; }
.imagen-receta { position: relative; width: 100%; height: 220px; overflow: hidden; }
.imagen-receta img { width: 100%; height: 100%; object-fit: cover; }
.overlay-titulo { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); padding: 10px; }
.overlay-titulo h2 { color: #fff; font-size: 1.1rem; margin: 0; }

.circulos-etiquetas {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 6;
}
.circulos-etiquetas .circulo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.form-receta input, .form-receta select, .form-receta textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.form-receta { max-width: 100%; box-sizing: border-box; }
.form-grid { width: 100%; box-sizing: border-box; }
.form-group{ margin-bottom:1rem; }
.form-group label{ margin-bottom:1rem; padding:0.5rem; }
/* === ESTILOS ADICIONALES/MODIFICADOS PARA LIGHTBOX CON ZOOM === */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Evitar barras de scroll en el lightbox mismo */
  touch-action: none; /* Deshabilitar acciones táctiles por defecto del navegador en el lightbox */
}

.lightbox-imagen {
  /* max-width y max-height iniciales para que quepa */
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
  
  /* Clave para el zoom y pan: la transformación se aplicará aquí */
  transition: transform 0.1s ease-out; /* Transición suave para el pan */
  cursor: grab; /* Indicar que se puede arrastrar cuando hay zoom */
  object-fit: contain; /* Asegurar que la imagen se escale manteniendo la proporción */
  
  /* Para que el pinch-to-zoom funcione bien en algunos navegadores móviles,
     es importante que la imagen pueda ser más grande que su contenedor directo (el lightbox) */
  /* El transform: scale() se encargará del tamaño visual */
}

.lightbox-imagen:active { /* Cuando se está arrastrando */
    cursor: grabbing;
}

.cerrar-lightbox {
  position: absolute;
  top: 20px; /* Un poco más abajo para no solaparse tanto con bordes de pantalla */
  right: 20px;
  color: white;
  font-size: 2.5rem; /* Un poco más grande */
  cursor: pointer;
  z-index: 10000; /* Encima de la imagen */
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* === Estilos para Navegación en Lightbox === */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.35);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001; /* Encima de la imagen pero debajo del botón de cerrar */
  transition: background-color 0.2s ease;
  padding: 0; /* Para que el tamaño lo den width/height */
}

.lightbox-nav:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.lightbox-nav.prev {
  left: 15px;
}

.lightbox-nav.next {
  right: 15px;
}

.lightbox-nav i[data-lucide] {
  stroke-width: 2.5;
  width: 28px; /* Ajusta el tamaño del icono */
  height: 28px;
}

/* Ocultar botones si no hay navegación posible (se controla con JS) */
.lightbox-nav[style*="display: none"] {
    display: none !important; /* Para asegurar que se oculte */
}





.configuracion-inicial { background-color: #fff; padding: 2rem; border-radius: 10px; max-width: 600px; margin: 2rem auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
.configuracion-inicial h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.configuracion-inicial p { margin-bottom: 2rem; font-size: 1rem; color: #555; }
.configuracion-inicial .botones { display: flex; justify-content: center; gap: 1rem; }
.configuracion-inicial button { padding: 0.7rem 1.4rem; font-size: 1rem; border-radius: 8px; cursor: pointer; border: none; transition: background-color 0.2s ease; }
.configuracion-inicial .si { background-color: #27ae60; color: white; }
.configuracion-inicial .si:hover { background-color: #219150; }
.configuracion-inicial .no { background-color: #bdc3c7; color: #333; }
.configuracion-inicial .no:hover { background-color: #95a5a6; }
.form-login { max-width: 400px; margin-top: 1rem; }
.form-login .campo-form { display: flex; flex-direction: column; margin-bottom: 1.2rem; }
.form-login label { margin-bottom: 0.4rem; font-weight: 600; color: #333; }
.form-login input[type="text"], .form-login input[type="email"], .form-login input[type="password"] { padding: 0.5rem 0.7rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 6px; background-color: #fdfdfd; }
.form-login button[type="submit"] { background-color: #2c3e50; color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-top: 0.5rem; }
.form-login button[type="submit"]:hover { background-color: #34495e; }
.form-login .campo-password { position: relative; display: flex; align-items: center; }
.form-login .campo-password input { flex: 1; padding-right: 2.5rem; }
.form-login .campo-password button { position: absolute; right: 10px; background: none; border: none; cursor: pointer; padding: 0; height: 100%; display: flex; align-items: center; }
.form-login .campo-password button i { stroke-width: 2; color: #333; width: 20px; height: 20px; }
.btn-limpiar-filtros { background-color: #bdc3c7; color: #333; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 1rem; text-decoration: none; display: inline-block; transition: background-color 0.2s ease; }
.btn-limpiar-filtros:hover { background-color: #95a5a6; }
.grid-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
.columna-dia { background: #fff; padding: 0.4rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.columna-dia h4 { text-align: center; margin-top: 0; }
.bloque-receta { background: #f4f4f4; margin: 0.4rem 0; padding: 0.5rem; padding-top: 1.6rem; border-radius: 6px; font-size: 0.9rem; position: relative; cursor: move; min-height: 130px; overflow: visible; display: flex; flex-direction: column; justify-content: flex-start; }
.icono-eliminar { float: right; margin-left: 8px; color: #b76e6e; text-decoration: none; font-size: 1rem; opacity: 0.2; transition: color 0.2s, opacity 0.2s; z-index: 10; }
.icono-eliminar:hover { color: #d9534f; opacity: 1; }
.menu-acciones { position: absolute; top: 6px; right: 6px; }
.boton-mas { background: none; border: none; cursor: pointer; color: #666; padding: 4px; font-size: 1rem; opacity: 0.4; }
.boton-mas:hover { opacity: 1; }
.menu-oculto { position: absolute; top: 30px; right: 0; background: white; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: none; flex-direction: column; min-width: 120px; z-index: 20; }
.menu-oculto a, .menu-oculto button { padding: 8px 10px; border: none; background: none; text-align: left; font-size: 0.9rem; color: #333; text-decoration: none; display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; }
.menu-oculto a:hover, .menu-oculto button:hover { background-color: #f0f0f0; }
.icono-nota { float: right; margin-left: 8px; color: #666; text-decoration: none; font-size: 1rem; opacity: 0.2; background: none; border: none; cursor: pointer; transition: color 0.2s, opacity 0.2s; }
.icono-nota:hover { color: #2980b9; opacity: 1; }
.vista-etiquetas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.5rem; }
.etiqueta-vista-item { display: inline-block; padding: 5px 10px; border-radius: 6px; font-size: 0.9rem; line-height: 1.3; }
.modal { 
   opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s linear;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; background: rgba(0,0,0,0.5); }
.modal.is-visible { 
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease; }
.modal-contenido { position: relative; background: white; border-radius: 8px; padding: 25px; width: 100%; max-width: 500px; margin: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; }
.modal .cerrar { float: right; font-size: 20px; cursor: pointer; position: absolute; top: 10px; right: 14px; color: #888; }
.opciones-compartir { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.opciones-compartir a { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 15px; border-radius: 5px; font-weight: bold; transition: background 0.2s ease; color: white; white-space: normal; word-wrap: break-word; text-align: left; justify-content: flex-start; }
.opciones-compartir .boton-whatsapp { background: #25D366; color: white; }
.opciones-compartir .boton-email { background: #D44638; color: white; }
.opciones-compartir .boton-json { background: #007bff; color: white; }
.opciones-compartir a:hover { opacity: 0.9; }
.acciones-receta { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 2; }
.acciones-receta .icono-eliminar, .acciones-receta .icono-nota { float: none; margin: 0; }
.bloque-vacio, .form-vacio button { background: #fefefe; border: 1px dashed #ddd; padding: 0.7rem; width: 100%; text-align: center; font-size: 0.88rem; color: #999; border-radius: 6px; min-height: 48px; margin: 0.4rem auto; box-sizing: border-box; opacity: 0.4; transition: opacity 0.2s ease; }
.bloque-vacio:hover, .form-vacio:hover button { opacity: 1; }
.form-vacio { margin: 0; display: flex; justify-content: center; align-items: center; cursor: move; }
.circulos { margin-top: 0.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 14px; padding: 0 5px; }
.circulos .circulo { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 2px solid #fff; }
.dropzone-imagen { border: 2px dashed #ccc; border-radius: 8px; padding: 1rem; text-align: center; cursor: pointer; background: #fafafa; transition: background 0.3s; }
.dropzone-imagen.dragover { background-color: #e8f5e9; }
.dropzone-imagen .preview-imagen img { max-width: 100%; height: auto; border-radius: 6px; margin-top: 0.5rem; }
.zona-drag { border: 2px dashed #ccc; padding: 1rem; text-align: center; color: #999; border-radius: 8px; transition: background-color 0.3s; position: relative; }
.zona-drag img.preview-imagen { display: block; max-width: 100%; height: auto; margin: 0.5rem auto 0; border-radius: 6px; }
.drop-area { border: 2px dashed #ccc; padding: 15px; text-align: center; position: relative; }
.drop-area.dragging { border-color: #888; background-color: #f9f9f9; }
.drop-area::before { content: "Pega aquí una imagen del portapapeles (Ctrl+V)"; display: block; color: #888; font-size: 0.9rem; margin-bottom: 5px; }
.eliminar-imagen { position: absolute; top: -8px; right: -8px; background: rgba(0,0,0,0.6); color: white; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; cursor: pointer; font-weight: bold; font-size: 18px; z-index: 10; }

/*para las clases de SortableJS*/
.preview-image-sortable-item {
    /* Tus estilos existentes */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.sortable-ghost-class { /* El placeholder donde se puede soltar */
    opacity: 0.4;
    background-color: #cce5ff; /* Un color azul claro */
    border: 2px dashed #007bff;
}

.sortable-chosen-class { /* El elemento que estás arrastrando */
    opacity: 0.8;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(1.05); /* Un poco más grande */
}

.sortable-drag-class { /* Similar a chosen, a veces usado para el elemento que se está arrastrando */
    /* Puedes definir estilos específicos si es necesario */
}
/*fin clases SortableJS*/


.eliminar-imagen:hover { background: rgba(0,0,0,0.8); }
.sugerencias { position: relative; z-index: 10; margin-top: 0.25rem; }
.lista-sugerencias { background: #fff; border: 1px solid #ccc; max-height: 150px; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.lista-sugerencias li { padding: 0.5rem; cursor: pointer; }
.lista-sugerencias li:hover { background-color: #f0f0f0; }
.btn-calendario { display: inline-flex; align-items: center; background-color: #27ae60; color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; }
.btn-calendario:hover { background-color: #219150; }
.btn-calendario i { margin-right: 8px; }
.btn-editar { display: inline-flex; align-items: center; background-color:#2199E4; color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; }
.btn-editar:hover { background-color: #1B71A7; }
.btn-editar i { margin-right: 8px; }
form .btn-eliminar, button.btn-eliminar { background-color: #e74c3c !important; color: white !important; padding: 0.6rem 1.2rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; display: inline-flex; align-items: center; }
.btn-eliminar:hover { background-color: #c0392b; }
.separador-comidas { margin: 0.8rem 0 0.5rem; font-size: 0.85rem; color: #888; border-top: 1px solid #ddd; padding-top: 0.4rem; text-align: center; font-style: italic; }
.miniatura-receta { display: flex; justify-content: center; align-items: center; height: 100px; overflow: hidden; border-radius: 6px; }
.miniatura-receta img { max-height: 100%; max-width: 100%; height: auto; width: auto; object-fit: contain; }
.btn-importar { background: #555; color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s ease; }
.btn-importar:hover { background: #333; }
.titulo-receta { margin-top: 1.2rem; margin-bottom: 1.2rem; font-weight: bold; text-align: center; font-size: 0.9rem; }
.receta-contenedor { display: flex; flex-direction: column; gap: 2rem; }
.lista-compra { overflow: visible; }
.lista-compra ul { list-style: none; padding: 0; margin-top: 1rem; }
.lista-compra li { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.lista-compra input[type="text"] { flex: 1; padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
.lista-compra button { border: none; cursor: pointer; padding: 0.3rem; background: transparent; }
.lista-ingredientes { list-style: none; padding-left: 0; margin: 0; }
.lista-ingredientes li { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #ccc; }
.item-ingrediente .btn-add-ingrediente { margin-left: 0px; background: none; border: none; cursor: pointer; color: #007bff; }
.texto-ingrediente { flex: 1; word-break: break-word; }
.btn-add-ingrediente { background: none; border: none; cursor: pointer; padding: 0.2rem; font-size: 1rem; color: #007bff; transition: transform 0.2s; }
.btn-add-ingrediente:hover { transform: scale(1.2); color: #0056b3; }
.lista-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.menu-opciones { position: relative; }
.btn-opciones { background: none; border: none; cursor: pointer; padding: 4px; font-size: 1.2rem; color: #666; transition: color 0.2s ease; display: flex; align-items: center; justify-content: center; }
.btn-opciones:hover { color: #333; }
.opciones-lista { position: absolute; right: 0; top: 28px; background: white; border: 1px solid #ccc; border-radius: 6px; padding: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: none; flex-direction: column; min-width: 140px; z-index: 100; }
.opciones-lista button { background: none; border: none; padding: 0.4rem 0.8rem; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.95rem; color: #333; width: 100%; text-align: left; border-radius: 4px; transition: background 0.2s ease; }
.opciones-lista button:hover { background-color: #f0f0f0; }
input.guardado-ok { border: 2px solid #4CAF50 !important; box-shadow: 0 0 6px #4CAF50; transition: all 0.3s ease; }
.form-nuevo-ingrediente { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; flex-wrap: nowrap; justify-content: flex-start; }
.form-nuevo-ingrediente input { width: 220px; padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 6px; flex-shrink: 0; }
.btn-nuevo-ingrediente { background-color: #2c3e50; color: white; border: none; padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; transition: background-color 0.2s ease; visibility: visible !important; }
.btn-nuevo-ingrediente:hover { background-color: #1a242f; }
.controles-impresion { margin: 20px 0; }
.controles-impresion label { margin-right: 12px; }
.filtros-modernos { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem; align-items: flex-start; }
.filtro-box { background: #fff; padding: 1rem; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.05); flex: 1 1 300px; }
.filtro-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; }
.filtro-header h3 { margin: 0; font-size: 1.1rem; color: #2c3e50; }
.filtro-header button { background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.filtro-header button i { width: 20px; height: 20px; color: #444; stroke-width: 1.5; }
.filtro-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.filtro-opciones label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; background: #f9f9f9; padding: 4px 6px; border-radius: 5px; border: 1px solid #eee; cursor: pointer; }
.acciones-filtros { display: flex; flex-direction: row; gap: 0.8rem; margin-left: auto; align-items: center; justify-content: center; padding-top: 0.5rem; margin-top: 1rem; }
.acciones-filtros .btn-filtrar, .acciones-filtros .btn-limpiar-filtros { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-weight: 500; border-radius: 6px; border: none; text-decoration: none; font-size: 0.95rem; }
.acciones-filtros .btn-filtrar { background-color: #2c3e50; color: white; }
.acciones-filtros .btn-filtrar i, .acciones-filtros .btn-limpiar-filtros i { stroke-width: 2; }
form.form-receta { max-width: 900px; margin: 0 auto; padding: 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); }
form.form-receta h2 { font-size: 1.6rem; margin-bottom: 1.5rem; color: #333; }
form.form-receta label { display: block; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.4rem; color: #444; }
form.form-receta input[type="text"], form.form-receta textarea, form.form-receta select { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; resize: vertical; box-sizing: border-box; transition: border-color 0.3s; }
form.form-receta input[type="text"]:focus, form.form-receta textarea:focus, form.form-receta select:focus { border-color: #6c63ff; outline: none; }
form.form-receta textarea { min-height: 150px; }
form.form-receta img { max-width: 200px; border-radius: 10px; margin-top: 0.5rem; }
form.form-receta .imagen-actual { margin-bottom: 1rem; }
form.form-receta .separador { height: 2px; background: #eee; margin: 2rem 0; }
form.form-receta button[type="submit"] { background: #6c63ff; color: #fff; border: none; padding: 0.8rem 1.5rem; font-weight: bold; font-size: 1rem; border-radius: 8px; cursor: pointer; margin-top: 2rem; transition: background 0.3s ease; }
form.form-receta button[type="submit"]:hover { background: #574fd7; }
.header-editar-receta { display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; position: relative; }
.header-editar-receta h2 { margin: 0; font-size: 1.7rem; color: #333; margin-right: 0.5rem; }
.btn-ver-receta-icono { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem; color: #6c757d; text-decoration: none; border-radius: 50%; transition: background-color 0.2s ease, color 0.2s ease; line-height: 1; }
.btn-ver-receta-icono:hover { background-color: #e9ecef; color: #343a40; }
.btn-ver-receta-icono i { margin-right: 0 !important; stroke-width: 2; }
.toggle-container { display: flex; align-items: center; margin-bottom: 0.5rem; }
.toggle-container label.toggle-switch { padding: 0; margin: 0; display: inline-block; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffc107; transition: .3s; }
.toggle-switch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .slider { background-color: #28a745; }
.toggle-switch input:focus + .slider { box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25); }
.toggle-switch input:checked + .slider:before { transform: translateX(20px); }
.toggle-switch .slider.round { border-radius: 24px; }
.toggle-switch .slider.round:before { border-radius: 50%; }
.toggle-label { margin-left: 10px; font-size: 0.9rem; color: #495057; user-select: none; cursor: pointer; line-height: 24px; }
.sugerencias { position: relative; z-index: 100; margin-top: 0.25rem; }
.lista-sugerencias { background: #fff; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; list-style: none; margin: 0; padding: 0; position: absolute; width: 100%; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; }
.lista-sugerencias li { padding: 0.7rem 1rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; color: #333; }
.lista-sugerencias li:last-child { border-bottom: none; }
.lista-sugerencias li:hover, .lista-sugerencias li.selected { background-color: #e9ecef; color: #000; }
.lista-sugerencias-error { padding: 0.7rem 1rem; font-style: italic; color: #777; }
.filtros-escritorio { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem; align-items: flex-start; }
.btn-abrir-filtros { display: none; padding: 0.4rem 0.8rem; background-color: #e9ecef; border: 1px solid #ced4da; color: #495057; border-radius: 6px; cursor: pointer; font-size: 0.9rem; align-items: center; gap: 5px; margin-left: 10px; }
.btn-abrir-filtros i { stroke-width: 2; }
.filtro-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s linear; }
.filtro-overlay.activo { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.panel-filtros { position: fixed; top: 0; right: -300px; width: 300px; max-width: 85%; height: 100vh; background-color: #ffffff; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); z-index: 1050; transition: right 0.3s ease-in-out; /*display: flex; */ /* QUITADO */ /*flex-direction: column; */ /* QUITADO */ visibility: hidden; overflow-y: auto; /* AÑADIDO */ padding-bottom: 15px; /* AÑADIDO */ }
.panel-filtros.abierto { right: 0; visibility: visible; }
.panel-filtros-header { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid #e0e0e0; /*flex-shrink: 0; */ /* QUITADO */ background-color: #ffffff; position: sticky; top: 0; z-index: 1; }
.panel-filtros-header h3 { margin: 0; font-size: 1.2rem; color: #2c3e50; }
.btn-cerrar-filtros { background: none; border: none; font-size: 1.5rem; color: #555; cursor: pointer; padding: 0; line-height: 1; }
.panel-filtros-contenido { padding: 1rem; /* overflow-y: auto; QUITADO */ /* flex-grow: 1; QUITADO */ /* min-height: 0; QUITADO */ }
.filtros-form-panel { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; /* min-height: 100%; QUITADO */ /* flex-grow: 1; QUITADO */ }
.filtros-form-panel .filtro-box { flex-basis: auto; border: none; box-shadow: none; padding: 0; background: transparent; }
.filtros-form-panel .filtro-header h4 { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: bold; color: #333; }
.filtros-form-panel .acciones-filtros { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; justify-content: space-around; display: flex; gap: 0.8rem; align-items: center; margin-left: 0; /* margin-top: auto; QUITADO o ajustar si es necesario */ /* flex-shrink: 0; QUITADO */ background-color: #fff; padding: 1rem; width: 100%; box-sizing: border-box; /* position: sticky; bottom: 0; z-index: 1; OPCIONAL */ }
.filtros-form-panel button[type="submit"] { background-color: #2c3e50; }
.filtros-form-panel button[type="submit"]:hover { background-color: #34495e; } /* Añadido :hover */
.receta-layout-container { display: flex; flex-direction: column; gap: 2rem; }
.receta-columna-principal { flex-grow: 1; min-width: 0; }
.receta-columna-lateral { width: 100%; }
.receta-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }
.receta-header h1 { font-size: 2.2rem; color: #2c3e50; margin: 0; line-height: 1.2; }
.btn-compartir-moderno { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background-color: #f0f0f0; border: 1px solid #ddd; color: #333; border-radius: 6px; text-decoration: none; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s; }
.btn-compartir-moderno:hover { background-color: #e0e0e0; }
.btn-compartir-moderno i { stroke-width: 2; }
.receta-imagen-principal-container { margin-bottom: 2rem; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.receta-imagen-principal { display: block; width: 100%; height: auto; max-height: 450px; object-fit: cover; }
.sin-imagen-principal { text-align: center; padding: 2rem; background-color: #f9f9f9; border: 1px dashed #ccc; border-radius: 8px; color: #777; margin-bottom: 2rem; }
.receta-seccion { margin-bottom: 2rem; }
.receta-seccion h2 { font-size: 1.5rem; color: #333; margin-top: 0; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #efefef; }
.receta-detalles-adicionales div { margin-bottom: 0.5rem; font-size: 1rem; }
.receta-detalles-adicionales strong { color: #555; }
.lista-ingredientes-moderna { list-style: none; padding-left: 1rem; margin: 0; }
.item-ingrediente-moderno { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid #f0f0f0; font-size: 1rem; }
.item-ingrediente-moderno:last-child { border-bottom: none; }
.item-ingrediente-moderno .texto-ingrediente { flex-grow: 1; margin-right: 1rem; }
.btn-add-ingrediente-moderno { background: none; border: none; color: #007bff; cursor: pointer; padding: 0.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s, color 0.2s; }
.btn-add-ingrediente-moderno:hover { background-color: #e7f3ff; color: #0056b3; }
.btn-add-ingrediente-moderno i { stroke-width: 2.5; width: 22px; height: 22px; }
.instrucciones-contenido, .notas-contenido { line-height: 1.7; font-size: 1rem; padding-left:1rem;}
.notas-contenido a { color: #007bff; text-decoration: underline; }
.notas-contenido a:hover { color: #0056b3; }

.notas-contenido {
  /* Esto es para evitar que los enlaces largos desborden el contenedor y se produzca un scroll horizontal en la versión móvil*/
  overflow-wrap: break-word;
  word-wrap: break-word; /* Alias para mayor compatibilidad */
}
.receta-imagen-instrucciones { display: block; max-width: 100%; height: auto; border-radius: 8px; margin-top: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.receta-acciones-principales { display: flex; gap: 1rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.btn-accion-receta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 500; border-radius: 8px; text-decoration: none; cursor: pointer; transition: background-color 0.2s, transform 0.1s; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn-accion-receta:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-calendario-moderno { background-color: #27ae60; color: white; }
.btn-editar-moderno { background-color: #2980b9; color: white; }
.lista-compra-moderna { background-color: #ffffff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 20px;}
.lista-compra-moderna .lista-header { margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid #eee; }
.lista-compra-moderna .lista-header h3 { margin: 0; font-size: 1.2rem; color: #333; display: flex; align-items: center; gap: 0.5rem; }
.lista-compra-moderna .lista-header h3 i { color: #555; }
.btn-opciones-moderno { background: none; border: none; cursor: pointer; padding: 0.3rem; color: #777; }
.btn-opciones-moderno:hover { color: #333; }
.lista-compra-moderna ul { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.lista-compra-moderna li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #f5f5f5; }
.lista-compra-moderna li:last-child { border-bottom: none; }
.lista-compra-moderna input[type="text"] { flex-grow: 1; border: 1px solid #ddd; padding: 0.6rem; border-radius: 6px; font-size: 0.95rem; }
.lista-compra-moderna input[type="text"]:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); outline: none; }
.btn-eliminar-item-lista { background: none; border: none; color: #e74c3c; cursor: pointer; padding: 0.3rem; opacity: 0.7; }
.btn-eliminar-item-lista:hover { opacity: 1; }
.form-nuevo-ingrediente-moderno { display: flex; gap: 0.5rem; margin-top: 1rem; }
.form-nuevo-ingrediente-moderno input { flex-grow: 1; }
.btn-nuevo-ingrediente-moderno { background-color: #2c3e50; color: white; border: none; padding: 0.6rem; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-nuevo-ingrediente-moderno:hover { background-color: #34495e; }
.receta-variantes-navegacion { padding: 1rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; position: relative; }
.receta-variantes-navegacion h3 { font-size: 1.1rem; color: #555; margin-top: 0; margin-bottom: 1rem; text-align: center; }
.variantes-contenedor { display: flex; gap: 1rem; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.variantes-contenedor::-webkit-scrollbar { display: none; }
.variante-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; border: 2px solid transparent; padding: 0.5rem; border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s; flex: 0 0 auto; width: 100px; }
.variante-item:hover, .variante-item.activa { border-color: #007bff; box-shadow: 0 0 8px rgba(0,123,255,0.2); }
.variante-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; margin-bottom: 0.5rem; }
.variante-item .variante-titulo { font-size: 0.8rem; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.variante-item.variante-principal-link { border-color: #28a745; position: relative; }
.icono-principal-variante { position: absolute; top: 2px; right: 2px; color: #28a745; background-color: white; border-radius: 50%; padding: 2px; width: 16px; height: 16px; }
.variante-nav-btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255,255,255,0.8); border: 1px solid #ccc; color: #333; border-radius: 50%; width: 30px; height: 30px; font-size: 1.2rem; cursor: pointer; z-index: 10; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.variante-nav-btn.prev { left: -10px; }
.variante-nav-btn.next { right: -10px; }
.variante-nav-btn:hover { background-color: white; }

/* Barra para los iconos de acción de la derecha en ver_receta.php */
.vr-acciones-flotantes-derecha {
  /* display: none; */ /* Lo cambiaste a flex, lo cual es bueno para web */
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute; /* Correcto para web */
  top: 15px;
  right: 15px;
  z-index: 10;
}

.vr-acciones-flotantes-derecha .accion-icono {
  color: white;
  background-color: rgba(0,0,0,0.35);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.vr-acciones-flotantes-derecha .accion-icono i {
  stroke-width: 2;
  width: 18px;
  height: 18px;
}
.vr-acciones-flotantes-derecha .accion-icono:hover {
  background-color: rgba(0,0,0,0.5);
}

/* Título de la receta después de la imagen */
.receta-titulo-despues-imagen {
  padding: 1.5rem 0 1rem 0;
}
.receta-titulo-despues-imagen h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin: 0;
  line-height: 1.2;
  text-align: center; /* Centrado por defecto, se ajusta en móvil */
}

/* === Contenedor de la Imagen Principal de la Receta === */
.receta-imagen-principal-container {
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: relative; /* <<< AÑADIDO/ASEGURADO: Necesario para posicionar los iconos de acción encima */
}
.receta-imagen-principal {
  display: block;
  width: 100%;
  height: auto;
  /* max-height: 450px; Se moverá a la media query de web */
  object-fit: cover;
}

/* Iconos de acción para ver_receta.php en WEB */
.vr-acciones-flotantes-derecha {
  display: flex; /* Hacemos que sea visible por defecto */
  align-items: center;
  gap: 10px; /* Espacio entre iconos */
  position: absolute;   /* <<< Posicionamiento absoluto */
  top: 15px;            /* Distancia desde arriba del contenedor de la imagen */
  right: 15px;           /* Distancia desde la derecha del contenedor de la imagen */
  z-index: 10;          /* Para estar encima de la imagen */
}

.vr-acciones-flotantes-derecha .accion-icono {
  color: white; /* Color para contraste sobre la imagen */
  background-color: rgba(0,0,0,0.35); /* Fondo semitransparente */
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.vr-acciones-flotantes-derecha .accion-icono i {
  stroke-width: 2;
  width: 18px;
  height: 18px;
}
.vr-acciones-flotantes-derecha .accion-icono:hover {
  background-color: rgba(0,0,0,0.5);
}

.titulo-sobre-imagen {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.85) 100%); /* Gradiente más pronunciado abajo */
  padding: 20px; /* Más padding para un título más grande */
  text-align: left; /* Alinear a la izquierda por defecto */
}

.titulo-sobre-imagen h1 {
  color: #fff;
  font-size: 1.5rem; /* Tamaño del título principal de la receta */
  margin: 0;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}

/* Estilos para el título si NO hay imagen (fallback) */
.receta-titulo-despues-imagen {
  padding: 1rem 0; /* Mantenemos el padding que ya tenías */
  /* text-align: center; ya lo tenías */
}
.receta-titulo-despues-imagen h1 {
  font-size: 2.2rem; /* Mantenemos el tamaño que ya tenías */
  color: #2c3e50;
  margin: 0;
  line-height: 1.2;
}


/* === ESTILOS PARA NOTIFICACIONES FLOTANTES === */
.notificacion-flotante {
  position: fixed; /* Fijo en la pantalla */
  top: -100px;     /* Inicialmente fuera de la vista, arriba */
  left: 50%;
  transform: translateX(-50%); /* Centrado horizontalmente */
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: white;
  font-size: 0.95rem;
  font-weight: 500;
  z-index: 10000; /* Muy alto para estar encima de casi todo */
  opacity: 0;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
  text-align: center;
  min-width: 280px; /* Ancho mínimo para que no se vea muy pequeño */
  max-width: 90%;   /* Máximo ancho para que no ocupe toda la pantalla en resoluciones grandes */
  box-sizing: border-box;
}

.notificacion-flotante.visible {
  top: 20px; /* Posición visible, ajusta según necesites */
  opacity: 1;
}

.notificacion-flotante.exito {
  background-color: #28a745; /* Verde para éxito */
  /* border-left: 5px solid #1e7e34; /* Un borde lateral opcional */
}

.notificacion-flotante.error {
  background-color: #dc3545; /* Rojo para error */
  /* border-left: 5px solid #bd2130; /* Un borde lateral opcional */
}

.notificacion-flotante.info { /* Si quieres un tipo 'info' en el futuro */
  background-color: #17a2b8; /* Azul para información */
  /* border-left: 5px solid #117a8b; */
}


/* === ESTILOS PARA ICONOS DE CARGA Y CONFIRMACIÓN EN BOTONES === */
.btn-add-ingrediente-moderno .spin,
.btn-nuevo-ingrediente-moderno .spin {
  animation: spin 1s linear infinite;
}

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

/* Ajustes para que los iconos de Lucide dentro de botones se vean bien */
.btn-add-ingrediente-moderno i[data-lucide],
.btn-nuevo-ingrediente-moderno i[data-lucide] {
  display: inline-block; /* Asegura que la animación de spin funcione bien */
  vertical-align: middle; /* Alinear mejor con el texto si lo hubiera */
}

/* === ESTILOS PARA BOTÓN VOLVER ARRIBA === */
.btn-volver-arriba {
  position: fixed; /* Fijo en la pantalla */
  bottom: 20px;    /* Distancia desde abajo */
  right: 20px;     /* Distancia desde la derecha */
  z-index: 999;    /* Encima de la mayoría del contenido, pero debajo de modales/menús si es necesario */
  
  background-color: #2c3e50; /* Tu color de fondo solicitado */
  color: white;              /* Color del icono (flecha) */
  
  width: 45px;     /* Ancho del botón */
  height: 45px;    /* Alto del botón */
  border-radius: 50%; /* Para hacerlo circular */
  
  display: none; /* Inicialmente oculto, controlado por JS. JS usará flex para mostrarlo y centrar. */
  align-items: center;
  justify-content: center;
  
  text-decoration: none;
  cursor: pointer;
  
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil */
  
  opacity: 0; /* Inicialmente transparente para la animación */
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease; /* Transición suave para aparecer/desaparecer y hover */
}

.btn-volver-arriba:hover {
  background-color: #34495e; /* Un poco más claro al pasar el ratón, como tus otros botones */
}

.btn-volver-arriba i[data-lucide="arrow-up"] {
  stroke-width: 2.5; /* Grosor de la flecha */
  width: 24px;       /* Tamaño del icono */
  height: 24px;
}

.bloque-receta .nota-mostrada {
  font-size: 0.8em;       /* Un poco más pequeña que el texto principal del bloque */
  color: #555;             /* Un color de texto un poco más suave */
  text-align: center;     /* CENTRAR EL TEXTO DE LA NOTA */
  padding: 5px 8px;       /* Un poco de padding interno */
  margin-top: 8px;        /* MARGEN SUPERIOR para separarla de los círculos o del título */
  margin-bottom: 4px;     /* Un pequeño margen inferior si es necesario */
  line-height: 1.3;       /* Mejorar legibilidad si la nota tiene varias líneas */
  word-break: break-word; /* Para evitar que notas largas desborden si no tienen espacios */
  overflow-wrap: break-word;
}


.galeria-instrucciones {
    display: flex; /* Organiza las imágenes en línea */
    flex-wrap: wrap; /* Permite que pasen a la siguiente línea si no caben */
    gap: 15px; /* Espacio entre imágenes */
    margin-top: 10px;
    justify-content: flex-start; /* Alinea al inicio, o usa 'center' */
}

.imagen-instruccion-item {
    /* Si quieres un borde o algo alrededor de cada imagen */
    border: 1px solid #eee; */
    padding: 5px; */
    background-color: #f9f9f9; */
    width: calc(50% - 10px);  Ejemplo para 2 columnas con gap de 20px */
    max-width: 300px; O un ancho máximo fijo */
}

.receta-imagen-instrucciones { /* Ya tenías esta clase */
    max-width: 100%; /* Para que la imagen sea responsiva dentro de su contenedor */
    height: auto;
    display: block; /* Evita espacio extra debajo de la imagen */
    border-radius: 5px; /* Bordes redondeados si quieres */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    cursor: zoom-in; /* Para indicar que es ampliable */
}

/* Opcional: Estilo para el pie de foto */
.pie-foto-instruccion {
    text-align: center;
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}


/* === Visor de Imágenes de Instrucciones === */
.visor-instrucciones-container {
    display: flex;
    flex-direction: column; /* Móvil: Imagen principal arriba, miniaturas abajo */
    gap: 10px;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
}

.imagen-instruccion-principal-visor {
    width: 100%; /* Ocupa el ancho disponible */
    display: flex; 
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; 
    border-radius: 6px;
    overflow: hidden; /* MUY IMPORTANTE: para cortar la imagen si es más grande */
    /* Altura para móvil */
    height: 300px; /* Una altura fija o max-height para móvil */
    max-height: 400px; /* Opcional, si height es auto o variable */
}

#imgPrincipalInstruccion {
    display: block;
    width: 100%;   /* Que la imagen intente ocupar el ancho del visor */
    height: 100%;  /* Que la imagen intente ocupar el alto del visor */
    object-fit: contain; /* Asegura que toda la imagen sea visible, puede dejar espacios */
    cursor: zoom-in;
    border-radius: 0px; /* El contenedor ya tiene border-radius */
}

.tira-miniaturas-instrucciones {
    display: flex;
    overflow-x: auto;   
    overflow-y: hidden;
    gap: 8px;
    padding: 8px 5px; 
    background-color: #f1f3f5; 
    border-radius: 6px;
    -webkit-overflow-scrolling: touch; 
}

.miniatura-instruccion {
    width: 70px;
    height: 70px;
    object-fit: cover; 
    border: 3px solid transparent; 
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease-out;
    flex-shrink: 0; 
    background-color: #e9ecef; 
}

.miniatura-instruccion:hover {
    border-color: #adb5bd; 
    transform: scale(1.03);
}

.miniatura-instruccion.activa {
    border-color: #007bff; 
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
    transform: scale(1.03);
}

/* Media Query para Escritorio */
@media (min-width: 769px) {
    .visor-instrucciones-container {
        flex-direction: row; 
        align-items: stretch; /* Que los hijos (tira y visor principal) se estiren a la altura del contenedor */
        height: 500px; /* Altura fija para el visor completo en escritorio */
        max-height: 550px; /* O una máxima si prefieres que no crezca más */
    }

    .tira-miniaturas-instrucciones {
        flex-direction: column; 
        overflow-y: auto;     
        overflow-x: hidden;
        width: 120px;       
        height: 100%; /* Ocupar la altura del .visor-instrucciones-container */
        order: -1; /* Miniaturas a la izquierda */
        padding: 8px 5px; /* Reajustar padding si es necesario */
        gap: 8px;
    }

    .miniatura-instruccion {
        width: 100%; 
        height: 85px; 
        /* margin-bottom ya no es necesario con gap y flex-direction: column */
    }

    .imagen-instruccion-principal-visor {
        flex-grow: 1; /* Ocupa el espacio restante */
        height: 100%; /* Ocupa la altura del .visor-instrucciones-container */
        width: auto;  /* El ancho será determinado por flex-grow */
        max-height: none; /* Quitar restricción de altura móvil */
    }

    /* #imgPrincipalInstruccion ya tiene width:100%, height:100%, object-fit:contain; 
       que debería ser suficiente para que se ajuste al .imagen-instruccion-principal-visor
       No es necesario redefinirla aquí a menos que quieras cambiar object-fit, etc.
       La clave es que .imagen-instruccion-principal-visor tenga las dimensiones correctas.
    */
}


@media (min-width: 769px) { .receta-layout-container { flex-direction: row; align-items: flex-start; } .receta-columna-principal { flex: 3; margin-right: 2rem; } .receta-columna-lateral { flex: 1; width: auto; position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; } .receta-imagen-principal { max-height: 550px; } .receta-variantes-navegacion h3 { text-align: left; } .variantes-contenedor { overflow-x: visible; flex-wrap: wrap; padding-bottom: 0; justify-content: flex-start; } .variante-item { width: 150px; height: auto; padding: 0.75rem; border: 2px solid #e0e0e0; position: relative; } .variante-item img { width: 100%; height: 150px; margin-bottom: 0; } .variante-item .variante-titulo { position: absolute; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; background-color: rgba(0,0,0,0.7); color: white; padding: 0.4rem; border-radius: 0 0 4px 4px; font-size: 0.85rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0s 0.3s linear, transform 0.3s ease; max-height: none; -webkit-line-clamp: initial; } .variante-item:hover { transform: scale(1.05); border-color: #007bff; z-index: 5; } .variante-item:hover .variante-titulo { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; } .variante-item.activa { border-color: #007bff; box-shadow: 0 0 10px rgba(0,123,255,0.3); transform: scale(1.02); } .variante-nav-btn { display: none !important; } .receta-contenedor { flex-direction: row; align-items: flex-start; } .receta-info { flex: 2; } .lista-compra { flex: 1; margin-top: 0; background: #f8f8f8; border: 1px solid #ccc; padding: 1rem; border-radius: 8px; } .btn-abrir-filtros, .panel-filtros, .filtro-overlay { display: none !important; } .filtros-escritorio { display: flex !important; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem; align-items: flex-start; background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,0.1); } }
@media (max-width: 768px) { main.contenido { margin: 0 auto !important; padding: 0 1rem; max-width: none !important; } .busqueda-hamburguesa { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; overflow: hidden; padding-left: 0rem; } .boton-hamburguesa { padding: 0.4rem; font-size: 1.5rem; background: none; border: none; color: #2c3e50; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin: 0; } .barra-busqueda { flex: 1; min-width: 0; margin: 0; } .barra-busqueda input { font-size: 0.95rem; min-width: 0; padding: 0.4rem; } .barra-busqueda button { padding: 0.4rem 0.5rem; } .btn-abrir-filtros { display: inline-flex !important; align-items: center; padding: 0.5rem 0.7rem; font-size: 0.9rem; flex-shrink: 0; white-space: nowrap; margin-left: 0; line-height: 1; } .menu-lateral { left: -220px; width: 220px; } .menu-lateral.abierto { left: 0; } .menu-lateral.abierto .btn-cerrar-menu { display: block; } .menu-lateral .logo-container { padding: 15px 20px 10px 20px; /* padding ajustado para móvil */ } .logo-sidebar { max-width: 100%; /* Que el logo ocupe menos si es necesario, o ajustar con JS */ margin-left: auto; margin-right: auto; margin-bottom: 10px; } .filtros-escritorio { display: none !important; } .form-receta { margin: 0 auto !important; padding: 1rem !important; } .form-receta input, .form-receta select, .form-receta textarea { width: 100%; max-width: 100%; box-sizing: border-box; } .form-grid { grid-template-columns: 1fr !important; } .filtros-form { flex-direction: column; } .grid-recetas { grid-template-columns: 1fr; gap: 1rem; } .modal { padding: 15px; } .modal-contenido { width: 100% !important; max-width: 100% !important; margin: 0; max-height: 85vh; box-sizing: border-box; } .modal .cerrar { top: 8px; right: 8px; font-size: 1.8rem; background: rgba(0,0,0,0.7); color: white; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .opciones-compartir { flex-direction: column; } .opciones-compartir a { font-size: 0.9rem; padding: 12px 8px; min-height: auto; justify-content: flex-start; text-align: left; word-break: break-word; } .receta-header h1 { font-size: 1.8rem; } .receta-columna-lateral { margin-top: 2rem; } .receta-imagen-principal-container { margin-left: -1rem; margin-right: -1rem; border-radius: 0; box-shadow: none; } .receta-imagen-principal { max-height: 300px; border-radius: 0; } .receta-variantes-navegacion.has-scroll .variante-nav-btn { display: block; }

.btn-volver-arriba {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  .btn-volver-arriba i[data-lucide="arrow-up"] {
    width: 20px;
    height: 20px;
  }
  
body.vista-receta-page .titulo-sobre-imagen {
    padding: 15px; /* Menos padding en móvil */
  }

  body.vista-receta-page .titulo-sobre-imagen h1 {
    font-size: 1.1rem; /* Título más pequeño en móvil, pero aún prominente */
  }

  /* Si el título se mostraba antes en .receta-titulo-despues-imagen en móvil, */
  /* y ahora queremos que el .titulo-sobre-imagen sea el principal: */
  body.vista-receta-page .receta-titulo-despues-imagen {
    /* Si la imagen existe, este div no se usará para el título principal */
    /* Si se usa como fallback (no hay imagen), el padding: 1rem; es el de la regla general */
    /* text-align: left; (ya lo tenías) */
  }
  body.vista-receta-page .receta-titulo-despues-imagen h1 {
    /* font-size: 1.6rem; (ya lo tenías) */
  }




body.vista-receta-page .boton-hamburguesa {
    display: inline-flex !important; /* Mostrarlo */
    position: fixed; /* Fijo al viewport */
    top: 8px;        /* Ajusta para alinear */
    left: 10px;       /* Ajusta para alinear */
    color: white;     /* Contraste sobre la imagen */
    background-color: rgba(0,0,0,0.35); /* Fondo */
    border-radius: 50%;
    /* width y height ya están definidos en la regla general .boton-hamburguesa */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1002; /* Asegurar que esté por encima de .vr-acciones-flotantes-derecha si es necesario */
  }
  /* Ocultar la hamburguesa si el menú lateral está abierto */
  body.vista-receta-page.body-no-scroll .boton-hamburguesa {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
  }

  /* Mostrar y posicionar la barra de acciones de la derecha en ver_receta.php móvil */
  body.vista-receta-page .vr-acciones-flotantes-derecha {
    display: flex; /* Mostrarla */
    position: fixed;
    top: 8px;    /* Alinear con la hamburguesa */
    right: 10px;
    z-index: 1001; /* Mismo nivel o ligeramente por debajo de la hamburguesa */
    height: auto; /* La altura la darán los iconos */
  }

  /* La imagen principal ahora comienza desde el borde superior de SU CONTENEDOR */
  /* El margin-top se aplica al contenedor de la imagen para empujarlo debajo de la barra fija */
  body.vista-receta-page .receta-imagen-principal-container {
    margin-top: 0; /* El padding-top del .receta-layout-container ya hace el espacio */
    margin-left: -1rem;  /* Ocupar todo el ancho si main.contenido tiene padding de 1rem */
    margin-right: -1rem;
    border-radius: 0;
    box-shadow: none;
    height: 38vh; /* Reducir un poco para dejar más espacio al título si la barra ocupa 50px */
    min-height: 250px;
  }
  body.vista-receta-page .receta-imagen-principal {
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* Título de la receta en móvil */
  body.vista-receta-page .receta-titulo-despues-imagen {
    text-align: left;
    padding: 1rem; /* Padding lateral para el título */
  }
  body.vista-receta-page .receta-titulo-despues-imagen h1 {
    font-size: 1.6rem;
  }

  /* Ocultar el .receta-header original de ver_receta.php (el que tenía el título y botón compartir) */
  body.vista-receta-page .receta-header {
    display: none !important;
  }

}
@media print { .no-print, .no-print * { display: none !important; visibility: hidden !important; } .menu-lateral, .boton-hamburguesa, .busqueda-hamburguesa, .btn-cerrar-menu, .icono-nota, .boton-mas, .controles-impresion, .icono-eliminar, .acciones-imprimir, .menu-acciones, .acciones-receta, .bloque-vacio, .form-vacio, .circulos-etiquetas, .circulos, .icono-menu, button[onclick="window.print()"], .eventos-especiales, .filtros-escritorio, .panel-filtros, .filtro-overlay, .btn-abrir-filtros, .btn-cerrar-filtros, .acciones-filtros, .semana-actual-info, .eliminar-imagen, .btn-opciones, .opciones-lista, .btn-add-ingrediente, .sugerencias, .btn-calendario, .btn-editar, .btn-eliminar, .btn-importar, .logo-container { display: none !important; } html, body { background-color: #fff !important; color: #000 !important; height: auto; /* Cambiado para impresión */ display: block; /* Cambiado para impresión */ } main.contenido { margin: 0 !important; /* Cambiado para impresión */ padding: 1cm !important; max-width: 100% !important; box-shadow: none !important; transition: none !important; } .grid-recetas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 0.5cm !important; page-break-inside: avoid; } .tarjeta-receta { page-break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; padding-bottom: 5px; } .tarjeta-receta .imagen-receta { height: auto !important; max-height: 100px; border-bottom: 1px solid #eee; } .tarjeta-receta .overlay-titulo { position: static !important; background: none !important; padding: 5px !important; } .tarjeta-receta .overlay-titulo h2 { color: #000 !important; font-size: 10pt !important; text-align: center; font-weight: bold; } .grid-menu { display: grid !important; gap: 0.2cm !important; grid-template-columns: repeat(7, 1fr) !important; max-width: 100% !important; page-break-inside: avoid; border: 1px solid #999; } .columna-dia { padding: 0.2cm !important; margin: 0 !important; text-align: center !important; border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; display: flex; flex-direction: column; justify-content: flex-start; } .columna-dia h4 { font-size: 9pt !important; margin-bottom: 0.3cm !important; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 0.1cm; flex-shrink: 0; } .bloque-receta { font-size: 8pt !important; display: block !important; text-align: center !important; margin: 0.2cm 0 !important; padding: 0.2cm !important; border: 1px solid #eee !important; page-break-inside: avoid; background: #fff !important; box-shadow: none !important; min-height: auto !important; flex-shrink: 0; } .bloque-receta .miniatura-receta { display: block !important; height: 60px !important; margin-bottom: 3px; } .bloque-receta .miniatura-receta img { max-height: 100%; object-fit: cover; } .bloque-receta .titulo-receta { margin-top: 0 !important; font-weight: normal !important; line-height: 1.2; } .separador-comidas { font-size: 7pt !important; font-style: italic; color: #666; margin: 0.3cm 0 0.2cm 0; padding-top: 0.1cm; border-top: 1px dotted #ccc; flex-shrink: 0; } }