/* ============================================================
   ORBITAL UI — design system (derived from equipos module).
   Componentes genericos: ui-* (y alias eq-* para equipos).
   ============================================================ */

:is(.ui-head, .eq-head) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
:is(.ui-head, .eq-head) :is(.ui-title, .eq-title) {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

:is(.ui-stats, .eq-stats) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
:is(.ui-stat, .eq-stat) {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .6rem;
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #333);
    cursor: pointer;
    text-align: left;
    transition: box-shadow .15s ease, transform .15s ease;
    width: 100%;
}
:is(.ui-stat, .eq-stat):hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}
:is(.ui-stat-active, .eq-stat-active) {
    outline: 2px solid var(--bs-primary, #0275d8);
    outline-offset: 1px;
}
:is(.ui-stat-static, .eq-stat-static) { cursor: default; }
:is(.ui-stat-static, .eq-stat-static):hover { box-shadow: none; transform: none; }
:is(.ui-stat, .eq-stat) :is(.ui-stat-ico, .eq-stat-ico) {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    font-size: 1.05rem;
    color: #fff;
    flex: 0 0 auto;
}
:is(.ui-stat, .eq-stat) :is(.ui-stat-num, .eq-stat-num) { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
:is(.ui-stat, .eq-stat) :is(.ui-stat-txt, .eq-stat-txt) {
    font-size: .7rem;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .03em;
}

:is(.ui-toolbar, .eq-toolbar) {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}
:is(.ui-toolbar, .eq-toolbar) :is(.ui-search, .eq-search) {
    flex: 1 1 220px;
    min-width: 160px;
}
:is(.ui-view-switch, .eq-view-switch) {
    display: inline-flex;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    overflow: hidden;
}
:is(.ui-view-switch, .eq-view-switch) button {
    border: 0;
    background: transparent;
    padding: .35rem .75rem;
    color: var(--bs-body-color, #333);
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
:is(.ui-view-switch, .eq-view-switch) button.active {
    background: var(--bs-primary, #0275d8);
    color: #fff;
}

:is(.ui-pills, .eq-pills) {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}
:is(.ui-pills, .eq-pills) button {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 999px;
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #333);
    padding: .3rem .75rem;
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: all .15s ease;
}
:is(.ui-pills, .eq-pills) button:hover {
    border-color: var(--bs-primary, #0275d8);
    color: var(--bs-primary, #0275d8);
}
:is(.ui-pills, .eq-pills) button.active {
    background: var(--bs-primary, #0275d8);
    border-color: var(--bs-primary, #0275d8);
    color: #fff;
    font-weight: 600;
}
:is(.ui-pills, .eq-pills) .pill-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    display: inline-block;
}

:is(.ui-cards, .eq-cards) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .75rem;
}
:is(.ui-card, .eq-card) {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .7rem;
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #333);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
:is(.ui-card, .eq-card):hover {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .14);
    transform: translateY(-2px);
}
:is(.ui-card, .eq-card) :is(.ui-card-top, .eq-card-top) {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .8rem .4rem;
}
:is(.ui-card, .eq-card) :is(.ui-card-ico, .eq-card-ico) {
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    font-size: 1.1rem;
    color: #fff;
    flex: 0 0 auto;
}
:is(.ui-card, .eq-card) :is(.ui-card-id, .eq-card-id) {
    font-size: .72rem;
    font-weight: 700;
    color: var(--bs-secondary-color, #6c757d);
}
:is(.ui-card, .eq-card) :is(.ui-card-title, .eq-card-title) { font-size: .92rem; font-weight: 700; line-height: 1.25; }
:is(.ui-card, .eq-card) :is(.ui-card-body, .eq-card-body) { padding: .3rem .8rem .6rem; font-size: .8rem; }
:is(.ui-card, .eq-card) :is(.ui-row, .eq-row) {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .18rem 0;
}
:is(.ui-card, .eq-card) :is(.ui-row, .eq-row) > :is(.fa, .bi, i) {
    width: 1rem;
    text-align: center;
    margin-top: .15rem;
    color: var(--bs-secondary-color, #6c757d);
    flex: 0 0 auto;
}
:is(.ui-card, .eq-card) :is(.ui-card-foot, .eq-card-foot) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .5rem .8rem;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .02);
}
:is(.ui-card, .eq-card) :is(.ui-foot-badges, .eq-foot-badges) { display: flex; flex-wrap: wrap; gap: .25rem; }
:is(.ui-card, .eq-card) :is(.ui-card-actions, .eq-card-actions) { display: flex; gap: .25rem; }
:is(.ui-card, .eq-card) :is(.btn-action, .eq-btn-action) {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    border: 1px solid rgba(0, 0, 0, .15);
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #333);
    font-size: .8rem;
    padding: 0;
}
:is(.ui-card, .eq-card) :is(.btn-action, .eq-btn-action):hover {
    color: #fff;
    border-color: transparent;
}
.btn-action-primary:hover,
.eq-btn-action-primary:hover { background: var(--bs-primary, #0275d8); }
.btn-action-danger:hover,
.eq-btn-action-danger:hover { background: var(--bs-danger, #dc3545); }
.btn-action-success:hover,
.eq-btn-action-success:hover { background: var(--bs-success, #28a745); }

:is(.ui-badge, .eq-badge) { font-weight: 600; white-space: nowrap; }
:is(.ui-client, .eq-client) { font-weight: 700; }
:is(.ui-client-pub, .eq-client-pub) { color: var(--bs-secondary-color, #6c757d); }
:is(.ui-link, .eq-link) {
    color: var(--bs-body-color, #333);
    text-decoration: none;
    font-weight: 600;
}
:is(.ui-link, .eq-link):hover {
    color: var(--bs-primary, #0275d8);
    text-decoration: underline;
}
:is(.ui-problema, .eq-problema) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    opacity: .85;
}
:is(.ui-empty, .eq-empty) {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--bs-secondary-color, #6c757d);
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: .7rem;
}
:is(.ui-empty, .eq-empty) .fa {
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
}

:is(.ui-board, .eq-board) {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: .75rem;
    min-height: 18rem;
}
:is(.ui-col, .eq-col) {
    flex: 1 0 260px;
    max-width: 320px;
    background: rgba(0, 0, 0, .035);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .7rem;
    display: flex;
    flex-direction: column;
}
:is(.ui-col, .eq-col) :is(.ui-col-head, .eq-col-head) {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .85rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    background: inherit;
}
:is(.ui-col-dot, .eq-col-dot) { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
:is(.ui-col-count, .eq-col-count) {
    margin-left: auto;
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .72rem;
}
:is(.ui-col, .eq-col) :is(.ui-col-body, .eq-col-body) {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 4rem;
    flex: 1;
}
:is(.ui-card-placeholder, .eq-card-placeholder) {
    border: 2px dashed rgba(0, 0, 0, .25);
    border-radius: .7rem;
    min-height: 6rem;
    background: rgba(0, 0, 0, .04);
}
:is(.ui-col, .eq-col) :is(.ui-col-body, .eq-col-body) :is(.ui-card, .eq-card) { cursor: grab; }
:is(.ui-col, .eq-col) :is(.ui-col-body, .eq-col-body) :is(.ui-card, .eq-card):active { cursor: grabbing; }

:is(.ui-card-mini, .eq-card-mini) :is(.ui-card-top, .eq-card-top) { padding: .55rem .6rem .3rem; gap: .5rem; }
:is(.ui-card-mini, .eq-card-mini) :is(.ui-card-ico, .eq-card-ico) { width: 2rem; height: 2rem; font-size: .85rem; border-radius: .45rem; }
:is(.ui-card-mini, .eq-card-mini) :is(.ui-card-body, .eq-card-body) { padding: .2rem .6rem .45rem; font-size: .74rem; }
:is(.ui-card-mini, .eq-card-mini) :is(.ui-card-foot, .eq-card-foot) { padding: .35rem .6rem; }
:is(.ui-card-mini, .eq-card-mini) :is(.ui-card-actions, .eq-card-actions) :is(.btn-action, .eq-btn-action) { width: 1.7rem; height: 1.7rem; font-size: .72rem; }
:is(.ui-card-mini, .eq-card-mini) :is(.ui-client, .eq-client) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14ch;
}

:is(.ui-next, .eq-next) {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    background: var(--bs-card-bg, #fff);
    color: var(--bs-success, #28a745);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .1);
}
:is(.ui-next, .eq-next):hover { background: var(--bs-success, #28a745); color: #fff; border-color: transparent; }

:is(.ui-table-wrap, .eq-table-wrap) { overflow-x: auto; }
:is(.ui-table-wrap, .eq-table-wrap) .table { font-size: .82rem; margin-bottom: 0; }
:is(.ui-table-wrap, .eq-table-wrap) th { white-space: nowrap; }

@media (max-width: 768px) {
    :is(.ui-cards, .eq-cards) { grid-template-columns: 1fr; }
    :is(.ui-head, .eq-head) { align-items: stretch; }
    :is(.ui-head, .eq-head) .btn { width: 100%; }
    :is(.ui-toolbar, .eq-toolbar) :is(.ui-view-switch, .eq-view-switch) { order: -1; width: 100%; }
    :is(.ui-view-switch, .eq-view-switch) { display: flex; }
    :is(.ui-view-switch, .eq-view-switch) button { flex: 1; justify-content: center; }
    :is(.ui-col, .eq-col) { flex: 1 0 82vw; }
}