/* Sistema visual de Raifen — fuente: docs/ref/formato-visual-raifen.md
   Compartido por las dos vistas del panel. NO vendorizar los valores a mano:
   así fue como las 4 apps de Raifen terminaron con anchos distintos. */
:root {
  --cyan: #2CC4DC; --mint: #348AB7; --violeta: #4C448D;
  --earth-500: #8291A8; --earth-400: #A9B7CC; --earth-700: #4A5C74; --earth-800: #2E3D52;
  --success: #34C77B; --warning: #C98A1E; --danger: #C9503A;
  --font-heading: 'Sora', sans-serif; --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --canvas: #000A1F;
  --card: #ffffff; --card-inset: #eef1f6; --texto: var(--earth-800); --muted: #5C6B84; --borde: #e2e8f0;
  --header-bg: #EAF9FC; --header-texto: #001233; --header-borde: #2CC4DC;
  --header-link-hover: rgba(44, 196, 220, 0.15);
  --acento-texto: var(--violeta); --fondo: #eef1f6;
}
:root[data-theme="dark"] {
  --card: #0A2647; --card-inset: #071B3D; --texto: #F1F5F9; --muted: var(--earth-500); --borde: #1E3A5F;
  --warning: #E0A33C; --danger: #E0664F; --acento-texto: var(--cyan); --fondo: var(--canvas);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card: #0A2647; --card-inset: #071B3D; --texto: #F1F5F9; --muted: var(--earth-500); --borde: #1E3A5F;
    --warning: #E0A33C; --danger: #E0664F; --acento-texto: var(--cyan); --fondo: var(--canvas);
  }
}
* { box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--texto); margin: 0; background: var(--fondo); }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: var(--header-bg); color: var(--header-texto);
  border-bottom: 2px solid var(--header-borde);
}
header.top .marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
header.top img.logo { height: 30px; width: auto; display: block; }
header.top .separador { width: 1px; height: 22px; background: var(--header-borde); opacity: .6; }
header.top .titulo-proyecto { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; opacity: .85; }
header.top nav { display: flex; align-items: center; gap: 8px; }
header.top nav a, header.top button {
  background: transparent; border: 1px solid var(--header-borde); color: var(--header-texto);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13.5px;
  text-decoration: none; font-family: var(--font-body);
}
header.top nav a.activo { background: var(--header-borde); color: #001233; font-weight: 600; }
header.top nav a:hover, header.top button:hover { background: var(--header-link-hover); }

main { max-width: 1600px; margin: 0 auto; padding: 24px 28px 70px; }

.tarjeta { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 20px 22px; }
.nota { color: var(--muted); font-size: 12.5px; margin: 4px 0 16px; line-height: 1.5; }
.sutil { color: var(--muted); font-size: 12.5px; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.scroll-x { overflow-x: auto; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--card); border: 1px solid var(--borde); border-radius: 12px; padding: 15px 17px; }
.kpi-num { font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.15; }
.kpi-lab { color: var(--muted); font-size: 12px; margin-top: 3px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-family: var(--font-heading); font-size: 11.5px; color: var(--muted);
     text-transform: uppercase; letter-spacing: .06em; padding: 0 10px 9px; font-weight: 600;
     position: sticky; top: 0; background: var(--card); }
td { padding: 10px; border-top: 1px solid var(--borde); vertical-align: top; }
td.der, th.der { text-align: right; }
tbody tr:hover { background: var(--card-inset); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
        font-weight: 700; white-space: nowrap; font-family: var(--font-heading); }
.p-critica { background: var(--danger); color: #fff; }
.p-alta { background: var(--warning); color: #fff; }
.p-media, .p-baja { background: var(--card-inset); color: var(--muted); }
.p-ok { background: var(--success); color: #fff; }
.p-gris { background: var(--card-inset); color: var(--muted); }
.p-rojo { background: var(--danger); color: #fff; }

.si { color: var(--success); font-weight: 700; }
.no { color: var(--danger); font-weight: 700; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filtros select, .filtros input {
  font-family: var(--font-body); font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--card); color: var(--texto);
}
.btn {
  font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; padding: 9px 18px;
  border-radius: 9px; border: none; cursor: pointer;
}
.btn-ok { background: var(--success); color: #fff; }
.btn-no { background: var(--danger); color: #fff; }
.btn-mid { background: var(--card-inset); color: var(--texto); border: 1px solid var(--borde); }
.btn:disabled { opacity: .45; cursor: not-allowed; }