/**
 * ============================================================================
 * TILUCHI ARCHITECTS V4 - STYLE.CSS (FINAL EJECUTABLE)
 * ============================================================================
 */

/* ==========================================
   1. VARIABLES Y RESET GLOBAL
   ========================================== */
:root {
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-texto-principal: #f4f4f4;
    --color-texto-secundario: #a0a0a0;
    --color-acento: #d4af37;
    --color-admin-alerta: #ff3366;
    --color-admin-bg: rgba(255, 51, 102, 0.1);

    --fuente-principal: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --espaciado-x: 4vw;
    --espaciado-seccion: 10rem;

    --z-base: 1;
    --z-flotante: 10;
    --z-header: 1000;
    --z-admin-ui: 8000;
    --z-modal: 9000;
    --z-preloader: 10000;

    /* Fase 3b (documento maestro, Partes 5 y 11): la herramienta de admin
       debe verse neutra, clara y minimalista tipo Figma/Canva — a propósito
       distinta del negro/dorado de la web pública. */
    --admin-bg: #ffffff;
    --admin-bg-suave: #f6f6f6;
    --admin-borde: #e4e4e4;
    --admin-texto: #1c1c1c;
    --admin-texto-secundario: #767676;
    --admin-hover: #ececec;
    --admin-activo: #dedede;
    --admin-peligro: #c0392b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

body {
    background-color: var(--color-bg);
    color: var(--color-texto-principal);
    font-family: var(--fuente-principal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ==========================================
   1b. MODO DÍA (claro) — alterna con el botón del header
   ========================================== */
/* Por defecto el sitio público es oscuro (--color-bg negro). Con
   body.modo-dia activo se invierten los mismos tokens de color que ya usa
   todo el sitio, así que la mayoría de los componentes se adaptan solos.
   Solo un puñado de colores estaban escritos "a mano" pensando siempre en
   fondo oscuro (bordes/sombras translúcidas de elementos públicos); esos
   se corrigen puntualmente acá abajo. El modo admin no se ve afectado por
   este toggle — usa siempre su propia paleta clara fija. */
body.modo-dia {
    --color-bg: #f6f4f1;
    --color-surface: #ffffff;
    --color-texto-principal: #171717;
    --color-texto-secundario: #63605c;
}
body.modo-dia .btn-slider { border-color: rgba(0, 0, 0, 0.25); color: #171717; }
body.modo-dia #iframe-container { border-color: rgba(0, 0, 0, 0.12); }
body.modo-dia .escudo-multimedia { background: rgba(255, 255, 255, 0.35); }
body.modo-dia .texto-escudo { background: rgba(255, 255, 255, 0.92); color: #171717; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
body.modo-dia .objeto-flotante-libre { box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-acento);
}

/* ==========================================
   2. PRELOADER CINEMATOGRÁFICO
   ========================================== */
#preloader-pantalla {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg);
    z-index: var(--z-preloader);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#preloader-pantalla.oculto {
    opacity: 0;
    pointer-events: none;
}

.preloader-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 200px;
}

.svg-animado {
    width: 80px;
    height: 80px;
    color: var(--color-texto-principal);
    animation: rotacionLenta 4s linear infinite;
}

.barra-progreso {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

#progreso-fill {
    height: 100%;
    width: 0%;
    background: var(--color-texto-principal);
    animation: cargaProgreso 2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes rotacionLenta { 100% { transform: rotate(360deg); } }
@keyframes cargaProgreso { 100% { width: 100%; } }

/* ==========================================
   3. HEADER MINIMALISTA
   ========================================== */
#header-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem var(--espaciado-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-header);
    mix-blend-mode: difference;
    color: #fff;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

/* El tamaño real lo controla este contenedor (ajustable desde el panel de
   admin al editar el logo) — el SVG de adentro, sea el original o uno
   subido por el admin, siempre se estira al 100% de este recuadro. Así
   el tamaño funciona igual sin importar qué SVG esté cargado. */
.logo-tiluchi-header {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: block;
}
.logo-tiluchi-header svg {
    width: 100%;
    height: 100%;
    display: block;
}

.svg-estatico {
    width: 30px;
    height: 30px;
}

#titulo-marca {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-visitante {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-visitante ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.btn-modo-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.btn-modo-dia:hover { transform: scale(1.1); }
.btn-modo-dia svg { width: 55%; height: 55%; }
.btn-modo-dia .icono-luna { display: none; }
body.modo-dia .btn-modo-dia .icono-sol { display: none; }
body.modo-dia .btn-modo-dia .icono-luna { display: block; }

/* El toggle es para visitantes: mientras se edita como admin, el sitio
   público mantiene su tema fijo y el botón se oculta para no interferir. */
body.modo-admin-activo .btn-modo-dia { display: none; }

/* ==========================================
   4. HERO PRINCIPAL & SLIDER
   ========================================== */
#hero-principal {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero-header {
    position: absolute;
    z-index: var(--z-flotante);
    pointer-events: none;
}

/* El visitante necesita que los clics atraviesen el título hasta el
   slider de abajo, pero eso también le bloqueaba al admin poder
   seleccionar/editar el título del hero. Se reactiva solo en modo admin. */
body.modo-admin-activo .hero-header {
    pointer-events: auto;
}

.titulo-hero {
    font-size: clamp(3rem, 8vw, 10rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    mix-blend-mode: difference;
    color: #fff;
    text-align: center;
}

#slider-portadas-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#slider-track-principal {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: none; /* Punto 4: un slide inactivo (invisible) nunca debe poder "robarse" el click de otro por apilamiento */
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-item.activo {
    opacity: 1;
    pointer-events: auto;
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}

/* Fase 3a: estado vacío honesto del slider, nunca una imagen de relleno. */
.slide-item.slide-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}

.slide-item.slide-vacio p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.slider-controles {
    position: absolute;
    bottom: 3rem;
    right: var(--espaciado-x);
    display: flex;
    gap: 1rem;
    z-index: var(--z-flotante);
}

.btn-slider {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.btn-slider:hover {
    background: #fff;
    color: #000;
}

/* ==========================================
   5. SECCIÓN PROYECTOS (CINTA-TRACK)
   ========================================== */
#contenedor-proyectos {
    padding-top: var(--espaciado-seccion);
}

/* Estas clases (.fila-proyecto, .metadata-proyecto, etc.) son inyectadas por admin.js 
   al leer Firestore o al crear un nuevo proyecto */
.fila-proyecto {
    scroll-margin-top: 120px;
}

.metadata-proyecto {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nombre-proyecto {
    font-size: clamp(1.6rem, 2.4vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fichas {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
    margin-bottom: 1.25rem;
}

.ficha-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

.ficha-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ficha-valor {
    color: var(--color-texto-principal);
    text-transform: none;
    letter-spacing: 0.02em;
}

.descripcion-proyecto {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-texto-secundario);
}

/* ==========================================
   6. CINTURÓN ÚNICO DEL PROYECTO (Corrección Parte 4)
   ========================================== */
/* Antes: .cinta-track (galería, scroll-snap) y .lienzo-autocad (canvas
   libre) eran dos contenedores apilados. Parte 4 del documento maestro es
   explícita: deben ser UN SOLO cinturón horizontal donde imágenes y
   textos conviven, cada uno con su propia posición/tamaño/capa, y el
   visitante lo explora arrastrando con física real (clic + arrastrar,
   inercia, límites — nunca flechas ni botones). */
.cinturon-wrapper {
    position: relative;
    transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1), height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cinturon-proyecto {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    background: transparent; /* Punto 4/8: sin grilla visible para el visitante */
}
.cinturon-proyecto::-webkit-scrollbar { display: none; }
.cinturon-proyecto.cinturon-arrastrando { cursor: grabbing; }

/* La cuadrícula solo ayuda a componer en modo administrador — nunca es
   parte de lo que ve el público (Puntos 4 y 8 del documento maestro). */
body.modo-admin-activo .cinturon-proyecto {
    background:
        repeating-linear-gradient(rgba(255,255,255,0.025) 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 100%);
    background-size: 40px 40px;
}

/* ==========================================
   6a. ESTADOS REDUCIDO / EXPLORANDO (Corrección visual definitiva)
   ========================================== */
/* Antes: .estado-explorando usaba position:fixed + fondo oscurecido — una
   ventana flotante encima de la página, justo lo que el documento maestro
   prohíbe ("no debe convertirse en una ventana flotante", "no debe
   bloquear la página"). Ahora ambos estados son la MISMA fila en flujo
   normal: solo cambian tamaños/opacidades con transición CSS, así que
   scrollear la página mueve el proyecto con total naturalidad. */
.fila-proyecto {
    display: flex;
    align-items: center;
    justify-content: center; /* centra el conjunto título+imagen como un bloque, en vez de pegar el título al borde izquierdo */
    gap: 3rem;
    padding: 0 var(--espaciado-x);
    transition: min-height 0.5s ease, gap 0.5s ease;
}

.fila-proyecto .metadata-proyecto {
    flex: 0 0 260px;
    text-align: left;
    transition: flex-basis 0.5s ease;
}

.fila-proyecto .cinturon-wrapper {
    flex: 1;
    height: 55vh;
    margin: 0 auto; /* centra la portada dentro del espacio disponible */
    /* max-width ya no se fija aquí: admin.js la controla en vivo según el
       ancho real de la portada (ver ajustarAnchoWrapperSegunPortada), para
       que la transición entre reducido y explorando nunca dé un salto. */
}

/* Mientras el proyecto está reducido (la vista por defecto, listando
   varios proyectos), la imagen no debe "comerse" todo el espacio sobrante
   del flex — eso es lo que empujaba la portada muy hacia la derecha y
   dejaba un vacío enorme entre el título y la imagen. Aquí el título y la
   portada se tratan como un bloque compacto, cercano entre sí y
   centrado en la página (referencia: listado de proyectos de big.dk). */
.fila-proyecto.estado-reducido {
    gap: 2rem;
}
.fila-proyecto.estado-reducido .cinturon-wrapper {
    flex: 0 1 auto;
    margin: 0;
}

/* Punto 1: información progresiva — año, presupuesto, arquitecto,
   cliente, propietario, datos técnicos y descripción se descubren recién
   al interactuar (expandir), nunca antes. */
.info-progresiva {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.35s ease;
}

.fila-proyecto.estado-explorando {
    min-height: 90vh;
}
.fila-proyecto.estado-explorando .metadata-proyecto {
    flex-basis: 320px;
}
.fila-proyecto.estado-explorando .cinturon-wrapper {
    max-width: 1400px;
    height: 78vh;
}
.fila-proyecto.estado-explorando .info-progresiva {
    max-height: 3000px;
    opacity: 1;
}
.fila-proyecto.estado-reducido .cinturon-proyecto {
    cursor: pointer; /* invita a hacer click para descubrir más, no a arrastrar */
}

/* Punto 2 (Fase 3 - corrección): ahora que el wrapper "abraza" el alto
   exacto de la portada (ajustarAnchoWrapperSegunPortada), un top-offset
   guardado (ej. 10%) la empujaría fuera del recuadro, que ya no tiene
   margen de sobra. Mientras está reducido, la portada siempre va al
   borde superior exacto. */
.fila-proyecto.estado-reducido .elemento-cinturon[data-es-portada="true"] {
    top: 0 !important;
}

/* La grilla de referencia del admin no debe verse mientras el proyecto
   está reducido (ahí no hay nada que alinear todavía). */
body.modo-admin-activo .fila-proyecto.estado-reducido .cinturon-proyecto {
    background: transparent !important;
}

/* Parche visual ("intruso" en estado reducido): antes solo se confiaba en
   el tamaño reducido del cinturón para tapar el resto del contenido, pero
   un pixel de diferencia en el ancho podía dejar asomando un fragmento de
   la siguiente imagen. Ahora se oculta explícitamente todo lo que no sea
   la portada — funcional y visualmente — mientras el proyecto está
   reducido. El selector con :not() también cubre los textos libres, que
   ni siquiera tienen el atributo data-es-portada. */
.fila-proyecto.estado-reducido .elemento-cinturon:not([data-es-portada="true"]) {
    opacity: 0;
    pointer-events: none;
}

.cinturon-contenido {
    position: relative;
    height: 100%;
    /* el ancho lo fija admin.js (recalcularAnchoCinturon) según el
       elemento más a la derecha — nunca deja espacio vacío innecesario */
}

/* Punto 2: mientras se explora, las imágenes/textos ya existentes viven
   aquí dentro, desplazados el ancho de la metadata (que pasa a ocupar la
   posición 0 del cinturón, como si fuera el primer elemento). Sus "left"
   guardados no cambian — el desplazamiento lo aporta este wrapper. */
.cinturon-imagenes {
    position: absolute;
    top: 0;
    height: 100%;
}

.metadata-en-cinturon {
    background: var(--color-bg);
    justify-content: flex-start;
    padding: 2rem 1.5rem;
    cursor: default;
    overflow-y: auto; /* si el contenido progresivo no entra en el alto del cinturón, se scrollea en vez de recortarse */
}

.elemento-cinturon {
    position: absolute;
    overflow: hidden;
    user-select: none;
}

/* La edición de texto necesita poder seleccionar — se reactiva
   explícitamente solo mientras el campo es editable (admin activo). */
[contenteditable="true"] {
    user-select: text;
}

.elemento-cinturon .imagen-proyecto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.bloque-clickeable:hover .imagen-proyecto {
    transform: scale(1.03);
}

/* Fase 3a: placeholder real para un bloque sin imagen todavía (Error 4).
   Nunca se rellena con una imagen de ejemplo. */
.bloque-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.placeholder-vacio {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

.objeto-flotante-libre {
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid var(--color-acento);
    padding: 1rem;
    color: var(--color-acento);
    font-family: monospace;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    transition: box-shadow 0.2s;
    user-select: none;
}

.contenido-libre {
    min-height: 20px;
    outline: none;
}

/* ==========================================
   7. ESTUDIO Y EQUIPO (ARQUITECTOS)
   ========================================== */
.contenedor-global {
    padding: var(--espaciado-seccion) var(--espaciado-x);
}

.titulo-seccion {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-texto-secundario);
    margin-bottom: 3rem;
}

.texto-destacado {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    max-width: 1200px;
}

.header-arquitectos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.contenedor-equipo-nombres {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.arq-item {
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 300;
    cursor: pointer;
    position: relative;
    transition: color 0.4s;
    text-transform: uppercase;
}

.arq-item:hover {
    color: var(--color-acento);
}

.separador-arq {
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 100;
    opacity: 0.2;
}

/* ==========================================
   8. CONTACTO
   ========================================== */
.grid-contactos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 300;
}

/* ==========================================
   9. MODALES (LIBRO 3D & CROPPER)
   ========================================== */
#iframe-portfolio-modal, #cropper-modal-wrapper {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(10px);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem var(--espaciado-x);
    display: flex;
    justify-content: flex-end;
}

.btn-cerrar-modal {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-cerrar-modal:hover {
    color: var(--color-admin-alerta);
}

#iframe-container {
    width: 90vw;
    height: 80vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

.cropper-ui {
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 8px;
    width: 90vw;
    max-width: 800px;
}

.cropper-ui h3 {
    margin-bottom: 1.5rem;
    font-weight: 400;
    color: var(--color-acento);
}

.area-recorte {
    width: 100%;
    height: 50vh;
    background: #000;
    margin-bottom: 1.5rem;
}

.cropper-controles {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.cropper-controles button {
    padding: 0.8rem 1.5rem;
    border: none;
    cursor: pointer;
    background: #333;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}

#btn-confirmar-recorte {
    background: var(--color-acento);
    color: #000;
}

/* Fase 3a: paso de elección "usar original / editar encuadre" */
.paso-cropper {
    display: flex;
    flex-direction: column;
}

.texto-ayuda-cropper {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.area-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.btn-cropper-secundario {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-right: auto;
}

#btn-usar-original, #btn-editar-encuadre {
    background: var(--color-acento);
    color: #000;
}

/* ==========================================
   10. ESTADOS ADMINISTRADOR (CONTROLES OCULTOS)
   ========================================== */
/* Fase 3b: ya no hay botones pegados en el contenido (documento maestro,
   Parte 5). Solo queda el feedback de que un elemento es editable/
   seleccionable, y las reglas de arrastre. Todo lo demás vive en la barra
   lateral y el panel contextual (ver secciones 12-15 más abajo). */

/* Feedback visual de contenido editable */
body.modo-admin-activo .texto-editable[contenteditable="true"] {
    outline: 1px dashed var(--color-admin-alerta);
    background: var(--color-admin-bg);
    min-height: 1em;
    min-width: 50px;
    cursor: text;
    transition: background 0.2s;
}

body.modo-admin-activo .texto-editable[contenteditable="true"]:focus {
    background: rgba(255, 51, 102, 0.2);
    outline-style: solid;
}

body.modo-admin-activo .objeto-flotante-libre { cursor: grab; }
body.modo-admin-activo .objeto-flotante-libre:active { cursor: grabbing; }

body.modo-admin-activo .arq-item,
body.modo-admin-activo .bloque-clickeable,
body.modo-admin-activo .metadata-proyecto {
    cursor: pointer;
}

/* Estado de publicación (Parte 5): un "borrador" nunca es visible para el
   visitante; el admin sí lo ve (atenuado) para poder gestionarlo. */
.arq-borrador { display: none; }
body.modo-admin-activo .arq-borrador { display: inline; opacity: 0.45; }
.arq-borrador + .separador-arq { display: none; }
body.modo-admin-activo .arq-borrador + .separador-arq { display: inline; }

body.modo-admin-activo #admin-sidebar { display: flex !important; }

.resize-handle {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    z-index: 50;
    cursor: nwse-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
}
body.modo-admin-activo .resize-handle {
    display: flex !important;
}

/* ==========================================
   12. BARRA LATERAL DEL ADMINISTRADOR (Fase 3b — Partes 5 y 11)
   ========================================== */
#admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 220px;
    background: var(--admin-bg);
    border-right: 1px solid var(--admin-borde);
    z-index: var(--z-admin-ui);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    transition: width 0.25s ease;
    font-family: var(--fuente-principal);
}

#admin-sidebar.sidebar-minimizada { width: 64px; }
#admin-sidebar.sidebar-minimizada .sidebar-item span.texto-item { display: none; }
#admin-sidebar.sidebar-minimizada .sidebar-marca { font-size: 0.7rem; }

.sidebar-marca {
    color: var(--admin-texto);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    padding: 0 1.25rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--admin-borde);
    margin-bottom: 0.5rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.7rem 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--admin-texto);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.sidebar-item:hover { background: var(--admin-hover); }
.sidebar-item.sidebar-item-activo { background: var(--admin-activo); font-weight: 600; }
.sidebar-item .badge-proximamente {
    font-size: 0.6rem;
    color: var(--admin-texto-secundario);
    border: 1px solid var(--admin-borde);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    margin-left: auto;
}

.sidebar-toggle {
    align-self: center;
    background: var(--admin-bg-suave);
    border: 1px solid var(--admin-borde);
    color: var(--admin-texto-secundario);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0.75rem;
}
.sidebar-toggle:hover { background: var(--admin-hover); }

body.modo-admin-activo #header-principal,
body.modo-admin-activo #contenedor-proyectos,
body.modo-admin-activo #hero-principal,
body.modo-admin-activo .contenedor-global {
    padding-left: calc(var(--espaciado-x) + 220px);
    transition: padding-left 0.25s ease;
}
body.modo-admin-activo.sidebar-minimizada #header-principal,
body.modo-admin-activo.sidebar-minimizada #contenedor-proyectos,
body.modo-admin-activo.sidebar-minimizada #hero-principal,
body.modo-admin-activo.sidebar-minimizada .contenedor-global {
    padding-left: calc(var(--espaciado-x) + 64px);
}

/* ==========================================
   13. PANEL CONTEXTUAL FLOTANTE (Fase 3b — Partes 5 y 11)
   ========================================== */
#panel-contextual {
    position: fixed;
    top: 100px;
    right: 40px;
    width: 300px;
    background: var(--admin-bg);
    border: 1px solid var(--admin-borde);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: var(--z-admin-ui);
    font-family: var(--fuente-principal);
    overflow: hidden;
}

#panel-contextual.panel-minimizado #panel-contextual-cuerpo { display: none; }

#panel-contextual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--admin-bg-suave);
    border-bottom: 1px solid var(--admin-borde);
    cursor: move;
    user-select: none;
}

#panel-contextual-titulo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--admin-texto);
}

