/* ==========================================================================
   ARTE Y REFLEJO - CONTEMPORARY GALLERY DESIGN SYSTEM
   Inspirado en Arquitectura de Museos Minimalistas & Lujo Contemporáneo
   Soporte Completo y Ultra-Nítido para Modo Claro / Modo Oscuro
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Hanken+Grotesk:ital,wght@0,300..900;1,300..900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --color-surface: #fbf9f9;
  --color-surface-dim: #dbdad9;
  --color-surface-bright: #fbf9f9;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f5f3f3;
  --color-surface-container: #efeded;
  --color-surface-high: #e9e8e7;
  --color-surface-highest: #e3e2e2;
  
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #444748;
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-secondary: #775a19;
  --color-secondary-bronze: #c5a059;
  --color-secondary-container: #fed488;
  --color-outline: #747878;
  --color-outline-variant: #c4c7c7;
  
  --font-serif: 'EB Garamond', Garamond, Georgia, serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  letter-spacing: -0.01em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modo Oscuro Global */
html.dark body {
  background-color: #0d0e0f;
  color: #fbf9f9;
}

/* Tipografías Curatoriales */
.font-garamond {
  font-family: var(--font-serif);
}

.font-grotesk {
  font-family: var(--font-sans);
}

.label-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Header de Vidrio Esmerilado */
.gallery-header {
  background: rgba(251, 249, 249, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(27, 28, 28, 0.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.dark .gallery-header {
  background: rgba(13, 14, 15, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tarjetas de Obras Minimalistas */
.gallery-artwork-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.gallery-artwork-card:hover {
  transform: translateY(-4px);
}

.gallery-img-wrapper {
  overflow: hidden;
  background-color: #f0eeee;
  position: relative;
}

html.dark .gallery-img-wrapper {
  background-color: #1a1b1d;
}

.gallery-img-wrapper img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-artwork-card:hover .gallery-img-wrapper img {
  transform: scale(1.04);
}

/* Plinto para Esculturas y Artesanías */
.plinth-canvas {
  background: radial-gradient(circle at 50% 90%, #dfdcda 0%, #f3f1f1 65%, #fbf9f9 100%);
}

html.dark .plinth-canvas {
  background: radial-gradient(circle at 50% 90%, #2a2b2d 0%, #1a1b1c 65%, #131415 100%);
}

/* ==========================================================================
   INPUTS Y FORMULARIOS (ALTA LEGIBILIDAD EN MODO CLARO Y OSCURO)
   ========================================================================== */
.gallery-input {
  border: none;
  border-bottom: 1px solid #1b1c1c;
  background: transparent;
  padding: 12px 0;
  color: #1b1c1c;
  font-family: var(--font-sans);
  font-size: 15px;
  border-radius: 0;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.gallery-input:focus {
  outline: none;
  border-bottom: 1px solid #775a19;
}

.gallery-input::placeholder {
  color: #747878;
}

/* MODO OSCURO ULTRA-NÍTIDO PARA INPUTS */
html.dark .gallery-input,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark .gallery-input:focus,
html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="number"]:focus,
html.dark input[type="url"]:focus,
html.dark input[type="tel"]:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #e9c176 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.dark .gallery-input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #9a9e9f !important;
  -webkit-text-fill-color: #9a9e9f !important;
  opacity: 1 !important;
}

/* Opciones de Select en Modo Oscuro */
html.dark select option {
  background-color: #1a1b1d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 10px;
}

/* Fix para autofill del navegador en modo oscuro */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #131415 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Dropzone Minimalista */
.gallery-dropzone {
  border: 1px dashed #747878;
  background-color: rgba(239, 237, 237, 0.5);
  transition: all 0.25s ease;
}

html.dark .gallery-dropzone {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(26, 27, 29, 0.7);
}

.gallery-dropzone.dragover {
  border-color: #775a19;
  background-color: #f6f1e5;
}

html.dark .gallery-dropzone.dragover {
  border-color: #e9c176;
  background-color: #2b281f;
}

/* Botones con Sharp Radius (0) */
.btn-sharp {
  border-radius: 0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-art {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

html.dark .btn-primary-art {
  background-color: #fbf9f9;
  color: #121316;
  border: 1px solid #fbf9f9;
}

.btn-primary-art:hover {
  background-color: #775a19;
  border-color: #775a19;
  color: #ffffff;
}

html.dark .btn-primary-art:hover {
  background-color: #c5a059;
  border-color: #c5a059;
  color: #121316;
}

.btn-ghost-art {
  background-color: transparent;
  color: #1b1c1c;
  border: 1px solid rgba(27, 28, 28, 0.25);
}

html.dark .btn-ghost-art {
  color: #fbf9f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ghost-art:hover {
  border-color: #775a19;
  color: #775a19;
}

html.dark .btn-ghost-art:hover {
  border-color: #e9c176;
  color: #e9c176;
}

/* Filtros de Categoría */
.gallery-tab {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444748;
  padding: 8px 16px;
  position: relative;
  transition: all 0.25s ease;
  border-bottom: 2px solid transparent;
}

html.dark .gallery-tab {
  color: #a4a7a8;
}

.gallery-tab:hover {
  color: #1b1c1c;
}

html.dark .gallery-tab:hover {
  color: #ffffff;
}

.gallery-tab.active {
  color: #1b1c1c;
  border-bottom: 2px solid #000000;
}

html.dark .gallery-tab.active {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* Modales */
.gallery-modal-overlay {
  background: rgba(13, 14, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Animación sutil de WhatsApp flotante */
@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
}

.floating-wa-btn {
  animation: subtlePulse 3s infinite;
}

/* ==========================================================================
   ESTILOS PARA MULTI-IMAGEN (HASTA 3 FOTOGRAFÍAS POR ÍTEM)
   ========================================================================== */

/* Casillas de carga de 3 imágenes */
.upload-slot {
  transition: all 0.25s ease;
}

.upload-slot:hover {
  border-color: #775a19;
}

html.dark .upload-slot:hover {
  border-color: #e9c176;
}

.upload-slot.has-image {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
}

html.dark .upload-slot.has-image {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Miniaturas del Lightbox en Modal de Detalle */
#detail-thumbnails-container button {
  outline: none;
}

/* Transición suave para imagen principal de detalle */
#detail-img {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Miniaturas en tarjetas del catálogo */
.card-thumb-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-thumb-btn:hover {
  transform: translateY(-2px);
}