/* ============================================================================
   Kodkod — sistema visual

   PRINCIPIO: la interfaz es grafito y papel; el color significa estado.

   Este software entrega veredictos: "opera fuera del rango BEP", "el margen NPSH
   es menor que el recomendado", "el sistema no puede operar". Si la marca, los
   botones y los encabezados también son de color, las advertencias dejan de
   saltar y el producto pierde justo lo que vende. Por eso el presupuesto de
   color se gasta casi entero en los estados.

   Reemplaza los 89 tokens institucionales de SQM (azules #00369C / #1E5CB9 y
   limas). Ninguno de esos valores sobrevive acá.

   ACCESIBILIDAD: los estados nunca se comunican solo por tono — siempre van con
   texto y con un indicador de forma. Un daltónico tiene que poder operar esto,
   y en una sala de control eso no es opcional.
   ============================================================================ */

:root {
  /* Neutrales: papel cálido, no blanco clínico. Descansa la vista en jornadas
     largas frente a tablas de números. */
  --fondo:            #FAFAF9;
  --superficie:       #FFFFFF;
  --superficie-alt:   #F4F4F2;
  --borde:            #E3E3DF;
  --borde-fuerte:     #C9C9C3;
  --texto:            #1C1C1A;
  --texto-suave:      #5F5F59;
  --texto-tenue:      #8A8A83;

  /* Acento de interfaz: deliberadamente sobrio y subordinado. Marca lo que se
     puede tocar (foco, selección, enlaces) y nada más. No es color de marca —
     cuando exista el logo, el logo manda. */
  --acento:           #3D4A5C;
  --acento-suave:     #EEF0F3;
  --acento-borde:     #B9C2CE;

  /* Estados. Acá vive el color de verdad. */
  --ok:               #2F7D4F;
  --ok-fondo:         #EDF6F0;
  --ok-borde:         #BEDDC9;

  /* Oscurecido a propósito: con #9A6400 el contraste daba 4,54 contra un umbral de
     4,5. Pasaba, pero cualquiera que aclare el fondo un punto lo rompe sin darse
     cuenta. El ámbar es el que menos margen tiene de los tres. */
  --atencion:         #855600;
  --atencion-fondo:   #FBF3E4;
  --atencion-borde:   #E8D3A8;

  --error:            #B3261E;
  --error-fondo:      #FBEDEC;
  --error-borde:      #EFC4C1;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:          #141413;
    --superficie:     #1D1D1B;
    --superficie-alt: #242422;
    --borde:          #32322E;
    --borde-fuerte:   #45453F;
    --texto:          #EDEDEA;
    --texto-suave:    #A8A8A0;
    --texto-tenue:    #7A7A73;

    --acento:         #A9B6C7;
    --acento-suave:   #23282F;
    --acento-borde:   #3A424E;

    --ok:             #6BBF8A;
    --ok-fondo:       #17241C;
    --ok-borde:       #2C4635;

    --atencion:       #D9A441;
    --atencion-fondo: #241D0F;
    --atencion-borde: #453619;

    --error:          #E88F88;
    --error-fondo:    #261513;
    --error-borde:    #4A2723;

    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Estructura ---------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* El logo usa currentColor: se invierte solo en modo oscuro sin necesidad de una
   segunda copia del archivo. El pack trae version blanca, pero mantener dos SVG en
   sincronia es una copia que se desincroniza. */
.logo { width: 30px; height: 24px; flex: 0 0 auto; color: var(--texto); }

.marca { font-weight: 620; letter-spacing: -.01em; font-size: 16px; }
.marca-sufijo { color: var(--texto-tenue); font-weight: 400; }

.contenido { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* --- Portada ------------------------------------------------------------- */

.portada { padding: 88px 0 64px; max-width: 680px; }
.portada h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  font-weight: 640;
}
.portada .bajada { font-size: 18px; color: var(--texto-suave); margin: 0 0 32px; }

.acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radio);
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--superficie);
  font: inherit;
  font-weight: 550;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) { .boton { color: #141413; } }
.boton:hover { opacity: .9; }
.boton.secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* --- Tarjetas ------------------------------------------------------------ */

.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.tarjeta p  { margin: 0; font-size: 14px; color: var(--texto-suave); }

.seccion { padding: 56px 0; border-top: 1px solid var(--borde); }
.seccion h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
              color: var(--texto-tenue); margin: 0 0 24px; font-weight: 600; }

/* --- Veredictos: el corazón del producto --------------------------------- */

.veredicto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio);
  border: 1px solid;
  font-size: 14px;
  margin-bottom: 8px;
}
/* El punto NO es decorativo: es el canal redundante al color, para que el
   estado se lea sin depender del tono. El texto del rótulo hace el resto. */
.veredicto::before { font-weight: 700; line-height: 1.5; flex: 0 0 auto; }