.panel-contextual-acciones { display: flex; gap: 0.4rem; }
.panel-contextual-acciones button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--admin-borde);
    background: var(--admin-bg);
    color: var(--admin-texto-secundario);
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
}
.panel-contextual-acciones button:hover { background: var(--admin-hover); }

#panel-contextual-cuerpo {
    padding: 1.1rem;
    max-height: 60vh;
    overflow-y: auto;
    color: var(--admin-texto);
}

#panel-contextual-cuerpo p.panel-texto-ayuda {
    font-size: 0.8rem;
    color: var(--admin-texto-secundario);
    line-height: 1.5;
    margin-bottom: 1rem;
}

#panel-contextual-cuerpo label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-texto-secundario);
    margin-bottom: 0.35rem;
}

.btn-panel {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--admin-bg-suave);
    color: var(--admin-texto);
    border: 1px solid var(--admin-borde);
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}
.btn-panel:hover { background: var(--admin-hover); }
.btn-panel:active { background: var(--admin-activo); }
.btn-panel--primario { background: var(--admin-texto); color: #fff; border-color: var(--admin-texto); }
.btn-panel--primario:hover { background: #333; }
.btn-panel--peligro { color: var(--admin-peligro); }
.btn-panel[disabled] { opacity: 0.5; cursor: wait; }

.panel-estado-grupo { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.panel-estado-grupo button {
    flex: 1;
    padding: 0.5rem 0.4rem;
    font-size: 0.68rem;
    border: 1px solid var(--admin-borde);
    background: var(--admin-bg-suave);
    color: var(--admin-texto-secundario);
    border-radius: 6px;
    cursor: pointer;
}
.panel-estado-grupo button.estado-activo {
    background: var(--admin-texto);
    color: #fff;
    border-color: var(--admin-texto);
}

.lista-panel { list-style: none; padding: 0; margin: 0; }
.lista-panel li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--admin-borde);
    font-size: 0.8rem;
}
.lista-panel li:last-child { border-bottom: none; }
.lista-panel button {
    background: transparent;
    border: none;
    color: var(--admin-texto-secundario);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
}

/* ==========================================
   14. ESTADO "SELECCIONADO" (Fase 3b — Parte 11: estilo de edición)
   ========================================== */
body.modo-admin-activo .elemento-seleccionado {
    outline: 2px solid var(--color-acento) !important;
    outline-offset: 2px;
}

/* ==========================================
   15. VISTA VISITANTE / MODO PREVISUALIZACIÓN (Parte 11)
   ========================================== */
#vista-visitante-indicador {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    color: #fff;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
#vista-visitante-indicador button {
    background: var(--color-acento);
    color: #000;
    border: none;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.7rem;
    cursor: pointer;
    font-weight: 600;
}

