/* app.css source lines: 726-760 — area browser.
   ORPHANED EXCEPT .ab-back (app.css:757-759): that rule is LIVE — shared by
   frontend/js/views/ome-detail.js:41, preview.js:56, evaluation.js:195.
   Do NOT delete .ab-back. */
/* ── AREA BROWSER ────────────────────────────────── */
/* Mineral tokens only (plan §4 V5): copper/green tints have no exact-match
   token, so they derive from --copper/--vd via color-mix (zero literals). */
.ab-hero{padding:36px 0 28px;animation:fadeUp .3s var(--ease-out) both}
.ab-company-tag{display:inline-flex;align-items:center;gap:7px;background:var(--copper-dim);border:var(--glass-border);border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-12);font-weight:600;color:var(--link-strong);margin-bottom:12px}
.ab-company-dot{width:6px;height:6px;border-radius:50%;background:var(--vd);flex-shrink:0}
.ab-title{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--tx);margin-bottom:6px} /* refined: 700 / -.03em */
.ab-sub{font-size:13px;color:var(--mt)}
.ab-body{padding-bottom:60px}
.ab-gerencia{margin-bottom:32px;animation:fadeUp .4s var(--ease-out) both} /* #13: ease-out entrance */
.ab-gerencia-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ab-gerencia-bar{width:3px;height:18px;border-radius:2px;background:var(--bord);flex-shrink:0}
.ab-gerencia-name{font-size:var(--fs-12);font-weight:700;color:var(--tx2);letter-spacing:.06em;text-transform:uppercase}
.ab-gerencia-count{font-size:var(--fs-12);color:var(--mt);background:var(--surf-hi);border:1px solid var(--bord2);border-radius:var(--r-pill);padding:2px 8px;font-family:var(--mono)}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
/* Area card */
.ab-card{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:18px 18px 15px;cursor:pointer;transition:all .2s var(--ease-out);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px}
/* State accent: 1px tinted border (the footer badge remains the label) —
   replaces the removed 3px top stripe (side-tab slop). */
.ab-card.active{border-color:var(--bord-bright)}
.ab-card.piloto{border-color:color-mix(in srgb,var(--vd) 30%,transparent)}
.ab-card:hover{transform:translateY(-4px);box-shadow:var(--shl)}
.ab-card.active:hover{border-color:var(--bord-bright);box-shadow:0 12px 32px var(--accent-glow),0 0 0 1px var(--copper-dim)}
.ab-card.piloto:hover{border-color:color-mix(in srgb,var(--vd) 28%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--vd) 10%,transparent),0 0 0 1px color-mix(in srgb,var(--vd) 15%,transparent)}
.ab-card.soon{opacity:.65;cursor:default}
.ab-card.soon:hover{transform:none;box-shadow:none}
.ab-card-num{font-size:var(--fs-12);font-weight:700;font-family:var(--mono);color:var(--mt);letter-spacing:.1em;text-transform:uppercase}
.ab-card-name{font-size:13px;font-weight:700;color:var(--tx);letter-spacing:-.01em;line-height:1.3;flex:1}
.ab-card-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ab-badge{font-size:var(--fs-12);font-weight:700;font-family:var(--mono);padding:3px 9px;border-radius:var(--r-pill);border:1px solid}
.ab-badge.active{background:color-mix(in srgb,var(--copper) 9%,transparent);color:var(--link-strong);border-color:color-mix(in srgb,var(--copper) 20%,transparent)}
.ab-badge.piloto{background:color-mix(in srgb,var(--vd) 9%,transparent);color:var(--ok-strong);border-color:color-mix(in srgb,var(--vd) 20%,transparent)}
.ab-badge.soon{background:var(--surf-hi);color:var(--mt);border-color:var(--bord2)}
/* Breadcrumb back nav */
.ab-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;color:var(--mt);cursor:pointer;padding:6px 0;margin-bottom:16px;transition:color var(--dur-2);user-select:none}
.ab-back:hover{color:var(--link-strong)}
.ab-back svg{width:14px;height:14px;stroke:currentColor;fill:none}