/* SIMs Claro por activar (vista de oficina). Hereda el color del portal que la aloja (3.0 oscuro,
   2.0 claro): solo usa currentColor y mezclas translúcidas, sin variables propias del portal. */
.oc { --oc-line: color-mix(in srgb, currentColor 16%, transparent); --oc-soft: color-mix(in srgb, currentColor 6%, transparent);
  --oc-ok: #2e9e3a; --oc-wait: #d49a1a; --oc-info: #2f7fd6; --oc-done: #1d9a57; }
.oc .oc-intro { padding: 10px 12px; border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-soft); margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.oc .oc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.oc .oc-kpi { border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: transparent; color: inherit; font: inherit; text-align: left; }
.oc .oc-kpi:hover, .oc .oc-kpi.on { border-color: currentColor; }
.oc .oc-kpi .n { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oc .oc-kpi .l { font-size: 12px; opacity: .75; margin-top: 2px; }
.oc .oc-kpi.wait .n { color: var(--oc-wait); } .oc .oc-kpi.ok .n { color: var(--oc-ok); }
.oc .oc-kpi.info .n { color: var(--oc-info); } .oc .oc-kpi.done .n { color: var(--oc-done); }
.oc .oc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.oc .oc-chip { padding: 5px 11px; border: 1px solid var(--oc-line); border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.oc .oc-chip:hover { background: var(--oc-soft); }
.oc .oc-chip.on { border-color: currentColor; background: var(--oc-soft); }
.oc .oc-chip small { opacity: .65; font-family: ui-monospace, Menlo, Consolas, monospace; margin-left: 3px; }
.oc .oc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.oc .oc-bar select, .oc .oc-bar input { font: inherit; color: inherit; background: transparent; border: 1px solid var(--oc-line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.oc .oc-bar option { color: #111; }
.oc .oc-btn { font: inherit; color: inherit; background: transparent; border: 1px solid var(--oc-line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.oc .oc-btn:hover { border-color: currentColor; }
.oc .oc-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-ok); margin-right: 6px; }
.oc .oc-live.stale { background: var(--oc-wait); }
.oc .oc-scroll { overflow-x: auto; }
.oc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc th { text-align: left !important; font-size: 12px; font-weight: 600; opacity: .7; padding: 7px 8px; border-bottom: 1px solid var(--oc-line); white-space: nowrap; }
.oc th[data-sort] { cursor: pointer; user-select: none; }
.oc th.sorted::after { content: " ▾"; } .oc th.sorted.asc::after { content: " ▴"; }
.oc td { text-align: left !important; padding: 7px 8px; border-bottom: 1px solid var(--oc-line); vertical-align: middle; }
.oc .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.oc .iccid { cursor: copy; }
.oc .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.oc .pill.wait { color: var(--oc-wait); } .oc .pill.ok { color: var(--oc-ok); }
.oc .pill.info { color: var(--oc-info); } .oc .pill.done { color: var(--oc-done); }
.oc tr.flash td { animation: ocflash 2.4s ease-out; }
@keyframes ocflash { from { background: color-mix(in srgb, var(--oc-info) 28%, transparent); } to { background: transparent; } }
.oc .oc-pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.oc .muted { opacity: .65; }
@media (prefers-reduced-motion: reduce) { .oc tr.flash td { animation: none; } }