:root {
  --max-width: 100%;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --primary-glow: conic-gradient(
    from 180deg at 50% 50%,
    #16abff33 0deg,
    #0885ff33 55deg,
    #54d6ff33 120deg,
    #0071ff33 160deg,
    transparent 360deg
  );
  --secondary-glow: radial-gradient(
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(
    #00000080,
    #00000040,
    #00000030,
    #00000020,
    #00000010,
    #00000010,
    #00000080
  );

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 255, 255, 255;
  --card-border-rgb: 131, 134, 135;
}

._parpadea {  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(
      to bottom right,
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0.3)
    );

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(
      #ffffff80,
      #ffffff40,
      #ffffff30,
      #ffffff20,
      #ffffff10,
      #ffffff10,
      #ffffff80
    );

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }
}

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

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
    
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: none;
}

._mostrar{
  display: block;
}

._ocultar{
  display: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}
._vie_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  min-height: 10vh;
}
._vie_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(25%, auto));
  width: var(--max-width);
  max-width: 100%;
  margin: 10px 20px;
}
._vie_card {
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius);
  background: rgba(var(--card-rgb), 0);
  border: 1px solid rgba(var(--card-border-rgb), 0);
  transition: background 200ms, border 200ms;
}
._vie_card span {
  display: inline-block;
  transition: transform 200ms;
}
._vie_card p {
  margin: 0;
  opacity: 0.6;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 40ch;
  padding: 0;
}
._vie_cabecera {
  float: left; 
  width: 100%; 
  border-radius: 5px 5px 0px 0px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color: #666666; 
  margin: 10px 0px 0px 0px;
  border-color: white; 
  border-width: 1px 1px 0px 1px; 
  border-style: solid;
}
._vie_seccion {
  float: left; 
  width: 100%; 
  border-radius: 0px 0px 0px 0px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color: orange; 
  margin: 0px; 
  border-color: white; 
  border-width: 0px 1px 0px 1px; 
  border-style: solid;
}
._vie_pievie {
  float: left; 
  width: 100%; 
  border-radius: 0px 0px 5px 5px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color:#0d6efd; 
  margin-bottom: 10px; 
  border-width: 0px 1px 1px 1px; 
  border-style: solid;
}


/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  ._vie_card:hover {
    background: rgba(var(--card-rgb), 0.1);
    border: 1px solid rgba(var(--card-border-rgb), 0.15);
  }
  ._vie_card:hover span {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion) {
  ._vie_card:hover span {
    transform: none;
  }
}

/* Mobile */
@media (max-width: 701px) {
  ._vie_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    min-height: 10vh;
  }
  ._vie_grid {
    grid-template-columns: 1fr;
    margin: 10px 0px;
    max-width: 100%;
    text-align: center;
  }
  ._vie_card {
    padding: 1rem 0.5rem;
  }
  ._vie_card span {
    display: inline-block;
    transition: transform 200ms;
  }
  ._vie_card p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 0;
  }
}

/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
  ._vie_grid {
    grid-template-columns: repeat(4, 25%);
  }
}