/* Concepto v7 (limpieza de la v6): la oficina es la planta tipo de una torre de oficinas: al centro los KPIs y la revisión
   de calidad (el único objeto marino, p. 5 y p. 14) y las oficinas de cada pareja alrededor, en línea de plano (p. 6).
   Página blanca, título petróleo en mayúsculas con línea fina a sangre (p. 2). Esquinas rectas. */
:root {
  --paper: #FFFFFF;
  --hueso: #F5F3EE;
  --niebla: #EEF1F3;
  --marino: #1D2363;
  --petroleo: #11748F;
  --turquesa: #06B3C1;
  --gris: #8B8E91;
  --arena: #B8A58C;
  --ink: #1D2363;
  --text: #40445A;
  --mute: #7C8091;
  --line: #E4E7EB;
  --line-2: #CBD2D8;
  --plano: #11748F;
  --slab: #1D2363;
  --tint-pet: #E8F3F6;
  --tint-tur: #E2F6F8;
  --ok: #11748F;
  --warn: #B4731A;
  --warn-tint: #FBF2E3;
  --bad: #C0392F;
  --bad-tint: #FCEBE9;
  --scrim: rgba(29, 35, 99, .30);
  --bot-face: #FFFFFF;
  --bot-dark: #1D2363;
  --slab-lattice: rgba(255, 255, 255, .07);
  --logo-t: #31738F;
  --logo-w: #192661;
  --logo-i: #42C0C1;
  --on-solid: #FFFFFF;
  --shadow: 0 18px 50px -18px rgba(29, 35, 99, .35);
  --shield: #1D2363; --shield-mouth: #FFFFFF;
  --bot-pet: #11748F; --bot-mar: #1D2363;
  --corr: #F5F3EE; --wall: #1D2363; --wall-in: #CBD2D8;
  --bad-on-slab: #FF8F84; --warn-on-slab: #F2C27A; --toast: #1D2363;
  --f-display: "Poppins", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --f-text: "Didact Gothic", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13173D; --hueso: #191E4A; --niebla: #0F1333; --ink: #F5F3EE; --text: #C8CBDA; --mute: #8E93AD;
    --line: #262C60; --line-2: #343B78; --plano: #4FC3CF; --slab: #3B4499; --tint-pet: #172C55; --tint-tur: #14304F;
    --ok: #4FC3CF; --warn: #E2A54A; --warn-tint: #2E2A3A; --bad: #F07A6E; --bad-tint: #3A2238; --scrim: rgba(5, 7, 25, .6);
    --bot-face: #F5F3EE; --bot-dark: #13173D; --slab-lattice: rgba(255, 255, 255, .05);
    --logo-t: #FFFFFF; --logo-w: #FFFFFF; --logo-i: #FFFFFF; --shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
    --shield: #E8ECF5; --shield-mouth: #13173D; --bot-pet: #1C8EAB; --bot-mar: #4654C2; --corr: #0E1231; --wall: #4FC3CF; --wall-in: #343B78; --bad-on-slab: #FF8F84; --toast: #2A3180;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #13173D; --hueso: #191E4A; --niebla: #0F1333; --ink: #F5F3EE; --text: #C8CBDA; --mute: #8E93AD;
  --line: #262C60; --line-2: #343B78; --plano: #4FC3CF; --slab: #3B4499; --tint-pet: #172C55; --tint-tur: #14304F;
  --ok: #4FC3CF; --warn: #E2A54A; --warn-tint: #2E2A3A; --bad: #F07A6E; --bad-tint: #3A2238; --scrim: rgba(5, 7, 25, .6);
  --bot-face: #F5F3EE; --bot-dark: #13173D; --slab-lattice: rgba(255, 255, 255, .05);
  --logo-t: #FFFFFF; --logo-w: #FFFFFF; --logo-i: #FFFFFF; --shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
  --shield: #E8ECF5; --shield-mouth: #13173D; --bot-pet: #1C8EAB; --bot-mar: #4654C2; --corr: #0E1231; --wall: #4FC3CF; --wall-in: #343B78; --bad-on-slab: #FF8F84; --toast: #2A3180;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--text); font-family: var(--f-text); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-display); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0; }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.caps { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* logo extraído del PDF: solo positivo o negativo */
.logo .lt { fill: var(--logo-t); } .logo .lw { fill: var(--logo-w); } .logo .li { fill: var(--logo-i); }

/* ===== barra superior ===== */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--paper); }
.top-in { display: flex; align-items: center; gap: 36px; height: 68px; }
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand .logo { height: 31px; width: auto; display: block; }
.brand .sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--line-2); line-height: 1.25; }
.nav { display: flex; align-items: stretch; gap: 2px; height: 100%; min-width: 0; }
.nav button {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 100%;
  font-family: var(--f-text); font-size: 14.5px; color: var(--text); white-space: nowrap;
}
.nav button:hover { color: var(--ink); }
.nav button[aria-current="page"] { color: var(--ink); }
.nav button[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--petroleo); }
.nav .cnt { font-family: var(--f-display); font-size: 10.5px; font-weight: 600; color: var(--on-solid); background: var(--bad); min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; }
.nav .live { width: 6px; height: 6px; background: var(--turquesa); animation: pulse 1.6s infinite; }
.nav .sep { width: 1px; background: var(--line); margin: 20px 8px; }
.nav button.talk { color: var(--mute); font-size: 13.5px; }
.nav button.talk svg { width: 15px; height: 15px; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.health { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); padding: 6px 10px; background: var(--warn-tint); }
.health i { width: 8px; height: 8px; background: var(--warn); }
.demo { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-2); padding: 4px 7px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--marino); color: var(--on-solid); font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.theme-b { width: 32px; height: 32px; display: grid; place-items: center; color: var(--mute); border: 1px solid var(--line); }
.theme-b svg { width: 16px; height: 16px; }

/* ===== cabecera de sección (manual p. 2) ===== */
main { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); padding-block: 0 32px; }
.sec[hidden] { display: none; }
.shead { position: relative; display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 10px 0 10px; margin-bottom: 14px; }
.shead > div:first-child { display: flex; align-items: center; gap: 16px; min-width: 0; }
.back { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--petroleo); background: var(--paper); }
.back svg { width: 15px; height: 15px; }
.back:hover { border-color: var(--petroleo); background: var(--tint-pet); }
.shead::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; background: var(--petroleo); width: calc(100% + max(var(--gut), env(safe-area-inset-right, 0px))); }
.shead h1 { font-size: 21px; letter-spacing: .07em; text-transform: uppercase; color: var(--petroleo); font-weight: 600; line-height: 1.2; }
.shead p { margin-top: 6px; color: var(--text); font-size: 15px; max-width: 92ch; }
.shead .act { margin-left: auto; display: flex; gap: 12px; align-items: center; flex: none; }

