/* Watchdog · custodia marcaria — tokens y base (7-sep-2026). Un solo teal; sin rojo a propósito. */
@font-face { font-family: 'Chivo'; src: url('assets/fuentes/Chivo-Black-static.ttf'); font-weight: 900; }
@font-face { font-family: 'Public Sans'; src: url('assets/fuentes/PublicSans-variable.ttf'); font-weight: 100 900; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fuentes/IBMPlexMono-Medium.ttf'); font-weight: 500; }
:root {
  --wd-teal: #087277; --wd-teal-dark: #054F53; --wd-teal-soft: #E1F0F0;
  --wd-char: #2B2B2B; --wd-pelo: #343B43; --wd-tinta: #3A3632; --wd-muted: #6F6A64;
  --wd-crema: #FBF6EB; --wd-papel: #FFFDF8; --wd-linea: #E3DBC9; --wd-gris: #B3ACA6;
  --wd-naranja: #EC670C; --wd-naranja-soft: #FFF0E3; --wd-amarillo: #F9AE06; --wd-amarillo-soft: #FFF6D6;
  /* semántica: nunca rojo. Un hallazgo es un aviso, no una emergencia. */
  --st-nuevo: var(--wd-naranja); --st-nuevo-bg: var(--wd-naranja-soft);
  --st-seguimiento: #B57D05; --st-seguimiento-bg: var(--wd-amarillo-soft);
  --st-ok: var(--wd-teal); --st-ok-bg: var(--wd-teal-soft);
  --st-nuestro: var(--wd-pelo); --st-nuestro-bg: #ECEAE6;
  --font-display: 'Chivo', system-ui, sans-serif; --font-ui: 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --text-xs: 11px; --text-sm: 12.5px; --text-md: 14px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 30px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --shadow-card: 0 1px 2px rgba(43,43,43,.06), 0 6px 18px rgba(43,43,43,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-ui); font-size: var(--text-md); line-height: 1.5; color: var(--wd-tinta); background: var(--wd-crema); }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 900; color: var(--wd-char); margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--text-2xl); line-height: 1.08; } h2 { font-size: var(--text-xl); line-height: 1.15; } h3 { font-size: var(--text-lg); line-height: 1.25; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wd-teal); font-weight: 500; }
/* botones: pill, sólidos; el naranja es la acción principal y por eso es escaso */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); padding: 9px 16px; font: 600 13.5px var(--font-ui); border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; }
.btn-primary { background: var(--wd-naranja); color: #fff; } .btn-primary:hover { background: #D45C0A; }
.btn-teal { background: var(--wd-teal); color: #fff; } .btn-teal:hover { background: var(--wd-teal-dark); }
.btn-ghost { background: transparent; color: var(--wd-teal); border-color: var(--wd-teal); } .btn-ghost:hover { background: var(--wd-teal-soft); }
.btn-quiet { background: transparent; color: var(--wd-tinta); border-color: var(--wd-linea); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
/* chips de estado: el semáforo de tres */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 3px 10px; font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-nuevo { color: var(--st-nuevo); background: var(--st-nuevo-bg); } .chip-seguimiento { color: var(--st-seguimiento); background: var(--st-seguimiento-bg); }
.chip-ok { color: var(--st-ok); background: var(--st-ok-bg); } .chip-nuestro { color: var(--st-nuestro); background: var(--st-nuestro-bg); }
/* superficies */
.card { background: var(--wd-papel); border: 1px solid var(--wd-linea); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-card); }
.card-teal { background: var(--wd-teal); color: #fff; border-color: var(--wd-teal); } .card-teal h1, .card-teal h2, .card-teal h3 { color: #fff; }
.aviso { background: var(--wd-naranja-soft); border-left: 5px solid var(--wd-naranja); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; font-size: var(--text-sm); }
/* tablas */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wd-teal); padding: 8px 10px; border-bottom: 1px solid var(--wd-linea); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--wd-linea); vertical-align: top; } .tbl tr:hover td { background: var(--wd-papel); }
/* formularios */
.field label { display: block; font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wd-teal); margin-bottom: 4px; }
.input, .select, textarea.input { width: 100%; border: 1px solid var(--wd-linea); border-radius: var(--radius-sm); background: #fff; padding: 9px 12px; font: 400 14px var(--font-ui); color: var(--wd-char); }
.input:focus { outline: 2px solid var(--wd-teal); outline-offset: 1px; border-color: var(--wd-teal); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-sm); cursor: pointer; }
.switch i { width: 38px; height: 22px; border-radius: 11px; background: var(--wd-gris); position: relative; display: inline-block; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.switch.on i { background: var(--wd-teal); } .switch.on i::after { left: 19px; }
/* el disco del personaje: sobre teal, siempre dentro de un disco o marco con anillo charcoal */
.disco { border-radius: 50%; background: var(--wd-teal); border: 3px solid var(--wd-char); overflow: hidden; display: inline-block; }
.disco img { width: 96%; height: auto; margin: 11% auto 0; display: block; }

/* ── El logo de la marca (7-sep tarde): ocupa el espacio izquierdo de las tarjetas. Sin imagen, un
   monograma en Chivo Black sobre papel: la marca es la protagonista, el perro no compite con ella. ── */
.logo-marca{width:64px;height:64px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--wd-linea);display:flex;align-items:center;justify-content:center;font:900 20px/1 var(--font-display);color:var(--wd-char);letter-spacing:-.02em;overflow:hidden;text-transform:uppercase}
.logo-marca img{width:100%;height:100%;object-fit:contain}
.logo-marca.sm{width:34px;height:34px;font-size:11px;border-radius:8px}
/* ── El pie con el perro (v2, 7-sep): banda de papel con regla charcoal; el PERRO A LA DERECHA, asomando
   por encima de la regla; el globo es blanco con borde y sombra dura charcoal —historieta, como el
   personaje—, con un solo acento (los números en naranja mono). Nada de teal acá: el teal es la marca,
   no el fondo de todo. ── */
.pie{background:var(--wd-crema);border-top:1.5px solid var(--wd-char);display:flex;align-items:flex-end;justify-content:flex-end;gap:18px;padding:0 18px 0 0;min-height:118px;box-sizing:border-box}
.pie img{height:116px;margin:0 0 -3px;flex:none}
.pie .globo{background:#fff;color:var(--wd-char);border:1.5px solid var(--wd-char);border-radius:12px;padding:10px 18px 11px 16px;font-size:14px;line-height:1.45;margin:16px 0 24px;max-width:560px;position:relative;box-shadow:0 2px 8px rgba(43,43,43,.10)}
.pie .globo::after{content:"";position:absolute;right:-8px;top:50%;width:13px;height:13px;background:#fff;border-right:1.5px solid var(--wd-char);border-top:1.5px solid var(--wd-char);transform:translateY(-50%) rotate(45deg)}
.pie .globo .eyebrow{display:block;margin-bottom:3px;color:var(--wd-teal)}
.pie .globo b{font-family:var(--font-display);font-weight:900}
.pie .globo .mono{color:var(--wd-naranja);font-weight:500}