/* ====================================================
   ESTILOS BASE
==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, #map { height: 100%; margin: 0; padding: 0; }

:root {
    --control-grid-height: 50vh;
    --color-active: #4CAF50; 
    --color-inactive-bg: #f9f9f9; 
    --color-border: #BCBCBC;
    --color-slot-bg: #eee;
    --mode-media-bg: rgba(255, 255, 255, 0.8);   
    --mode-media-text: #333;                   
    --mode-play-bg: rgba(40, 40, 40, 0.7);      
    --mode-play-text: #fff;                    
    --thumb-media-color: #FF00E0; 
    --thumb-play-color: #00E0FF; 
    --switch-text-active-media: #EEEEEE;     
    --switch-text-inactive-media: #777777;      
    --switch-text-active-play: #333333;      
    --switch-text-inactive-play: #777777;     
    --color-muted-dark: #AAAAAA; 
}

body {
    margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
    min-height: 100vh; transition: background-color 0.5s; touch-action: manipulation;
}

#search-wrap {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)); pointer-events: none; transition: opacity .4s ease, transform .4s ease;
}
#search-wrap.hidden { opacity: 0; transform: translateY(-40px); pointer-events: none; }
#search-container { width: min(80vw, 560px); min-width: 240px; pointer-events: auto; position: relative; display: flex; justify-content: center; }
#pac-input { width: 100%; padding: 12px 46px 12px 16px; border-radius: 24px; border: none; background: #fff; font-size: 17px; box-shadow: 0 2px 8px rgba(0,0,0,.2); outline: none; }
#clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; font-size: 20px; border-radius: 50%; border: 1px solid #666; background: #fff; color: #666; line-height: 28px; cursor: pointer; display: none; }

#grid-wrapper {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80vw, calc(100vh - 200px)); 
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 10;
  max-height: calc(100vh - 40px); overflow: visible; transition: top 0.6s ease, transform 0.6s ease; pointer-events: none;
}
#grid-wrapper.locked { top: 40px; transform: translateX(-50%); }

#center-rect {
  position: relative; width: 100%; aspect-ratio: 4/3; border: 3px solid rgba(255,255,255,.8); box-shadow: 0 0 8px rgba(0,0,0,.5);
  transition: border-color .3s ease; pointer-events: none; background-color: transparent; overflow: hidden; 
}
#center-rect.active { border-color: #00E0FF; } 

#color-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; z-index: 1; pointer-events: none;
}
.grid-cell-color { width: 100%; height: 100%; transition: background-color 0.1s ease; /* Transición más rápida para video */ }

#editor-viewport {
    position: absolute; inset: 0; z-index: 5; overflow: hidden; opacity: 0; pointer-events: none; 
    touch-action: none; cursor: grab;
}
#editor-viewport.active { opacity: 1; pointer-events: auto; }
#editor-viewport.dragging { cursor: grabbing; }

#editor-image, #editor-video {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center;
    max-width: none; max-height: none; pointer-events: none;
}

.grid-line { position: absolute; background-color: rgba(255,255,255,.55); pointer-events: none; z-index: 10; transition: opacity .2s; }

#grid-controls {
  margin-top: 12px; width: 100%; height: 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(40,40,40,0.42); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  padding: 0 14px; z-index: 10000; transition: opacity .3s ease; pointer-events: auto;
}
@media (max-height: 680px) { #grid-wrapper { top: 20px; transform: translateX(-50%); } #grid-controls { margin-top: auto; } }
#toggleGridBtn, #lockBtn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; }
#toggleGridBtn svg, #lockBtn svg { width: 26px; height: 26px; fill: #fff; }
#lockBtn:active { transform: scale(0.9); }
.grid-range-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; max-width: 180px; }
#gridSlider { flex: 1; min-width: 100px; margin: 0; accent-color: #fff; transition: opacity 0.3s; }
#gridLabel  { color: #fff; font: 14px system-ui; text-align: left; width: 48px; display: inline-block; }
#gridSlider:disabled, #toggleGridBtn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(100%); }

