:root {
  /* Colores oficiales Universidad de las Fuerzas Armadas ESPE */
  --primary: #003366;
  /* Azul ESPE principal */
  --dark-primary: #001a33;
  /* Azul ESPE oscuro */
  --light-primary: #1a4d80;
  /* Azul ESPE claro */
  --secondary: #ffd700;
  /* Dorado ESPE */
  --dark-secondary: #b8860b;
  /* Dorado oscuro */
  --light-secondary: #ffec8b;
  /* Dorado claro */
  --accent: #cc0000;
  /* Rojo ESPE */
  --gray: #666666;
  /* Gris neutro */
  --light-gray: #f5f5f5;
  /* Gris claro */
  --dark-gray: #333333;
  /* Gris oscuro */
  --error: #cc0000;
  /* Rojo de error (mismo que accent) */
  --success: #006600;
  /* Verde de éxito */
  --warning: #ff8c00;
  /* Naranja de advertencia */
  --white: #fff;
  --black: #000;
  --height: calc(100vh - 56px);
  --width: 100%;
  --fontFamily: "Roboto";
}

.floating-button {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 30px;
}

#main .card-wide {
  width: var(--width);
}

#modal-post-section {
  display: none;
  z-index: 1001;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  bottom: 0;
  top: 56px;
  background: white;
  text-align: center;
  transform: translateY(100vh);
  transition: transform 0.5s;
}

.svg--container {
  position: relative;
}

.svg--container div {
  height: 210px;
  background: var(--dark-primary) url('https://tse1.mm.bing.net/th/id/OIP.W5hJHsKI_CBNwrbV1BDF6gHaDg?rs=1&pid=ImgDetMain&o=7&rm=3');
  background-position: bottom;
  background-size: cover;
  object-fit: cover;
  color: var(--white);
}

.svg--container svg {
  position: absolute;
  bottom: 0;
  background: transparent;
}

#main .page-index {
  background: var(--dark-primary);
  min-height: 100dvh;
}

.page--initial {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  user-select: none;
  opacity: .87;
  color: var(--gray);
  font-size: 1rem;
  line-height: 18px;
  font-weight: 400;
}

.page--initial i {
  font-size: 4rem;
  color: var(--white);
  min-width: 70px;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.page--initial .description {
  color: var(--white);
  border-radius: 7px;
  padding: 10px;
  width: calc(var(--width) - 20px);
}

.demo-card-square.mdl-card {
  width: 320px;
  height: 320px;
}

.demo-card-square>.mdl-card__title {
  color: #fff;
  background:
    url('https://th.bing.com/th/id/OIP.gmbn37fBfMqgjhwpYp9YEgAAAA?o=7rm=3&rs=1&pid=ImgDetMain&o=7&rm=3') no-repeat #46B6AC;
}

.demo-list-item {
  width: 300px;
  color: white;
}

li span.mdl-list__item-primary-content {
  color: var(--white);
}