/* botones rectos */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; letter-spacing: .01em; border: 1px solid var(--line-2); color: var(--ink); background: var(--paper); transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.btn:hover { border-color: var(--petroleo); color: var(--petroleo); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.pri { background: var(--petroleo); border-color: var(--petroleo); color: var(--on-solid); }
.btn.pri:hover { background: var(--marino); border-color: var(--marino); color: var(--on-solid); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.link { color: var(--petroleo); font-family: var(--f-display); font-weight: 500; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.link:hover { color: var(--marino); }
.link svg { width: 13px; height: 13px; }

/* píldoras de estado */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; font-family: var(--f-display); font-size: 11.5px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.pill i { width: 7px; height: 7px; flex: none; }
.pill.ok { color: var(--ok); background: var(--tint-pet); } .pill.ok i { background: var(--ok); }
.pill.stop { color: var(--bad); background: var(--bad-tint); } .pill.stop i { background: var(--bad); }
.pill.warn { color: var(--warn); background: var(--warn-tint); } .pill.warn i { background: var(--warn); }
.pill.rev { color: var(--mute); background: var(--niebla); }
.pill.rev i { border: 1.5px solid var(--mute); border-right-color: transparent; border-radius: 50%; width: 9px; height: 9px; animation: spin .8s linear infinite; }
.pill.neu { color: var(--mute); background: var(--niebla); } .pill.neu i { background: var(--gris); }
.pill.flash { animation: pillIn .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pillIn { from { transform: scale(.85); opacity: .4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .25; } }

/* ===== OFICINA: la planta ===== */
.of-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: stretch; }
.planta {
  --rows: 3; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 224px minmax(0, 1fr); gap: 0 26px;
  padding: 14px; background: var(--corr); border: 5px double var(--wall); min-width: 0;
}
.ocol { display: grid; grid-template-rows: repeat(var(--rows), auto); gap: 14px; min-width: 0; align-content: start; }
.core-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* cada oficina */
.of { position: relative; background: var(--paper); border: 1px solid var(--wall-in); cursor: pointer; outline: none; min-width: 0; transition: box-shadow .2s; }
.of .sc { position: relative; height: 142px; overflow: hidden; }
.of .sc svg.room, .of .sc svg.front { position: absolute; inset: 0; width: 100%; height: 100%; }
.of .sc svg.front { z-index: 2; pointer-events: none; }
.sc .ln { fill: none; stroke: var(--plano); stroke-width: 1; }
.sc .ln2 { fill: none; stroke: var(--plano); stroke-width: .6; opacity: .5; }
.sc .ln3 { fill: none; stroke: var(--plano); stroke-width: .55; opacity: .3; }
.sc .sky { fill: var(--paper); }
.sc .sill { fill: var(--paper); }
.sc .desk { fill: var(--paper); stroke: var(--plano); stroke-width: 1; }
.sc .wood { fill: var(--arena); opacity: .55; }
.sc .phone { fill: var(--bot-mar); }
.sc .phone-scr { fill: var(--niebla); transition: fill .3s; }
.sc .phone-scr.on { fill: var(--turquesa); }
.sc .phone-scr.off { fill: var(--bad); animation: pulse 1.2s infinite; }
.sc .lap { fill: var(--niebla); stroke: var(--plano); stroke-width: .9; }
.sc .lap-scr { fill: var(--paper); transition: fill .3s; }
.sc .lap-scr.on { fill: var(--tint-tur); }
.sc .frame { fill: var(--paper); stroke: var(--plano); stroke-width: .9; }
.sc .night { fill: var(--niebla); opacity: 0; }
.of .rbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.of .rb { position: absolute; bottom: 6px; width: 21%; max-width: 66px; }
.of .rb.c { left: 6%; } .of .rb.s { left: 28%; }
.of .inf { padding: 10px 14px 11px; border-top: 1px solid var(--line); }
.of .nm { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.2; min-width: 0; }
.of .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of .nm i { width: 8px; height: 8px; flex: none; background: var(--ok); }
.of .stw { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--ok); white-space: nowrap; }
.of .who { font-size: 12.5px; color: var(--mute); margin-top: 3px; padding-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of .hov { position: absolute; left: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--petroleo); color: var(--on-solid); font-family: var(--f-display); font-size: 12px; font-weight: 500; transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.of .hov svg { width: 13px; height: 13px; }
.of:hover .hov, .of:focus-visible .hov { transform: none; }
.of:hover { box-shadow: 0 0 0 1px var(--petroleo); }
.of:focus-visible { box-shadow: 0 0 0 2px var(--turquesa); }
/* estados que se leen en la arquitectura */
.of.issue { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.of.issue .nm i { background: var(--bad); animation: pulse 1.2s infinite; }
.of.issue .stw { color: var(--bad); }
.of.paused .nm i { background: var(--gris); }
.of.paused .stw { color: var(--mute); }
.of.paused .sc svg, .of.paused .rbs { filter: grayscale(1); }
.of.paused .sc .night { opacity: 1; }
.of.paused .sc .sky, .of.paused .sc .sill, .of.paused .sc .frame { fill: var(--niebla); }
.of.paused .sc .lap-scr { fill: var(--niebla); }
.of.paused .sc { opacity: .78; }
.of.born { animation: born 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes born { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* burbujas: sin etiqueta; la cola dice quién habla y el color, qué bot */
.bub { position: absolute; z-index: 5; top: 7px; left: 8px; width: max-content; max-width: min(250px, calc(100% - 16px)); padding: 4px 9px 5px; background: var(--paper); border: 1px solid var(--petroleo); color: var(--ink); font-size: 12px; line-height: 1.3; box-shadow: 0 6px 16px -10px rgba(29, 35, 99, .4); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: visible; }
.bub::after { content: ""; position: absolute; left: var(--tail, 40px); bottom: -5px; width: 8px; height: 8px; background: inherit; border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; transform: rotate(45deg); }
.bub.on { opacity: 1; transform: none; }
.bub.stop { border-color: var(--bad); } .bub.stop b { color: var(--bad); }
.bub.sec { background: var(--bot-mar); color: var(--on-solid); border-color: var(--bot-mar); }
.bub b { font-family: var(--f-display); font-weight: 600; font-size: 11.5px; }
.zzz { position: absolute; z-index: 3; font-family: var(--f-display); font-weight: 600; color: var(--petroleo); pointer-events: none; animation: zz 3s ease-in infinite; opacity: 0; }
.zzz.z2 { animation-delay: 1s; font-size: 15px; } .zzz.z3 { animation-delay: 2s; font-size: 19px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px); } }

/* KPIs: tarjeta compacta sobre el núcleo */
.kpis { position: relative; padding: 13px 16px 14px; background: var(--paper); border: 1px solid var(--wall-in); cursor: pointer; outline: none; }
.kpis:hover { box-shadow: 0 0 0 1px var(--petroleo); }
.kpis:focus-visible { box-shadow: 0 0 0 2px var(--turquesa); }
.kp-h { display: flex; align-items: center; justify-content: space-between; }
.kp-h .caps { color: var(--petroleo); font-size: 10.5px; }
.kp-h svg { width: 14px; height: 14px; color: var(--petroleo); opacity: .5; transition: opacity .2s, transform .2s; }
.kpis:hover .kp-h svg { opacity: 1; transform: translateX(2px); }
.kp-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
.kp-g b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 23px; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.kp-g span { font-size: 11.5px; color: var(--mute); }
.kp-g b span { font-size: inherit; color: inherit; }

/* núcleo: la revisión de calidad */
.nucleo { position: relative; flex: 1; background: var(--slab); color: var(--on-solid); overflow: hidden; cursor: pointer; outline: none; min-height: 0; }
.nucleo .lat { position: absolute; inset: 0; width: 100%; height: 100%; }
.nucleo:focus-visible { box-shadow: 0 0 0 3px var(--turquesa); }
.nc-in { position: relative; padding: 18px 18px 16px; display: flex; flex-direction: column; height: 100%; }
.nc-h { display: flex; align-items: center; gap: 10px; }
.nc-ic { width: 26px; height: 26px; flex: none; color: var(--turquesa); }
.nc-ic svg { width: 100%; height: 100%; display: block; }
.nc-h b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.2; }
.nc-h span { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--turquesa); letter-spacing: 0; white-space: nowrap; }
.nc-day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 18px; }
.nc-day span { position: relative; height: 8px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.nc-day span.done { background: rgba(255, 255, 255, .62); }
.nc-day span.last { background: var(--on-solid); }
.nc-day span i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--turquesa); }
.nc-ax { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9.5px; color: rgba(255, 255, 255, .5); margin-top: 4px; }
.nc-big { margin-top: 16px; }
.nc-big b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.nc-big span { font-size: 12px; color: rgba(255, 255, 255, .72); }
.nc-last { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.nc-last span { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); }
.nc-last b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nc-last em { display: block; font-style: normal; font-size: 11.5px; color: var(--turquesa); }
.nc-notas { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 7px; }
.nc-notas .cap { font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 2px; }
.nc-notas div { display: grid; grid-template-columns: minmax(0, 1fr) 54px 26px; gap: 8px; align-items: center; font-size: 12.5px; color: rgba(255, 255, 255, .86); }
.nc-notas div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-notas i { height: 4px; background: linear-gradient(to right, rgba(255, 255, 255, .7) var(--w), rgba(255, 255, 255, .12) var(--w)); }
.nc-notas b { font-family: var(--f-display); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.nc-notas .mid i { background: linear-gradient(to right, var(--warn-on-slab) var(--w), rgba(255, 255, 255, .12) var(--w)); }
.nc-notas .mid b { color: var(--warn-on-slab); }
.nc-notas .low i { background: linear-gradient(to right, var(--bad-on-slab) var(--w), rgba(255, 255, 255, .12) var(--w)); }
.nc-notas .low b { color: var(--bad-on-slab); }
.nc-notas .na { color: rgba(255, 255, 255, .45); }
.nucleo .hov { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--turquesa); color: var(--marino); font-family: var(--f-display); font-size: 12px; font-weight: 600; transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.nucleo .hov svg { width: 13px; height: 13px; }
.nucleo:hover .hov, .nucleo:focus-visible .hov { transform: none; }

/* columna derecha */
.side { display: flex; flex-direction: column; gap: 20px; min-height: 0; contain: size; } /* la planta manda el alto; la lateral se ajusta */
.att-h { display: flex; align-items: baseline; gap: 12px; background: var(--petroleo); color: var(--on-solid); padding: 12px 16px; }
.att-h b { font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1; }
.att-h span { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.att { border: 1px solid var(--line); border-top: 0; }
.att-i { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 0 13px; width: 100%; text-align: left; padding: 11px 14px 11px 0; border-top: 1px solid var(--line); transition: background .15s; }
.att-i:first-child { border-top: 0; }
.att-i:hover { background: var(--niebla); }
.att-i .sv { background: var(--warn); }
.att-i.bad .sv { background: var(--bad); }
.att-i .tx { display: block; }
.att-i .p { display: block; font-size: 13.5px; color: var(--text); line-height: 1.4; }
.att-i .p b { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 13px; }
.att-i .link { margin-top: 5px; }
.vivow { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vivo-h { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.vivo-h .caps { color: var(--petroleo); }
.vivo-h i { width: 7px; height: 7px; background: var(--turquesa); animation: pulse 1.4s infinite; }
.vivo-h .link { margin-left: auto; }
.vivo { position: relative; flex: 1; min-height: 120px; overflow: hidden; }
.ev { display: grid; grid-template-columns: 38px 24px minmax(0, 1fr); gap: 0 9px; align-items: start; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.38; color: var(--text); }
.ev:hover { background: var(--niebla); }
.ev .mono { color: var(--mute); padding-top: 1px; }
.ev .ic { width: 24px; height: 24px; }
.ev .tx { display: block; min-width: 0; }
.ev b { font-family: var(--f-display); font-weight: 500; color: var(--ink); font-size: 12.5px; }
.ev .why { display: block; font-size: 12px; color: var(--mute); }
.ev.stop .why { color: var(--bad); }
.ev.new { animation: evIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes evIn { from { opacity: 0; transform: translateY(-12px); background: var(--tint-tur); } }
.vivo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }

/* ===== robots ===== */
svg.bot { display: block; width: 100%; height: auto; overflow: visible; }
.bot .b-pet { fill: var(--bot-pet); } .bot .b-mar { fill: var(--bot-mar); } .bot .b-tur { fill: var(--turquesa); } .bot .b-gri { fill: var(--gris); }
.bot .b-face { fill: var(--bot-face); } .bot .b-dark { fill: var(--bot-dark); } .bot .b-niebla { fill: var(--niebla); }
.bot .b-ring { fill: none; stroke: var(--turquesa); stroke-width: 4; }
.bot .b-gl { fill: none; stroke: var(--bot-dark); stroke-width: 1.6; }
.bot .b-st { fill: none; stroke: var(--bot-dark); stroke-width: 1.6; stroke-linecap: square; }
.bot .head { transform-box: view-box; transform-origin: 40px 62px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bot .eyes { transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.bot .eye { transform-box: fill-box; transform-origin: center; transition: transform .09s; }
.bot.blink .eye { transform: scaleY(.12); }
.bot .mouth { transform-box: fill-box; transform-origin: center; }
.bot .lamp { transition: fill .2s; }
.bot .think { opacity: 0; }
.bot[data-s="hablando"] .mouth { animation: talk .28s steps(2) infinite alternate; }
.bot[data-s="hablando"] .lamp { fill: var(--turquesa); animation: pulse .6s infinite; }
@keyframes talk { from { transform: scaleY(1); } to { transform: scale(.8, 2.6); } }
.bot[data-s="pensando"] .eyes { --ly: -3px; --lx: 2px; }
.bot[data-s="pensando"] .think { opacity: 1; }
.bot[data-s="pensando"] .think rect { animation: pulse 1s infinite; }
.bot[data-s="pensando"] .think rect:nth-child(2) { animation-delay: .2s; } .bot[data-s="pensando"] .think rect:nth-child(3) { animation-delay: .4s; }
.bot[data-s="alerta"] .lamp { fill: var(--bad); animation: pulse .5s infinite; }
.bot[data-s="alerta"] .eye { transform: scale(1.15, 1.25); }
.bot[data-s="alerta"] .head { animation: shake .5s; }
@keyframes shake { 25% { transform: rotate(-5deg); } 75% { transform: rotate(4deg); } }
.bot[data-s="dormido"] .eye { transform: scaleY(.14); }
.bot[data-s="dormido"] .head { transform: rotate(-7deg) translateY(2px); }
.bot[data-s="dormido"] .mouth { opacity: .4; }
.bot[data-s="feliz"] .eye { transform: scaleY(.55) translateY(-1px); }
.bot[data-s="feliz"] .head { transform: translateY(-2px); }

/* ===== modal ===== */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: 28px; opacity: 0; transition: opacity .22s; overflow-y: auto; }
.scrim.on { opacity: 1; }
.modal { position: relative; width: min(1220px, 100%); max-height: calc(100vh - 56px); background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; transform: translateY(14px); transition: transform .32s cubic-bezier(.2, .8, .2, 1); border-top: 8px solid var(--petroleo); }
.scrim.on .modal { transform: none; }
.modal.md { width: min(1040px, 100%); }
.modal.pair { height: min(790px, calc(100vh - 56px)); }
.modal.pair .m-body { flex: 1; }
.m-head > .btn { flex: none; align-self: center; }
.modal.sm { width: min(560px, 100%); }
.modal .mx { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--mute); z-index: 2; }
.modal .mx:hover { color: var(--ink); background: var(--niebla); }
.modal .mx svg { width: 18px; height: 18px; }
.m-head { display: flex; align-items: center; gap: 20px; padding: 20px 64px 0 26px; }
.m-body { padding: 22px 26px 26px; overflow-y: auto; min-height: 0; }
.duo-h { display: flex; gap: 4px; flex: none; }
.duo-h svg { width: 54px; height: auto; }
.cred-mini { position: relative; width: 112px; height: 76px; flex: none; background: var(--paper); border: 1px solid var(--line-2); overflow: hidden; }
.cred-mini .bots2 { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 2px; width: 66px; }
.cred-mini svg.sg { position: absolute; right: 0; top: 0; width: 100%; height: 100%; }
.pname { display: flex; align-items: center; gap: 10px; }
.pname h2 { font-size: 26px; line-height: 1.15; font-weight: 600; }
.pname .ed { width: 30px; height: 30px; display: grid; place-items: center; color: var(--mute); }
.pname .ed:hover { color: var(--petroleo); background: var(--tint-pet); }
.pname .ed svg { width: 15px; height: 15px; }
.pname input { font-family: var(--f-display); font-size: 24px; font-weight: 600; color: var(--ink); border: 0; border-bottom: 2px solid var(--turquesa); padding: 0 2px; width: 320px; max-width: 100%; background: transparent; outline: none; }
.pname .hint { font-size: 12px; color: var(--mute); }
.m-sub { color: var(--text); font-size: 14px; margin-top: 4px; }
.m-sub b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 18px 26px 0; position: relative; }
.tabs button { padding: 12px 18px 13px; font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--mute); display: flex; gap: 8px; align-items: center; }
.tabs button svg { width: 16px; height: 16px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs .ind { position: absolute; bottom: -1px; height: 3px; background: var(--petroleo); transition: transform .3s cubic-bezier(.3, .9, .3, 1), width .3s; left: 0; }

/* mapa de conexiones */
.mapw { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.map { position: relative; border: 1px solid var(--line); background: var(--paper); aspect-ratio: 900 / 540; max-width: 100%; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .wire { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.map .wire.live { stroke: var(--plano); stroke-width: 1.4; opacity: .55; }
.map .wire.cut { stroke: var(--bad); stroke-dasharray: 5 5; opacity: .9; }
.map .pkt { fill: var(--turquesa); }
.map .pkt.stop { fill: var(--bad); }
.map .node { cursor: pointer; }
.map .node rect.bx { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; transition: stroke .2s; }
.map .node:hover rect.bx, .map .node.sel rect.bx { stroke: var(--petroleo); stroke-width: 1.6; }
.map .node text.t { font-family: var(--f-display); font-weight: 600; font-size: 13px; fill: var(--ink); }
.map .node text.s { font-family: var(--f-text); font-size: 11px; fill: var(--mute); }
.map .node .ico { fill: none; stroke: var(--petroleo); stroke-width: 1.5; }
.map .node .dot { fill: var(--ok); }
.map .node.bad .dot { fill: var(--bad); }
.map .node.bad rect.bx { stroke: var(--bad); }
.map .node.warn .dot { fill: var(--warn); }
.map .core rect.cbx { fill: var(--paper); stroke: var(--slab); stroke-width: 3; }
.map .core text.t { font-family: var(--f-display); font-weight: 600; font-size: 14px; fill: var(--ink); }
.map .core text.s { font-family: var(--f-mono); font-size: 10.5px; fill: var(--mute); }
.map .core .ring { fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-dasharray: 4 6; animation: ants 1.2s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -20; } }
.map .core .flash { fill: var(--turquesa); opacity: 0; }
.map .core.hit .flash { animation: fl .6s; }
.map .core.hitbad .flash { fill: var(--bad); animation: fl .6s; }
@keyframes fl { 0% { opacity: .35; } 100% { opacity: 0; } }
.map .lbl { font-family: var(--f-mono); font-size: 10px; fill: var(--mute); letter-spacing: .06em; text-transform: uppercase; }
.map .botsfo { overflow: visible; }
.map-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 14px; height: 0; border-top: 2px solid var(--plano); }
.map-legend i.p { width: 8px; height: 8px; border: 0; background: var(--turquesa); }
.map-legend i.s { width: 8px; height: 8px; border: 0; background: var(--bad); }
.map-legend i.c { border-top: 2px dashed var(--bad); }
.nd-panel { border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.nd-panel .hd { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.nd-panel .hd h3 { font-size: 18px; margin-top: 8px; }
.nd-panel .hd p { font-size: 13px; margin-top: 6px; color: var(--text); }
.kv { padding: 6px 18px; border-bottom: 1px solid var(--line); }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.kv div span { color: var(--mute); }
.kv div b { font-family: var(--f-display); font-weight: 500; color: var(--ink); text-align: right; }
.bars { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bars .caps { color: var(--mute); font-size: 10px; }
.bars svg { width: 100%; height: 64px; display: block; margin-top: 8px; }
.bars .bar { fill: var(--line-2); } .bars .bar.hi { fill: var(--petroleo); } .bars .bar.now { fill: var(--turquesa); }
.bars .ax { font-family: var(--f-mono); font-size: 9px; fill: var(--mute); }
.bars .base { stroke: var(--line-2); stroke-width: 1; }
.nd-ev { padding: 12px 18px; flex: 1; }
.nd-ev .caps { color: var(--mute); font-size: 10px; }
.nd-ev .r { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.nd-ev .r:last-child { border-bottom: 0; }

/* ===== lista de actividad ===== */
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.bigcount { display: flex; align-items: baseline; gap: 10px; }
.bigcount b { font-family: var(--f-display); font-weight: 500; font-size: 44px; color: var(--ink); line-height: .9; font-variant-numeric: tabular-nums; }
.bigcount span { font-size: 13px; color: var(--mute); }
.bigcount i { width: 9px; height: 9px; background: var(--turquesa); animation: pulse 1.4s infinite; align-self: center; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--line); font-family: var(--f-display); font-size: 13px; font-weight: 500; color: var(--text); background: var(--paper); }
.chip .fh { width: 20px; height: 20px; }
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--petroleo); color: var(--petroleo); background: var(--tint-pet); }
.chip.plain { padding: 0 12px; }
.lhead, .lrow { display: grid; grid-template-columns: 52px minmax(0, 1.25fr) minmax(0, .9fr) 132px minmax(0, 1.7fr) 112px; gap: 14px; align-items: center; }
.lhead { padding: 0 14px 9px; border-bottom: 1px solid var(--line-2); font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.list { position: relative; }
.pausebar { position: absolute; left: 0; right: 0; top: -35px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 34px; background: var(--petroleo); color: var(--on-solid); font-size: 13px; transform: translateY(-100%); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; }
.pausebar svg { width: 14px; height: 14px; }
.pausebar b { font-family: var(--f-display); font-weight: 500; }
.list.paused .pausebar { transform: translateY(0); opacity: 1; }
.lrow { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; background: var(--paper); position: relative; }
.lrow:hover { background: var(--niebla); }
.lrow .mono { color: var(--mute); }
.lrow .lead b { display: block; font-family: var(--f-display); font-weight: 500; color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lead span { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lrow .pr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lrow .pr .fh { width: 26px; height: 26px; flex: none; }
.lrow .pr b { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .pr span { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps7 { display: flex; gap: 3px; }
.steps7 i { flex: 1; height: 6px; background: var(--line); }
.steps7 i.d { background: var(--petroleo); }
.steps7 i.c { background: var(--turquesa); animation: pulse 1.2s infinite; }
.steps7 i.x { background: var(--bad); }
.steps-l { font-size: 11px; color: var(--mute); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .dc { font-size: 13px; color: var(--text); min-width: 0; }
.lrow .dc span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .dc small { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow.enter { animation: rowIn .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes rowIn { from { background: var(--tint-tur); } }
.lrow.enter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--turquesa); animation: fadeO 2.4s forwards; }
@keyframes fadeO { to { opacity: 0; } }
.whyc { border: 1px solid var(--line); }
.whyc .hd { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.whyc .hd .caps { color: var(--petroleo); }
.whyc .tot { display: flex; gap: 22px; margin-top: 12px; }
.whyc .tot b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 26px; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.whyc .tot span { font-size: 12px; color: var(--mute); }
.whyc .tot .s b { color: var(--bad); }
.wl { display: grid; grid-template-columns: minmax(0, 1fr) 80px 22px; gap: 10px; align-items: center; padding: 9px 18px; font-size: 13px; border-bottom: 1px solid var(--line); }
.wl:last-child { border-bottom: 0; }
.wl .bw { height: 6px; background: var(--niebla); position: relative; }
.wl .bw i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bad); transition: width .5s; }
.wl .n { font-family: var(--f-display); font-weight: 500; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.whyc .ft { padding: 12px 18px; font-size: 12.5px; color: var(--mute); background: var(--niebla); }

/* popup del lead */
.lead-route { position: relative; padding: 22px 6px 6px; }
.route { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.route .rail { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 19px; height: 2px; background: var(--line); }
.route .rail i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--petroleo); transition: width .9s cubic-bezier(.4, 0, .2, 1); }
.stn { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.stn .sq { width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--line-2); color: var(--line-2); transition: all .4s; position: relative; z-index: 1; }
.stn .sq svg { width: 18px; height: 18px; }
.stn.d .sq { background: var(--petroleo); border-color: var(--petroleo); color: var(--on-solid); }
.stn.c .sq { border-color: var(--turquesa); color: var(--turquesa); box-shadow: 0 0 0 6px var(--tint-tur); }
.stn.c .sq::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--turquesa); animation: ping 1.6s infinite; }
@keyframes ping { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.stn.st-x .sq { border-color: var(--bad); color: var(--bad); }
.stn .lb { font-size: 12.5px; line-height: 1.3; color: var(--mute); max-width: 120px; }
.stn.d .lb, .stn.c .lb { color: var(--ink); }
.lead-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 22px; }
.sublbl { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--petroleo); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.sublbl .btn { margin-left: 14px; letter-spacing: 0; text-transform: none; }
.sublbl .live { font-family: var(--f-text); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sublbl .live i { width: 6px; height: 6px; background: var(--turquesa); animation: pulse 1.4s infinite; }
.dec { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dec .ic { width: 26px; height: 26px; }
.dec .tx { font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.dec .tx small { display: block; color: var(--mute); font-size: 12px; }
.dec .tx small b { font-family: var(--f-display); font-weight: 600; color: var(--text); font-size: 11.5px; }
.dec.new { animation: evIn .5s; }

/* ===== instrucciones ===== */
.ins-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.scope .caps { color: var(--mute); font-size: 10px; display: block; margin-bottom: 8px; }
.scope button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; font-size: 14px; color: var(--text); text-align: left; border-left: 2px solid transparent; }
.scope button .fh { width: 22px; height: 22px; flex: none; }
.scope button small { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--petroleo); }
.scope button:hover { background: var(--niebla); }
.scope button[aria-current="true"] { border-left-color: var(--petroleo); background: var(--tint-pet); color: var(--ink); }
.scope .base { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.scope .base .sq { width: 22px; height: 22px; display: grid; place-items: center; background: var(--marino); color: var(--on-solid); flex: none; }
.scope .base .sq svg { width: 13px; height: 13px; }
.scope hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.flow { display: flex; align-items: center; gap: 0; }
.flow .fs { display: flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 13px; font-weight: 500; color: var(--mute); }
.flow .fs b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; }
.flow .fs.on { color: var(--ink); } .flow .fs.on b { border-color: var(--petroleo); color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); }
.flow .fs.done { color: var(--petroleo); } .flow .fs.done b { background: var(--petroleo); color: var(--on-solid); border-color: var(--petroleo); }
.flow .fl { width: 36px; height: 1px; background: var(--line-2); margin: 0 10px; }
.flow .fs.done + .fl { background: var(--petroleo); }
.ed-w { border: 1px solid var(--line); min-width: 0; }
.ed-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prof { display: flex; border-right: 1px solid var(--line); }
.prof button { padding: 0 14px; height: 44px; font-family: var(--f-display); font-size: 13px; font-weight: 500; color: var(--mute); display: flex; align-items: center; gap: 7px; }
.prof button .fh { width: 20px; height: 20px; }
.prof button[aria-pressed="true"] { color: var(--ink); background: var(--niebla); }
.files { display: flex; overflow-x: auto; }
.files button { position: relative; padding: 0 13px; height: 44px; font-family: var(--f-mono); font-size: 12px; color: var(--mute); white-space: nowrap; }
.files button[aria-selected="true"] { color: var(--ink); }
.files button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--petroleo); }
.files button sup { display: inline-block; width: 6px; height: 6px; background: var(--turquesa); margin-left: 4px; vertical-align: 6px; }
.ed-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-bar h3 { font-family: var(--f-mono); font-size: 15px; font-weight: 500; }
.ed-bar .path { font-family: var(--f-mono); font-size: 11.5px; color: var(--mute); }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font-family: var(--f-display); font-size: 11px; font-weight: 500; background: var(--tint-pet); color: var(--petroleo); }
.tag.mar { background: var(--marino); color: var(--on-solid); }
.seg { display: inline-flex; border: 1px solid var(--line-2); margin-left: auto; }
.seg button { height: 30px; padding: 0 12px; font-size: 12.5px; font-family: var(--f-display); font-weight: 500; color: var(--mute); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.legend { display: flex; gap: 16px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; }
.legend i.h { background: var(--line-2); } .legend i.o { background: var(--petroleo); } .legend i.a { background: var(--turquesa); }
.legend .r { margin-left: auto; }
.editor { font-family: var(--f-mono); font-size: 12.8px; line-height: 1.75; padding: 10px 0; max-height: 470px; overflow-y: auto; }
.ln { display: grid; grid-template-columns: 4px 40px minmax(0, 1fr); align-items: start; }
.ln .mk { align-self: stretch; }
.ln .no { color: var(--line-2); text-align: right; padding-right: 14px; user-select: none; font-size: 11.5px; }
.ln .tx { padding-right: 18px; color: var(--text); white-space: pre-wrap; word-break: break-word; outline: none; min-height: 1.75em; }
.ln .tx:focus { background: var(--tint-tur); }
.ln.h1 .tx { color: var(--ink); font-weight: 500; }
.ln.h2 .tx { color: var(--petroleo); font-weight: 500; }
.ln.ovr { background: var(--tint-pet); } .ln.ovr .mk { background: var(--petroleo); }
.ln.add { background: var(--tint-tur); } .ln.add .mk { background: var(--turquesa); }
.ln.del .tx { text-decoration: line-through; color: var(--mute); } .ln.del .mk { background: var(--bad); } .ln.del { background: var(--bad-tint); }
.ln.inh .tx { color: var(--mute); }
.ln.mine { background: var(--warn-tint); } .ln.mine .mk { background: var(--warn); }
.ln .who { font-family: var(--f-display); font-size: 10.5px; color: var(--petroleo); margin-left: 8px; }
.ed-foot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ed-foot p { font-size: 12.5px; color: var(--mute); flex: 1; min-width: 0; }
.ed-foot .flow .fl { width: 18px; margin: 0 7px; }
.ed-foot .btn { margin-left: auto; }
.rcol { display: flex; flex-direction: column; gap: 20px; }
.box { border: 1px solid var(--line); }
.box .hd { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.box .hd .caps { color: var(--petroleo); }
.box .hd .r { margin-left: auto; font-size: 12px; color: var(--mute); font-family: var(--f-mono); }
.bt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.bt:last-child { border-bottom: 0; }
.bt .ck { width: 16px; height: 16px; border: 1px solid var(--line-2); display: grid; place-items: center; margin-top: 1px; }
.bt .ck svg { width: 11px; height: 11px; opacity: 0; color: var(--on-solid); }
.bt.run .ck { border-color: var(--turquesa); animation: pulse .8s infinite; }
.bt.ok .ck { background: var(--petroleo); border-color: var(--petroleo); } .bt.ok .ck svg { opacity: 1; }
.bt.note .ck { background: var(--warn); border-color: var(--warn); } .bt.note .ck svg { opacity: 1; }
.bt .r { grid-column: 2; color: var(--mute); font-size: 12px; }
.bt.ok .r { color: var(--petroleo); } .bt.note .r { color: var(--warn); }
.prog { height: 3px; background: var(--line); } .prog i { display: block; height: 100%; background: var(--turquesa); width: 0; transition: width .4s; }
.hv { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.hv:last-child { border-bottom: 0; }
.hv .v { font-family: var(--f-mono); font-size: 12px; color: var(--petroleo); }
.hv .t { color: var(--ink); line-height: 1.35; }
.hv .t small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 2px; }
.hv .df { font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; }
.hv .df .p { color: var(--petroleo); } .hv .df .n { color: var(--bad); }
.hv.new { background: var(--tint-tur); animation: evIn .6s; }

/* ===== fuentes ===== */
.pairbar { display: flex; gap: 0; border: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.pairbar button { display: flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-right: 1px solid var(--line); text-align: left; flex: 1; min-width: 0; position: relative; }
.pairbar button:last-child { border-right: 0; }
.pairbar button .fh { width: 28px; height: 28px; flex: none; }
.pairbar button b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.pairbar button span { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.pairbar button:hover { background: var(--niebla); }
.pairbar button[aria-pressed="true"] { background: var(--tint-pet); }
.pairbar button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--petroleo); }
.pairbar button.dim { opacity: .55; }
.src-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.src-note { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--niebla); margin-bottom: 18px; font-size: 14px; color: var(--ink); }
.src-note .fh { width: 40px; height: 40px; flex: none; }
.src-note b { font-family: var(--f-display); font-weight: 600; }
.dist { margin-bottom: 22px; }
.dist-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dist-h h3 { font-size: 15px; }
.dist-h span { font-size: 12.5px; color: var(--mute); }
.dist-h .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.dist-h .lock svg { width: 13px; height: 13px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc { position: relative; border: 1px solid var(--line); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); transition: border-color .2s, background .2s; }
.pc.on { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); }
.pc b { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); padding-right: 46px; }
.pc .m { font-size: 12.5px; color: var(--mute); }
.pc .stk { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--mute); }
.pc .stk .bw { flex: 1; height: 4px; background: var(--niebla); position: relative; }
.pc .stk .bw i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--petroleo); }
.pc .sync { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); margin-top: 4px; }
.pc .sync.warn { color: var(--warn); }
.tgl { position: absolute; right: 12px; top: 13px; width: 38px; height: 22px; border: 1px solid var(--line-2); background: var(--niebla); transition: background .2s, border-color .2s; }
.tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.tgl[aria-checked="true"] { background: var(--petroleo); border-color: var(--petroleo); }
.tgl[aria-checked="true"]::after { transform: translateX(16px); box-shadow: none; }
.tgl:disabled { opacity: .5; cursor: not-allowed; }
.dist.off .pc { background: var(--niebla); border-color: transparent; }
.dist.off .pc b { color: var(--mute); }
.dist.collapsed .pgrid { display: none; }
.others { border: 1px dashed var(--line-2); padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--mute); flex-wrap: wrap; }
.others b { font-family: var(--f-display); font-weight: 500; color: var(--text); }
.others .link, .others .btn { margin-left: auto; }
.drv { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.drv:last-child { border-bottom: 0; }
.drv .cb { width: 18px; height: 18px; border: 1px solid var(--line-2); display: grid; place-items: center; }
.drv .cb svg { width: 12px; height: 12px; color: var(--on-solid); opacity: 0; }
.drv.on .cb { background: var(--petroleo); border-color: var(--petroleo); } .drv.on .cb svg { opacity: 1; }
.drv .fn b { font-family: var(--f-display); font-weight: 500; color: var(--ink); display: block; font-size: 13px; }
.drv .fn span { font-size: 11.5px; color: var(--mute); }
.drv .mono { color: var(--mute); }
.drv.lockd { cursor: default; opacity: .55; }

/* ===== probador ===== */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.chat { border: 1px solid var(--line); display: flex; flex-direction: column; height: 610px; min-width: 0; }
.chat-h { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-h .bigbot { width: 62px; flex: none; }
.chat-h h3 { font-size: 19px; }
.chat-h .st { font-size: 13px; color: var(--mute); }
.chat-h .seg { margin-left: auto; }
.chat-note { display: flex; gap: 9px; align-items: center; padding: 9px 18px; background: var(--niebla); font-size: 12.5px; color: var(--text); }
.chat-note svg { width: 14px; height: 14px; color: var(--petroleo); flex: none; }
.thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.msg { max-width: 76%; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.msg small { display: block; font-size: 11px; color: var(--mute); margin-bottom: 3px; font-family: var(--f-display); }
.msg.me { align-self: flex-end; background: var(--niebla); color: var(--ink); }
.msg.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); }
.msg.bot small { color: var(--petroleo); }
.msg.sys { align-self: center; background: transparent; color: var(--mute); font-size: 12px; padding: 2px; }
.caret { display: inline-block; width: 7px; height: 14px; background: var(--turquesa); vertical-align: -2px; animation: pulse .8s infinite; }
.sugs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 12px; }
.sugs button { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text); }
.sugs button:hover { border-color: var(--petroleo); color: var(--petroleo); }
.compose { display: flex; border-top: 1px solid var(--line); }
.compose textarea { flex: 1; border: 0; resize: none; padding: 14px 18px; height: 54px; font-size: 14px; background: transparent; outline: none; }
.compose button { width: 54px; background: var(--petroleo); color: var(--on-solid); display: grid; place-items: center; }
.compose button svg { width: 18px; height: 18px; }
.ctl { border: 1px solid var(--line); height: 610px; display: flex; flex-direction: column; }
.ctl .hd { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.ctl .hd .caps { color: var(--petroleo); }
.ctl .hd p { font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.ctl-list { position: relative; flex: 1; overflow-y: auto; padding: 4px 18px 8px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.turn { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; padding: 12px 0 4px; }
.cs { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; position: relative; }
.cs::before { content: ""; position: absolute; left: 10px; top: 30px; bottom: -8px; width: 1px; background: var(--line-2); }
.cs:last-child::before { display: none; }
.cs .shd { width: 22px; height: 22px; }
.cs b { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); }
.cs span.d { display: block; font-size: 12px; color: var(--mute); }
.cs .pill { margin-top: 6px; }
.cs.new { animation: evIn .45s; }
.ctx { border-top: 1px solid var(--line); padding: 12px 18px 14px; }
.ctx .caps { color: var(--mute); font-size: 10px; }
.ctx .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ctx .tags span { font-family: var(--f-mono); font-size: 11px; background: var(--niebla); padding: 3px 7px; color: var(--text); }

/* ===== reglas ===== */
.rules { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
.rg { margin-bottom: 30px; }
.rg-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.rg-h h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--petroleo); }
.rg-h span { font-size: 12.5px; color: var(--mute); margin-left: auto; }
.rr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); position: relative; }
.rr b { font-family: var(--f-display); font-weight: 500; font-size: 14.5px; color: var(--ink); display: block; }
.rr p { font-size: 13px; color: var(--mute); margin-top: 3px; max-width: 62ch; }
.rr.dirty::before { content: ""; position: absolute; left: -16px; top: 18px; width: 6px; height: 6px; background: var(--warn); }
.stp { display: inline-flex; align-items: center; border: 1px solid var(--line-2); height: 36px; }
.stp button { width: 34px; height: 100%; color: var(--mute); font-size: 16px; }
.stp button:hover { color: var(--petroleo); background: var(--tint-pet); }
.stp output { min-width: 72px; text-align: center; font-family: var(--f-mono); font-size: 13.5px; color: var(--ink); font-weight: 500; }
.sg { display: inline-flex; border: 1px solid var(--line-2); }
.sg button { height: 34px; padding: 0 14px; font-family: var(--f-display); font-size: 13px; color: var(--mute); }
.sg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rng { width: 320px; max-width: 100%; }
.rng .vals { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.rng .tr { position: relative; height: 22px; }
.rng .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); }
.rng .fill { position: absolute; top: 10px; height: 2px; background: var(--petroleo); }
.rng .h { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; background: var(--paper); border: 2px solid var(--petroleo); cursor: grab; touch-action: none; }
.rng .ticks { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; color: var(--mute); }
.sel { height: 36px; border: 1px solid var(--line-2); padding: 0 10px; background: var(--paper); font-size: 13px; }
.dest { display: flex; align-items: center; gap: 8px; }
.dest .ch { font-family: var(--f-mono); font-size: 11px; color: var(--mute); }
.tg2 { position: relative; width: 44px; height: 24px; border: 1px solid var(--line-2); background: var(--niebla); }
.tg2::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.tg2[aria-checked="true"] { background: var(--petroleo); border-color: var(--petroleo); }
.tg2[aria-checked="true"]::after { transform: translateX(20px); box-shadow: none; }
.folder { position: sticky; top: 92px; background: var(--marino); color: var(--on-solid); overflow: hidden; }
.folder .lat { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; }
.folder .in { position: relative; padding: 22px 22px 18px 86px; }
.folder h3 { color: var(--on-solid); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.folder .sub { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 4px; }
.gd { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.gd:first-of-type { margin-top: 14px; }
.gd svg { width: 14px; height: 14px; color: var(--turquesa); margin-top: 3px; }
.gd b { font-family: var(--f-display); font-weight: 500; font-size: 13.5px; display: block; color: var(--on-solid); line-height: 1.35; }
.gd span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.folder .ft { font-size: 12px; color: rgba(255, 255, 255, .6); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dock { position: fixed; left: 50%; bottom: 22px; z-index: 40; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 20px; background: var(--marino); color: var(--on-solid); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2, .9, .3, 1.15); font-size: 14px; max-width: calc(100vw - 32px); }
.dock { visibility: hidden; }
.dock.on { transform: translate(-50%, 0); visibility: visible; }
body:not(.in-reglas) .dock { display: none; }
.dock b { font-family: var(--f-display); font-weight: 600; }
.dock .btn { border-color: rgba(255, 255, 255, .3); background: transparent; color: var(--on-solid); }
.dock .btn.pri { background: var(--turquesa); border-color: var(--turquesa); color: var(--marino); }

/* ===== administradores ===== */
.adm { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.adrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 120px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.adrow .av { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; color: var(--on-solid); background: var(--petroleo); }
.adrow b { font-family: var(--f-display); font-weight: 500; color: var(--ink); display: block; }
.adrow span { font-size: 12.5px; color: var(--mute); }
.adrow .when { font-size: 13px; color: var(--text); }
.adrow.new { animation: evIn .6s; }
.invite { display: flex; gap: 0; margin-top: 22px; border: 1px solid var(--line-2); }
.invite input { flex: 1; border: 0; padding: 0 14px; height: 46px; background: transparent; outline: none; font-size: 14px; min-width: 0; }
.invite .btn { height: 46px; border: 0; }
.inv-note { font-size: 12.5px; color: var(--mute); margin-top: 8px; }
.audit { margin-top: 32px; }
.audit .r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.audit .r .mono { color: var(--mute); }
.login { position: relative; border: 1px solid var(--line); background: var(--paper); height: 470px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 56px 32px 0; text-align: center; }
.login .logo { width: 188px; height: auto; }
.login .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: 18px; }
.login h3 { font-size: 22px; margin-top: 26px; }
.login p { font-size: 13.5px; color: var(--mute); margin-top: 6px; max-width: 30ch; }
.gbtn { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px; border: 1px solid var(--line-2); background: var(--paper); font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--ink); }
.gbtn svg { width: 18px; height: 18px; }
.login .sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; }
.login .cap { position: absolute; left: 14px; top: 12px; font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; }