body.vista-visitante-activa #admin-sidebar,
body.vista-visitante-activa #panel-contextual {
    display: none !important;
}
body.vista-visitante-activa .texto-editable[contenteditable="true"] {
    outline: none !important;
    background: transparent !important;
    cursor: default !important;
}

/* ==========================================
   16. MENSAJE "PORTAFOLIO EN PROCESO" (Parte 5)
   ========================================== */
.aviso-portafolio-proceso {
    font-size: 0.65rem;
    color: var(--color-texto-secundario);
    display: block;
    margin-top: 0.15rem;
}

.arq-item.arq-en-proceso .nombre-arq { opacity: 0.6; }

/* ==========================================
   17. EDITOR VISUAL AVANZADO — GUÍAS, IMÁN, CAPAS, BLOQUEO (Fase 3c, Parte 6)
   ========================================== */

/* Guías (eje central, márgenes). Viven en .cinturon-wrapper, que NO
   scrollea, para quedar fijas al viewport visible sin importar cuánto se
   haya recorrido el cinturón horizontal. Se activan/desactivan desde el
   panel "Diseño". No afectan el guardado: son puramente visuales. */
.guia-lienzo {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.guia-vertical, .guia-margen-v {
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(212, 175, 55, 0.35);
}
.guia-vertical.guia-central {
    border-left-style: solid;
    border-left-color: rgba(212, 175, 55, 0.55);
}
.guia-margen-v { border-left-color: rgba(255, 255, 255, 0.18); }
.guia-margen-h {
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Línea de imán/snap: aparece solo mientras se arrastra y hay una
   alineación sugerida. Nunca obliga — es únicamente el feedback visual. */
.guia-snap {
    position: absolute;
    pointer-events: none;
    background: var(--color-acento);
    z-index: 2;
}
.guia-snap.vertical { top: 0; bottom: 0; width: 1px; }
.guia-snap.horizontal { left: 0; right: 0; height: 1px; }

/* Bloqueo de elementos (imágenes y textos por igual, ambos conviven en el cinturón) */
.elemento-cinturon.anotacion-bloqueada {
    cursor: not-allowed !important;
}
.elemento-cinturon.anotacion-bloqueada .resize-handle { display: none !important; }
body.modo-admin-activo .elemento-cinturon.anotacion-bloqueada::after {
    content: "Bloqueado";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
    font-family: var(--fuente-principal);
}

/* Panel "Diseño": controles de guías y márgenes */
.panel-toggle-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.78rem;
}
.panel-toggle-switch {
    width: 34px;
    height: 18px;
    background: var(--admin-borde);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
}
.panel-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.panel-toggle-switch.activo { background: var(--admin-texto); }
.panel-toggle-switch.activo::after { left: 18px; }

.panel-input-numero {
    width: 60px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--admin-borde);
    border-radius: 6px;
    font-size: 0.78rem;
    text-align: center;
}

