/* public/css/inicio.css - OPTIMIZADO (CERO LAG) */
.inicio-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 10px;
    perspective: 1000px;
}

/* --- PLANETA ANIMADO --- */
.planet-container {
    grid-column: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Aislar el contenedor en la GPU */
    transform: translateZ(0);
}

.planet {
    width: 150px;
    height: 150px;
    background: url('https://geology.com/world/world-map.gif'); /* Puedes cambiarla por una de la tierra azul */
    background-size: cover;
    border-radius: 50%;
    box-shadow: inset -20px -20px 50px #000, 0 0 50px rgba(0, 242, 255, 0.4);
    animation: rotatePlanet 20s linear infinite;
    
    /* --- ANTI-LAG OPTIMIZATION --- */
    transform: translateZ(0); 
    backface-visibility: hidden;
    /* Le decimos exactamente qué va a animarse para que lo prepare */
    will-change: background-position; 
}

@keyframes rotatePlanet {
    from { background-position: 0 0; }
    to { background-position: 630px 0; }
}

/* --- TARJETAS HACKER --- */
.hacker-card {
    /* Eliminamos backdrop-filter que causa el lag y usamos un color semi-sólido oscuro */
    background: rgba(5, 10, 20, 0.95); 
    border: 1px solid #00f2ff;
    border-radius: 5px;
    padding: 15px;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.1);
    
    /* --- ANTI-LAG OPTIMIZATION --- */
    transform: translateZ(0);
    will-change: transform;
}

.hacker-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: #00f2ff;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.3);
    padding-bottom: 5px;
}

.reloj-peru {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 0 20px #00f2ff;
    text-align: center;
    margin: 20px 0;
    
    /* Optimizar el reloj ya que cambia cada segundo */
    transform: translateZ(0);
}

.terminal-box {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #00ff88;
    background: #000;
    padding: 10px;
    height: 200px;
    overflow-y: hidden;
    border: 1px solid #111;
    
    /* Aislar la caja negra donde salen los logs */
    transform: translateZ(0);
}

.terminal-line {
    margin-bottom: 5px;
    border-left: 2px solid #00ff88;
    padding-left: 8px;
    animation: typing 0.2s steps(40, end);
    /* Alivianar la inserción de nuevas líneas de texto */
    will-change: opacity;
}

@media (max-width: 768px) {
  .inicio-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "logs"
      "planet"
      "command";
    gap: 12px;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .logs-card { grid-area: logs; }
  .planet-container {
    grid-area: planet;
    grid-column: auto;
    padding: 6px 0;
    order: 2;
  }
  .command-card { grid-area: command; }

  .planet {
    width: 100px;
    height: 100px;
  }

  .hacker-card {
    width: 100%;
    margin: 0;
  }

  .reloj-peru {
    font-size: 2.2rem;
    margin: 10px 0;
  }

  .terminal-box {
    height: 150px;
  }
}