:root {
  --color-principal: #6F4515;
  --color-secundario: #FFD95A;
  --color-acento: #895B1E;

  --fondo-principal: #FFF8EE;
  --fondo-oscuro: #1C1C1C;
  --fondo-menu: #4A2C16;
  --fondo-footer: rgba(74, 44, 22, 0.8);
  --fondo-formulario: #F2E8D5; /* El "blanco oscuro" para el form */
  --fondo-card: #FFFFFF;       /* Blanco puro para las cards */

  --texto-principal: #2E1B0E;
  --texto-claro: #FFFFFF;
  --texto-nav: #DBD8AE;
  --texto-muted: #A8A094;

  --borde-suave: #E6D3A3;
  --hover-boton: #E0B94F;
  --focus-color: #994636;

  --sombra-navbar: 0 4px 12px rgba(0, 0, 0, 0.5);
  --sombra-suave: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =========================
   MODAL BASE
========================= */

.modal-container{
    z-index: 100;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index:9999;
    transition: opacity 200ms ease;
}

.modal-container.show{
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}


/* =========================
   CAJA DEL MODAL
========================= */

.container-modal{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 90%;
    max-width: 480px;

    max-height: 90vh; /* 🔥 clave */
    overflow-y: auto; /* 🔥 clave */


    z-index: 200;
    background-color: var(--fondo-card);
    border: 1px solid var(--borde-suave);
    border-top: 4px solid var(--color-secundario);

    box-shadow: 0 25px 60px rgba(0,0,0,0.2);

    padding: 24px;
    border-radius: 14px;

    transform: translateY(-40px) scale(0.96);
    opacity: 0;

    transition: 
        transform 220ms ease,
        opacity 220ms ease;
}

.container-modal.show{
    transform: translateY(0) scale(1);
    opacity: 1;
}

.container-modal.modal-imagen {
    max-width: 700px;
}


/* =========================
   CONTENIDO
========================= */

.contenido-modal {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* =========================
   BOTÓN CERRAR
========================= */

.close{
    position: absolute;
    top: 10px;
    right: 12px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    cursor: pointer;

    color: var(--color-secundario);
    background-color: transparent;

    transition: all 150ms ease;
}

.close:hover{
    background-color: var(--fondo-formulario);
    color: var(--texto-principal);
}



.img-container{
    width: 100%;
    max-width: 100%;
    margin: auto;

    background-color: var(--color-principal);
    padding: 8px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* cuadrado (default) */
.img-container.square {
    aspect-ratio: 1 / 1;
    max-width: 250px;
}

/* 🔥 para platos (recomendado) */
.img-container.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/* opcional vertical */
.img-container.ratio-4-5 {
    aspect-ratio: 4 / 5;
}

.img-container img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 importante para cropper */
    border-radius: 10px;
}

/* =========================
   RESPONSIVE
========================= */

@media (width <= 678px) {
    .container-modal{
        max-width: 340px;
        padding: 18px;
        border-radius: 12px;
    }
}