/* Punto de Recarga - hoja de estilos del panel
   Tema oscuro, sin dependencias externas de fuentes ni iconos. */

/* Paleta y tipografia alineadas con V2C Cloud: fondo casi negro, tarjetas
   apenas mas claras, verde como color de marca y acento, y una geometrica
   (Poppins) para titulos y cifras sobre una neutra (Inter) para el texto
   denso, que en tablas se lee mejor. */
:root {
  --fondo:        #0a0e13;
  --fondo-2:      #131920;
  --fondo-3:      #1b232d;
  --borde:        #26303c;
  --borde-suave:  #1d2530;
  --texto:        #e8eef5;
  --texto-tenue:  #8494a6;
  --acento:       #00d18f;   /* verde V2C: marca y acento principal */
  --acento-tenue: rgba(0, 209, 143, .14);
  --azul:         #3b9dff;
  --verde:        #00d18f;
  --rojo:         #ff5c5c;
  --ambar:        #f5b544;
  --radio:        12px;
  --titulo: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
  --cuerpo: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[v-cloak] { display: none; }

/* El juego de iconos no se pinta: solo aporta las definiciones. */
.juego-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Todos los iconos comparten trazo y grosor, que es lo que hace que
   parezcan de la misma familia aunque cada uno se dibuje aparte. */
.ico, .ico-mini, .dibujo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico { width: 17px; height: 17px; flex: none; }
.ico-mini { width: 13px; height: 13px; flex: none; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .marca-texto, .kpi-valor, .dato-fuerte { font-family: var(--titulo); }

code {
  background: var(--fondo-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .88em;
}
/* Comandos largos: en bloque y con scroll propio, para que no desborden
   la tarjeta ni fuercen scroll horizontal en la pagina. */
code.bloque {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  overflow-x: auto;
  white-space: pre;
  font-size: .8em;
}

/* ---------------- login ---------------- */
.pantalla-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.tarjeta-login {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 32px;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tarjeta-login h1 { margin: 0; font-size: 1.5rem; }
.tarjeta-login .sub { margin: -8px 0 8px; color: var(--texto-tenue); font-size: .9rem; }
.opcional { color: var(--texto-tenue); font-weight: 400; font-size: .85em; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--texto-tenue);
}
input, select {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 12px;
  color: var(--texto);
  font-size: 1rem;
  font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
input[type=range] { padding: 0; }

/* ---------------- estructura ---------------- */
.app { max-width: 1180px; margin: 0 auto; padding: 0 18px 40px; }

.cabecera { padding-top: 16px; margin-bottom: 22px; }
.fila-marca {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.marca { display: flex; align-items: center; gap: 11px; flex: 1; }
.marca-icono {
  width: 40px; height: 28px; flex: none;
  color: var(--acento);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.marca-texto { font-weight: 600; font-size: 1.16rem; letter-spacing: -.01em; }

/* PESTANAS AL ESTILO DEL NAVEGADOR.
   La activa se funde con el contenido de abajo: fondo igual al de las
   tarjetas, esquinas superiores redondeadas, y una franja de 1 px que tapa
   la linea inferior para que no haya separacion entre la pestana y lo que
   muestra. Es lo que hace que se lea como "esta pestana contiene esto" en
   vez de "este boton esta pulsado". */
.pestanas {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  border-bottom: 1px solid var(--borde);
  padding-left: 2px;
}
.pestana {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--texto-tenue);
  padding: 10px 18px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  bottom: -1px;                 /* solapa la linea del contenedor */
  transition: background .15s, color .15s;
}
.pestana:hover { background: var(--borde-suave); color: var(--texto); }
.pestana .ico { opacity: .75; }
.pestana.activa {
  background: var(--fondo-2);
  border-color: var(--borde);
  color: var(--texto);
  font-weight: 600;
}
/* Tapa la linea inferior justo debajo de la pestana activa. */
.pestana.activa::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--fondo-2);
}
.pestana.activa .ico { opacity: 1; color: var(--acento); }

.usuario { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.usuario .nombre { color: var(--texto-tenue); }

.panel {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
}
.panel h2 { margin: 0 0 14px; font-size: 1.05rem; }
.descripcion { color: var(--texto-tenue); font-size: .9rem; margin: -6px 0 16px; }
.acciones-panel {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}

/* ---------------- KPIs ---------------- */
.rejilla-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
}
.kpi-etiqueta { color: var(--texto-tenue); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi-valor { font-size: 1.5rem; font-weight: 700; margin-top: 4px; }
.kpi-valor small { font-size: .62em; color: var(--texto-tenue); font-weight: 500; }
.kpi-pie { color: var(--texto-tenue); font-size: .78rem; margin-top: 2px; }
.kpi.destacado { border-color: var(--acento); }
.kpi.verde .kpi-valor { color: var(--verde); }
.kpi.cargando { border-color: var(--verde); }
.kpi.parado { border-color: var(--borde); }
.kpi.desconectado { border-color: var(--ambar); }

/* ---------------- botones ---------------- */
/* Los botones llevan icono a la izquierda: cuesta menos localizar el que se
   busca por su forma que leyendo todas las etiquetas. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--borde);
  background: var(--fondo-3);
  color: var(--texto);
  padding: 10px 18px;
  border-radius: var(--radio);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition: filter .15s, border-color .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.28); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario {
  background: var(--acento); border-color: var(--acento); color: #04231a;
  font-weight: 600;
}
.btn-verde {
  background: var(--acento); border-color: var(--acento); color: #04231a;
  font-weight: 600;
}
.btn-rojo { background: transparent; border-color: var(--rojo); color: var(--rojo); }
.btn-rojo:hover:not(:disabled) { background: rgba(255,92,92,.12); filter: none; }
.btn-sutil { background: transparent; }
.btn-sutil:hover:not(:disabled) { background: var(--fondo-3); filter: none; }
.botonera { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

.pista { color: var(--texto-tenue); font-weight: 400; }

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: end;
}

/* ---------------- optimizador por bateria ----------------
   Es la pantalla que mas usa el conductor a diario, asi que el camino
   "cargar al 80 %" tiene que ser un boton grande y ningun paso mas. */
.bloque-soc { display: flex; flex-direction: column; gap: 18px; }
.fila-soc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  align-items: start;
}
.campo-soc { display: flex; flex-direction: column; gap: 7px; }
.campo-soc > label {
  font-size: .88rem; font-weight: 600; color: var(--texto-tenue);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.entrada-con-boton { display: flex; align-items: center; gap: 6px; }
.entrada-con-boton input { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 600; }
/* Cifras tabulares: al ir todas del mismo ancho, la fecha no "baila" al
   teclearla ni al cambiar de valor. */
.campo-fecha {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  min-width: 11.5em;
}
.entrada-con-boton .sufijo { color: var(--texto-tenue); font-weight: 600; }
.entrada-con-boton .btn { padding: 8px 12px; }

.objetivos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-objetivo {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 10px 20px;
  border-radius: var(--radio);
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
}
.btn-objetivo:hover { filter: brightness(1.25); }
.btn-objetivo.activo {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.objetivo-libre { width: 78px; font-size: .95rem; }

.fila-lanzar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fila-lanzar .crece { flex: 1; }
.btn-grande { font-size: 1.05rem; padding: 13px 26px; }

.pista.ok { color: var(--verde); }
.pista.error { color: var(--rojo); }

.nota-impuestos { margin-bottom: 10px; }
.lista-nota {
  color: var(--texto-tenue); font-size: .9rem;
  margin: 6px 0 12px; padding-left: 22px;
}
.lista-nota li { margin-bottom: 3px; }

/* Doble clase a proposito: .grafico se define mas abajo en este fichero y,
   con la misma especificidad, ganaria por orden de aparicion. */
.grafico.grafico-alto { height: 430px; }

/* ---------------- avisos ---------------- */
.aviso {
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 12px 0;
  font-size: .9rem;
  border: 1px solid;
}
.aviso-error { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.4); }
.aviso-ok    { background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.4); }
.aviso-info  { background: rgba(243,156,18,.10); border-color: rgba(243,156,18,.35); }
/* Modo real: mas fuerte que el resto de avisos, y con el icono a la
   izquierda para que se distinga de un vistazo del aviso de simulacion. */
.aviso-real {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,92,92,.12);
  border-color: var(--rojo);
  border-left-width: 4px;
  color: var(--texto);
}
.aviso-real .ico { width: 22px; height: 22px; color: var(--rojo); flex: none; }

.chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.chip-sim  { background: rgba(243,156,18,.18); color: var(--ambar); }
.chip-real { background: rgba(231,76,60,.18); color: var(--rojo); }

.pastilla {
  font-size: .76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fondo-3);
}
.pastilla.ok  { background: rgba(46,204,113,.16); color: var(--verde); }
.pastilla.mal { background: rgba(231,76,60,.16); color: var(--rojo); }
.p-valle { background: rgba(46,204,113,.16); color: var(--verde); }
.p-llano { background: rgba(243,156,18,.16); color: var(--ambar); }
.p-punta { background: rgba(231,76,60,.16); color: var(--rojo); }

/* ---------------- tablas ---------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th {
  text-align: left;
  color: var(--texto-tenue);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 9px 10px; border-bottom: 1px solid rgba(42,52,65,.5); }
.tabla tr:last-child td { border-bottom: none; }
.tenue { color: var(--texto-tenue); }

.grafico { position: relative; height: 320px; }

/* ---------------- dashboard incrustado ----------------
   El dashboard historico es una pagina completa con sus propios estilos, asi
   que va en un iframe. Se le da altura de viewport completo menos la cabecera
   para que se comporte como si fuera la pagina entera. */
.seccion-dashboard { display: flex; flex-direction: column; }
.barra-dashboard {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: .88rem;
}
.barra-dashboard .crece { flex: 1; }
.barra-dashboard a.btn { text-decoration: none; display: inline-block; }
/* El iframe NO lleva altura fija ni borde: se le ajusta la altura al
   contenido desde app.js (ajustarAlturaDashboard). Asi no aparece una caja
   con scroll propio dentro de la pagina, y el dashboard se recorre con la
   barra de scroll del navegador, como si fuera la pagina entera. */
.marco-dashboard {
  width: 100%;
  border: 0;
  display: block;
  background: #0d1117;   /* el mismo fondo del dashboard, evita el flash blanco */
  overflow: hidden;
}
/* Solo mientras carga: reserva sitio para que no salte el layout, y evita
   ensenar el blanco intermedio del navegador. */
.marco-dashboard.cargando { height: 70vh; visibility: hidden; }
.cargando-dashboard {
  position: absolute;
  color: var(--texto-tenue);
  font-size: .9rem;
  padding: 24px 4px;
}

.pie {
  color: var(--texto-tenue);
  font-size: .8rem;
  padding: 18px 0 0;
  border-top: 1px solid var(--borde);
  margin-top: 8px;
}
.fuentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.fuente {
  display: flex; align-items: baseline; gap: 7px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 9px 12px;
}
/* Una fuente vieja no es un error, pero conviene que salte a la vista:
   decidir con un precio de ayer o un SoC de hace una hora lleva a un plan
   equivocado sin que nada parezca roto. */
.fuente.alerta { border-color: rgba(243,156,18,.45); }
.fuente.alerta .fuente-valor { color: var(--ambar); }
.fuente-icono { width: 15px; height: 15px; color: var(--texto-tenue); flex: none; }
.fuente.alerta .fuente-icono { color: var(--ambar); }
.ico-titulo { width: 16px; height: 16px; color: var(--acento); vertical-align: -2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.tarjeta-login h1 { display: flex; align-items: center; gap: 10px; }
.tarjeta-login h1 .marca-icono { width: 34px; height: 24px; }
.fuente-nombre { font-weight: 600; color: var(--texto); }
.fuente-valor { margin-left: auto; text-align: right; }
.fuente-doble { align-items: flex-start; }
.fuente-doble .fuente-valor { display: flex; flex-direction: column; line-height: 1.35; }
.fuente-sub { font-size: .74rem; opacity: .7; }
.pie-nota { text-align: center; padding: 12px 0 0; opacity: .75; }

.pista.vieja { color: var(--ambar); }

/* ---------------- flujo de energia ----------------
   Los mismos numeros que antes iban en tarjetas sueltas, pero colocados
   sobre el camino real de la energia. La animacion solo corre cuando hay
   potencia: un diagrama que se mueve con el cargador parado enganaria. */
.panel-flujo { padding: 12px 16px 16px; }
.flujo { width: 100%; height: auto; max-height: 340px; display: block; }

.via {
  fill: none;
  stroke: var(--borde);
  stroke-width: 3;
  stroke-linecap: round;
}
.via.activa { stroke: rgba(0, 209, 143, .38); }

.particula { fill: var(--acento); filter: drop-shadow(0 0 5px rgba(0,209,143,.9)); }
.particula-coche { fill: var(--acento); filter: drop-shadow(0 0 5px rgba(0,209,143,.9)); }
.particula-casa { fill: var(--ambar); filter: drop-shadow(0 0 5px rgba(245,181,68,.8)); }

/* Los dibujos van sin recuadro: a este tamano el icono ya se identifica solo
   y un circulo alrededor solo quitaria sitio. El color dice si esa rama
   esta recibiendo potencia ahora mismo. */
.dibujo { stroke-width: 2.2; overflow: visible; }
.dibujo-apagado { color: var(--texto-tenue); opacity: .55; }
.dibujo-activo { color: var(--acento); }
.dibujo-casa { color: var(--ambar); }
.dibujo-red { color: var(--texto-tenue); }

.nodo-valor {
  font-size: 22px; font-weight: 600; text-anchor: middle;
  fill: var(--texto); font-family: 'Poppins', system-ui, sans-serif;
}
.nodo-unidad { font-size: 12px; fill: var(--texto-tenue); font-weight: 500; }
.nodo-nombre {
  font-size: 11.5px; font-weight: 600; text-anchor: middle;
  fill: var(--texto-tenue); font-family: 'Inter', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .09em;
}
.nodo-sub {
  font-size: 11.5px; text-anchor: middle; fill: var(--texto-tenue);
  font-family: 'Inter', system-ui, sans-serif;
}

.pie-flujo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 4px;
  font-size: .86rem;
}
.pie-flujo .crece { flex: 1; }
.pastilla-estado {
  padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: .82rem;
  background: var(--fondo-3); border: 1px solid var(--borde);
}
.pastilla-estado.cargando { border-color: var(--verde); color: var(--verde); }
.pastilla-estado.parado { color: var(--texto-tenue); }
.pastilla-estado.desconectado { border-color: var(--ambar); color: var(--ambar); }

/* ---------------- plan de carga en ejecucion ---------------- */
.panel-plan { border-color: rgba(46,204,113,.4); }
.panel-sin-plan { opacity: .8; }
.chip-activo { background: rgba(46,204,113,.18); color: var(--verde); }
.sub-titulo {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-tenue); margin: 22px 0 10px;
}
.cabecera-plan {
  display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 14px;
}
.cabecera-plan > div { min-width: 110px; }
.cabecera-plan .btn { margin-left: auto; }
.dato-fuerte { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }

