:root {
   --bg-dark: #0a192f;
   --bg-gradient: radial-gradient(circle at 50% 50%, #2f6fd6 0%, #0b1538 100%);
   --color-correo: #70af2a;
   --accent-green: #70af2a;
   --accent-blue: #00d2ff;
   --gap-size: 25px;
}

body,
html {
   min-height: 100%;
   margin: 0;
   font-family: 'Roboto', sans-serif;
   color: white;
   /* background-color: var(--bg-dark); */
   overflow-x: hidden;
}

/* --- CAPAS DE FONDO TECNOLÓGICO (Más iluminadas) --- */
.bg-image {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../../images/index/background.avif');
   background-size: cover;
   background-position: center;
   z-index: -3;
}

.bg-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--bg-gradient);
   opacity: 0.9;
   z-index: -2;
}

.circuit-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* SVG de circuito con mayor opacidad para que resalte en el fondo claro */
   /* background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h10v10H10zM50 10h10v10H50zM90 10h10v10H90zM30 30h10v10H30zM70 30h10v10H70z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"); */
   opacity: 0.5;
}

.bottom-accent {
   position: fixed;
   bottom: -50px;
   right: -50px;
   width: 400px;
   height: 200px;
   transform: rotate(-15deg);
   border-radius: 50% 50% 0 0;
   filter: blur(40px);
   background: var(--accent-green);
   opacity: 0.2;
   z-index: -1;
}

/* --- CONTENEDOR PRINCIPAL --- */
.main-container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

/* --- TARJETA DE CRISTAL (GLASSMORPHISM) --- */
.glass-panel {
   background: rgba(255, 255, 255, 0.03);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 24px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   width: 100%;
   max-width: 800px;
   padding: 50px 40px;
   text-align: center;
   animation: fadeInScale 0.8s ease forwards;
   position: relative;
   overflow: hidden;
}

/* Borde superior animado (Efecto Loading) */
.glass-panel::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(
      90deg,
      transparent,
      var(--accent-green),
      var(--accent-blue),
      transparent
   );
   background-size: 200% auto;
   animation: borderFlow 3s linear infinite;
}

@keyframes borderFlow {
   0% {
      background-position: 200% center;
   }
   100% {
      background-position: -200% center;
   }
}

@keyframes fadeInScale {
   from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* --- CABECERA DEL PANEL --- */
.panel-header {
   margin-bottom: 40px;
}

.panel-logo {
   max-height: 50px;
   margin-bottom: 25px;
   filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.welcome-title {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: 2rem;
   letter-spacing: 2px;
   margin-bottom: 10px;
   color: white;
   text-transform: uppercase;
}

.welcome-subtitle {
   color: rgba(255, 255, 255, 0.6);
   font-size: 1.1rem;
   letter-spacing: 1px;
}

/* --- TARJETAS DE SELECCIÓN --- */
.options-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
   margin-top: 20px;
}

.option-card {
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 20px;
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none !important;
   transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
   position: relative;
   overflow: hidden;
}

.option-card i {
   font-size: 3.5rem;
   margin-bottom: 20px;
   transition: transform 0.4s ease;
}

.option-card span {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: 1.3rem;
   letter-spacing: 2px;
   color: white;
   text-transform: uppercase;
   transition: 0.3s;
}

/* Tarjeta SISTEMA */
.card-sistema i {
   color: var(--accent-green);
   filter: drop-shadow(0 0 10px rgba(112, 175, 42, 0.3));
}

.card-sistema:hover {
   background: rgba(0, 0, 0, 0.5);
   /* Fondo más oscuro */
   border-color: rgba(112, 175, 42, 0.6);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
   transform: translateY(-10px);
}

.card-sistema:hover i {
   transform: scale(1.15);
   filter: drop-shadow(0 0 15px var(--accent-green));
}

/* Tarjeta CORREO */
.card-correo i {
   color: var(--color-correo);
   filter: drop-shadow(0 0 10px rgba(93, 169, 233, 0.3));
}

.card-correo:hover {
   background: rgba(0, 0, 0, 0.5);
   /* Fondo más oscuro */
   border-color: rgba(93, 169, 233, 0.6);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
   transform: translateY(-10px);
}

.card-correo:hover i {
   transform: scale(1.15);
   filter: drop-shadow(0 0 15px var(--color-correo));
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
   .glass-panel {
      padding: 40px 25px;
   }

   .welcome-title {
      font-size: 1.5rem;
   }

   .options-container {
      grid-template-columns: 1fr;
      /* Apilado en móvil */
      gap: 20px;
   }

   .option-card {
      padding: 30px 20px;
      flex-direction: row;
      justify-content: flex-start;
   }

   .option-card i {
      margin-bottom: 0;
      margin-right: 25px;
      font-size: 2.5rem;
   }

   .option-card span {
      font-size: 1.1rem;
   }
}