/* ===== hablar con el sistema ===== */
.talkw { max-width: 820px; }
.talk-h { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.talk-h .bigbot { width: 70px; }
.talk-h p { font-size: 14px; color: var(--text); max-width: 60ch; }
.tthread { display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: 6px 0 18px; }
.q { align-self: flex-end; background: var(--niebla); padding: 10px 14px; max-width: 70%; font-size: 14px; color: var(--ink); }
.a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; max-width: 86%; }
.a .ans { font-size: 14.5px; color: var(--ink); line-height: 1.55; padding-top: 4px; }
.askbox { border: 1px solid var(--line-2); display: flex; }
.askbox textarea { flex: 1; border: 0; resize: none; padding: 14px 16px; min-height: 52px; background: transparent; outline: none; font-size: 14px; }
.askbox button { width: 52px; background: var(--petroleo); color: var(--on-solid); display: grid; place-items: center; }
.askbox button svg { width: 18px; height: 18px; }

/* ===== crear pareja (credencial, p. 12) ===== */
.create { display: grid; grid-template-columns: minmax(0, 1fr) 460px; min-height: 600px; }
.cr-l { padding: 28px 30px 26px; display: flex; flex-direction: column; min-width: 0; }
.cr-l h2 { font-size: 22px; }
.cr-steps { display: flex; gap: 0; margin: 18px 0 22px; }
.cr-steps .fs { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 13px; font-weight: 500; color: var(--mute); }
.cr-steps .fs b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 11.5px; }
.cr-steps .fs.on { color: var(--ink); } .cr-steps .fs.on b { border-color: var(--petroleo); color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); }
.cr-steps .fs.done { color: var(--petroleo); } .cr-steps .fs.done b { background: var(--petroleo); border-color: var(--petroleo); color: var(--on-solid); }
.cr-steps .fl { width: 34px; height: 1px; background: var(--line-2); margin: 0 10px; align-self: center; }
.cr-body { flex: 1; }
.advs { display: grid; gap: 10px; }
.adv { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); text-align: left; }
.adv:hover { border-color: var(--line-2); }
.adv[aria-pressed="true"] { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); background: var(--tint-pet); }
.adv .av { width: 42px; height: 42px; display: grid; place-items: center; background: var(--niebla); font-family: var(--f-display); font-weight: 600; color: var(--marino); }
.adv b { font-family: var(--f-display); font-weight: 500; color: var(--ink); display: block; }
.adv span { font-size: 12.5px; color: var(--mute); }
.adv .d { font-size: 12px; color: var(--petroleo); font-family: var(--f-display); }
.field label { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); display: block; margin-bottom: 8px; }
.field input { width: 100%; height: 52px; border: 1px solid var(--line-2); padding: 0 16px; font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--ink); background: var(--paper); outline: none; }
.field input:focus { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); }
.field p { font-size: 12.5px; color: var(--mute); margin-top: 8px; }
.namesugs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.namesugs button { height: 30px; padding: 0 12px; border: 1px solid var(--line); font-size: 13px; }
.namesugs button:hover { border-color: var(--petroleo); color: var(--petroleo); }
.cr-src .pc { padding: 12px 14px; }
.cr-src .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-foot { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.cr-foot .btn.pri { margin-left: auto; }
.cr-r { position: relative; background: var(--niebla); overflow: hidden; display: flex; justify-content: center; }
.lanyard { position: absolute; top: 0; width: 26px; height: 128px; background: var(--marino); }
.lanyard.l { left: calc(50% - 64px); transform: skewX(14deg); transform-origin: top; }
.lanyard.r { left: calc(50% + 38px); transform: skewX(-14deg); transform-origin: top; }
.clip { position: absolute; top: 116px; left: calc(50% - 15px); width: 30px; height: 30px; border: 3px solid var(--gris); border-bottom: 0; background: transparent; }
.cred { position: relative; margin-top: 140px; width: 300px; height: 410px; background: #FFFFFF; box-shadow: 0 30px 50px -28px rgba(29, 35, 99, .5); overflow: hidden; transform-origin: 50% -30px; animation: credSwing 6s ease-in-out infinite; }
@keyframes credSwing { 0%, 100% { transform: rotate(.8deg); } 50% { transform: rotate(-.8deg); } }
.cred .slot { position: absolute; left: calc(50% - 26px); top: 14px; width: 52px; height: 9px; background: var(--niebla); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.cred .iso { position: absolute; left: 26px; top: 40px; width: 70px; }
.cred .iso .lt { fill: #31738F; } .cred .iso .li { fill: #42C0C1; }
.cred svg.sg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cred .nm { position: absolute; left: 26px; top: 150px; right: 26px; }
.cred .nm small { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8B8E91; display: block; }
.cred .nm b { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 30px; color: #1D2363; line-height: 1.1; margin-top: 4px; overflow-wrap: anywhere; min-height: 33px; }
.cred .nm span { display: block; font-family: "Didact Gothic", sans-serif; font-size: 13px; color: #40445A; margin-top: 6px; }
.cred .duo { position: absolute; left: 20px; bottom: 52px; display: flex; gap: 4px; }
.cred .duo svg { width: 58px; }
.cred .sig { position: absolute; left: 26px; bottom: 26px; display: flex; align-items: center; gap: 10px; }
.cred .sig i { width: 46px; height: 2px; background: #11748F; }
.cred .sig em { display: flex; gap: 5px; } .cred .sig em s { width: 8px; height: 8px; border-radius: 50%; background: #11748F; }

/* ===== avisos flotantes ===== */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 32px); }
.toast { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; background: var(--toast); color: var(--on-solid); box-shadow: var(--shadow); font-size: 13px; animation: tIn .4s cubic-bezier(.2, .9, .3, 1.2); }
.toast b { font-family: var(--f-display); font-weight: 600; display: block; font-size: 13px; }
.toast span { color: rgba(255, 255, 255, .75); }
.toast .tact { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 8px; height: 28px; padding: 0 10px; background: var(--turquesa); color: var(--marino); font-family: var(--f-display); font-weight: 600; font-size: 12px; }
.toast .tact svg { width: 13px; height: 13px; }
.toast.out { animation: tOut .3s forwards; }
@keyframes tIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes tOut { to { opacity: 0; transform: translateX(30px); } }

/* ===== responsive ===== */
@media (max-width: 1400px) {
  :root { --gut: 32px; }
  .top-in { gap: 24px; }
  .of-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; }
  .planta { grid-template-columns: minmax(0, 1fr) 206px minmax(0, 1fr); gap: 0 20px; padding: 14px; }
  .brand .sub { display: none; }
  .nav button { padding: 0 9px; }
  .nc-big b { font-size: 36px; }
  .cfg { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 1240px) {
  :root { --gut: 28px; }
  .top-in { gap: 20px; }
  .brand .sub { display: none; }
  .nav button { padding: 0 8px; font-size: 13.5px; }
  .of-grid, .act-grid, .src-grid, .lab, .rules, .adm, .mapw, .cal-grid, .kp-row { grid-template-columns: minmax(0, 1fr); }
  .ins-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .ins-grid .rcol { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .folder { position: relative; top: 0; }
}
@media (max-width: 1024px) {
  .top-in { flex-wrap: wrap; height: auto; padding-top: 10px; gap: 0 12px; }
  .nav { order: 3; width: 100%; overflow-x: auto; height: 46px; }
  .top-r .health { display: none; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .shead { flex-wrap: wrap; align-items: flex-start; }
  .shead .act { margin-left: 0; }
  .lhead { display: none; }
  .lrow { grid-template-columns: 44px minmax(0, 1fr) 100px; }
  .lrow > :nth-child(3), .lrow > :nth-child(4), .lrow > :nth-child(5) { display: none; }
  .ins-grid, .ins-grid .rcol { grid-template-columns: minmax(0, 1fr); }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .rr { grid-template-columns: minmax(0, 1fr); }
  .adrow { grid-template-columns: 40px minmax(0, 1fr); }
  .adrow > :nth-child(3), .adrow > :nth-child(4) { display: none; }
  .create { grid-template-columns: minmax(0, 1fr); }
  .cr-r { display: none; }
  .lead-cols { grid-template-columns: minmax(0, 1fr); }
  .route .lb { font-size: 10.5px; }
  .demo, .top-r .theme-b { display: none; }
  .chat, .ctl { height: auto; min-height: 460px; }
  .scrim { padding: 10px; }
  .m-head { flex-wrap: wrap; padding-left: 16px; }
  .duo-h { display: flex; gap: 4px; flex: none; }
.duo-h svg { width: 54px; height: auto; }
.cred-mini { display: none; }
  .tabs { margin: 14px 16px 0; overflow-x: auto; }
  .m-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* quién sabe qué: matriz de aislamiento por distrito */
.mtx { margin-top: 26px; }
.mtx-w { overflow-x: auto; border: 1px solid var(--line); }
.mtx table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mtx th { font-family: var(--f-display); font-weight: 500; font-size: 11.5px; color: var(--mute); text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mtx th:first-child, .mtx td:first-child { text-align: left; padding-left: 14px; }
.mtx td { padding: 8px; border-bottom: 1px solid var(--line); text-align: center; }
.mtx tr:last-child td { border-bottom: 0; }
.mtx td b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.mtx td span.c { display: inline-grid; place-items: center; width: 26px; height: 26px; font-family: var(--f-display); font-size: 12px; font-weight: 600; }
.mtx td span.c.on { background: var(--petroleo); color: var(--on-solid); }
.mtx td span.c.off { background: var(--niebla); color: var(--line-2); }
.mtx tr.sel td { background: var(--tint-pet); }

/* cabeceras con icono */
.shield-l { width: 40px; height: 46px; flex: none; }
.shield-l svg { width: 100%; height: 100%; display: block; }
.ctl-g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.whyc.flat .hd { padding: 0 0 14px; }
.whyc.flat { border: 0; }
.whyc.flat .wl { padding-left: 0; padding-right: 0; }
.whyc.flat .ft { margin-top: 4px; }
.svc { padding: 12px 14px; border: 1px solid var(--line); margin-bottom: 10px; transition: box-shadow .3s; }
.svc-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.svc-h b { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.svc p { font-size: 13px; color: var(--text); margin-top: 6px; }
.svc .btn { margin-top: 10px; }
.svc.focus { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); animation: hlIn 1.4s; }
@keyframes hlIn { 0%, 40% { background: var(--warn-tint); } }
.ctl-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* fuentes: ficha resaltada al llegar desde un aviso */
.pc.warnc .sync { font-weight: 500; }
.pc.hl { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn); animation: hlIn 2.4s; }
/* hablar con el sistema: acción dentro de la respuesta */
.a .ans .btn { display: flex; width: max-content; margin-top: 10px; }

/* QR de reconexión (ejemplo) */
.qrw { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.qrbox { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.qr { width: 96px; height: 96px; display: block; }
.qr .qbg { fill: #FFFFFF; } .qr .qfg { fill: #1D2363; }
.qrbox b { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--ink); display: block; }
.qrbox span { display: block; font-size: 12px; color: var(--mute); margin: 4px 0 10px; }
.pc .askp { margin-top: 6px; align-self: flex-start; white-space: normal; text-align: left; }

/* ===================== v7 ===================== */
.mono-n { font-variant-numeric: tabular-nums; }
.tag.w { background: var(--warn-tint); color: var(--warn); }
.nota { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 6px; font-family: var(--f-display); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nota.ok { background: var(--tint-pet); color: var(--ok); } .nota.mid { background: var(--warn-tint); color: var(--warn); } .nota.low { background: var(--bad-tint); color: var(--bad); } .nota.na { background: var(--niebla); color: var(--mute); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--on-solid); }
.btn.danger:hover { background: var(--marino); border-color: var(--marino); color: var(--on-solid); }
.link.off { color: var(--mute); } .link.off:hover { color: var(--bad); }
.dl { display: inline-block; font-family: var(--f-display); font-size: 12px; font-weight: 500; margin-top: 4px; }
.dl.up { color: var(--ok); } .dl.dn { color: var(--bad); }

/* Actividad: buscador */
.filters { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters .chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.srch input { height: 34px; width: 220px; border: 1px solid var(--line-2); padding: 0 12px; background: var(--paper); font-size: 13px; outline: none; }
.srch input:focus { border-color: var(--petroleo); }
.act-none { padding: 26px 14px; color: var(--mute); font-size: 13.5px; }
.whyc .ft .link { margin-left: 4px; }
.wl .bw i { background: var(--warn); }

/* pop-up del lead: conversación observada */
.lcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.chatlog { display: flex; flex-direction: column; gap: 10px; }
.cm { max-width: 84%; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; color: var(--ink); position: relative; }
.cm small { display: block; font-size: 11px; color: var(--mute); font-family: var(--f-display); margin-bottom: 2px; }
.cm.c { align-self: flex-end; background: var(--niebla); }
.cm.b { align-self: flex-start; border: 1px solid var(--line-2); background: var(--paper); }
.cm.b small { color: var(--petroleo); }
.cm.hl { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); background: var(--warn-tint); }
.cm .mk { position: absolute; right: 8px; top: -9px; height: 18px; padding: 0 6px; display: grid; place-items: center; background: var(--warn); color: var(--on-solid); font-family: var(--f-display); font-size: 10.5px; font-weight: 600; }
.cx { align-self: center; font-family: var(--f-mono); font-size: 11px; color: var(--mute); padding: 2px 8px; border: 1px dashed var(--line-2); }
.lq-a { border: 1px solid var(--warn); padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: var(--paper); }
.lq-a .caps { color: var(--warn); font-size: 10px; }
.lq-a p { font-size: 13px; color: var(--ink); }
.lq-a p.s { color: var(--mute); font-size: 12.5px; }
.lq-a .btn { margin-top: 4px; }
.lq-p { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--niebla); font-size: 13px; color: var(--text); }
.lq-p svg { width: 18px; height: 18px; flex: none; color: var(--petroleo); margin-top: 1px; }

/* Instrucciones: llegar desde una observación */
.insobs { display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; background: var(--warn-tint); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.insobs > svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 2px; }
.insobs b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.insobs span { color: var(--text); }
.insobs div { flex: 1; min-width: 0; }
.insobs .mx2 { width: 28px; height: 28px; display: grid; place-items: center; color: var(--mute); flex: none; }
.insobs .mx2 svg { width: 15px; height: 15px; }
.ln.hl { background: var(--warn-tint); } .ln.hl .mk { background: var(--warn); } .ln.hl .tx { color: var(--ink); }

/* Probador: lo que anotaría la revisión */
.cs { grid-template-columns: 22px minmax(0, 1fr); padding: 5px 0; line-height: 1.35; }
.cs::before { display: none; }
.cs .ck { width: 20px; height: 20px; display: grid; place-items: center; background: var(--tint-pet); color: var(--ok); font-family: var(--f-display); font-weight: 700; font-size: 12px; margin-top: 1px; }
.cs .ck svg { width: 12px; height: 12px; }
.cs.obs .ck { background: var(--warn); color: var(--on-solid); }
.cs.obs b { color: var(--warn); }
.cs-sum { margin: 8px 0 4px; padding: 10px 12px; background: var(--tint-pet); font-size: 12.5px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cs-sum.obs { background: var(--warn-tint); }
.ctl .hd p { font-size: 12.5px; color: var(--mute); margin-top: 4px; }

/* mapa: la pareja al centro, la revisión mirando aparte */
.map .core rect.cbx { fill: var(--paper); stroke: var(--slab); stroke-width: 2.5; }
.map .node.botn rect.bx { fill: transparent; stroke: transparent; }
.map .node.botn:hover rect.bx, .map .node.botn.sel rect.bx { stroke: var(--petroleo); stroke-width: 1.2; stroke-dasharray: 3 3; }
.map .node.botn text.t { font-size: 12.5px; }
.map .core.sel rect.cbx, .map .core:hover rect.cbx { stroke: var(--petroleo); }
.map .wire.watch { stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; }
.map .node.revn rect.bx { stroke: var(--warn); stroke-dasharray: 4 3; }
.map .node.revn .ico { stroke: var(--warn); }
.map-legend i.w { border-top: 2px dashed var(--warn); }
.nd-q { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.nd-q .caps { color: var(--mute); font-size: 10px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.nd-obs { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 6px 0; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.nd-obs:last-child { border-bottom: 0; }
.nd-obs:hover { color: var(--petroleo); }
.nd-obs svg { width: 13px; height: 13px; color: var(--petroleo); }
.nd-obs .mono { color: var(--mute); }
.nd-none { font-size: 12.5px; color: var(--mute); padding: 4px 0; }
.nd-act { padding: 12px 18px; border-bottom: 1px solid var(--line); }

/* KPIs: vista ampliada */
.modal.kpim { width: min(1220px, 100%); }
.kp-ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--tint-pet); color: var(--petroleo); flex: none; }
.kp-ic svg { width: 22px; height: 22px; }
.m-head .seg { margin-left: 0; flex: none; }
.kp-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.kp-big > div { padding: 16px 20px; border-left: 1px solid var(--line); }
.kp-big > div:first-child { border-left: 0; }
.kp-big span { display: block; font-size: 12.5px; color: var(--mute); }
.kp-big b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 34px; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kp-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; margin-top: 24px; }
.fun { display: grid; gap: 12px; }
.fun > div { display: grid; grid-template-columns: 112px minmax(0, 1fr) 54px; gap: 4px 12px; align-items: center; }
.fun .fl { font-size: 13px; color: var(--text); }
.fun .fb { height: 22px; background: var(--niebla); }
.fun .fb i { display: block; height: 100%; background: var(--petroleo); }
.fun > div:nth-child(3) .fb i { background: var(--turquesa); }
.fun > div:nth-child(4) .fb i { background: var(--marino); }
.fun b { font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.fun small { grid-column: 2 / 4; font-size: 11.5px; color: var(--mute); margin-top: -2px; }
.sublbl .lg { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-text); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute); }
.sublbl .lg i { width: 10px; height: 10px; } .sublbl .lg i.l { background: var(--line-2); } .sublbl .lg i.c { background: var(--petroleo); margin-left: 8px; }
.trend { width: 100%; height: auto; display: block; }
.trend .gr { stroke: var(--line); stroke-width: 1; }
.trend .bl { fill: var(--line-2); } .trend .bc { fill: var(--petroleo); }
.trend .ax { font-family: var(--f-mono); font-size: 10px; fill: var(--mute); }
.kp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kp-three > div { padding: 14px 20px 14px 0; }
.kp-three > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.kp-three .caps { color: var(--mute); font-size: 10px; }
.kp-three b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 26px; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kp-three p { font-size: 12.5px; color: var(--text); margin-top: 2px; }
.kp-tbl { border: 1px solid var(--line); overflow-x: auto; }
.kp-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kp-tbl th { text-align: right; font-family: var(--f-display); font-weight: 500; font-size: 11.5px; color: var(--mute); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kp-tbl td { text-align: right; padding: 8px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.kp-tbl th:first-child, .kp-tbl td:first-child { text-align: left; }
.kp-tbl tr:last-child td { border-bottom: 0; }
.kp-tbl .pp { display: inline-flex; align-items: center; gap: 8px; }
.kp-tbl .pp .fh { width: 22px; height: 22px; }
.kp-tbl .pp b { font-family: var(--f-display); font-weight: 500; }
.kp-tbl .pp span { color: var(--mute); font-size: 12px; }

/* ===== CALIDAD ===== */
.nextrev { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--mute); }
.nextrev b { font-family: var(--f-display); font-weight: 500; font-size: 20px; color: var(--ink); }
.nextrev em { font-style: normal; color: var(--petroleo); }
.cal-top { display: flex; gap: 16px; align-items: stretch; margin-bottom: 24px; }
.cal-top > .seg { margin: 0; align-self: center; flex: none; }
.cw { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); flex: 1; border: 1px solid var(--line); min-width: 0; }
.cw button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 10px 14px; text-align: left; border-left: 1px solid var(--line); overflow: hidden; }
.cw button:first-child { border-left: 0; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); }
.cw button b { font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: var(--ink); }
.cw button span { font-size: 12px; color: var(--text); }
.cw button small { font-size: 11px; color: var(--mute); }
.cw button.cur { background: var(--niebla); cursor: default; }
.cw button.cur span { color: var(--petroleo); }
.cw button.cur i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--turquesa); }
.cw button.fut { cursor: default; } .cw button.fut b, .cw button.fut span { color: var(--mute); }
.cw button:hover:not(:disabled) { background: var(--niebla); }
.cw button[aria-pressed="true"] { background: var(--tint-pet); box-shadow: inset 0 -3px 0 var(--petroleo); }
.cal-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 36px; align-items: start; }
.cp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.cp:hover { background: var(--niebla); }
.cp.on { background: var(--tint-pet); box-shadow: inset 3px 0 0 var(--petroleo); }
.cp.dim { opacity: .55; }
.cp .fh { width: 28px; height: 28px; }
.cp-n b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.cp-n span { font-size: 12px; color: var(--mute); }
.cp-how { font-size: 12px; color: var(--mute); margin-top: 10px; line-height: 1.5; }
.cc { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.cc:hover { background: var(--niebla); }
.cc.on { background: var(--warn-tint); box-shadow: inset 3px 0 0 var(--warn); }
.cc b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); }
.cc small { display: block; font-size: 11.5px; color: var(--mute); }
.cc .n { font-family: var(--f-display); font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.cl-h h3 { font-size: 18px; margin-right: auto; display: flex; align-items: baseline; gap: 12px; }
.cl-h h3 span { font-family: var(--f-text); font-weight: 400; font-size: 13px; color: var(--mute); }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; background: var(--tint-pet); color: var(--petroleo); font-family: var(--f-display); font-size: 12px; font-weight: 500; }
.fchip svg { width: 13px; height: 13px; }
.al { padding: 16px 0 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.al.done { opacity: .6; }
.al-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-h .mono { color: var(--mute); }
.al-h .fh { width: 22px; height: 22px; }
.al-h b { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.al-w { font-size: 12px; color: var(--mute); }
.al-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-display); font-size: 12px; color: var(--ok); }
.al-ok svg { width: 12px; height: 12px; }
.al-t { font-size: 14px; color: var(--ink); max-width: 80ch; }
.al-s { font-size: 13px; color: var(--mute); max-width: 80ch; }
.al-a { display: flex; align-items: center; gap: 22px; margin-top: 4px; flex-wrap: wrap; }
.al-a .done-b { margin-left: auto; color: var(--mute); }
.al-a .done-b:hover { color: var(--ok); }
.cl-empty { display: flex; align-items: center; gap: 12px; padding: 28px 0; color: var(--mute); font-size: 13.5px; }
.cl-empty svg { width: 36px; }
.cl-next { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; background: var(--niebla); font-size: 13px; color: var(--text); }
.cl-next svg { width: 18px; height: 18px; flex: none; color: var(--petroleo); }

/* ===== CONFIGURACIÓN ===== */
.cfg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.cfg-nav { position: sticky; top: 92px; display: flex; flex-direction: column; }
.cfg-nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; color: var(--text); text-align: left; border-left: 2px solid transparent; }
.cfg-nav button svg { width: 17px; height: 17px; color: var(--mute); flex: none; }
.cfg-nav button:hover { background: var(--niebla); color: var(--ink); }
.cfg-nav button[aria-current="true"] { border-left-color: var(--petroleo); background: var(--tint-pet); color: var(--ink); font-family: var(--f-display); font-weight: 500; }
.cfg-nav button[aria-current="true"] svg { color: var(--petroleo); }
.cfg-nav .cnt { margin-left: auto; font-family: var(--f-display); font-size: 10.5px; font-weight: 600; color: var(--on-solid); background: var(--bad); min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; }
.cfg-main { min-width: 0; }
.cfg-h { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cfg-h h2 { font-size: 19px; }
.cfg-h .btn, .cfg-h .saved { margin-left: auto; }
.cfg-h .saved { font-size: 12.5px; color: var(--ok); font-family: var(--f-display); }
.cn-g { margin-bottom: 22px; }
.cn-gh { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--petroleo); padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.cn { display: grid; grid-template-columns: 36px minmax(0, 1fr) 170px 300px; gap: 6px 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); transition: background .3s, box-shadow .3s; }
.cn.sub { padding-left: 28px; grid-template-columns: 30px minmax(0, 1fr) 170px 300px; background: var(--paper); }
.cn.wa-h { border-bottom-style: dashed; }
.cn.focus { background: var(--warn-tint); box-shadow: inset 3px 0 0 var(--warn); }
.cn-ic { width: 36px; height: 36px; display: grid; place-items: center; background: var(--niebla); color: var(--petroleo); }
.cn-ic svg { width: 19px; height: 19px; }
.cn .av { width: 30px; height: 30px; display: grid; place-items: center; background: var(--niebla); font-family: var(--f-display); font-weight: 600; color: var(--marino); font-size: 13px; }
.cn-t { min-width: 0; }
.cn-t b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--ink); }
.cn-t span { display: block; font-size: 12.5px; color: var(--mute); }
.cn-t small { display: block; font-size: 12px; color: var(--text); margin-top: 2px; }
.cn-t small.bad { color: var(--bad); }
.cn-st { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cn-st small { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); }
.cn-a { display: flex; gap: 18px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cn-a .link { font-size: 13px; }
.cn-x { grid-column: 2 / -1; padding: 10px 0 2px; }
.cn-x.conf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bad-tint); font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.cn-x.conf span { flex: 1; min-width: 200px; }
.adv-hd, .advr { display: grid; grid-template-columns: minmax(0, 1fr) 150px 112px minmax(0, 1.1fr) 340px; gap: 14px; align-items: center; }
.adv-hd { white-space: nowrap; padding: 0 4px 9px; border-bottom: 1px solid var(--line-2); font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.advr { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.advr .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.advr .av { width: 34px; height: 34px; display: grid; place-items: center; background: var(--niebla); color: var(--marino); font-family: var(--f-display); font-weight: 600; flex: none; }
.advr .who b { display: block; font-family: var(--f-display); font-weight: 500; color: var(--ink); font-size: 14px; }
.advr .who small { color: var(--mute); font-size: 12px; }
.advr .mono { color: var(--text); }
.advr .cal { display: inline-flex; align-items: center; gap: 6px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advr .cal svg { width: 12px; height: 12px; color: var(--ok); flex: none; }
.advr .pr { display: inline-flex; align-items: center; gap: 8px; }
.advr .pr .fh { width: 24px; height: 24px; }
.advr .pr b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.advr .acts { display: flex; gap: 14px; justify-content: flex-end; }
.advr .cn-x { grid-column: 1 / -1; }
.advr.paused .who b { color: var(--mute); }
.advf { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.advf h2 { font-size: 21px; margin-bottom: 4px; }
.advf .field input, .advf .field select { height: 42px; font-size: 14px; font-family: var(--f-text); font-weight: 400; width: 100%; }
.advf .field input { border: 1px solid var(--line-2); padding: 0 12px; background: var(--paper); color: var(--ink); outline: none; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink); }
.chk input { width: 16px; height: 16px; accent-color: var(--petroleo); }
.ferr { color: var(--bad); font-size: 12.5px; min-height: 1em; }
.advf .cr-foot { margin-top: 4px; }
.rr-c { display: flex; align-items: center; gap: 14px; }
.rr.locked .lk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.rr.locked .lk svg { width: 13px; height: 13px; }
#cfg-reglas .rules { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
#cfg-reglas .rr.dirty::before { left: -12px; }

/* ===== v8: visitas hechas, meta del mes, pendientes y reglas mínimas ===== */
.fun > div:nth-child(4) .fb i { background: var(--ok); }
.fun small { display: flex; gap: 14px; }
.fun small .fx { white-space: nowrap; }
.fun small .fx:first-of-type { margin-left: auto; }
.fun small .fx b { font-size: 11.5px; font-weight: 600; color: var(--ink); margin-left: 3px; }
.kp-goal { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--mute); }
.kp-goal b { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.kp-goal .bw { width: 220px; height: 4px; background: var(--niebla); }
.kp-goal .bw i { display: block; height: 100%; background: var(--petroleo); }
.kp-tbl td b.vhe { font-family: var(--f-display); font-weight: 600; }
.kp-g > div { min-width: 0; }
.kp-g span { white-space: nowrap; }

.pd-top { display: flex; align-items: baseline; gap: 16px; font-size: 13px; color: var(--mute); }
.pd-n { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; }
.pd-g { margin-top: 16px; }
.pd-gh { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--petroleo); padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.pd { display: grid; grid-template-columns: 52px minmax(0, 1fr) 100px 150px; gap: 0 16px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.pd .mono { color: var(--text); }
.pd-x b { font-family: var(--f-display); font-weight: 500; }
.pd-y { color: var(--mute); }
.pd-w { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mute); }
.pd-w i { width: 6px; height: 6px; background: var(--bot-pet); flex: none; }
.pd-w.s i { background: var(--bot-mar); }
.pd-a { justify-self: end; }
.pd-c { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.pd-c .link { font-size: 12.5px; }
.pd.off .mono, .pd.off .pd-x { text-decoration: line-through; color: var(--mute); }
.pd.off .pd-x b { color: inherit; }
.pd.off .pd-w { opacity: .55; }
.pd .cn-x.conf { grid-column: 2 / -1; margin-top: 10px; }

.rr-u { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.rr-v { font-family: var(--f-display); font-weight: 500; font-size: 13.5px; color: var(--ink); text-align: right; }
#folder .ft { margin-top: 2px; line-height: 1.5; }

/* ===================== v9 ===================== */
/* estados de la oficina: en pausa (trabaja con suplente), detenida, sin datos */
.of.pausa .nm i { background: transparent; box-shadow: inset 0 0 0 2px var(--ok); }
.of.pausa .stw { color: var(--text); }
.of.nodata .sc { opacity: .62; }
.of.nodata .stw { font-family: var(--f-mono); font-size: 10.5px; }
.bot[data-s="quieto"] { opacity: .7; }
.pill.pau { color: var(--petroleo); background: var(--tint-tur); }
.pill.pau i { background: transparent; box-shadow: inset 0 0 0 2px var(--petroleo); }
.pill.tur { color: var(--marino); background: var(--tint-tur); } .pill.tur i { background: var(--turquesa); }
:root[data-theme="dark"] .pill.pau, :root[data-theme="dark"] .pill.tur { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.pau, :root:not([data-theme="light"]) .pill.tur { color: var(--ink); } }
.stband { margin: 14px 26px 0; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; color: var(--text); border-left: 3px solid var(--petroleo); background: var(--tint-tur); }
.stband.stop { border-left-color: var(--gris); background: var(--niebla); }
.stband .sb-k { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.stband b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.stband .sb-d { flex-basis: 100%; color: var(--mute); font-size: 12.5px; }
.stband .link { margin-left: auto; }
.stband .sb-d + .link { margin-left: 0; }
.modal.pair:has(.stband) { height: min(840px, calc(100vh - 56px)); }

/* resultados: avance hacia la meta por pareja */
.kp-goals { margin-top: 18px; }
.kp-goals .sublbl { margin-bottom: 6px; }
.kg-n { margin-left: auto; font-family: var(--f-text); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute); }
.kg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.gl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) 176px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gl .gn b { font-family: var(--f-display); font-weight: 600; font-size: 13.5px; color: var(--ink); display: block; line-height: 1.25; }
.gl .gn em { font-style: normal; font-size: 11.5px; color: var(--mute); display: block; line-height: 1.3; }
.gl .gb { position: relative; height: 6px; background: var(--niebla); }
.gl .gb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--petroleo); }
.gl .gb s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .5; text-decoration: none; }
.gl .gv b { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); display: block; text-align: right; font-variant-numeric: tabular-nums; }
.gl .gv small { display: block; text-align: right; font-size: 11px; color: var(--mute); white-space: nowrap; }
.gl.behind .gv small { color: var(--warn); }
.kmark { font-style: normal; font-size: 11px; color: var(--petroleo); background: var(--tint-tur); padding: 1px 6px; margin-left: 2px; }
.kmark.stop { color: var(--mute); background: var(--niebla); }

/* pendientes */
.pd-pau { padding: 10px 14px; margin-bottom: 14px; background: var(--tint-tur); border-left: 3px solid var(--petroleo); font-size: 13px; color: var(--text); }
.pd-w.sj i { background: transparent !important; box-shadow: inset 0 0 0 2px var(--bot-mar); }

/* conexiones */
.cn-gh { display: flex; align-items: baseline; }
.cn-gh span { margin-left: auto; font-family: var(--f-text); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute); }
.cn .av.bot { background: transparent; }
.cn .av.bot svg { width: 30px; height: 30px; }
.spend { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sp-t { font-size: 12px; color: var(--mute); white-space: nowrap; }
.sp-t b { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 13px; }
.sp-b { position: relative; height: 4px; background: var(--niebla); width: 150px; }
.sp-b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--petroleo); }
.sp-b s { position: absolute; left: 80%; top: -3px; bottom: -3px; width: 1px; background: var(--mute); }
.spend.hi .sp-b i { background: var(--warn); }
.only-r { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); white-space: nowrap; }
.only-r svg { width: 12px; height: 12px; }
.cn-x.capx { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--niebla); margin-top: 6px; }
.cap-l { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--ink); }
.cap-n { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--mute); }
.capx .stp { background: var(--paper); }
.code8 { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: .06em; text-align: center; padding: 6px; }
.qr-a { display: flex !important; align-items: center; gap: 16px; margin: 0 !important; }