.barra-progreso {
  position: relative; height: 22px; background: var(--fondo-3);
  border: 1px solid var(--borde); border-radius: 999px; overflow: hidden;
  margin-bottom: 16px;
}
.barra-progreso-relleno {
  height: 100%; background: linear-gradient(90deg, #2ecc71, #3ddc97);
  transition: width .6s ease;
}
.barra-progreso-texto {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: var(--texto);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.rejilla-desviacion { margin-bottom: 4px; }
.kpi.malo { border-color: var(--rojo); }
.kpi.malo .kpi-valor { color: var(--rojo); }
.kpi.aviso { border-color: var(--ambar); }
.kpi.aviso .kpi-valor { color: var(--ambar); }

.linea-fases { display: flex; flex-direction: column; gap: 6px; }
.fase {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--borde); border-left-width: 4px;
  border-radius: var(--radio); padding: 9px 13px; background: var(--fondo-3);
}
.fase-carga { border-left-color: var(--verde); }
.fase-espera { border-left-color: var(--borde); }
/* Lo ya ocurrido se atenua; lo que pasa ahora se resalta. Asi se lee de un
   vistazo en que punto del plan estamos. */
.fase.f-hecho { opacity: .5; }
.fase.f-ahora { border-color: var(--acento); background: rgba(59,157,255,.08); }
.fase-icono { display: flex; align-items: center; color: var(--texto-tenue); }
.fase-carga .fase-icono { color: var(--acento); }
.fase-icono .ico { width: 19px; height: 19px; }
.fase-cuerpo { flex: 1; min-width: 0; }
.fase-titulo { font-weight: 600; font-size: .92rem; }
.fase-detalle { color: var(--texto-tenue); font-size: .82rem; }
.fase-estado {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--acento); text-transform: uppercase;
}
.fase.f-hecho .fase-estado { color: var(--texto-tenue); }

.grafico.grafico-desviacion { height: 340px; }

.fila-enviar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--borde); margin-top: 16px; padding-top: 16px;
}
.enviar-texto { flex: 1; min-width: 260px; font-size: .88rem; color: var(--texto-tenue); }

@media (max-width: 640px) {
  .cabecera { flex-direction: column; align-items: stretch; }
  .pestanas { overflow-x: auto; }
  .kpi-valor { font-size: 1.3rem; }
}