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

#modal-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-loader div {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 200px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#modal-loader .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #e91e63;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: auto;
}

#modal-loader p {
    color: #e91e63;
    font-weight: bold;
    margin-top: 10px;
}

/* =====================================================
   Estilos Completos para Sección de Cámara, Modal y Botones con Íconos
   ===================================================== */

/* ---------- Sección de Cámara (Versión Mobile) ---------- */

/* Contenedor principal de la sección de cámara, ocupa toda la altura de la pantalla */
.camera-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: 100vh;               /* Ocupa el 100% de la altura del viewport */
    background-color: #f7f0e6;     /* Fondo suave, acorde a una paleta cálida */
  }
  
  /* Botón para abrir la cámara: centrado y con diseño táctil */
  #openCameraButton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Se personaliza en el bloque de estilos específicos */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    margin: 0 auto;
    padding: 0.5rem;
  }
  
  /* Imagen del botón: redimensionada para verse cómoda y moderna */
  #openCameraButton img {
    width: 120px;               /* Tamaño adecuado para pantallas móviles */
    height: 120px;
    object-fit: cover;          /* Conserva la proporción sin deformar la imagen */
    border-radius: 50%;         /* Forma circular para dar un aspecto moderno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil para resaltar */
    transition: transform 0.3s ease; /* Efecto de interacción */
  }
  
  /* Efecto visual al interactuar (hover o active) */
  #openCameraButton:hover img,
  #openCameraButton:active img {
    transform: scale(1.1);
  }
  
  /* Contenedor para la previsualización de la foto capturada */
  .photo-preview {
    margin-top: 2rem;
    width: 90%;
    max-width: 300px;           /* Limita el tamaño para evitar desbordes */
    height: 300px;
    border: 1px solid #ddd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;           /* Oculta contenido que exceda el contenedor */
    background: #fff;
  }
  
  /* ---------- Modal: Visualización Adaptada de la Imagen ---------- */
  
  /* Estilos básicos para el modal en dispositivos móviles */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;              /* Centra el contenido del modal */
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);  /* Fondo semitransparente */
    z-index: 9999;
  }
  
  /* Contenido del modal, adaptado a móviles */
  .modal-content {
    width: 100%;
    max-width: 90%;             /* Ancho máximo para que se vea correctamente en móviles */
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  /* Contenedor de la previsualización en el modal */
  .modal-content .photo-preview {
    width: 100%;
    max-height: 400px;          /* Altura máxima para la imagen en el modal */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;           /* Evita scroll y recortes indeseados */
  }
  
  /* Imagen dentro del modal: se escala para mostrarla completa sin recortes */
  .modal-content .photo-preview img {
    width: 100%;
    height: auto;
    object-fit: contain;        /* Muestra la imagen completa, adaptándose al contenedor */
  }
  
  /* ---------- Modal: Imagen Completa y Botón de Cierre Rediseñado ---------- */

/* ---------- Modal General ---------- */
#photoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 3, 0.959); /* Fondo semitransparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9999;
  }
  
  /* ---------- Contenedor de la Imagen (Photo Preview) ---------- */
  .photo-preview {
    position: relative;
    width: 100%;
    max-width: 90%;         /* Limita el ancho en dispositivos móviles */
    max-height: 80vh;       /* Limita la altura para no exceder el viewport */
    border: 2px solid #fff; /* Borde blanco */
    overflow: hidden;
  }
  
  /* La imagen ocupará todo el contenedor */
  .photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Cubre todo el contenedor sin distorsión */
    display: block;
  }
  
  /* ---------- Botón de Cierre ---------- */
  /* Se posiciona en la esquina superior derecha de la imagen */
  .close {
    position: relative;
 
    background: rgba(255,255,255,0.8); /* Fondo blanco semitransparente para mayor legibilidad */
    color: #333;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 100;
  }
  
  /* ---------- Contenedor de Botones (abajo de la imagen) ---------- */
  .modal-buttons {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Espaciado entre botones */
  }
  
  .btn-save {
    background-color: #3D7C60 !important;
    color: #fff !important;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease;
  }
  
  .btn-save:hover {
    background-color: #366B55 !important; /* Variante ligeramente más oscura */
  }
  
  .btn-share {
    background-color: #3C5A80 !important;
    color: #fff !important;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease;
  }
  
  .btn-share:hover {
    background-color: #344F72 !important;
  }
  
  .btn-cancel {
    background-color: #7A4444 !important;
    color: #fff !important;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease;
  }
  
  .btn-cancel:hover {
    background-color: #6F3D3D !important;
  }
  
  
  /* Estilo para cada botón (solo iconos, forma circular) */
  .modal-buttons button {
    
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .modal-buttons button:hover,
  .modal-buttons button:active {
    background-color: #000000;
    transform: scale(1.05);
  }
  
  .modal-buttons button i {
    font-size: 1.5rem;
    color: #fff;
  }