.veredicto.ok       { background: var(--ok-fondo);       border-color: var(--ok-borde);       color: var(--ok); }
.veredicto.ok::before       { content: "●"; }
.veredicto.atencion { background: var(--atencion-fondo); border-color: var(--atencion-borde); color: var(--atencion); }
.veredicto.atencion::before { content: "▲"; }
.veredicto.error    { background: var(--error-fondo);    border-color: var(--error-borde);    color: var(--error); }
.veredicto.error::before    { content: "■"; }

.veredicto b { display: block; color: var(--texto); }

/* --- Números ------------------------------------------------------------- */

.dato { display: flex; justify-content: space-between; gap: 16px;
        padding: 7px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.dato:last-child { border-bottom: 0; }
.dato .etiqueta { color: var(--texto-suave); }
.dato .valor { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }
.dato .unidad { color: var(--texto-tenue); font-size: 12px; margin-left: 3px; }

.pie { padding: 40px 0; border-top: 1px solid var(--borde);
       color: var(--texto-tenue); font-size: 13px; }

/* ============================================================================
   Vista de aplicación — lo que ve el ingeniero después de entrar.

   Tres paneles: dónde estoy (planta), qué le doy (entradas), qué me dice
   (resultados y veredictos). El del veredicto es el que importa, así que es el
   único que no se comprime cuando falta espacio.
   ============================================================================ */

.app { display: grid; grid-template-columns: 250px 320px 1fr; min-height: calc(100vh - 59px); }
@media (max-width: 980px) { .app { grid-template-columns: 1fr; } }

.panel { padding: 20px; border-right: 1px solid var(--borde); }
.panel:last-child { border-right: 0; }
.panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
            color: var(--texto-tenue); margin: 0 0 14px; font-weight: 600; }

.arbol { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.arbol .unidad { font-weight: 600; margin: 14px 0 6px; }
.arbol .unidad:first-child { margin-top: 0; }
.arbol .bloque { color: var(--texto-tenue); font-size: 12px; margin: 10px 0 4px; }

.sistema {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; margin: 2px 0; border: 1px solid transparent;
  border-radius: var(--radio); background: none; color: var(--texto);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.sistema:hover { background: var(--superficie-alt); }
.sistema[aria-current="true"] { background: var(--acento-suave); border-color: var(--acento-borde); font-weight: 550; }
.sistema .id { font-family: var(--fuente-num); color: var(--texto-tenue); font-size: 11px; min-width: 20px; }

/* El tipo de sistema se muestra porque ahora es un dato del paquete y no una
   deducción del identificador. Que sea visible es parte del arreglo. */
.tipo { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
        padding: 2px 6px; border-radius: 3px; border: 1px solid var(--borde-fuerte);
        color: var(--texto-tenue); }

.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
.campo input[type=number], .campo select {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 14px;
  font-family: var(--fuente-num);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.casilla { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 8px; }

.vacio { color: var(--texto-tenue); font-size: 13px; padding: 24px 0; }
.grupo { margin-bottom: 20px; }
.grupo > h3 { font-size: 12px; color: var(--texto-suave); margin: 0 0 8px; font-weight: 600; }

/* --- Esquema del sistema: los valores van SOBRE el dibujo -----------------
   Es la firma del producto. Una tabla al lado obliga al ingeniero a mapear
   numero contra equipo en la cabeza; encima del esquema, el numero ya esta
   donde el equipo esta. */

.lienzo { background: var(--superficie); border: 1px solid var(--borde);
          border-radius: var(--radio); padding: 12px; margin-bottom: 16px; }
#esquema, #esquema-red { width: 100%; height: auto; }
#esquema .eq, #esquema-red .eq { fill: var(--superficie); stroke: var(--texto-suave); stroke-width: 2; }
#esquema .liquido, #esquema-red .liquido { fill: var(--acento-borde); }
#esquema .linea, #esquema-red .linea { stroke: var(--texto-suave); stroke-width: 2.5; fill: none; }
#esquema .simbolo, #esquema-red .simbolo { stroke: var(--texto-suave); stroke-width: 2; fill: none; }
#esquema .rot, #esquema-red .rot { font-size: 11px; fill: var(--texto-tenue); text-anchor: middle;
                    font-family: var(--fuente); }

/* Los chips son el valor calculado pegado a su equipo. */
.chip { font-family: var(--fuente-num); font-size: 11px; }
.chip rect { fill: var(--superficie); stroke: var(--borde-fuerte); rx: 3; }
.chip text { fill: var(--texto); dominant-baseline: middle; }
.chip.entrada rect { stroke: var(--acento-borde); fill: var(--acento-suave); }
.chip.alerta  rect { stroke: var(--atencion-borde); fill: var(--atencion-fondo); }
.chip.alerta  text { fill: var(--atencion); }
.chip.malo    rect { stroke: var(--error-borde); fill: var(--error-fondo); }
.chip.malo    text { fill: var(--error); }

.leyenda { display: flex; gap: 14px; font-size: 11px; color: var(--texto-tenue);
           margin-top: 6px; flex-wrap: wrap; }
.leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block;
             margin-right: 4px; vertical-align: -1px; }

/* Curvas lado a lado */
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1400px) { .graficos { grid-template-columns: 1fr; } }