/* El simulador de conexiones. Usa la base de gps.css (controles, tabla,
   gráficas) y agrega lo suyo. */

.casillas { display: flex; flex-wrap: wrap; gap: 0 22px; }
.tabla-ancha { overflow-x: auto; }
.texto-res { font-size: 16px; line-height: 1.6; margin: 14px 0 0; }
#simulador input:disabled { opacity: .45; }

#t-det, .t-comp { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; margin-top: 8px; }
#t-det th, .t-comp th { font-weight: 400; color: var(--suave); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--borde); font-size: 12px; }
#t-det td, .t-comp td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
#t-det th:first-child, #t-det td:first-child, .t-comp th:first-child, .t-comp td:first-child { text-align: left; white-space: normal; }
#t-det td:first-child, .t-comp td:first-child { font-family: var(--serif); font-size: 15px; color: var(--texto); }
.t-comp td.mal { color: var(--rojo); }
.t-comp td.ojo { color: var(--ambar); }
#t-det tr:last-child td, .t-comp tr:last-child td { border-bottom: 0; }

/* la detección */
.barra-det { fill: var(--suave); opacity: .85; }
.barra-det.ka { fill: var(--rojo); }
.barra-det.gen { fill: var(--verde-vivo); }
.barra-det.socket { fill: var(--azul); }
.raya-p95 { stroke: var(--texto); stroke-width: 2; }
.grafica text.valor { fill: var(--texto); }
.grafica text.unidad { fill: var(--tenue); }

/* el reinicio */
.linea.serie-a { stroke: var(--azul); }
.linea.serie-b { stroke: var(--verde-vivo); stroke-dasharray: 6 4; }
.leyenda .serie-a { color: var(--azul); }
.leyenda .serie-b { color: var(--verde-vivo); }

/* en el teléfono: cada renglón con sus valores debajo, cada uno con su etiqueta */
@media (max-width: 620px) {
  #t-det thead, .t-comp thead { display: none; }
  #t-det tbody, .t-comp tbody { display: block; }
  #t-det tr, .t-comp tr { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--borde); padding: 6px 0; }
  #t-det td:first-child, .t-comp td:first-child { grid-column: 1 / -1; }
  #t-det td, .t-comp td { border-bottom: 0; padding: 3px 4px; font-size: 12px; text-align: left !important; white-space: normal; }
  #t-det td[data-col]::before, .t-comp td[data-col]::before {
    content: attr(data-col); display: block; font-size: 9.5px; color: var(--tenue); font-weight: 400; margin-bottom: 2px;
  }
}
.grafica text.nombre { fill: var(--suave); font-size: 11px; }