#media-browser-container {
    position: fixed; bottom: 0; left: 0; width: 100%; max-height: 45vh; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px); z-index: 9000; overflow-y: auto; 
    transform: translateY(100%); transition: transform 0.5s ease-out, background-color 0.3s ease-in-out; pointer-events: none; 
    border-radius: 22px 22px 0 0;
}
.candado-cerrado #media-browser-container { transform: translateY(0); pointer-events: auto; }

.mode-media #media-browser-container { background: var(--mode-media-bg); }
.mode-media #media-browser-content { color: var(--mode-media-text); }
.mode-media .media-slot { border-color: var(--color-border); background-color: transparent; color: var(--color-muted-dark); }

.mode-play #media-browser-container { background: var(--mode-play-bg); }
.mode-play #media-browser-content { color: var(--mode-play-text); }
.mode-play .media-slot { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.1); color: var(--color-muted-dark); }
.mode-play .media-slot.filled { border-color: rgba(200, 200, 200, 0.6); }
.mode-play .media-slot.empty { opacity: 0.5; cursor: not-allowed; border-style: solid; }

#media-browser-content { padding: 15px 0; margin: 0 auto; width: min(80vw, calc(100vh - 200px)); }

.mode-switch-slider {
    position: relative; display: flex; justify-content: space-between; align-items: center;
    height: 44px; padding: 4px; margin-bottom: 20px; border-radius: 22px;
    background-color: var(--color-inactive-bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); user-select: none;
}
.mode-play .mode-switch-slider { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9); transition: box-shadow 0.3s ease; }
.mode-switch-slider input[type="radio"] { display: none; }
.mode-label { flex: 1; z-index: 2; text-align: center; line-height: 36px; padding: 0 10px; cursor: pointer; transition: color 0.3s ease; font-weight: 600; }
.mode-label i { margin-right: 5px; }

.mode-media input[value="media"]:checked ~ .mode-label[for="mode-media"] { color: var(--switch-text-active-media); }
.mode-media input[value="play"]:not(:checked) ~ .mode-label[for="mode-play"] { color: var(--switch-text-inactive-play); }
.mode-play input[value="media"]:not(:checked) ~ .mode-label[for="mode-media"] { color: var(--switch-text-inactive-media); }
.mode-play input[value="play"]:checked ~ .mode-label[for="mode-play"] { color: var(--switch-text-active-play); }

.slider-thumb {
    position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: calc(50% - 4px);
    border-radius: 18px; z-index: 1; transition: transform 0.3s ease, background-color 0.3s ease; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); cursor: pointer;
}
.mode-media input[value="media"]:checked ~ .slider-thumb { transform: translateX(0); background-color: var(--thumb-media-color); }
.mode-play input[value="play"]:checked ~ .slider-thumb { transform: translateX(100%); background-color: var(--thumb-play-color); }

.media-button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.media-slot {
    width: 100%; padding-bottom: 100%; height: 0; position: relative; border: 2px dashed var(--color-border); 
    border-radius: 10px; background-color: transparent; cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.3s, border-color 0.3s, opacity 0.3s; overflow: hidden; 
    display: flex; align-items: center; justify-content: center; font-size: 2.5em; color: var(--color-muted-dark);
}
.media-slot.empty::after { content: '+'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mode-play .media-slot.empty::after { content: none; }
/* Para el video usamos un icono superpuesto si queremos, o solo el fondo */
.media-slot.filled { border-style: solid; background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }

.slot-actions {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30%; display: none; width: 100%;
    display: flex; justify-content: space-between; align-items: stretch; background: none; padding: 0; 
    overflow: hidden; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.mode-media .media-slot.filled .slot-actions { display: flex; } 
.slot-actions div { flex-grow: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 0.9em; }
.action-edit:hover { background-color: rgba(0,0,0,0.2); }
.action-delete { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.slot-actions i { color: #FFFFFF; font-size: 0.6em; text-shadow: 0 0 5px rgba(0, 0, 0, 0.9); }

@media (min-width: 768px) {
    .media-button-grid { gap: 20px; }
    #media-browser-container { max-height: 50vh; }
}