.panel-range {
    width: 100%;
    margin: 0.3rem 0 1rem 0;
    accent-color: var(--admin-texto);
}

.panel-color {
    width: 100%;
    height: 32px;
    padding: 0;
    border: 1px solid var(--admin-borde);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    cursor: pointer;
    background: none;
}

.panel-select, .panel-input-texto {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--admin-borde);
    border-radius: 6px;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
    background: var(--admin-bg-suave);
    color: var(--admin-texto);
}

.panel-select {
    cursor: pointer;
}

/* ==========================================
   18. FASE 4: MULTIMEDIA Y ESCUDO DE CRISTAL
   ========================================== */
.bloque-multimedia {
    position: absolute;
    background: #0a0a0a;
}

.bloque-multimedia iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* El escudo intercepta el arrastre y los clics iniciales */
.escudo-multimedia {
    inset: 0;
    z-index: 5;
    position: absolute;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.texto-escudo {
    background: rgba(28, 30, 36, 0.9);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    pointer-events: none; /* Que el click pase directo al escudo base */
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Modo Administrador: El escudo SIEMPRE está activo para permitir arrastrar y redimensionar el bloque */
body.modo-admin-activo:not(.vista-visitante-activa) .escudo-multimedia {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* ==========================================
   11. ADAPTACIÓN RESPONSIVE (MÓVIL)
   ========================================== */
@media (max-width: 768px) {
    :root {
        --espaciado-x: 1.5rem;
        --espaciado-seccion: 5rem;
    }

    #header-principal {
        flex-direction: column;
        padding: 1.5rem var(--espaciado-x);
        gap: 1.5rem;
        background: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(10px);
        mix-blend-mode: normal;
    }

    .nav-visitante ul { gap: 1.5rem; font-size: 0.75rem; }
    .metadata-proyecto { gap: 0.5rem; }
    .cinturon-proyecto { height: 55vh; background-size: 20px 20px; }
    #iframe-container { width: 100vw; height: 100vh; border: none; }
    .modal-header { background: rgba(0,0,0,0.8); padding: 1rem; z-index: 10; }

    /* Parte 11: el admin en móvil prioriza revisar y cambios simples, no
       necesita toda la capacidad de escritorio. La barra lateral pasa a
       una franja horizontal inferior y el panel contextual ocupa el ancho. */
    #admin-sidebar {
        width: 100%;
        height: auto;
        top: auto;
        bottom: 0;
        flex-direction: row;
        padding: 0.5rem 0;
        border-right: none;
        border-top: 1px solid var(--admin-borde);
    }
    #admin-sidebar.sidebar-minimizada { width: 100%; height: auto; }
    .sidebar-marca { display: none; }
    .sidebar-nav { flex-direction: row; overflow-x: auto; flex-grow: 1; }
    .sidebar-item { flex-direction: column; gap: 0.2rem; font-size: 0.62rem; padding: 0.5rem 0.75rem; }
    .sidebar-toggle { display: none; }

    body.modo-admin-activo #header-principal,
    body.modo-admin-activo #contenedor-proyectos,
    body.modo-admin-activo #hero-principal,
    body.modo-admin-activo .contenedor-global,
    body.modo-admin-activo.sidebar-minimizada #header-principal,
    body.modo-admin-activo.sidebar-minimizada #contenedor-proyectos,
    body.modo-admin-activo.sidebar-minimizada #hero-principal,
    body.modo-admin-activo.sidebar-minimizada .contenedor-global {
        padding-left: var(--espaciado-x);
        padding-bottom: 5rem;
    }

    #panel-contextual {
        left: 1rem;
        right: 1rem;
        width: auto;
        top: auto;
        bottom: 5rem;
    }

    /* Corrección visual definitiva: en pantallas angostas la columna de
       texto y el cinturón no caben lado a lado — se apilan. */
    .fila-proyecto,
    .fila-proyecto.estado-reducido {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 var(--espaciado-x);
    }
    .fila-proyecto .metadata-proyecto,
    .fila-proyecto.estado-explorando .metadata-proyecto {
        flex-basis: auto;
        width: 100%;
        text-align: center;
    }
    .fila-proyecto .cinturon-wrapper {
        max-width: 100% !important;
        width: 100%;
    }
}