/* asesores y parejas */
.advr .ct { display: flex; flex-direction: column; min-width: 0; }
.advr .ct small, .advr .stc small { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.advr .stc { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.advr .pr b.dim { color: var(--mute); }
.advr .acts { gap: 16px; }
.advr .acts.lft { justify-content: flex-start; grid-column: 5; }
.advr .acts small { font-size: 12px; color: var(--mute); white-space: normal; }
.advr.focus { background: var(--warn-tint); box-shadow: inset 3px 0 0 var(--warn); transition: background .3s; }
.advr.baja { opacity: .75; }
.cn-x.conf.ok { background: var(--tint-pet); }
.bajas { margin-top: 18px; }
.bajas summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 8px 4px; list-style: none; display: flex; align-items: center; gap: 8px; }
.bajas summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.bajas[open] summary::before { transform: rotate(45deg); }
.bajas summary::-webkit-details-marker { display: none; }
.af-n { font-size: 12.5px; color: var(--mute); margin-top: -6px; }
.advf select.sel { height: 42px; }

/* diálogos de pausa / detener / comprobaciones */
.modal.pz { width: min(640px, 100%); }
.pzw { padding: 26px 28px 22px; overflow-y: auto; }
.pzw h2 { font-size: 21px; padding-right: 36px; }
.pz-sub { font-size: 13.5px; color: var(--text); margin: 8px 0 18px; max-width: 60ch; }
.pzw .sublbl { margin-top: 4px; }
.pz-sups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.pz-sups button { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); }
.pz-sups button:hover:not([disabled]) { border-color: var(--line-2); background: var(--niebla); }
.pz-sups button[aria-checked="true"] { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); background: var(--tint-pet); }
.pz-sups button[disabled] { cursor: not-allowed; opacity: .55; }
.pz-sups .rd { width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: 50%; flex: none; margin-top: 3px; position: relative; }
.pz-sups button[aria-checked="true"] .rd { border-color: var(--petroleo); }
.pz-sups button[aria-checked="true"] .rd::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--petroleo); }
.pz-sups .nm b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; color: var(--ink); }
.pz-sups .nm span { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.pz-f { margin-bottom: 18px; }
.pz-f .field input, .field.pz-f input { height: 38px; font-size: 14px; font-family: var(--f-text); font-weight: 400; border: 1px solid var(--line-2); padding: 0 12px; background: var(--paper); color: var(--ink); width: 100%; outline: none; }
.pz-f .sg button { height: 38px; }
.field .opt { font-family: var(--f-text); font-weight: 400; color: var(--mute); font-size: 12px; margin-left: 6px; }
.pz-live { border: 1px solid var(--line); margin-bottom: 18px; }
.pz-live div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pz-live div:last-child { border-bottom: 0; }
.pz-live b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.pz-live span { color: var(--mute); }
.pz-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--bad-tint); border-left: 3px solid var(--bad); font-size: 13px; color: var(--text); margin-bottom: 18px; }
.pz-warn svg { width: 15px; height: 15px; color: var(--bad); flex: none; margin-top: 2px; }
.pz-warn b { font-family: var(--f-display); font-weight: 600; color: var(--bad); }
.pz-hint { font-size: 12.5px; color: var(--mute); }
.pzw .cr-foot .btn.danger { margin-left: auto; }
.chks { border: 1px solid var(--line); margin-bottom: 4px; }
.ck1 { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ck1:last-child { border-bottom: 0; }
.ck1 .ckb { width: 18px; height: 18px; border: 1.5px solid var(--bad); display: grid; place-items: center; }
.ck1.ok .ckb { background: var(--petroleo); border-color: var(--petroleo); }
.ck1 .ckb svg { width: 11px; height: 11px; color: var(--on-solid); }
.ck1 b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; color: var(--ink); }
.ck1 small { display: block; font-size: 12px; color: var(--mute); }

