/* style.css
    Tema: experimentos, energía fotovoltaica, baterías, vehículos eléctricos
    Autor: GitHub Copilot
*/

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root{
  /* Paleta solar / tecnológica */
  --bg-1: #070217; /* noche profundo */
  --bg-2: #0f2a43; /* océano nocturno */
  --sun-1: #ffd24a; /* amarillo vivo */
  --sun-2: #ff8a00; /* naranja */
  --panel: #35818e; /* verde-azulado panel */
  --accent: #7be495; /* verde batería */
  --glass: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.7);
  --card-shadow: 0 8px 30px rgba(2,6,23,0.6);
  --radius: 12px;
  --glass-border: rgba(255,255,255,0.06);
  --success: #2dd36f;
  --danger: #ff6b6b;
  --code-bg: rgba(0,0,0,0.35);
}

/* Reset rápido */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--bg-2);
  /* Fondo plano azul oscuro para evitar bandas al hacer scroll */
  background: var(--panel);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:32px;
}

/* Contenedor responsive */
.container{
  max-width:1200px;
  margin:0 auto;
}

/* Encabezado con sol estilizado */
.header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
}
.brand{
  display:flex;
  gap:14px;
  align-items:center;
  text-decoration:none;
  color:var(--muted);
}
.logo{
  width:64px;
  height:64px;
  border-radius:14px;
  background:
     conic-gradient(from 200deg at 50% 50%, var(--sun-1), var(--sun-2), var(--panel)),
     linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  box-shadow: 0 6px 18px rgba(255,138,0,0.08), inset 0 -6px 18px rgba(0,0,0,0.25);
  display:grid;
  place-items:center;
  color:#071529;
  font-weight:800;
  font-size:20px;
}

/* Image logo used in specific pages */
.site-logo{
  width: 128px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  display:inline-block;
}

.brand > div{ /* keep text compact and vertically centered */
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Navegación simple */
.nav{
  margin-left:auto;
  display:flex;
  gap:10px;
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  transition:all .18s ease;
}
.nav a:hover, .nav a:focus{
  background:rgba(255,255,255,0.04);
  color:white;
  transform:translateY(-2px);
}

/* Grid principal */
.grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
  align-items:start;
}

/* Make servicios span the full width of the grid (same as Bienvenido) */
.grid > #servicios {
  grid-column: 1 / -1;
}

/* Tarjetas (glass) */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--card-shadow);
  backdrop-filter: blur(6px) saturate(120%);
  grid-column: 1 / -1; /* card ocupa su espacio en el grid por defecto */
}

/* Tipografías */
h1,h2,h3{
  color:white;
  margin:0 0 10px 0;
  line-height:1.1;
}
h1{font-size:28px; font-weight:800}
h2{font-size:18px; font-weight:700}
p{margin:0 0 12px 0; color:var(--muted)}

/* Botones */
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  background:linear-gradient(180deg,var(--panel), #06a995);
  color:#022b2a;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(6,160,150,0.12);
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(6,160,150,0.12)}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04)}

/* Lista de experimentos */
.experiments{
  display:grid;
  gap:12px;
}
.experiment{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  transition:background .12s ease;
}
.experiment:hover{background:rgba(255,255,255,0.02)}
.experiment .icon{
  width:56px; height:56px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; color:#032026;
  background:linear-gradient(180deg,var(--sun-1), var(--sun-2));
  box-shadow:0 6px 18px rgba(255,138,0,0.08);
}

/* Medidores y baterías */

/* Batería estilizada */
.battery{
  width:160px;
  height:68px;
  border-radius:10px;
  padding:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));
  border:1px solid rgba(255,255,255,0.04);
  position:relative;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.2);
}
.battery::after{
  content:"";
  position:absolute;
  right:-14px;
  top:24px;
  width:10px; height:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  border-radius:2px;
}
.battery .level{
  height:100%;
  width:60%; /* ajustar con clase adicional */
  background:linear-gradient(90deg,var(--accent), #16a34a);
  border-radius:6px;
  transition:width .8s cubic-bezier(.2,.9,.3,1);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#022b22;
  font-weight:700;
}

/* pulsos para paneles solares */
.panel-array{
  display:flex;
  gap:10px;
}
.panel{
  width:86px; height:56px; border-radius:6px;
  background:linear-gradient(180deg,#032e3a 0%, #073f45 100%);
  box-shadow: 0 6px 20px rgba(5,65,74,0.25);
  border:1px solid rgba(255,255,255,0.035);
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px);
  background-size:6px 6px;
  opacity:0.9;
  mix-blend-mode:overlay;
}

/* Indicador de energía (gauge simple) */
.gauge{
  width:100%;
  height:12px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  overflow:hidden;
}
.gauge > i{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,var(--sun-1), var(--sun-2));
  transition:width .6s ease;
}

/* EV - representación simple */
.ev{
  width:220px;
  height:70px;
  background:linear-gradient(180deg,#0b6b8a, #064e63);
  border-radius:18px;
  position:relative;
  box-shadow: 0 10px 30px rgba(2,14,20,0.6);
  padding:12px;
}
.ev::before, .ev::after{
  content:"";
  position:absolute;
  bottom:-10px;
  width:36px; height:36px;
  background:#06181c;
  border-radius:50%;
  left:28px;
  box-shadow:0 6px 12px rgba(0,0,0,0.6);
}
.ev::after{left:auto; right:28px}
.ev .plug{
  position:absolute;
  right:12px; top:12px;
  width:34px; height:34px;
  background:linear-gradient(180deg,#ffdf6f,#ffb347);
  border-radius:8px;
  display:grid; place-items:center;
  font-weight:800; color:#0b2b22;
}

/* Código / consola estilo laboratorio */
.console{
  background:var(--code-bg);
  padding:12px;
  border-radius:8px;
  color:#cfeefd;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:13px;
  overflow:auto;
}

/* Tabla de datos */
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:10px;
}
.table th, .table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
}
.table th{color:#dff7ee; font-weight:700}

/* Estilos utilitarios */
.row{display:flex; gap:12px; align-items:center}
.column{display:flex; flex-direction:column; gap:8px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

/* Focus accesible */
a:focus, button:focus, input:focus{
  outline:3px solid rgba(123,228,149,0.16);
  outline-offset:3px;
  border-radius:8px;
}

/* Pequeñas animaciones */
.pulse{
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:1}
  50%{transform:scale(1.03); opacity:0.9}
  100%{transform:scale(1); opacity:1}
}

/* Responsivo */
@media (max-width:980px){
  .grid{grid-template-columns:1fr; padding-bottom:20px}
  .nav{display:none}
  .header{gap:12px}
}