@media (min-width: 721px) {

:root {
  --blur: 10rem;
}
#main-sidebar a:not(#main-sidebar a.iridiscente) {
  color: color-mix(in srgb, transparent 60%, var(--color-oscuro));
}

/* TEMA OSCURO */
/* Hover sobre todos los enlaces excepto catálogo, nube de términos e iridiscente */
body[data-theme="dark"] a:hover:not(
  body[data-theme="dark"] .catalogo a:hover):not(
  body[data-theme="dark"] .tag-cloud-item a:hover):not(
  body[data-theme="dark"] .iridiscente:hover),
body[data-theme="dark"] #main-sidebar a:hover:not(
  body[data-theme="dark"] #main-sidebar a.iridiscente) {
    color: var(--primary-hover);
    animation: dark-move-in var(--transicion-hover) ease-in-out;
}
@keyframes dark-move-in {
  0%   { color: #f9c998; }
  20%  { color: #ffa143; }
  40%  { color: #ea808e; }
  60%  { color: #d55fd9; }
  80%  { color: #8a74ec; }
  100%  { color: #3f89ff; }
}
/* Especial: Logo */
body[data-theme="dark"] a.site-branding__logo:hover svg {
  fill: var(--secondary-hover);
  animation: dark-move-in-logo var(--transicion-hover) ease-in-out;
}
@keyframes dark-move-in-logo {
  0%   { fill: #f9c998; }
  20%  { fill: #ffa143; }
  40%  { fill: #ea808e; }
  60%  { fill: #d55fd9; }
  80%  { fill: #8896ec; }
  100%  { fill: #3bcdff; }
}
/* Especial: iconos en enlaces del menú */
body[data-theme="dark"] #main-sidebar nav a:hover::before {
  background-color: var(--secondary-hover);
  animation: dark-move-in-icon var(--transicion-hover) ease-in-out;
}
@keyframes dark-move-in-icon {
  0%   { background-color: #f9c998; }
  20%  { background-color: #ffa143; }
  40%  { background-color: #ea808e; }
  60%  { background-color: #d55fd9; }
  80%  { background-color: #8896ec; }
  100%  { background-color: #3bcdff; }
}
/* Especial: Catálogo y universo visual */
body[data-theme="dark"] .catalogo .view-contents a:hover,
body[data-theme="dark"] .tag-cloud-item a:hover {
  animation: dark-move-in-cat var(--transicion-hover) ease-in-out;
  border-color: color-mix(in srgb, transparent 0%, var(--secondary-hover));
}
body[data-theme="dark"] .catalogo a:hover .views-field-title {
  animation: dark-move-in-cat var(--transicion-hover) ease-in-out;
}
body[data-theme="dark"] .catalogo a:hover .views-field-title,
body[data-theme="dark"] .tag-cloud-item a:hover {
  color: var(--secondary-hover);
}
@keyframes dark-move-in-cat {
  0%   { border-color: #926543; color: #f9c998;}
  20%  { border-color: #ffa143; color: #ffa143; }
  40%  { border-color: #ea808e; color: #ea808e; }
  60%  { border-color: #d55fd9; color: #d55fd9; }
  80%  { border-color: #8896ec; color: #8896ec; }
  100%  { border-color: #3bcdff; color: #3bcdff; }
}

/* TEMA CLARO */
/* Hover sobre todos los enlaces excepto catálogo, nube de términos e iridiscente */
body[data-theme="light"] a:hover:not(
  body[data-theme="light"] .catalogo a:hover):not(
  body[data-theme="light"] .tag-cloud-item a:hover):not(
  body[data-theme="light"] .iridiscente:hover):not(
  body[data-theme="light"]  #social a:hover),
body[data-theme="light"] #main-sidebar a:hover:not(
  body[data-theme="light"] #main-sidebar a.iridiscente) {
    color: var(--primary-hover);
    animation: light-move-in var(--transicion-hover) ease-in-out;
}
@keyframes light-move-in {
  0%   { color: #f9c998; }
  20%  { color: #ffa143; }
  40%  { color: #ea808e; }
  60%  { color: #d55fd9; }
  80%  { color: #8a74ec; }
  100%  { color: #3f89ff; }
}
/* Especial: Logo */
body[data-theme="light"] a.site-branding__logo:hover svg {
  fill: var(--primary-hover);
  animation: light-move-in-logo var(--transicion-hover) ease-in-out;
}
@keyframes light-move-in-logo {
  0%   { fill: #f9c998; }
  20%  { fill: #ffa143; }
  40%  { fill: #ea808e; }
  60%  { fill: #d55fd9; }
  80%  { fill: #8a74ec; }
  100%  { fill: #3f89ff; }
}
/* Especial: iconos en enlaces del menú */
body[data-theme="light"] #main-sidebar nav a:hover::before {
  background-color: var(--secondary-hover);
  animation: dark-move-in-icon var(--transicion-hover) ease-in-out;
}
@keyframes dark-move-in-icon {
  0%   { background-color: #f9c998; }
  20%  { background-color: #ffa143; }
  40%  { background-color: #ea808e; }
  60%  { background-color: #d55fd9; }
  80%  { background-color: #8896ec; }
  100%  { background-color: #3bcdff; }
}
/* Especial: universo visual */
body[data-theme="light"] .tag-cloud-item a:hover {
  animation: light-move-in-cat var(--transicion-hover) ease-in-out;
  border-color: var(--secondary-hover);
}
body[data-theme="light"] .tag-cloud-item a:hover {
  color: var(--secondary-hover);
}
@keyframes light-move-in-cat {
  0%   { border-color: #624532; color: #624532; }
  20%  { border-color: #b0733a; color: #b0733a; }
  40%  { border-color: #ffa143; color: #ffa143; }
  60%  { border-color: #bf9982; color: #bf9982; }
  80%  { border-color: #7f91c0; color: #7f91c0; }
  100%  { border-color: #3f89ff; color: #3f89ff; }
}



#container > header {
  display: none;
}
.sidebar {
  top: 0;
  height: 100vh;
}
.sidebar .site-branding__inner a,
.path-frontpage .site-branding__logo {
  padding: 2rem 0;
  display: block;
}
.catalogo > div:not(.contextual):not(.sin_resultados) {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* LAYOUT */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

.main-layout:not(.path-user .main-layout):not(.content-type-page .main-layout),
.region_tabs ul,
[data-drupal-messages] [role="status"] {
  max-width: 130rem;
}
.main-layout,
.region_tabs ul,
[data-drupal-messages] [role="status"] {
  margin-left: auto;
  margin-right: auto;
}
#main-sidebar {
  overflow: hidden;
}
.sidebar #column-flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* MAIN CONTENT */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

.role-administrator #block-srefs-content .views-exposed-form.bef-exposed-form {
  width: calc(100% - 30rem - var(--administration-tray));
}
.content-type-estilo .row-flexbox {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
}
body[data-theme="dark"].content-type-estilo article .main-layout {
  background-color: rgba(255, 255, 255, 0.04);
  backdrop-filter: saturate(1.5);
  -webkit-backdrop-filter: saturate(1.5)
}
body[data-theme="light"].content-type-estilo article .main-layout {
  background-color: #ffffff;
}
.content-type-estilo .field--name-field-imagen-portada {
  flex: 1 1 calc(55% - 2rem);
  min-width: 300px;
}
.content-type-estilo .region_context {
  flex: 1 1 calc(45% - 2rem);
  min-width: 300px;
}
.field--name-field-imagen-portada img {
  width: 100%;
}

section h2:not(.sin_resultados h2),
#block-srefs-views-block-estilos-relacionados-block-1 h2 {
  max-width: 13rem;
}
.main-layout,
[data-drupal-messages] [role="status"] {
  padding: 3rem;
}
#block-srefs-content .views-exposed-form.bef-exposed-form {
  top: 0;
}
#main-sidebar:not(body.content-type-estilo #main-sidebar):not(body.gestion-usuarios #main-sidebar) {
  background-color: var(--bg-color);
}
/* Secciones dentro de un estilo */
.content-type-estilo section.contacto.desarrollo,
.content-type-estilo section.contacto.aplicaciones,
.content-type-estilo section.estilos-relacionados,
.content-type-estilo section.comentarios-estilos {
  border-top: 1px solid color-mix(in srgb, transparent 85%, var(--color-oscuro));
}
.catalogo .polaroid-view a {
  padding: 1rem;
}
.catalogo .polaroid-view,
.catalogo .polaroid-view a {
  transition: all var(--transicion-hover) ease-in-out !important;
}
.content-type-estilo #block-srefs-content > article {
  padding: 4rem 1rem;
}
.contacto .field__items .field--type-image {
  position: relative;
  padding: 1rem;
}
.contacto .field--type-image img {
  max-width: 100% !important;
  max-height: 15rem !important;
  width: auto;
  height: auto;
  transition: transform 180ms ease, box-shadow 180ms ease;
  transform-origin: center center;
  will-change: transform;
}
.flag-me-gusta.action-flag a:after {
  filter: opacity(0.2);
}
.flag-me-gusta a:after {
  width: 14px;
  height: 13px;
}
.contacto .footer {
  grid-template-columns: 1fr 24px;
  padding: 0.5rem 1rem;
  line-height: 2.3rem;
}
/* fondo desenfocado del nav bar */

body.content-type-estilo #main-sidebar::before {
  content: "";
  position: absolute;
  inset: -40rem;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: var(--backdrop);
  -webkit-filter: var(--backdrop);
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
/*backdrop-filter: blur(var(--blur)) saturate(3);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(3);*/
  mask-image: var(--dither-noise);
  -webkit-mask-image: var(--dither-noise);
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
  mask-size: 1.5px 1px;
  -webkit-mask-size: 1.5px 1px;
}
body.content-type-estilo #main-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-claro);
  z-index: -2;
}
/* Tipo página */
.content-type-page .main-layout {
  padding: 7rem;
}
body.content-type-page .main-layout {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* LEFT SIDEBAR */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */


#main-sidebar nav > ul a {
  padding: 0.5rem 0;
  display: block;
}
body[data-theme="dark"] #block-busqueda-por-sref input.form-text[value=""]:hover {
  border-color: color-mix(in srgb, transparent 0%, var(--primary-hover)) !important;
  animation: dark-move-in-cat var(--transicion-hover) ease-in-out;
}
body[data-theme="dark"] #block-busqueda-por-sref input.form-text[value=""]:hover::placeholder {
  color: var(--secondary-hover);
  animation: dark-move-in-cat var(--transicion-hover) ease-in-out;
}
#social a:hover {
  border-color: var(--primary-hover);
}
a.social-media:hover:before {
  background-color: var(--secondary-hover);
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* POLAROID FOOTER */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

/* Calificación */
.rate-image {
  margin-right: 0.2em;
}
.content-type-estilo article .rate-image {
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.contacto .field__item .field--type-image {
  border-bottom: 1px solid color-mix(in srgb, transparent 90%, var(--color-oscuro));
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* CATÁLOGO */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */


body[data-theme="light"] .catalogo .polaroid-view:hover {
  padding-top: 0;
  padding-bottom: 0.3rem;
}
body[data-theme="light"] .catalogo .polaroid-view:hover a {
  -webkit-box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 6px 10px -6px rgba(0,0,0,0.4);
  box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.4);
}
.contacto .view-contents,
.contacto.aplicaciones .field__items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)) !important;
}
.contacto .views-row,
.contacto .field__items > .field__item {
  border: 1px solid color-mix(in srgb, transparent 90%, var(--color-oscuro));
  border-radius: var(--radio);
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* FILTROS Y PAGER */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

.bef-exposed-form select.form-select { /* los mismos selectores pero en mobile */
  display: none;
}
#main-content,
#block-srefs-content .views-exposed-form.bef-exposed-form,
.pager .pager__items {
  width: calc(100% - var(--sidebar-width));
}
/* Selectores */
.enhanced-select.is-hidden-native > select.form-select { /* Oculta el selector por defecto */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* PÁGINA DE REGISTRO */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

body.gestion-usuarios #main-sidebar,
body.gestion-usuarios #main-content .main-layout  {
  min-height: 100vh;
  display:grid;
  align-items: center;
}

/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */
/* ROL ADMINISTRADOR */
/* █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

.toolbar-oriented .toolbar-tray-vertical {
  width: var(--administration-tray);
}
.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
    margin-inline-start: var(--administration-tray);
}

}

/* Detecta si usa o no webkit */
@media not all and (min-resolution: 0.001dpcm) {
  body { outline: 5px solid red !important; }
}