/* ==========================================================================
   RETROCAM PWA - SISTEMA DE DISEÑO VISUAL v1.1
   ========================================================================== */
:root {
  --background-main: #121212; --background-secondary: #1E1E1E; --accent-color: #00ffff;
  --text-primary: #EAEAEA; --text-secondary: #A0A0A0; --capture-button-color: #FFFFFF;
  --video-record-color: #FF453A; --ui-transition-fast: 0.2s ease-out;
  --ui-transition-slow: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  --z-index-viewfinder: 1; --z-index-ui-bars: 10; --z-index-focus: 15; --z-index-flash: 99; --z-index-modal: 100;
  --safe-area-top: env(safe-area-inset-top); --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left); --safe-area-right: env(safe-area-inset-right);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--background-main); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; overflow: hidden; height: 100vh; width: 100vw; position: fixed; }
#app-container { height: 100%; width: 100%; position: relative; background-color: #000; }
#viewfinder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-index-viewfinder); display: flex; justify-content: center; align-items: center; overflow: hidden; }
#camera-feed { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ui-transition-fast); }
#snapshot-canvas { display: none; }
#top-bar, #controls-bar, #side-controls { position: absolute; z-index: var(--z-index-ui-bars); display: flex; align-items: center; pointer-events: none; }
#top-bar > *, #controls-bar > *, #side-controls > * { pointer-events: auto; }
#top-bar { top: 0; left: 0; right: 0; padding: 1rem; padding-top: calc(1rem + var(--safe-area-top)); justify-content: space-between; background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); }
#controls-bar { bottom: 0; left: 0; right: 0; padding: 1rem; padding-bottom: calc(1rem + var(--safe-area-bottom)); justify-content: space-around; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); }
#side-controls { top: 50%; right: 0; transform: translateY(-50%); flex-direction: column; padding: 1rem; padding-right: calc(1rem + var(--safe-area-right)); gap: 1.5rem; }
.icon-button, button, select { background: none; border: none; color: var(--text-primary); cursor: pointer; font-size: 1rem; padding: 0.5rem; }
.icon-button { font-size: 1.5rem; border-radius: 50%; background-color: rgba(0,0,0,0.3); transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast); }
.icon-button:hover { background-color: rgba(255, 255, 255, 0.2); }
.icon-button.active { color: var(--accent-color); }
#preset-selector { background-color: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); padding: 0.5em 1em; border-radius: 20px; }
.control-group-main { display: flex; flex-direction: column; align-items: center; }
#capture-button { width: 70px; height: 70px; background-color: var(--capture-button-color); border-radius: 50%; padding: 4px; border: 4px solid transparent; transition: all var(--ui-transition-slow); box-shadow: 0 0 15px rgba(0,0,0,0.3); }
#capture-button:active { transform: scale(0.9); }
.shutter-ring { width: 100%; height: 100%; border: 2px solid var(--background-main); border-radius: 50%; transition: all var(--ui-transition-slow); }
#mode-selector { margin-top: 1rem; display: flex; gap: 1rem; background-color: rgba(0,0,0,0.5); padding: 0.3rem; border-radius: 20px; }
.mode-option { padding: 0.3rem 0.8rem; border-radius: 15px; font-weight: bold; font-size: 0.8rem; color: var(--text-secondary); transition: all var(--ui-transition-fast); }
.mode-option.active { background-color: var(--accent-color); color: var(--background-main); }
#zoom-slider { writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 8px; height: 120px; padding: 0 5px; }
.is-recording #capture-button { background-color: var(--video-record-color); border-color: var(--video-record-color); animation: pulse 1.5s infinite; }
.is-recording .shutter-ring { background-color: var(--video-record-color); border-radius: 20%; transform: scale(0.6); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); } }
#flash-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: white; opacity: 0; pointer-events: none; z-index: var(--z-index-flash); }
#flash-overlay.flash { animation: flash-animation 0.3s ease-out; }
@keyframes flash-animation { from { opacity: 0.8; } to { opacity: 0; } }
#preview-modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: var(--z-index-modal); display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity var(--ui-transition-fast); }
#preview-modal.modal-hidden { opacity: 0; pointer-events: none; }
.preview-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.preview-media { max-width: 90vw; max-height: 70vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.preview-media.hidden { display: none; }
.preview-actions { display: flex; gap: 1rem; }
.button, .button-secondary { padding: 0.8rem 1.5rem; border-radius: 25px; font-weight: bold; text-decoration: none; font-size: 1rem; }
.button { background-color: var(--accent-color); color: var(--background-main); }
.button-secondary { background-color: var(--background-secondary); color: var(--text-primary); }
#focus-ring { position: absolute; width: 80px; height: 80px; border: 2px solid var(--accent-color); border-radius: 50%; z-index: var(--z-index-focus); opacity: 0; transform: scale(1.5); transition: opacity 0.3s ease-out, transform 0.3s ease-out; pointer-events: none; }
#focus-ring.focus-active { opacity: 1; transform: scale(1); }
#pro-controls { display: flex; gap: 1rem; background-color: rgba(0,0,0,0.5); padding: 0.5rem; border-radius: 20px; transition: opacity 0.3s, transform 0.3s; }
.pro-controls-hidden { opacity: 0; pointer-events: none; transform: translateY(-20px); }