body{background:var(--ch-bg);color:var(--ch-text);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--ch-primary);}

.ch-nav{background:var(--ch-profile-bg);padding:.9rem 0;}
.ch-nav .navbar-brand span{color:#fff;font-size:1.25rem;}

.btn-ch{background:var(--ch-accent);border:none;color:#fff;font-weight:600;}
.btn-ch:hover{background:var(--ch-accent-hover);color:#fff;}
.btn-ch-outline-solid{background:transparent;border:2px solid var(--ch-primary);color:var(--ch-primary);font-weight:600;}
.btn-ch-outline-solid:hover{background:var(--ch-primary);color:#fff;}

.card-cm{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);}
.dash-sidebar{background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 6px 24px rgba(0,0,0,.06);}

.avatar-lg{width:130px;height:130px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.15);}

.profile-hero{background:var(--ch-profile-bg);color:#fff;border-radius:20px;padding:2.5rem;}
.profile-hero .avatar-lg{background:#fff;}

.social-links{display:flex;gap:.6rem;margin-top:1rem;}
.social-links a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;}
.social-links a:hover{background:rgba(255,255,255,.35);}

.badge-soft{background:rgba(108,62,244,.1);color:var(--ch-primary);border-radius:20px;padding:.35rem .75rem;font-weight:500;font-size:.8rem;}

.project-search{position:relative;min-width:240px;}
.project-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;}
.project-search input{padding-left:36px;border-radius:20px;}

.filter-btn{border-radius:20px;}

.projects-grid{display:grid;grid-template-columns:repeat(var(--proj-cols,3),1fr);gap:1.25rem;}
@media (max-width:991px){.projects-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){.projects-grid{grid-template-columns:1fr;}}

.project-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:transform .15s;}
.project-card:hover{transform:translateY(-3px);}

.media-thumb{border-radius:10px;overflow:hidden;background:#eee;aspect-ratio:1/1;}
.media-thumb img,.media-thumb video,.media-thumb iframe{width:100%;height:100%;object-fit:cover;border:none;}

/* Masonry real vía CSS multi-column: cada columna apila sus propios ítems con su
   alto natural (columnas independientes), en vez de CSS Grid, donde cada FILA se
   estira a la altura del ítem más alto de esa fila y fuerza a los demás a igualarla
   (con object-fit:cover recortando) — eso es lo que se veía "como cuadrícula forzada". */
.masonry{column-count:3;column-gap:10px;}
@media (max-width:767px){.masonry{column-count:2;}}
@media (max-width:480px){.masonry{column-count:1;}}
.masonry-item{display:inline-block;width:100%;margin:0 0 10px;break-inside:avoid;border-radius:10px;overflow:hidden;cursor:pointer;}
.masonry-item img{width:100%;height:auto;display:block;transition:opacity .15s;}
.masonry-item:hover img{opacity:.85;}

/* Videos dentro de la cuadrícula masonry combinada (fotos + videos juntos):
   a diferencia de las fotos, tienen sus propios controles y no abren el lightbox.
   Usan aspect-ratio (no height:auto) porque un <video>/<iframe> no tiene un alto
   intrínseco fiable antes de cargar metadata. */
.masonry-item.masonry-video{cursor:default;}
.masonry-item.masonry-video video,
.masonry-item.masonry-video iframe{width:100%;aspect-ratio:9/16;max-height:640px;display:block;border:none;background:#000;object-fit:cover;}

.video-carousel video,.video-carousel iframe{width:100%;aspect-ratio:9/16;max-height:640px;margin:0 auto;display:block;border:none;border-radius:14px;background:#000;object-fit:cover;}

/* En mobile, un video vertical (9:16) hasta 640px de alto ocupa toda la pantalla y
   se ve desproporcionado al lado de fotos horizontales — se limita a un % del alto
   visible en vez de un tope fijo en px. object-fit:cover evita que se vea estirado
   cuando el recorte deja de coincidir con su relación de aspecto original. */
@media (max-width:767px){
  .video-carousel video,.video-carousel iframe{max-height:60vh;}
  .masonry-item.masonry-video video,.masonry-item.masonry-video iframe{max-height:45vh;}
}

.project-info-card{background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 6px 24px rgba(0,0,0,.06);}

.btn-whatsapp{background:#25D366;color:#fff;border-radius:10px;padding:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;text-decoration:none;}
.btn-whatsapp:hover{background:#1DA851;color:#fff;}

.color-field{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;}
.color-field input[type=color]{width:44px;height:32px;border:none;padding:0;border-radius:6px;}

.columns-option input[type=radio]{display:none;}
.columns-option label{border:1px solid #ddd;border-radius:8px;padding:.4rem .9rem;cursor:pointer;display:inline-block;}
.columns-option input[type=radio]:checked + label{background:var(--ch-primary);color:#fff;border-color:var(--ch-primary);}

.ch-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:2000;}
.ch-lightbox.active{display:flex;}
.ch-lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:transparent;border:none;color:#fff;font-size:2.5rem;cursor:pointer;}
.lightbox-close{top:20px;right:30px;}
.lightbox-prev{left:20px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:20px;top:50%;transform:translateY(-50%);}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:.9rem;opacity:.8;}

.ch-footer{background:var(--ch-footer-bg);color:var(--ch-footer-text);}
.ch-footer-link{color:var(--ch-footer-text);text-decoration:underline;}

/* Drag & drop ordenable (proyectos y medios) */
.sortable-item{cursor:grab;}
.sortable-item.dragging{opacity:.4;}
.drag-handle{cursor:grab;opacity:.5;margin-right:.4rem;}

/* Estado de borrador */
.badge-draft{background:#FFF3CD;color:#8A6D1B;border-radius:20px;padding:.35rem .75rem;font-weight:600;font-size:.75rem;}

/* Tarjetas de métricas (versión Community Manager) */
.stat-card{background:#fff;border-radius:14px;padding:1.1rem;box-shadow:0 4px 16px rgba(0,0,0,.06);text-align:center;}
.stat-card .stat-value{font-size:1.6rem;font-weight:800;color:var(--ch-primary);}
.stat-card .stat-label{font-size:.8rem;color:#777;}

/* Antes/después (versión Diseñadores) */
.before-after{position:relative;overflow:hidden;border-radius:14px;user-select:none;}
.before-after img{width:100%;display:block;}
.before-after .after-wrap{position:absolute;top:0;left:0;height:100%;overflow:hidden;width:50%;}
.before-after .ba-slider{position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;cursor:ew-resize;transform:translateX(-2px);}
.before-after .ba-slider::after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#333;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.ba-label{position:absolute;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:.2rem .6rem;border-radius:20px;}
.ba-label.before-label{left:10px;}
.ba-label.after-label{right:10px;}

/* Testimonios (versión Community Manager) */
.testimonial-card{background:#fff;border-radius:14px;padding:1.5rem;box-shadow:0 4px 16px rgba(0,0,0,.06);height:100%;}
.testimonial-card .quote-mark{font-size:2rem;color:var(--ch-accent);line-height:1;}

/* Galería privada (versión Fotógrafos) */
.gallery-lock-screen{max-width:420px;margin:4rem auto;}

/* Preview de Instagram (versión Fotógrafos): el embed oficial de Instagram trae
   su propio ancho fijo, esto solo lo centra dentro del contenedor del portafolio. */
.instagram-preview{display:flex;justify-content:center;}
.instagram-preview iframe{max-width:100%;}

/* Vista previa de "cómo se verá en tu portafolio" (project_form.php): usa el mismo
   .masonry/.masonry-item real de la página pública, solo que aquí no abre el lightbox
   (es una vista previa estática), así que se anula el cursor/hover de "clic". */
.form-preview-frame{background:var(--ch-bg);border:1px dashed #cfc9de;border-radius:14px;padding:.9rem;}
.form-preview-frame .masonry-item{cursor:default;}
.form-preview-frame .masonry-item:hover img{opacity:1;}