/* V29.1A.1 · Cliente 360 y estados operativos derivados */
.client-operational-strip {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin:14px 0 16px;
}
.client-state-item {
    position:relative;
    min-width:0;
    padding:12px 14px 12px 16px;
    border:1px solid var(--ing-border, #E3E6EA);
    border-radius:12px;
    background:var(--ing-surface, #fff);
    box-shadow:0 2px 10px rgba(13,27,42,.035);
    overflow:hidden;
}
.client-state-item::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--ing-azul, #0098DB);
}
.client-state-item > span,
.subscription-state-grid span {
    display:block;
    margin-bottom:3px;
    font-family:"Barlow Semi Condensed","Barlow",sans-serif;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--ing-text-muted, #808285);
}
.client-state-item strong {
    display:block;
    font-size:1rem;
    line-height:1.2;
    font-weight:600;
    color:var(--ing-noche, #0D1B2A);
}
.client-state-item small {
    display:block;
    margin-top:4px;
    color:var(--ing-text-muted, #808285);
    white-space:normal;
}
.client-state-item.state-ok::before { background:var(--ing-ok, #1E9E5A); }
.client-state-item.state-warning::before { background:var(--ing-alerta, #D98E04); }
.client-state-item.state-critical::before { background:var(--ing-critico, #D64545); }
.client-state-item.state-neutral::before { background:var(--ing-gris, #A7A9AC); }

.panel-subtitle {
    margin:2px 0 0;
    color:var(--ing-text-muted, #808285);
    font-size:.88rem;
    font-weight:400;
}

.subscription-card {
    background:var(--ing-surface, #fff);
}
.subscription-state-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
    gap:1px;
    margin:12px 0;
    overflow:hidden;
    border:1px solid var(--ing-border, #E3E6EA);
    border-radius:10px;
    background:var(--ing-border, #E3E6EA);
}
.subscription-state-grid > div {
    min-width:0;
    padding:9px 10px;
    background:var(--ing-surface, #fff);
}
.subscription-state-grid strong {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.9rem;
    font-weight:600;
    color:var(--ing-noche, #0D1B2A);
}
.subscription-state-grid small {
    display:block;
    margin-top:2px;
    color:var(--ing-text-muted, #808285);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.subscription-state-grid strong.state-ok { color:var(--ing-ok, #1E9E5A); }
.subscription-state-grid strong.state-warning { color:var(--ing-alerta, #D98E04); }
.subscription-state-grid strong.state-critical { color:var(--ing-critico, #D64545); }
.subscription-state-grid strong.state-info { color:var(--ing-azul-profundo, #0072A8); }
.subscription-state-grid strong.state-neutral { color:var(--ing-text-muted, #808285); }

.subscription-warning {
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 10px;
    padding:8px 10px;
    border-left:3px solid var(--ing-alerta, #D98E04);
    border-radius:7px;
    background:color-mix(in srgb, var(--ing-alerta, #D98E04) 8%, transparent);
    color:var(--ing-text, #1A1A1A);
    font-size:.88rem;
}

[data-theme="dark"] .client-state-item,
[data-theme="dark"] .subscription-state-grid > div {
    background:var(--ing-surface, #132436);
}
[data-theme="dark"] .client-state-item strong,
[data-theme="dark"] .subscription-state-grid strong {
    color:var(--ing-text, #F2F5F7);
}

@media (max-width:1100px) {
    .client-operational-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .subscription-state-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
    .client-operational-strip { grid-template-columns:1fr; }
    .subscription-state-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.rc-link-button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--ing-azul-profundo, #0072A8);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.rc-link-button:hover { text-decoration: underline; }