/* fuentes: información de los proyectos */
.seg.big button { height: 36px; padding: 0 16px; font-size: 13px; }
.prj { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; }
.pl { position: sticky; top: 92px; border: 1px solid var(--line); max-height: calc(100vh - 120px); overflow-y: auto; }
.pl-d { font-family: var(--f-display); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--petroleo); padding: 12px 14px 6px; }
.pl-i { display: block; width: 100%; text-align: left; padding: 7px 14px 8px; border-left: 2px solid transparent; }
.pl-i b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; color: var(--ink); }
.pl-i span { display: block; font-size: 11.5px; color: var(--mute); }
.pl-i em { font-style: normal; color: var(--warn); margin-left: 6px; }
.pl-i:hover { background: var(--niebla); }
.pl-i[aria-pressed="true"] { background: var(--tint-pet); border-left-color: var(--petroleo); }
.pl-g:last-child { padding-bottom: 8px; }
.pj-h { display: flex; gap: 24px; align-items: flex-end; }
.pj-h h2 { font-size: 24px; }
.pj-h p { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin-top: 6px; }
.pj-m { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--mute); }
.pj-m b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.pj-warn { display: flex; align-items: center; gap: 16px; padding: 10px 14px; margin-top: 16px; background: var(--warn-tint); border-left: 3px solid var(--warn); font-size: 13px; color: var(--text); }
.pj-warn span { flex: 1; }
.pj-warn b { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.tabs.pj-t { margin: 18px 0 0; }
.tabs.pj-t button { padding: 11px 16px 12px; font-size: 13.5px; position: relative; }
.tabs.pj-t button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--petroleo); }
.pj-b { padding-top: 18px; }
.pj-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 13px; color: var(--mute); }
.pj-bar span { flex: 1; max-width: 76ch; }
.pj-bar span b { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.doc1 { border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.doc1 .dh { display: flex; align-items: center; }
.doc1 .dh b { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.doc1 .dh .link { margin-left: auto; }
.doc1 p { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.doc1 small { font-size: 11.5px; color: var(--mute); margin-top: auto; }
.deps { border: 1px solid var(--line); }
.deps table { width: 100%; border-collapse: collapse; font-size: 13px; }
.deps th { text-align: left; font-family: var(--f-display); font-weight: 500; font-size: 11.5px; color: var(--mute); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.deps td { padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.deps td.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.deps tr.dim td { color: var(--mute); }
.deps tr.conf td { background: var(--warn-tint); }
.deps .dx { display: inline-flex; gap: 14px; }
.deps-f { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--mute); }
.deps-f .link { margin-left: auto; }
.dep-n { margin-top: 10px; font-size: 12.5px; color: var(--warn); }
.rows { border-top: 1px solid var(--line-2); }
.row1 { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px auto; gap: 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.row1 b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.row1 > span { color: var(--mute); }
.row1.dim b { color: var(--mute); }
.row1.fil { grid-template-columns: 34px minmax(0, 1fr) auto; }
.row1 .fi { width: 34px; height: 34px; display: grid; place-items: center; background: var(--niebla); color: var(--petroleo); }
.row1 .fi svg { width: 17px; height: 17px; }
.row1 .fn { display: flex; flex-direction: column; min-width: 0; }
.row1 .fn small { font-size: 12px; color: var(--mute); }
.row1 .fn em { font-style: normal; color: var(--warn); }
.sendsel { margin-left: 0; }
.sendsel button[disabled] { opacity: .45; cursor: not-allowed; }
.sendsel button:first-child[aria-pressed="true"] { background: var(--petroleo); color: var(--on-solid); }
.lrn { display: flex; flex-direction: column; gap: 10px; }
.lc { border: 1px solid var(--line); padding: 14px 16px; }
.lc.disc { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
.lc-h { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mute); }
.lc-t { margin-top: 8px; font-size: 14.5px; color: var(--ink); }
.lc-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 12px; }
.lc-vs > div { background: var(--paper); padding: 12px 14px; }
.lc-vs .caps { font-size: 10px; color: var(--mute); }
.lc-vs p { margin-top: 4px; font-size: 14px; color: var(--ink); }
.lc-vs small { font-size: 11.5px; color: var(--mute); }
.lc-n { margin-top: 10px; font-size: 12.5px; color: var(--text); }
.lc-a { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.hisp div { display: grid; grid-template-columns: 110px 220px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.hisp .mono { color: var(--mute); }
.hisp b { font-family: var(--f-display); font-weight: 500; color: var(--ink); }
/* fuentes de cada pareja */
.pc .apl { margin-top: 6px; font-size: 12px; align-self: flex-start; }
.pc.pcsel { background: var(--tint-pet); }
.apbox { position: sticky; top: 92px; }
.apb { padding: 14px 16px 10px; }
.apb b { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.apb p { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.apbox .drv, .box .drv.lockd { opacity: 1; cursor: default; }
.apb-f { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mute); align-items: flex-start; }
.apb-q { display: flex; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }
.apb-q b { margin-left: auto; font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 15px; }

/* probador */
.sugs .sg-l { flex-basis: 100%; font-family: var(--f-display); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.msg .att { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; background: var(--niebla); font-family: var(--f-display); font-size: 12.5px; color: var(--ink); }
.msg .att::before { content: "PDF"; font-family: var(--f-mono); font-size: 10px; color: var(--on-solid); background: var(--bad); padding: 2px 4px; }

/* reglas */
.tri { display: flex; gap: 8px; }
.stp.sm { height: 34px; }
.stp.sm .tl { font-family: var(--f-display); font-size: 11.5px; color: var(--mute); padding: 0 4px 0 10px; }
.stp.sm button { width: 26px; }
.stp.sm output { min-width: 38px; font-size: 12.5px; }
.rr-lk { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rr-lk .rr-v { font-family: var(--f-mono); font-size: 13px; }

/* hablar con el sistema */
.only-me { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); border: 1px solid var(--line-2); padding: 6px 10px; }
.only-me svg { width: 13px; height: 13px; }
.ag-l { margin: 8px 0 10px; padding: 0; list-style: none; border: 1px solid var(--line); }
.ag-l li { padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ag-l li:last-child { border-bottom: 0; }
.ag-l li span { color: var(--mute); }
.ag-ba { display: flex; gap: 18px; margin-bottom: 8px; font-size: 13px; color: var(--mute); }
.ag-ba b { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.yn { display: flex; gap: 8px; margin-top: 12px; }
.yn-d { align-self: flex-start; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--petroleo); background: var(--tint-pet); padding: 4px 10px; }

/* quién mira (prototipo) */
.who-w { position: relative; }
button.avatar { cursor: pointer; }
.who-m { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 12px; z-index: 60; }
.who-m .caps { color: var(--mute); font-size: 10px; display: block; margin: 0 0 8px 4px; }
.who-m button { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 8px; }
.who-m button:hover { background: var(--niebla); }
.who-m button[aria-pressed="true"] { background: var(--tint-pet); }
.who-m .av { width: 28px; height: 28px; display: grid; place-items: center; background: var(--marino); color: var(--on-solid); font-family: var(--f-display); font-weight: 600; font-size: 12px; flex: none; }
.who-m b { display: block; font-family: var(--f-display); font-weight: 500; color: var(--ink); font-size: 13.5px; }
.who-m small { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.who-m p { font-size: 11px; color: var(--mute); margin: 8px 4px 0; }
.kp-tbl td small.of { color: var(--mute); font-size: 11.5px; }
.pz-no { font-size: 12px; color: var(--mute); margin: -8px 0 18px; line-height: 1.5; }
.pz-no b { font-family: var(--f-display); font-weight: 500; color: var(--text); }
.advr .av, .cn .av { color: var(--ink); }

/* Montaje del v9: formularios reales y pantalla de acceso, sin alterar su paleta. */
[hidden] { display: none !important; }
.sprite { position: absolute; }
#acceso { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
#acceso .login { width: 420px; max-width: 100%; }
.login form { margin: 0; width: 100%; }
.login .gbtn { width: 100%; }
a.gbtn { text-decoration: none; }
.login #accessError { color: var(--bad); margin-top: 18px; }
.ad-info { min-width: 0; }
.ad-info small { display: block; color: var(--mute); }
.ad-actions { text-align: right; }
.confirm { white-space: normal; }
.calendar { margin-top: 20px; }
#inviteResult { margin-top: 10px; overflow-wrap: anywhere; }
#copyLink { margin-top: 6px; }
#auditFilters { margin: 12px 0; }
#auditFilters label { display: grid; gap: 4px; color: var(--mute); font-size: 12px; }
#auditFilters select, #auditFilters input { border: 1px solid var(--line-2); background: var(--paper); padding: 5px; }
.audit .r { align-items: start; }
.audit-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.att-i .since { display: block; margin-top: 6px; color: var(--text); }
.att-i .action { color: var(--plano); }
.att-i .seen { margin-top: 6px; }
.of { cursor: default; }
.panel-error { margin: 16px 48px; padding: 12px; color: var(--bad); background: var(--bad-tint); }
.login-preview .login { width: 100%; }

.nucleo { cursor: default; }
.nc-notas > div > i { --w: 0%; }
/* Proyectos: mismas columnas, pestañas y tablas del v9; formularios accesibles. */
#srcProj { margin-top: 16px; }
#projectsList:empty { border: 0; }
.project-actions, .projectRowActions, .editor-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.project-actions { margin-bottom: 18px; }
.projectState { text-transform: capitalize; }
#projectBody .doc1 { margin-bottom: 14px; }
#projectBody .doc1 p { white-space: pre-wrap; overflow-wrap: anywhere; }
#projectBody h3 { margin: 20px 0 12px; font-size: 14px; }
#projectBody .deps { overflow-x: auto; }
#projectBody .deps .state { white-space: normal; min-width: 210px; }
#projectBody .deps button { display: block; margin: 3px; }
.project-history { display: grid; grid-template-columns: 115px 140px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; font-size: 13px; }
.project-history .change { white-space: pre-wrap; overflow-wrap: anywhere; }
#projectDialog, #qualityDialog { width: min(680px, 92vw); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); padding: 28px; color: var(--ink); background: var(--paper); }
#projectDialog::backdrop, #qualityDialog::backdrop { background: rgb(0 0 0 / 40%); }
#projectEditor > p { color: var(--mute); margin: 12px 0; }
#projectFields label { display: grid; gap: 6px; font-size: 13px; margin: 14px 0; }
#projectFields input, #projectFields textarea, #projectFields select { width: 100%; padding: 9px; border: 1px solid var(--line-2); color: var(--ink); background: var(--paper); font: inherit; }
#projectFields textarea { resize: vertical; }
#projectFields small { display: block; color: var(--mute); }
#projectFormError { color: var(--bad) !important; }
#projectConflict { background: var(--warn-tint); padding: 14px; white-space: pre-wrap; }
.editor-actions { justify-content: end; margin-top: 20px; }
#qualityActions, .quality-links { display: flex; gap: 14px; flex-wrap: wrap; }
.quality-links { margin-top: 16px; }
#qualityError { color: var(--bad); }
.department-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (max-width: 900px) { #srcProj { grid-template-columns: 190px minmax(0, 1fr); gap: 16px; } .project-history { grid-template-columns: 1fr; } }
/* Nombre de la oficina entero en pantallas estrechas: en dos líneas, nunca «P…» (bug 014). */
.of .nm .t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* Calidad: una fila por ajuste, pie del formulario y operación separados (039). */
#qualityConfig .quality-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
#qualityConfig .quality-row span { min-width: 0; }
#qualityConfig .quality-row select, #qualityConfig .quality-row input[type=number] { height: 32px; max-width: 100%; border: 1px solid var(--line-2); padding: 4px 8px; background: var(--paper); color: var(--ink); }
#qualityConfig .quality-row select { width: 156px; }
#qualityConfig .quality-row input[type=number] { width: 96px; }
#qualityConfig .quality-row input[type=checkbox] { margin: 0; width: 16px; height: 16px; accent-color: var(--petroleo); }
#qualityFrequencyState { padding: 8px 10px; font-size: 12.5px; color: var(--mute); }
#cfg-quality > p { margin: 4px 0 16px; }
#cfg-quality .quality-operation, #cfg-quality .quality-history { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.quality-operation p { overflow-wrap: anywhere; }
.quality-operation p + p { margin-top: 8px; }
.quality-operation .btn { margin-top: 14px; }
.quality-history h3 { margin-bottom: 12px; font-family: var(--f-display); font-size: 14px; }
#qualityConfigHistory:empty::before { content: "Sin cambios todavía"; color: var(--mute); font-size: 13px; }
/* Resultados 019: tarjeta y diálogos con la estructura y tipografía del v9. */
#kpis .kp-g { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#kpis .kp-g span { white-space: normal; display: block; }
#kAvance { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
#resultsDialog, #resultsListDialog { width: min(1220px, 94vw); max-width: 94vw; max-height: 90vh; overflow-y: auto; padding: 28px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); }
#resultsListDialog { width: min(680px, 92vw); }
#resultsDialog::backdrop, #resultsListDialog::backdrop { background: rgb(0 0 0 / 40%); }
#resultsDialog .m-head { padding: 0 0 20px; align-items: center; gap: 16px; }
#resultsDialog .m-body { padding: 0; overflow: visible; }
#resultsDialog .kg { grid-template-columns: minmax(0, 1fr); }
#resultsDialog .gl { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(100px, .6fr); grid-template-rows: minmax(40px, auto) minmax(42px, auto); gap: 10px 16px; padding: 16px 0; }
#resultsDialog .gl .gn, #resultsDialog .gl .gv { min-width: 0; overflow-wrap: anywhere; }
#resultsDialog .gl .gv small { white-space: normal; }
.result-progress { grid-column: 1 / -1; color: var(--mute); font-size: 13px; line-height: 1.6; }
.result-month { display: grid; gap: 6px; font-size: 12px; color: var(--mute); }
.result-month select { max-width: 100%; padding: 7px; border: 1px solid var(--line-2); color: var(--ink); background: var(--paper); font: inherit; }
.result-table-title { margin-top: 26px; }
#resultsDialog .kp-tbl { overflow: visible; }
#resultsTable { table-layout: fixed; }
#resultsTable th, #resultsTable td { white-space: normal; overflow-wrap: anywhere; padding: 10px 8px; vertical-align: top; }
#resultsTable th:first-child { width: 20%; text-align: left; }
#resultsTable tbody th, #resultsTable tfoot th { font-size: 13px; color: var(--ink); }
#resultsTable tfoot { border-top: 2px solid var(--line); }
#resultsTable tbody tr, #resultsTable tfoot tr { height: 80px; }
#resultsTable td { font-size: 12px; }
#resultsTable button { font: inherit; text-align: right; max-width: 100%; }
#resultsTable button.link { color: var(--plano); }
#resultsTable .result-virtual { display: block; margin: 5px 0 0 auto; font-size: 11px; }
.result-definition { font-size: 12px; color: var(--mute); margin-top: 16px; line-height: 1.6; }
#resultsError { color: var(--bad); }
.result-cita { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.result-cita b { font-family: var(--f-display); font-size: 14px; font-weight: 600; }
.result-cita p { font-size: 13px; color: var(--mute); margin-top: 6px; }
.result-cita small { display: inline-block; margin-top: 8px; }
@media (max-width: 900px) {
  #resultsDialog, #resultsListDialog { padding: 20px; }
  #resultsDialog .m-head { flex-wrap: wrap; }
  #resultsDialog .kg-n { margin-left: 0; }
  #resultsDialog .kp-goals .sublbl { flex-wrap: wrap; gap: 6px; }
  #resultsTable th, #resultsTable td { padding: 10px 5px; }
}
#resultsTable button { white-space: normal; overflow-wrap: anywhere; }

/* Aprendizajes del v9: contraste legible en claro y oscuro, acciones que envuelven. */
#projectDetail { min-width: 0; }
#projectDetail .pj-t { flex-wrap: wrap; }
.learning-card { margin: 16px 0; overflow-wrap: anywhere; }
.learning-card .lc-h, .learning-card .lc-a { display: flex; flex-wrap: wrap; gap: 12px; }
.learning-card p, .learning-card blockquote, .learning-history p { white-space: pre-wrap; overflow-wrap: anywhere; }
.learning-card .learningOrigin { font-size: 13px; color: var(--ink); }
.brand .sub, #projectDetail .pj-m, #projectDetail .pj-bar,
.learning-card .lc-h, .learning-card .lc-vs .caps, .learning-card .lc-vs small { color: var(--text); }
#s-fuentes .shead h1, #projectsList .pl-d { color: var(--plano); }
.nav .cnt { color: var(--paper); }
.learning-card .lc-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.learning-card details { margin-top: 16px; }
.learning-card summary, #projectBody > details > summary { cursor: pointer; color: var(--ink); padding: 10px 0; }
.learning-history, .learning-request { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
#learningDialog, #learningTransferDialog { width: min(680px, 92vw); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); padding: 28px; color: var(--ink); background: var(--paper); }
#learningDialog::backdrop, #learningTransferDialog::backdrop { background: rgb(0 0 0 / 40%); }
#learningDialog label, #learningTransferDialog label { display: grid; gap: 8px; margin: 16px 0; }
#learningDialog textarea, #learningDialog select, #learningTransferDialog textarea { width: 100%; padding: 10px; border: 1px solid var(--line-2); color: var(--ink); background: var(--paper); font: inherit; }
#learningConflict { border: 1px solid var(--line-2); padding: 12px; }
#learningTransferDialog mark { display: block; padding: 12px; background: var(--warn-tint); color: var(--ink); }
#learningError, #learningTransferError { color: var(--ink); }
#projectDetail button, #projectDetail a, #projectDetail summary { color: var(--ink); }
#projectDetail .btn.pri { color: var(--paper); }
@media (max-width: 900px) { .learning-card .lc-a button { max-width: 100%; white-space: normal; } }
@media (max-width: 768px) { .learning-card .lc-vs { grid-template-columns: 1fr; } }

#projectsList .pl-i span { color: var(--ink); }

/* Contraste de todo el texto de la portada (DP-012). */
#s-oficina .of .who, #s-oficina .kp-g span { color:var(--text); }
#s-oficina .shead h1, #s-oficina .kp-h .caps,
#s-oficina .vivo-h .caps, #s-oficina .att-i .seen { color:var(--plano); }
#s-oficina .att-i .seen:hover, #s-oficina .att-i .seen:focus-visible { color:var(--ink); }
#s-oficina .nc-h span, #s-oficina .nc-ax,
#s-oficina .nc-last span, #s-oficina .nc-notas .cap { color:var(--on-solid); }
/* 026: ficha y filas del v9, con contraste pleno incluso después de cancelar. */
#officeDialog { width:min(1100px,94vw); max-height:90vh; overflow:auto; padding:28px; border:1px solid var(--line); color:var(--ink); background:var(--paper); }
#officeDialog::backdrop { background:rgb(0 0 0 / 40%); }
#officeDialog .m-head { display:flex; align-items:start; justify-content:space-between; gap:24px; padding:0 0 20px; }
#officeDialog h2 { font-size:22px; }
#officeDialog h3 { font-size:14px; margin:18px 0 10px; }
#officeDialog .tabs { margin:12px 0 20px; display:flex; flex-wrap:wrap; }
#officeDialog .tabs button { color:var(--ink); padding:12px; }
#officeDialog .tabs [aria-selected=true] { border-bottom:2px solid var(--plano); }
#officeDialog .link, #officeDialog .btn { color:var(--ink); }
#officeDialog .btn.danger { color:var(--bad); background:var(--paper); }
#officeDialog .pd, #officeDialog .pending-question { display:grid; grid-template-columns:56px minmax(0,1fr) 84px minmax(100px,180px); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start; }
#officeDialog .pd-x { min-width:0; overflow-wrap:anywhere; font-size:14px; }
#officeDialog .pd-w { color:var(--ink); white-space:normal; padding:0; font-size:12px; }
#officeDialog .pd-y { color:#5b5d66; font-size:13px; }
#officeDialog .mono { color:var(--ink); font-size:13px; }
#officeDialog .pd-a { display:flex; flex-wrap:wrap; justify-content:end; gap:10px; font-size:13px; }
#officeDialog .pd-g { margin:20px 0; }
#officeDialog .pd-gh { color:var(--ink); font-size:14px; font-weight:600; }
#officeDialog .pending-marks, #officeDialog .pending-result { font-size:13px; margin-top:6px; color:var(--ink); }
#officeDialog .pd.off { opacity:1; }
#officeDialog .pd.off .pending-client, #officeDialog .pd.off .pending-action { text-decoration:line-through; }
#officeDialog .pending-confirm { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); }
#officeDialog .pending-confirm p { flex:1 1 100%; }
#officeDialog .pending-message { grid-column:2 / -1; color:var(--ink); font-size:14px; }
#officeDialog .pending-questions { border-bottom:2px solid var(--line); margin-bottom:24px; padding-bottom:16px; }
#officeDialog .pending-questions > p { font-size:13px; }
#officeDialog #officeAgenda pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; margin:12px 0; }
#officeDialog #officeSources p { margin:12px 0; }
#officeDialog #pendingError { color:var(--bad); }
.office-open { margin-top:10px; color:var(--ink); }
[data-theme=dark] #officeDialog .pd-y { color:#b8c1cf; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) #officeDialog .pd-y { color:#b8c1cf; } }
@media(max-width:850px) {
  #officeDialog { padding:20px; }
  #officeDialog .pd, #officeDialog .pending-question { grid-template-columns:50px minmax(0,1fr) 90px; gap:10px; }
  #officeDialog .pd-a { grid-column:2 / -1; justify-content:start; }
  #officeDialog .pending-confirm { grid-column:1 / -1; }
}
#officeDialog .pd.off .pd-x { color:var(--ink); text-decoration:none; }
#officeDialog .pd.off .pd-w { opacity:1; }

#officeDialog time.mono { white-space:pre-line; }

/* 027: filas de asesores del v9, acciones y diálogos. */
#cfg-asesores { min-width:0; color:var(--ink); }
#cfg-asesores > p { margin-bottom:20px; }
#cfg-asesores .pair-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:22px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.pair-row p,.pair-row h3,.pair-row b { color:var(--ink); overflow-wrap:anywhere; }
.pair-row h3 { font-size:16px; }
.pair-row .pair-actions,.pair-row details,.pair-row section { grid-column:1/-1; }
.pair-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
#pairArchived { margin-top:28px; }
#pairArchived summary { cursor:pointer; }
#pairDialog { width:min(720px,92vw); max-height:90vh; overflow:auto; padding:28px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
#pairDialog::backdrop { background:rgb(0 0 0 / 40%); }
#pairDialog h2 { font-size:20px; color:var(--ink); }
#pairDialog p { color:var(--ink); margin:12px 0; overflow-wrap:anywhere; }
#pairDialog label { display:grid; gap:7px; margin:16px 0; color:var(--ink); }
#pairDialog input,#pairDialog select,#pairDialog textarea { width:100%; min-width:0; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); padding:10px; font:inherit; }
#pairDialog button:disabled { opacity:1; color:var(--ink); background:var(--paper-2); cursor:default; }
#pairFormError,#pairError { color:var(--ink); }
#pairDialog option:disabled { color:var(--ink); }
@media(max-width:800px) { #cfg-asesores .pair-row { grid-template-columns:minmax(0,1fr); } }

[data-theme="dark"] #s-configuracion .shead h1,[data-theme="dark"] #cfg-asesores .link { color:var(--ink); }
/* 029: ficha y actividad v9 con textos completos y las tres pestañas nuevas. */
#officeDialog,#leadDialog { width:min(1240px,96vw); max-width:96vw; max-height:94vh; padding:0; border:1px solid var(--line); background:var(--paper); color:var(--ink); overflow:auto; }
#officeDialog::backdrop,#leadDialog::backdrop { background:rgb(0 0 0 / 40%); }
#officeDialog .m-head,#leadDialog .m-head { display:flex; gap:18px; align-items:center; padding:24px; }
#officeDialog .office-heading,#leadDialog .m-head>div { flex:1; min-width:0; }
#officeDialog .duo-h { display:flex; flex:none; }
#officeDialog .duo-h svg { width:45px; height:60px; }
#officeDialog .pname { flex-wrap:wrap; }
#officeDialog .pill { color:var(--ink); border:1px solid var(--line); padding:5px 8px; font-size:12px; }
#officeDialog .stband { margin:0 24px 20px; padding:16px; background:var(--paper-2); display:block; }
#officeDialog .stband p { margin:8px 0; }
#officeDialog .tabs { display:flex; flex-wrap:wrap; gap:4px 14px; padding:0 24px; }
#officeDialog .tabs button { padding:12px 0; white-space:normal; color:var(--text); font-size:13px; }
#officeDialog .tabs button[aria-selected=true] { color:var(--ink); border-bottom:3px solid var(--petroleo); }
#officeDialog .office-body,#leadDialog .m-body { padding:24px; overflow:visible; }
#officeDialog h3,#leadDialog h3 { font-size:14px; margin:12px 0; }
#officeDialog p,#officeDialog pre,#officeDialog blockquote,#leadDialog p { overflow-wrap:anywhere; white-space:pre-wrap; }
#officeDialog .mapw { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.6fr); gap:24px; }
.connection-node { position:relative; z-index:1; width:100%; min-height:90px; padding:12px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); text-align:left; font:inherit; font-size:13px; overflow-wrap:anywhere; }
.connection-node span { display:block; margin-top:8px; color:var(--text); font-size:12px; }
.connection-node[aria-pressed=true] { outline:2px solid var(--petroleo); }
.connection-node.bad,.connection-node.bad span,.connection-failure { color:var(--bad); }
.pair-node { border:2px solid var(--petroleo); }
#connectionPanel { min-width:0; border:1px solid var(--line); padding:18px; background:var(--paper); }
#connectionPanel p { margin:10px 0; color:var(--text); }
.connection-event { display:block; padding:12px 0; width:100%; text-align:left; color:var(--ink); border:0; border-top:1px solid var(--line); background:none; font:inherit; font-size:12px; }
.office-record { border-bottom:1px solid var(--line); padding:16px 0; }
.office-record blockquote { margin:10px 0; padding:12px; background:var(--paper-2); color:var(--ink); }
#officeActivity>.link { display:inline-block; margin:8px 0 16px; }
#officeAgenda pre { margin-top:16px; font:inherit; padding:16px; background:var(--paper-2); }
#leadDialog .lead-cols { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:24px; }
#leadDialog .route { display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 0 20px; }
#leadDialog .route p { flex:1 1 200px; border-top:2px solid var(--petroleo); padding-top:10px; color:var(--ink); font-size:12px; }
#leadDialog .cm { color:var(--ink); margin:10px 0; padding:12px; }
#leadDialog .cm small { display:block; margin-bottom:8px; color:var(--text); }
#leadDialog .box { padding:16px; margin-bottom:16px; }
#leadDialog .box p { margin:8px 0; }
#s-actividad .act-grid { display:block; }
#s-actividad .filters { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
#s-actividad .filters label { display:grid; gap:6px; color:var(--ink); font-size:12px; }
#s-actividad input,#s-actividad select { color:var(--ink); background:var(--paper); border:1px solid var(--line-2); padding:9px; max-width:100%; }
#s-actividad .srch { margin-left:auto; }
#s-actividad .activity-empty { padding:24px; }
.lrow { width:100%; text-align:left; color:var(--ink); background:var(--paper); font:inherit; gap:12px; }
.lrow .lead,.lrow .dc,.lrow .pr { min-width:0; overflow-wrap:anywhere; }
.lrow .lead span { display:block; color:var(--text); }
#officeActivity .lrow { grid-template-columns:48px minmax(100px,1fr) 70px 80px minmax(100px,2fr) 80px; }
#s-actividad .lrow>* { color:var(--ink); }
#vivo .ev { display:grid; grid-template-columns:42px 64px minmax(0,1fr); gap:8px; color:var(--ink); text-align:left; }
#vivo .ev .mono,#vivo .live-robot { color:var(--text); font-size:11px; }
#vivo .tx { min-width:0;overflow-wrap:anywhere; }
#vivo .live-empty { padding:16px 0; color:var(--text); }
.of .bub { max-width:calc(50% - 16px); white-space:normal; overflow-wrap:anywhere; padding:6px 8px; line-height:1.35; font-size:11px; color:var(--ink); background:var(--paper); }
.of .bub.c { left:8px; }
.of .bub.s { left:auto;right:8px; }
.of .bub.stop { color:var(--bad); }
@media(max-width:1100px) {
 #officeDialog .mapw { grid-template-columns:minmax(0,1fr); }
 #officeActivity .lrow,.lrow { grid-template-columns:45px minmax(0,1fr) minmax(0,1fr); }
 #s-actividad .lhead { display:none; }
 #leadDialog .lead-cols { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:820px) {
 #s-actividad .srch { margin-left:0; }
 #officeDialog .m-head,#leadDialog .m-head { padding:18px;gap:12px; }
 #officeDialog .office-body,#leadDialog .m-body { padding:18px; }
}
.vivow .link { color:var(--slab-ink); }
#officeActivity .lrow>* { color:var(--ink); }
#vivo { overflow:visible; }
#vivo::after { display:none; }
#s-actividad .lhead,#s-actividad .lhead>* { color:var(--text); }
#s-actividad button:disabled { opacity:1; color:var(--text); cursor:default; }
#s-actividad h1 { color:var(--ink); }
.of .bub { display:block; -webkit-line-clamp:unset; }
.att-destination { display:block; color:inherit; text-decoration:none; }
.att-destination .action { display:block; margin-top:8px; text-decoration:underline; }
.of details { padding:10px 14px; border-top:1px solid var(--line); color:var(--ink); font-size:12px; }
.of details pre { white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin-top:10px; }
/* Posiciones y enlaces directos de buildMap v9, con etiquetas HTML sin escalar. */
.office-map { display:block; position:relative; aspect-ratio:900/540; min-height:410px; border:1px solid var(--line); }
.office-map::before { display:none; }
.connection-wires { position:absolute;inset:0;width:100%;height:100%; }
.connection-wires path { fill:none;stroke:var(--line-2);stroke-width:1.5; }
.connection-wires .cut { stroke:var(--bad);stroke-dasharray:5 5; }
.office-map .connection-node { position:absolute; width:27%; min-height:74px; padding:10px; }
.office-map .pair-node { left:36.7%;top:34.5%;height:32%;width:26.6%;text-align:center; }
.office-map .pair-node .duo-h { justify-content:center;gap:6px; }
.office-map .pair-node svg { width:32px;height:44px; }
.office-map .pair-node span { margin-top:4px; }
.office-map [data-connection=modelo] { left:36.7%;top:2%;width:26.6%; }
.office-map [data-connection=kommo] { left:2.7%;top:23%; }
.office-map [data-connection=telegram] { left:2.7%;top:50%; }
.office-map [data-connection=calendario] { right:2.7%;top:23%; }
.office-map [data-connection=proyectos] { right:2.7%;top:50%; }
.office-map [data-connection=calidad] { left:36.7%;bottom:2%;width:26.6%; }
.of .who,.of .stw { white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere; }
.of .nm { flex-wrap:wrap; }

/* 033 · Reglas: composición del v9, valores de pareja e historial completo. */
#cfg-reglas { min-width:0; color:var(--ink); }
#cfg-reglas :is(p,small,label,legend,summary,button,input,select,h2,h3,h4,span,a) { color:var(--ink); opacity:1; }
#cfg-reglas p { line-height:1.65; margin:12px 0; overflow-wrap:anywhere; }
#cfg-reglas .rules { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; margin-top:24px; }
#cfg-reglas .rule-group { margin-bottom:32px; min-width:0; }
#cfg-reglas .rule-group>h3 { padding:14px 0; border-bottom:2px solid var(--line); font-size:16px; }
#cfg-reglas .rr { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.75fr); gap:24px; padding:24px 0; align-items:start; min-width:0; }
#cfg-reglas .rr.dirty { border-left:3px solid var(--ink); padding-left:14px; }
#cfg-reglas .rr :is(h4,small) { display:block; font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
#cfg-reglas .rr h4 { font-size:15px; font-weight:600; }
#cfg-reglas .rule-controls { display:flex; flex-direction:column; gap:16px; min-width:0; }
#cfg-reglas label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
#cfg-reglas .stp { display:flex; height:auto; width:100%; border:1px solid var(--line); background:var(--paper); }
#cfg-reglas .stp input { width:100%; min-width:0; border:0; text-align:center; font:inherit; background:var(--paper); color:var(--ink); padding:10px 2px; }
#cfg-reglas .stp button { flex:none; min-width:30px; padding:9px 6px; background:var(--paper); font-size:18px; border:0; cursor:pointer; }
#cfg-reglas input[type=time] { color-scheme:light; }
html[data-theme=dark] #cfg-reglas input[type=time] { color-scheme:dark; }
#cfg-reglas fieldset { display:flex; flex-wrap:wrap; gap:12px; padding:12px; border:1px solid var(--line); min-width:0; }
#cfg-reglas fieldset label { flex-direction:row; align-items:center; }
#cfg-reglas fieldset input { width:16px; height:16px; accent-color:var(--ink); }
#cfg-reglas .rule-hours { display:flex; flex-wrap:wrap; gap:16px; }
#cfg-reglas .rule-hours input { display:block; max-width:100%; background:var(--paper); padding:10px; border:1px solid var(--line); }
#cfg-reglas .rule-programmed { border-left:3px solid var(--ink); padding:12px; background:var(--warn-tint); }
#cfg-reglas .folder { position:static; padding:20px; min-width:0; background:var(--paper); border:1px solid var(--line); }
#cfg-reglas .rule-fixed { border-top:1px solid var(--line); padding:18px 0; }
#cfg-reglas .rule-fixed h4 { font-size:13px; font-weight:500; line-height:1.8; }
#cfg-reglas .rule-fixed p { font-size:12px; }
#cfg-reglas .rule-other { border-bottom:1px solid var(--line); padding:20px 0; }
#cfg-reglas .rule-other a { text-decoration:underline; line-height:1.6; }
#cfg-reglas .rules-dock { position:sticky; bottom:16px; z-index:5; display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:20px; background:var(--paper); border:2px solid var(--ink); box-shadow:0 4px 20px rgb(0 0 0 / 12%); }
#cfg-reglas .rules-dock[hidden] { display:none; }
#cfg-reglas .rules-dock span { margin-right:auto; }
#cfg-reglas .btn.pri { background:var(--marino); color:var(--on-solid); }
#cfg-reglas .rules-history { margin-top:32px; border-top:1px solid var(--line); padding-top:24px; }
#cfg-reglas .rule-change { display:flex; flex-direction:column; align-items:start; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); line-height:1.8; overflow-wrap:anywhere; }
#rulesPreview { width:min(680px,92vw); max-height:88vh; overflow:auto; padding:28px; background:var(--paper); color:var(--ink); border:1px solid var(--line); }
#rulesPreviewChanges p { padding:16px 0; border-bottom:1px solid var(--line); }
#rulesPreview::backdrop { background:rgb(0 0 0 / 40%); }
#cfg-reglas .link { text-decoration:underline; line-height:1.7; text-align:left; }
#cfg-reglas button:focus-visible,#cfg-reglas input:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media(max-width:1250px) { #cfg-reglas .rules { grid-template-columns:minmax(0,1fr); } }
@media(max-width:800px) { #cfg-reglas .rr { grid-template-columns:minmax(0,1fr); gap:16px; } #cfg-reglas .rule-controls { max-width:100%; } }

/* 035: bloques del v9 legibles también en los dos anchos de escritorio estrechos. */
#resultsDialog .result-selectors { display:flex; gap:16px; flex-wrap:wrap; }
#resultsRange { margin-bottom:16px; color:var(--ink); line-height:1.6; }
#resultsMetrics { min-height:125px; margin-bottom:24px; }
#resultsMetrics *, #resultsDetails *, #resultsDays *, #resultsFunnel *, #resultsKPITable * { color:var(--ink); }
#resultsMetrics small { display:block; margin-top:8px; font-size:12px; }
#resultsFunnel { display:block; margin-top:24px; }
#resultsFunnel h3, #resultsKPITable h3 { font-size:14px; margin:16px 0; }
.result-funnel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; border:1px solid var(--line); }
.result-funnel li { padding:12px; border-left:1px solid var(--line); }
.result-funnel span, .result-funnel b { display:block; }
.result-funnel b { font-size:24px; margin-top:8px; }
#resultsDetails { min-height:190px; }
#resultsDetails p { line-height:1.6; }
#resultsDetails .result-attentions { grid-column:1 / -1; padding:12px 0; border-top:1px solid var(--line); }
#resultsDays details { border-bottom:1px solid var(--line); padding:14px 0; }
#resultsDays summary { padding:8px 0; cursor:pointer; }
#resultsDays p { margin:12px 0; font-size:13px; line-height:1.6; }
.result-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; list-style:none; }
.result-days li { padding:8px; border:1px solid var(--line); font-size:12px; }
.result-days li[data-marca="ideal"] { border:2px solid var(--ink); font-weight:600; }
.result-kpi-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.result-kpi-table th, .result-kpi-table td { padding:12px 8px; vertical-align:top; border-bottom:1px solid var(--line); text-align:left; }
.result-kpi-table small { display:block; margin-top:8px; font-weight:400; }
#resultsDialog #resultsDownload { text-decoration:none; text-align:center; white-space:normal; }
#resultsMetrics *, #resultsDetails *, #resultsDays *, #resultsKPITable * { overflow-wrap:anywhere; }
@media (max-width:900px) {
  #resultsMetrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #resultsMetrics > div { padding:16px; border-bottom:1px solid var(--line); }
  #resultsDetails { grid-template-columns:minmax(0,1fr); }
  #resultsDetails > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .result-days { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
#resultsDialog .sublbl, #resultsDialog .kg-n, #resultsDialog .result-month,
#resultsDialog .gn em, #resultsDialog .gv small, #resultsDialog .result-progress,
#resultsDialog .m-sub { color:var(--ink); opacity:1; }
#resultsDialog .result-funnel, #resultsDialog .result-days { padding:0; }
#resultsDialog .gl { grid-template-rows:minmax(50px,auto) minmax(42px,auto); }
#resultsDialog #resultsTable th, #resultsDialog .result-definition { color:var(--ink); opacity:1; }
#resultsDialog h2, #resultsMetrics b, #resultsDetails b, #resultsFunnel b { line-height:1.5; }

/* 059: flecha v9, cabecera respirada y pies de acciones con aire (R1/R2/R11/R13). */
.of details summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; }
.of details summary::before { content:""; width:6px; height:6px; flex:0 0 6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .2s; }
.of details[open] summary::before { transform:rotate(45deg); }
.of details summary::-webkit-details-marker { display:none; }
#officeDialog .pd-a { padding-bottom:12px; }
.quality-links { margin-bottom:12px; }
#projectDetail { min-width:0; }
#projectDetail .pj-h { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
#projectDetail .pj-h h2 { overflow-wrap:anywhere; }
#projectDetail .pj-m { margin-left:0; align-items:flex-start; gap:12px; min-width:0; }
#projectDetail .pj-m > span { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#projectDetail .pj-m button { white-space:normal; }

/* R37: texto de las pantallas medidas con la tinta accesible de la paleta existente. */
#s-calidad :is(.seg button:not([aria-pressed=true]),.cp-how,.cl-empty,.qualityBand,.nota.na),
#s-calidad .cal-top :is(b,span), #qualityDialog .al-s,
#projectBody .deps th { color:var(--text); }

#qualityDialog .link { color:var(--plano); }

/* R37: también al pasar el puntero y al envolver la barra a 800/768. */
#s-calidad :is(.caps,.sublbl), #qualityDialog .link:hover { color:var(--plano); }
.of :is(.office-open,.office-lab):hover { color:var(--ink); }
:is(#s-calidad,#qualityDialog,#s-fuentes,#s-instrucciones,#s-probador,#s-configuracion,#resultsDialog,#s-sistema) .btn:not(.pri):hover { color:var(--plano); }
.cfg-nav, #rulesFixed, #projectsList { top:calc(var(--panel-header, 68px) + 24px); }

#s-calidad h1 { color:var(--ink); }

#s-configuracion :is(h1,.sublbl) { color:var(--plano); }

#cfg-quality .btn.danger { color:var(--paper); }

#cfg-quality .btn.danger:hover { color:var(--on-solid); }

#qualityFrequencyState { color:var(--text); }

/* R37: el texto generado y el placeholder también usan tinta accesible. */
#labIn::placeholder { color:var(--text); opacity:1; }
#qualityConfigHistory:empty::before { color:var(--text); }

#calPairs .cp svg{width:28px;height:28px}#calList blockquote,#qualityDetail blockquote,#qualityConversation blockquote{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.quality-summary{margin-bottom:16px}#qualityConversation mark{display:block;background:var(--warn-tint);padding:9px 10px}#qualityCategories label{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line)}#qualityConfig input[type=checkbox],#qualityStopForm input[type=checkbox]{width:auto}#qualityDetail .project-history{display:block}

/* 023: fuentes de pareja sobre las tarjetas y columnas del v9. */
#s-fuentes .shead { flex-wrap:wrap; gap:16px; }
#s-fuentes .shead .act { flex-wrap:wrap; }
#srcMode button { color:var(--ink); }
#srcMode button[aria-pressed="true"] { color:var(--paper); }
#srcPair { margin-top:24px; }
#srcPair .src-note { margin-bottom:24px; }
#srcPair .pc { min-width:0; overflow-wrap:anywhere; }
#srcPair .pc .source-choice { display:flex; justify-content:space-between; align-items:start; gap:12px; }
#srcPair .pc b { padding-right:0; }
#srcPair input[type=checkbox] { width:18px; height:18px; flex:none; accent-color:var(--petroleo); }
#srcPair .pc .source-choice input { margin-top:3px; }
#srcPair .source-stock,#srcPair .source-updated,#srcPair .source-known,#srcPair .source-proposal { font-size:12px; }
#srcPair .pc .m,#srcPair .pairbar button span,#srcPair .dist-h button,#srcPair .pc .apl { color:var(--ink); }
#srcPair .pc input:disabled { opacity:1; }
#srcPair .pc.on { border-color:var(--petroleo); }
#srcPair .source-footer { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
#srcPair .source-footer button { margin-left:auto; }
#srcPair .source-history { margin-top:28px; }
#srcPair h2 { font-size:16px; margin-bottom:14px; }
#sourceHistory p { border-bottom:1px solid var(--line); padding:12px 0; }
#sourceMatrix table { table-layout:fixed; }
#sourceMatrix th,#sourceMatrix td { white-space:normal; overflow-wrap:anywhere; color:var(--ink); vertical-align:top; }
#sourceDialog { width:min(680px,92vw); max-height:90vh; overflow:auto; padding:28px; border:1px solid var(--line); color:var(--ink); background:var(--paper); }
#sourceDialog::backdrop { background:rgb(0 0 0 / 40%); }
#sourceConfirmation { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:16px; }
#srcPair .apbox { min-width:0; }
#srcPair .apbox .hd { flex-wrap:wrap; }
#srcPair .apbox h2 { margin:0; }
#srcPair .apb-f { display:grid; gap:14px; }
#srcPair .source-materials p { padding:12px 16px; border-top:1px solid var(--line); overflow-wrap:anywhere; }
#srcPair .apb-f a,#srcPair .apbox .hd span,#srcPair .apb p,#srcPair .apb-f span { color:var(--ink); }
@media(max-width:1000px) { #srcPair .src-grid { grid-template-columns:minmax(0,1fr); } #srcPair .apbox { position:static; } }

#s-instrucciones { color:var(--ink); }
#s-instrucciones :is(p,small,label,summary,button,input,textarea,pre,a,.caps,.tag) { color:var(--ink); opacity:1; }
#s-instrucciones .btn.pri { color:var(--on-solid); background:var(--marino); }
#s-instrucciones #insProfiles button { background:var(--paper); color:var(--ink); }
#s-instrucciones .btn:disabled { opacity:1; background:var(--paper); color:var(--ink); cursor:not-allowed; border:1px dashed var(--ink); }
.ins-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:24px; margin-top:20px; align-items:start; }
.ins-main,.ins-history { min-width:0; }
.ins-files { display:flex; flex-wrap:wrap; gap:8px; padding:16px; border:1px solid var(--line); background:var(--paper); }
.ins-files button { padding:10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); }
.ins-files button[aria-selected=true],#insProfiles button[aria-pressed=true] { border:2px solid var(--ink); font-weight:600; }
.ins-editor { border:1px solid var(--line); background:var(--paper); }
.ins-line { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); align-items:start; }
.ins-line .ins-number { text-align:right; padding-top:4px; font-family:monospace; }
.ins-line .ins-text,.ins-line pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; min-width:0; width:100%; font:inherit; line-height:1.65; }
.ins-line textarea { resize:vertical; padding:9px; border:1px solid var(--line); background:var(--paper); min-height:86px; }
.ins-line button { margin-top:8px; }
.ins-line.resaltada { outline:2px solid var(--ink); outline-offset:-2px; background:var(--warn-tint); }
.ins-observation { margin:18px 0; padding:18px; border:1px solid var(--ink); background:var(--paper); overflow-wrap:anywhere; }
.ins-footer { padding:18px; display:grid; gap:14px; border:1px solid var(--line); background:var(--paper); }
.ins-footer label,#insReturnForm label { display:grid; gap:6px; }
.ins-footer input,#insReturnForm input { min-width:0; width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:12px; }
.ins-footer .editor-actions { flex-wrap:wrap; }
.ins-battery { margin-top:24px; }
.ins-history { padding:18px; border:1px solid var(--line); background:var(--paper); }
#insResults details,#insHistory details { padding:14px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
#insResults summary,#insHistory summary { cursor:pointer; line-height:1.6; }
#insResults pre,#insHistory pre { font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0; }
#insResults blockquote { margin:12px 0; padding-left:12px; border-left:2px solid var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
#insReturnDialog { width:min(600px,92vw); max-height:90vh; overflow:auto; background:var(--paper); color:var(--ink); padding:24px; border:1px solid var(--line); }
#insReturnDialog::backdrop { background:rgb(0 0 0 / 40%); }
#insConflict { padding:12px; border:1px solid var(--ink); overflow-wrap:anywhere; }
@media(max-width:1050px) { .ins-layout { grid-template-columns:minmax(0,1fr); } .ins-history { margin-top:10px; } }

#s-oficina .office-lab { color:var(--ink); background:var(--paper); opacity:1; margin:10px 0 0 14px; }
#s-probador { color:var(--ink); }
#s-probador :is(p,small,label,summary,button,input,textarea,select,b,span,h1,h2,h3,.caps) { color:var(--ink); opacity:1; }
#s-probador .btn.pri,#s-probador #labSend { background:var(--marino); color:var(--on-solid); }
#s-probador input,#s-probador textarea,#s-probador select { color:var(--ink); background:var(--paper); border:1px solid var(--ink); min-width:0; width:100%; padding:10px; font:inherit; }
#s-probador :disabled { opacity:1; cursor:not-allowed; border:1px dashed var(--ink); }
#s-probador .lab-warning { position:sticky; top:calc(var(--lab-header, 80px) + 8px); z-index:29; padding:16px; border:2px solid var(--ink); background:var(--paper); font-weight:600; margin:16px 0; }
.lab-config { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:20px; border:1px solid var(--line); background:var(--paper); }
.lab-config label,.lab-save label { display:grid; gap:8px; min-width:0; }
#s-probador .lab { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:20px; align-items:start; }
#s-probador .chat,#s-probador .ctl { min-width:0; height:auto; background:var(--paper); }
#s-probador .chat-h,#s-probador .chat-note,#s-probador .ctx { padding:18px; overflow-wrap:anywhere; }
#s-probador .thread,#s-probador .ctl-list { height:auto; max-height:660px; overflow:auto; padding:18px; mask-image:none; -webkit-mask-image:none; flex:none; }
#s-probador .lab-turn { border-bottom:1px solid var(--line); padding:0 0 20px; margin-bottom:20px; }
#s-probador blockquote { margin:10px 0; padding:12px; border-left:2px solid var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
#s-probador .lab-effect { padding:12px; margin:12px 0; border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; }
#s-probador .compose { display:flex; align-items:start; gap:12px; padding:16px; }
#s-probador #labIn { min-height:100px; flex:1; resize:vertical; }
#s-probador #labSend { width:auto; padding:12px; border:1px solid var(--ink); flex:none; }
#s-probador #labSend svg { width:24px; height:24px; }
#s-probador .sugs { display:flex; flex-wrap:wrap; gap:10px; padding:16px; }
#s-probador .sugs button { white-space:normal; height:auto; text-align:left; border:1px solid var(--ink); padding:10px; background:var(--paper); }
#s-probador #ctlList article { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
#s-probador #ctlList p { margin:12px 0; overflow-wrap:anywhere; }
.lab-save { display:grid; gap:14px; margin-top:24px; padding:20px; background:var(--paper); border:1px solid var(--line); }
.lab-history { margin-top:24px; }
#labHistory article { padding:18px 0; border-bottom:1px solid var(--line); }
#labHistory article p { margin:10px 0; overflow-wrap:anywhere; }
#s-probador .editor-actions { gap:14px; flex-wrap:wrap; margin:16px 0; }
#insSavedCases article { border-bottom:1px solid var(--line); padding:16px 0; overflow-wrap:anywhere; }
@media(max-width:1050px) { #s-probador .lab { grid-template-columns:minmax(0,1fr); } }
@media(max-width:650px) { .lab-config { grid-template-columns:minmax(0,1fr); } }

/* 032: filas del v9, con controles apilados desde tableta. */
#cfg-conexiones { color:var(--ink); min-width:0; }
#cfg-conexiones :is(p,small,label,summary,button,input,select,b,span,h2,h3) { color:var(--ink); opacity:1; }
#cfg-conexiones .cfg-h { display:block; margin-bottom:20px; }
#cfg-conexiones .cfg-h p { margin-top:12px; }
#cfg-conexiones .cn-g { margin-bottom:24px; }
#cfg-conexiones .cn-gh { padding:14px 0; font-weight:600; border-bottom:1px solid var(--line); }
#cfg-conexiones .cn { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(150px,1fr) minmax(130px,.7fr); gap:20px; padding:22px 0; align-items:start; min-width:0; }
#cfg-conexiones .cn-t,#cfg-conexiones .cn-st,#cfg-conexiones .cn-a { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
#cfg-conexiones .cn-t b { padding:0; }
#cfg-conexiones .cn-t :is(span,small),#cfg-conexiones .cn-st :is(span,small) { white-space:normal; overflow-wrap:anywhere; }
#cfg-conexiones .cn-st small { font-family:inherit; }
#cfg-conexiones .cn-a { justify-content:flex-start; flex-wrap:wrap; }
#cfg-conexiones .cn-a button { text-align:left; white-space:normal; }
#cfg-conexiones .connection-state { border:1px solid var(--ink); padding:4px 8px; border-radius:4px; font-weight:500; }
#cfg-conexiones .connection-stale { color:#59616d; border-style:dashed; }
html[data-theme=dark] #cfg-conexiones .connection-stale { color:#b9c0ca; }
#cfg-conexiones .connection-focus { outline:2px solid var(--ink); outline-offset:5px; background:var(--warn-tint); scroll-margin:110px; }
#cfg-conexiones .connection-action-note { font-weight:500; }
#cfg-conexiones .connection-history p { padding:14px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
#connectionDialog { width:min(620px,92vw); max-height:90vh; overflow:auto; padding:28px; color:var(--ink); background:var(--paper); border:1px solid var(--ink); }
#connectionDialog::backdrop { background:rgb(0 0 0 / 40%); }
#connectionForm label { display:grid; gap:8px; margin:18px 0; }
#connectionForm input,#connectionForm select { width:100%; min-width:0; padding:12px; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--ink); }
#cfg-conexiones .btn.pri { color:var(--on-solid); background:var(--marino); }
#cfg-conexiones :disabled { opacity:1; cursor:wait; }
#cfgNav button { white-space:normal; }
@media(max-width:1100px) { #cfg-conexiones .cn { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #cfg-conexiones .cn-a { grid-column:1/-1; flex-direction:row; gap:16px; } }
@media(max-width:800px) { #cfg-conexiones .cn { grid-template-columns:minmax(0,1fr); gap:16px; } #cfg-conexiones .cn-a { grid-column:auto; } }

#cfg-versiones { color:var(--ink); min-width:0; }
#cfg-versiones :is(h2,h3,p,li,time,summary) { color:var(--ink); opacity:1; white-space:normal; overflow-wrap:anywhere; }
#cfg-versiones .cfg-h { display:block; margin-bottom:24px; }
#cfg-versiones .cfg-h p { margin-top:12px; }
#cfg-versiones h3 { margin:28px 0 16px; }
#cfg-versiones #versionCurrent { padding:16px; border:1px solid var(--line); font-weight:600; }
#cfg-versiones article { min-width:0; padding:22px 0; border-bottom:1px solid var(--line); }
#cfg-versiones article h3 { margin:0 0 14px; }
#cfg-versiones article p { margin:10px 0; line-height:1.7; }
#cfg-versiones ul { padding-left:24px; margin:14px 0; }
#cfg-versiones li { margin:10px 0; line-height:1.7; }
#cfg-versiones details { margin:16px 0 0; }
#cfg-versiones summary { cursor:pointer; padding:8px 0; }

/* 036: conversación v9 con márgenes y contraste medidos en Chromium. */
#s-sistema { color:var(--ink); min-width:0; }
#s-sistema :is(p,small,label,span,h1,h2,a,textarea,button) { color:var(--ink); opacity:1; }
#s-sistema .shead { flex-wrap:wrap; gap:20px; margin-bottom:24px; }
#s-sistema .only-me { display:flex; gap:8px; align-items:center; white-space:normal; }
#s-sistema .only-me svg { width:20px; height:20px; flex:none; }
#s-sistema .talkw { max-width:900px; margin:0 auto; min-width:0; }
#s-sistema .talkw>p { line-height:1.7; margin-bottom:20px; }
#s-sistema .tthread { max-height:65vh; min-height:160px; overflow:auto; padding:4px; mask-image:none; }
#s-sistema .agent-message { padding:20px; margin:0 0 18px; border:1px solid var(--line); background:var(--paper); }
#s-sistema .agent-message header { display:block; position:static; border:0; background:none; padding:0; height:auto; margin:0 0 12px; box-shadow:none; line-height:1.7; }
#s-sistema .agent-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.75; }
#s-sistema .agent-message a { display:block; margin-top:12px; text-decoration:underline; overflow-wrap:anywhere; }
#s-sistema .askbox { display:flex; gap:16px; align-items:flex-end; padding:20px; margin-top:22px; background:var(--paper); border:1px solid var(--ink); }
#s-sistema #ask { width:100%; min-width:0; min-height:96px; padding:12px; resize:vertical; font:inherit; line-height:1.6; color:var(--ink); background:var(--paper); border:1px solid var(--ink); }
#s-sistema #askSend { width:auto; min-height:44px; height:auto; padding:12px 18px; background:var(--marino); color:var(--on-solid); flex:none; }
#s-sistema :disabled { opacity:1; cursor:wait; }
#s-sistema #ask::placeholder { color:var(--ink); opacity:1; }
#nav [data-go=sistema] { color:var(--ink); }
@media(max-width:1100px) {
  .top-in:has(#nav [data-go=sistema]:not([hidden])) { flex-wrap:wrap; height:auto; padding-top:10px; gap:0 12px; }
  #nav:has([data-go=sistema]:not([hidden])) { order:3; width:100%; height:auto; flex-wrap:wrap; overflow:visible; }
  #nav:has([data-go=sistema]:not([hidden])) button { min-height:44px; white-space:nowrap; }
}
#s-sistema :focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media(max-width:800px) { #s-sistema .askbox { flex-direction:column; align-items:stretch; } #s-sistema .agent-message { padding:16px; } }