/* --- 1. Variables Globales y Reseteo --- */
:root {
    --color-background: #000000;
    --color-surface: #1C1C1E;
    --color-primary: #FFFFFF;
    --color-secondary-text: #8E8E93;
    --color-like: #00C853;
    --color-dislike: #FF3B30;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --border-radius-img: 20px;
    --border-radius-controls: 50px;
    --transition-speed: 0.4s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- 2. Layout Principal --- */
body {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
header {
    padding: 12px 20px;
    flex-shrink: 0;
    text-align: center;
    position: relative;
    z-index: 10;
}
.logo { font-size: 1.5rem; font-weight: 700; }
.logo span { color: var(--color-dislike); }
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-height: 0;
}

/* --- 3. Viewport de la Galería y Simetría de Imagen --- */
.gallery-viewport {
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.image-wrapper {
    width: 100%;
    height: 100%;
    max-width: 450px;
    aspect-ratio: 3 / 4.5;
    border-radius: var(--border-radius-img);
    overflow: hidden;
    background-color: var(--color-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}
#main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#main-image.loading { opacity: 0; }

/* --- 4. Controles Superpuestos --- */
.nav-button, .action-bar, .show-ui-button {
    position: absolute;
    z-index: 5;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.nav-button {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.nav-button:hover { transform: translateY(-50%) scale(1.1); }
.nav-button.left { left: 16px; }
.nav-button.right { right: 16px; }
.nav-button i { color: white; font-size: 20px; line-height: 1; }

.action-bar {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(28, 28, 30, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 8px;
    border-radius: var(--border-radius-controls);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: calc(100% - 32px);
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.action-btn {
    background: none; border: none; cursor: pointer; padding: 8px;
    border-radius: 50%; display: flex; transition: transform 0.2s;
}
.action-btn:active { transform: scale(0.9); }
.action-btn i {
    font-size: 24px; color: var(--color-secondary-text);
    transition: color 0.2s, transform 0.2s;
}
.action-btn:hover i { color: var(--color-primary); }
.action-btn#like-btn.active i { color: var(--color-like); transform: scale(1.1); }
.action-btn#dislike-btn.active i { color: var(--color-dislike); transform: scale(1.1); }

.rating-display {
    display: flex; align-items: center; gap: 8px;
    color: var(--color-primary); font-size: 1rem; font-weight: 600;
}
.rating-display i { font-size: 18px; color: var(--color-dislike); }

/* --- 5. Lógica de Visibilidad de la UI --- */
.show-ui-button {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(28, 28, 30, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.show-ui-button i { font-size: 20px; color: var(--color-primary); }

/* ESTADO POR DEFECTO: Controles principales visibles, botón 'mostrar' oculto */
.action-bar, .nav-button { opacity: 1; }
.show-ui-button { opacity: 0; pointer-events: none; transform: scale(0.5); }

/* ESTADO OCULTO: Controles principales ocultos, botón 'mostrar' visible */
.gallery-viewport.ui-hidden .action-bar,
.gallery-viewport.ui-hidden .nav-button {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}
.gallery-viewport.ui-hidden .nav-button {
    transform: translateY(-50%) scale(0.5);
}
.gallery-viewport.ui-hidden .show-ui-button {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* --- 6. Media Query para Pantallas Grandes --- */
@media (min-width: 768px) {
    main { padding: 24px; padding-top: 0; }
    .image-wrapper { max-width: 500px; aspect-ratio: 3 / 4; }
    .nav-button.left { left: 32px; }
    .nav-button.right { right: 32px; }
    .action-bar, .show-ui-button { bottom: 24px; }
    .show-ui-button { right: 32px; }
}