/* Generado por scripts/empaquetar_tema.py a partir de config/tema.yaml.
   NO editar a mano: se sobreescribe en cada corrida. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root {
  /* Marca (texto) */
  --tema-cliente: 'McEwen Copper';
  --tema-descriptor: 'Los Azules · San Juan, Argentina';
  --tema-producto: 'SSA — Salud, Seguridad y Ambiente';
  --tema-aviso: 'Datos de prueba — información anonimizada';
  --tema-pie: 'Entorno de demostración preparado por Quilsoft';
  /* Marca (imágenes) */
  --tema-logo: url('marca/mcewencopper-logo.png');
  --tema-logo-quilsoft: url('marca/quilsoft-logo.png');
  /* Colores */
  --primario: #0D1B31;
  --primario-suave: #172C51;
  --acento: #B96E2A;
  --acento-suave: #F0D9C6;
  --secundario: #FFC100;
  --fondo: #F5F6F8;
  --superficie: #FFFFFF;
  --texto: #12203A;
  --texto-suave: #5C6B84;
  --borde: #DFE4EC;
  --ok: #1E7F4F;
  --atencion: #C98500;
  --critico: #C0392B;
  --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--acento); }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; }

/* ---------- cabecera ---------- */
.cabecera {
  background: var(--primario);
  color: var(--superficie);
  border-bottom: 3px solid var(--acento);
}
.cabecera-interno {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.marca-logo {
  width: 190px; height: 44px; flex: 0 0 auto;
  background-image: var(--tema-logo);
  background-repeat: no-repeat; background-position: left center;
  background-size: contain;
}
.marca-texto { flex: 1 1 320px; min-width: 220px; }
.marca-cliente { font-size: 1.3rem; font-weight: 700; letter-spacing: .2px; }
.marca-descriptor { color: var(--acento-suave); font-size: .92rem; }
.marca-producto { color: var(--secundario); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.cabecera-derecha { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.usuario-caja { text-align: right; font-size: .82rem; line-height: 1.25; }
.usuario-nombre { font-weight: 600; }
.usuario-rol { color: var(--acento-suave); text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.salir { color: var(--secundario); text-decoration: none; border: 1px solid var(--acento-suave); padding: 6px 12px; border-radius: 6px; font-size: .82rem; white-space: nowrap; }
.salir:hover { background: var(--primario-suave); }

.aviso {
  background: var(--acento-suave); color: var(--primario);
  text-align: center; font-size: .82rem; font-weight: 600;
  padding: 7px 12px; letter-spacing: .02em;
}

/* ---------- pestañas ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); margin: 22px 0 24px; }
.tab {
  appearance: none; border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--texto-suave);
  font-family: inherit; font-size: .92rem; font-weight: 600;
  padding: 10px 16px; cursor: pointer; border-radius: 8px 8px 0 0;
}
.tab:hover { color: var(--primario); background: var(--superficie); }
.tab[aria-selected="true"] {
  color: var(--primario); background: var(--superficie);
  border-color: var(--borde); box-shadow: inset 0 -3px 0 var(--acento);
}

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px; border-left: 4px solid var(--borde);
}
.kpi-titulo { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.kpi-valor { font-size: 1.85rem; font-weight: 700; margin: 4px 0 2px; }
.kpi-unidad { font-size: .95rem; font-weight: 600; color: var(--texto-suave); margin-left: 4px; }
.kpi-detalle { color: var(--texto-suave); font-size: .82rem; }
.kpi.ok { border-left-color: var(--ok); }
.kpi.atencion { border-left-color: var(--atencion); }
.kpi.critico { border-left-color: var(--critico); }

/* ---------- hallazgos ---------- */
.hallazgos { display: grid; gap: 12px; margin-bottom: 26px; }
.hallazgo {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px; border-left: 4px solid var(--acento);
}
.hallazgo.alta, .hallazgo.critico { border-left-color: var(--critico); }
.hallazgo.media, .hallazgo.atencion { border-left-color: var(--atencion); }
.hallazgo.baja, .hallazgo.ok { border-left-color: var(--ok); }
.hallazgo-titulo { font-weight: 700; margin-bottom: 4px; }
.hallazgo-detalle { color: var(--texto-suave); font-size: .9rem; }
.evidencia { margin: 8px 0 0; padding-left: 18px; font-size: .82rem; color: var(--texto-suave); }
.evidencia li { margin: 2px 0; }
.evidencia .fuente { font-family: ui-monospace, monospace; color: var(--acento); }

/* ---------- secciones y tablas ---------- */
.seccion { margin-bottom: 28px; }
.seccion h2 { font-size: 1.02rem; margin: 0 0 12px; color: var(--primario); }
.seccion h3 { font-size: .9rem; margin: 18px 0 8px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 16px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { color: var(--texto-suave); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--fondo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pildora { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pildora.ok { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok); }
.pildora.atencion { background: color-mix(in srgb, var(--atencion) 16%, var(--superficie)); color: var(--atencion); }
.pildora.critico { background: color-mix(in srgb, var(--critico) 14%, var(--superficie)); color: var(--critico); }
.pildora.neutro { background: var(--fondo); color: var(--texto-suave); }

.boton { appearance: none; border: 1px solid var(--acento); background: transparent; color: var(--acento);
  font-family: inherit; font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.boton:hover { background: var(--acento); color: var(--superficie); }
.boton:disabled { opacity: .5; cursor: default; }

.grupos-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grupo-alerta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; }
.grupo-alerta h3 { margin-top: 0; }
.grupo-alerta .n { font-size: 1.5rem; font-weight: 700; }
.grupo-alerta.vencido { border-top: 4px solid var(--critico); }
.grupo-alerta.d30 { border-top: 4px solid var(--atencion); }
.grupo-alerta.d60 { border-top: 4px solid var(--secundario); }

/* ---------- preguntas ---------- */
.preguntar { background: var(--primario); color: var(--superficie); border-radius: 12px; padding: 20px; margin-bottom: 28px; }
.preguntar h2 { color: var(--superficie); margin: 0 0 6px; }
.preguntar p { color: var(--acento-suave); font-size: .88rem; margin: 0 0 14px; }
.preguntar form { display: flex; gap: 10px; flex-wrap: wrap; }
.preguntar input[type="text"] {
  flex: 1 1 320px; min-width: 200px; padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--primario-suave); background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: .95rem;
}
.preguntar button[type="submit"] {
  appearance: none; border: none; background: var(--secundario); color: var(--primario);
  font-family: inherit; font-weight: 700; font-size: .92rem; padding: 11px 22px; border-radius: 8px; cursor: pointer;
}
.preguntar button[type="submit"]:hover { background: var(--acento); color: var(--superficie); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ejemplo {
  appearance: none; border: 1px solid var(--acento-suave); background: transparent;
  color: var(--acento-suave); font-family: inherit; font-size: .8rem;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.ejemplo:hover { background: var(--primario-suave); color: var(--superficie); }
.respuesta { margin-top: 16px; background: var(--superficie); color: var(--texto); border-radius: 10px; padding: 14px 16px; border-left: 4px solid var(--secundario); }
.respuesta .texto { font-size: .95rem; }
.respuesta .fuente { color: var(--texto-suave); font-size: .8rem; margin-top: 8px; }
.respuesta .fuente code { font-family: ui-monospace, monospace; color: var(--acento); }

.vacio { background: var(--superficie); border: 1px dashed var(--borde); border-radius: 10px; padding: 28px; text-align: center; color: var(--texto-suave); }
.ayuda { color: var(--texto-suave); font-size: .82rem; margin: -4px 0 12px; }
.oculto { display: none !important; }
.pie { text-align: center; color: var(--texto-suave); font-size: .8rem; margin-top: 40px; }