@import url('variables.css');
@import url('welcome.css');
@import url('filter.css');
@import url('playlist.css');
@import url('gallery.css');

/* Imágenes con espacio */
img {
  padding: 20px;
}

/* Webfonts */
@font-face {
  font-family: 'Adelicia';
  src: url('../fonts/adelicia/Adelicia.woff2') format('woff2'),
       url('../fonts/adelicia/Adelicia.woff') format('woff'),
       url('../fonts/adelicia/AdeliciaRegular.woff') format('woff'),
       url('../fonts/adelicia/AdeliciaRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marthin';
  src: url('../fonts/marthin/Marthin.woff2') format('woff2'),
       url('../fonts/marthin/Marthin.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thesignature';
  src: url('../fonts/thesignature/Thesignature.woff2') format('woff2'),
       url('../fonts/thesignature/Thesignature.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Ajuste general */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ocultar elementos */
.hidden {
  display: none;
}

/* Modal adaptado a tema */
.theme-modal {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-modal .modal-header {
  background-color: var(--panel-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

.theme-modal .modal-title,
.theme-modal .modal-body {
  color: var(--text-primary);
  background-color: var(--panel-bg) !important;
}

.theme-close {
  filter: invert(0);
  transition: filter 0.3s ease;
}

body.light-theme .theme-close {
  filter: invert(1);
}

/* Backdrop del modal */
.modal-backdrop {
  background-color: var(--overlay-bg) !important;
  transition: background-color 0.3s ease;
}





/* Estilos para el borde adaptativo en las imágenes */
/* Tema oscuro: borde blanco */
body.border-enabled .media-element {
  border: 10px solid var(--gallery-border-color, #fff) !important;
 /* box-shadow: 0 0 20px var(--gallery-border-color, rgba(255, 255, 255, 0.3)) !important;*/
}

body.border-enabled .sequence-frame {
  border: 10px solid var(--gallery-border-color, #fff) !important;
 /* box-shadow: 0 0 20px var(--gallery-border-color, rgba(255, 255, 255, 0.3)) !important;*/
}

/* Tema claro: borde negro */
body.light-theme.border-enabled .media-element,
body.light-theme.border-enabled .sequence-frame {
  border: 10px solid #000 !important;
  /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;*/
}

/* Deshabilitar borde durante animaciones */
.media-container.border-disabled-during-animation .media-element,
.media-container.border-disabled-during-animation .sequence-frame {
  border: none !important;
  box-shadow: none !important;
}

/* Asegurar que el borde se deshabilite durante animaciones con máxima especificidad */
body.border-enabled .media-container.border-disabled-during-animation .media-element,
body.border-enabled .media-container.border-disabled-during-animation .sequence-frame,
body.light-theme.border-enabled .media-container.border-disabled-during-animation .media-element,
body.light-theme.border-enabled .media-container.border-disabled-during-animation .sequence-frame {
  border: none !important;
  box-shadow: none !important;
}

/* Aplicar a todos los elementos dentro del contenedor animado */
.media-container.border-disabled-during-animation * {
  border: none !important;
  box-shadow: none !important;
}

/* Específicamente para elementos de media */
.media-container.border-disabled-during-animation img,
.media-container.border-disabled-during-animation video,
.media-container.border-disabled-during-animation .media-element,
.media-container.border-disabled-during-animation .sequence-frame {
  border: none !important;
  box-shadow: none !important;
}

#border-color-picker-container {
  background: #fff;
  border-radius: 8px;
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.15);*/
  padding: 4px;
  display: none;
}