/**
 * Windows Vista Theme — Standalone CSS
 *
 * Tema inspirado en la estética de Windows Vista/7.
 * Scoped a .layout-ciberservice en #app-service-container.
 * NO afecta otros temas.
 */

/* ─── CSS Variables (scoped) ─── */

/* Variables mapped to the active theme preset (customize.js) — no hardcoded colors */
.layout-ciberservice {
    --ciber-bg: var(--color-bg-surface, #d4d7dc);
    --ciber-bg-light: var(--color-bg-elevated, #eef0f3);
    --ciber-bg-dark: var(--color-border, #8e939b);
    --ciber-border-light: var(--color-bg-elevated, #ffffff);
    --ciber-border-dark: var(--color-border, #6b7280);
    --ciber-border-mid: var(--color-border-light, #b0b5be);
    --ciber-text: var(--color-text, #1e2328);
    --ciber-highlight: var(--color-primary, #2856a3);
    --ciber-highlight-text: #ffffff;
    --ciber-input-bg: var(--color-bg-elevated, #ffffff);
    --ciber-field-bg: var(--color-bg-surface, #e4e6ea);
    --ciber-yellow: #fef9e7;
    --ciber-yellow-border: #c9a227;
    --ciber-btn-gradient-top: var(--color-bg-elevated, #f7f8fa);
    --ciber-btn-gradient-bot: var(--color-bg-surface, #dcdfe4);
    --ciber-header-gradient-top: var(--color-bg-elevated, #eaecf0);
    --ciber-header-gradient-bot: var(--color-bg-surface, #cdd1d8);
    --ciber-radius: var(--radius-cards, 5px);
}

/* ─── Container override (use ID for max specificity) ─── */

#app-service-container.layout-ciberservice,
.layout-ciberservice {
    background: var(--ciber-bg) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-size: calc(0.8125rem * var(--app-text-scale, 1)) !important;
    border-radius: var(--ciber-radius) !important;
    color: var(--ciber-text) !important;
}

/* ─── CiberService Header (3D raised, compact form) ─── */

.layout-ciberservice .ciber-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 6px;
    border: 1px solid var(--ciber-border-mid);
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ciber-header-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ciber-header-mid {
    border-top: 1px solid var(--ciber-border-mid);
    padding-top: 4px;
    margin-top: 2px;
}

.ciber-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ciber-field > label {
    font-weight: 600;
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    color: var(--ciber-text);
    margin: 0;
}

.ciber-value {
    font-size: calc(0.8rem * var(--app-text-scale, 1));
    padding: 0.15em 0.5em;
    background: var(--ciber-input-bg);
    border: 1px solid var(--ciber-border-mid);
    border-radius: 4px;
    line-height: 1.5;
    height: calc(1.8em);
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.ciber-value.ciber-nro {
    font-weight: 700;
    color: var(--ciber-highlight);
    background: var(--ciber-yellow);
    border-color: var(--ciber-yellow-border);
    padding: 0.15em 0.7em;
}

/* Nro. Trabajo input — overrides moved after general input rules */

.ciber-select {
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
    height: calc(1.8em) !important;
    min-width: 130px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

.ciber-actions-field {
    margin-left: auto;
    gap: 4px !important;
}

/* Print/PDF dropdowns inside header */
.layout-ciberservice .ciber-header .print-dropdown,
.layout-ciberservice .ciber-header .pdf-dropdown {
    position: relative;
    display: inline-flex;
    gap: 0;
}

.layout-ciberservice .ciber-header .print-dropdown .btn,
.layout-ciberservice .ciber-header .pdf-dropdown .btn {
    height: 22px !important;
    padding: 2px 6px !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    border-width: 2px !important;
}

.layout-ciberservice .ciber-header .print-menu,
.layout-ciberservice .ciber-header .pdf-menu {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.layout-ciberservice .ciber-header .print-menu button,
.layout-ciberservice .ciber-header .pdf-menu button {
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    padding: 4px 10px !important;
}

.layout-ciberservice .ciber-header .print-menu button:hover,
.layout-ciberservice .ciber-header .pdf-menu button:hover {
    background: var(--ciber-highlight) !important;
    color: var(--ciber-highlight-text) !important;
}

/* ─── Estado badge in header ─── */

/* Badge oculto en ciber-header (el select lo reemplaza, pero tabs.js lo actualiza internamente) */
.layout-ciberservice .ciber-header .order-status {
    display: none !important;
}

.layout-ciberservice .ciber-header .state-controls {
    display: none;
}

/* ─── Estado field: select + arrows ─── */

.layout-ciberservice .ciber-estado-field {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
}

.layout-ciberservice .ciber-estado-select {
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    font-weight: 700;
    height: calc(1.8em) !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
    border: 1px solid var(--ciber-yellow-border) !important;
    background: var(--ciber-yellow) !important;
    color: var(--ciber-text) !important;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

.layout-ciberservice .ciber-state-arrow {
    width: 1.8em !important;
    height: 1.8em !important;
    min-width: 1.8em !important;
    padding: 0 !important;
    font-size: calc(0.7rem * var(--app-text-scale, 1)) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ciber-border-mid) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%) !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.layout-ciberservice .ciber-state-arrow:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-header-gradient-top) 100%) !important;
    border-color: var(--ciber-border-dark) !important;
}

/* ─── Sub-tabs: Vista tab control ─── */

.layout-ciberservice .ciber-layout .order-sub-tabs-container {
    border: none;
    border-radius: 0;
    background: transparent;
}

.layout-ciberservice .ciber-layout .order-sub-tabs {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 -1px 0 !important;
    position: relative;
    z-index: 1;
}

.layout-ciberservice .ciber-layout .sub-tabs-list {
    gap: 2px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    border: none !important;
    display: flex !important;
    background: transparent !important;
}

.layout-ciberservice .ciber-layout .sub-tab-item {
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%);
    border: 1px solid var(--ciber-border-mid);
    border-bottom: none;
    padding: 5px 14px !important;
    margin-bottom: -1px;
    font-size: calc(0.72rem * var(--app-text-scale, 1));
    font-weight: 500;
    color: var(--ciber-text);
    border-radius: 6px 6px 0 0 !important;
    cursor: pointer;
    position: relative;
    z-index: 0;
    line-height: 1.3;
    transition: background 0.15s ease;
}

.layout-ciberservice .ciber-layout .sub-tab-item:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-bg-light) 100%);
}

.layout-ciberservice .ciber-layout .sub-tab-item.active {
    background: var(--ciber-bg-light) !important;
    border-bottom: 1px solid var(--ciber-bg-light) !important;
    font-weight: 600;
    z-index: 1;
    color: var(--ciber-highlight);
}

/* Hide icons in CiberService sub-tabs */
.layout-ciberservice .ciber-layout .sub-tab-item i {
    display: none;
}

/* ─── Sub-tab content area: Vista panel ─── */

.layout-ciberservice .ciber-layout .order-sub-tabs-content {
    background: var(--ciber-bg-light);
    border: 1px solid var(--ciber-border-mid);
    padding: 0;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

.layout-ciberservice .ciber-layout .sub-tab-content {
    padding: 8px;
}

/* ─── Split panels (Datos del Cliente, Otros Datos) ─── */

.ciber-split-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ciber-split-panel {
        grid-template-columns: 1fr;
    }
}

.ciber-panel-left,
.ciber-panel-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Last element in each panel stretches to fill remaining space */
.layout-ciberservice .ciber-layout .ciber-panel-left > :last-child,
.layout-ciberservice .ciber-layout .ciber-panel-right > :last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

/* Stretch card body and textarea inside last element */
.layout-ciberservice .ciber-layout .ciber-panel-left > :last-child .info-card-body,
.layout-ciberservice .ciber-layout .ciber-panel-right > :last-child .info-card-body,
.layout-ciberservice .ciber-layout .ciber-panel-left > :last-child .accesorios-content,
.layout-ciberservice .ciber-layout .ciber-panel-right > :last-child .accesorios-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.layout-ciberservice .ciber-layout .ciber-panel-left > :last-child textarea,
.layout-ciberservice .ciber-layout .ciber-panel-right > :last-child textarea {
    flex: 1;
    height: auto !important;
    max-height: none !important;
    min-height: 80px !important;
}

/* Info cards inside panels should also flex */
.ciber-panel-left > .info-card,
.ciber-panel-right > .info-card {
    display: flex;
    flex-direction: column;
}

/* ─── Info cards → Windows groupbox style ─── */

.layout-ciberservice .ciber-layout .info-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.layout-ciberservice .ciber-layout .info-card-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 6px;
    align-items: center;
}

.layout-ciberservice .ciber-layout .info-card-header h4 {
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    font-weight: 600;
    color: var(--ciber-text);
    margin: 0 !important;
}

.layout-ciberservice .ciber-layout .info-card-header i {
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    color: var(--ciber-highlight);
    opacity: 0.7;
}

.layout-ciberservice .ciber-layout .info-card-body {
    padding: 8px 10px 10px !important;
}

/* ─── Info fields: form-style inline (label left, input right) ─── */

.layout-ciberservice .ciber-layout .info-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 3px !important;
    min-height: 24px;
}

.layout-ciberservice .ciber-layout .field-label {
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    font-weight: 600;
    min-width: 85px;
    max-width: 85px;
    text-align: right;
    flex-shrink: 0;
    color: var(--ciber-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-ciberservice .ciber-layout .field-input,
.layout-ciberservice .ciber-layout textarea,
.layout-ciberservice .ciber-layout input[type="text"],
.layout-ciberservice .ciber-layout input[type="number"],
.layout-ciberservice .ciber-layout input[type="date"],
.layout-ciberservice .ciber-layout select {
    border-radius: 4px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    padding: 0.2em 0.5em !important;
    height: auto !important;
    line-height: 1.5 !important;
    flex: 1;
    min-width: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.layout-ciberservice .ciber-layout .field-input:focus,
.layout-ciberservice .ciber-layout input[type="text"]:focus,
.layout-ciberservice .ciber-layout input[type="number"]:focus,
.layout-ciberservice .ciber-layout textarea:focus,
.layout-ciberservice .ciber-layout select:focus {
    border-color: var(--ciber-highlight) !important;
    box-shadow: 0 0 0 2px rgba(40,86,163,0.12), inset 0 1px 2px rgba(0,0,0,0.04) !important;
    outline: none;
}

.layout-ciberservice .ciber-layout textarea {
    height: 4em !important;
    line-height: 1.3 !important;
    resize: vertical;
}

/* Editable Nro. Trabajo input — MUST come after general input rules to win specificity */
.layout-ciberservice .ciber-layout input.ciber-nro-input {
    font-weight: 700 !important;
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-highlight) !important;
    background: var(--ciber-yellow) !important;
    border: 1px solid var(--ciber-yellow-border) !important;
    border-radius: 3px !important;
    padding: 0.15em 0.7em !important;
    height: calc(1.8em) !important;
    min-width: 70px !important;
    max-width: 100px !important;
    width: auto !important;
    text-align: center;
    flex: 0 0 auto !important;
    line-height: 1.5 !important;
}

.layout-ciberservice .ciber-layout input.ciber-nro-input:focus {
    border-color: var(--ciber-highlight) !important;
    box-shadow: 0 0 3px rgba(0,0,128,0.3) !important;
    outline: none;
}

.layout-ciberservice .ciber-layout .field-input:disabled,
.layout-ciberservice .ciber-layout textarea:disabled,
.layout-ciberservice .ciber-layout input:disabled,
.layout-ciberservice .ciber-layout select:disabled {
    background: var(--ciber-field-bg) !important;
    color: var(--ciber-text) !important;
}

.layout-ciberservice .ciber-layout .field-value {
    font-size: calc(0.8rem * var(--app-text-scale, 1));
    padding: 0.1em 0.2em;
    flex: 1;
    min-width: 0;
}

/* ─── Cliente/Producto grids: single column, compact ─── */

.layout-ciberservice .ciber-layout .cliente-info-grid,
.layout-ciberservice .ciber-layout .producto-info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* ─── Historial card compact ─── */

.layout-ciberservice .ciber-layout .cliente-historial-card .info-field {
    min-height: 18px;
}

.layout-ciberservice .ciber-layout .cliente-historial-list {
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    max-height: 80px;
    overflow-y: auto;
}

/* ─── Garantía fields compact ─── */

.layout-ciberservice .ciber-layout .garantia-fields {
    border: 1px solid var(--ciber-border-mid);
    border-radius: 5px;
    padding: 8px 10px;
    margin-top: 4px !important;
    background: var(--ciber-bg);
}

.layout-ciberservice .ciber-layout .garantia-fields .info-field {
    margin-bottom: 1px !important;
}

/* ─── Textarea areas (falla, accesorios, notas) ─── */

.layout-ciberservice .ciber-layout .accesorios-content {
    padding: 0 !important;
}

.layout-ciberservice .ciber-layout .accesorios-content textarea,
.layout-ciberservice .ciber-layout .falla-descripcion-textarea,
.layout-ciberservice .ciber-layout .accesorios-textarea,
.layout-ciberservice .ciber-layout .otras-notas-textarea {
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    max-height: none !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    padding: 2px 4px !important;
}

/* Placeholder text visibility */
.layout-ciberservice .ciber-layout textarea::placeholder,
.ciber-falla-panel textarea::placeholder {
    color: var(--color-text-secondary, #666666) !important;
    opacity: 1 !important;
}

/* ─── Falla / Accesorios tabbed panel (like original CiberService) ─── */

.ciber-falla-tabs-container {
    border: 1px solid var(--ciber-border-mid, #b0b5be);
    background: var(--ciber-bg-light);
    border-radius: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.ciber-falla-tabs {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    border-bottom: 1px solid var(--ciber-border-mid, #b0b0b0);
}

.ciber-falla-tab {
    padding: 5px 14px;
    font-size: calc(0.72rem * var(--app-text-scale, 1));
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--ciber-border-mid, #b0b5be);
    border-bottom: none;
    margin-bottom: -1px;
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top, #f7f8fa) 0%, var(--ciber-btn-gradient-bot, #dcdfe4) 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: 0;
    color: var(--ciber-text, #1e2328);
    transition: background 0.15s ease;
}

.ciber-falla-tab:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-bg-light) 100%);
}

.ciber-falla-tab.active {
    background: var(--ciber-bg-light);
    border-bottom: 1px solid var(--ciber-bg-light);
    font-weight: 600;
    z-index: 1;
    color: var(--ciber-highlight, #2856a3);
}

.ciber-falla-panel {
    display: none;
    padding: 6px 8px;
    flex: 1;
    min-height: 0;
}

.ciber-falla-panel.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ciber-falla-panel .accesorios-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ciber-falla-panel textarea {
    flex: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    border: 1px solid var(--ciber-border-mid, #b0b5be) !important;
    background: var(--ciber-input-bg, #fff) !important;
    resize: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* ─── Buttons: Vista style ─── */

.layout-ciberservice .ciber-layout .btn {
    border-radius: 5px !important;
    border: 1px solid var(--ciber-border-mid);
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%) !important;
    color: var(--ciber-text) !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    padding: 4px 12px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
    gap: 5px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.15s ease;
}

.layout-ciberservice .ciber-layout .btn:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-header-gradient-top) 100%) !important;
    border-color: var(--ciber-border-dark);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 5px rgba(0,0,0,0.1);
}

.layout-ciberservice .ciber-layout .btn:active {
    background: linear-gradient(180deg, var(--ciber-btn-gradient-bot) 0%, var(--ciber-btn-gradient-top) 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset;
}

.layout-ciberservice .ciber-layout .btn.btn-icon {
    padding: 3px 6px;
    min-width: 28px;
    height: 28px;
}

/* ─── Estado badge ─── */

.layout-ciberservice .ciber-layout .order-status {
    font-weight: 700;
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    padding: 0 8px;
    text-transform: uppercase;
    background: var(--ciber-yellow);
    border: 1px solid var(--ciber-yellow-border);
    border-radius: 3px !important;
    height: 22px;
    display: inline-flex;
    align-items: center;
}

/* ─── Presupuesto (Costos y Presupuesto) ─── */

.layout-ciberservice .ciber-layout .presupuesto-content {
    padding: 0 !important;
}

.layout-ciberservice .ciber-layout .presupuesto-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.layout-ciberservice .ciber-layout .presupuesto-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

.layout-ciberservice .ciber-layout .presupuesto-card-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--ciber-border-mid);
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .presupuesto-card-header h4 {
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    font-weight: 600;
    margin: 0;
}

.layout-ciberservice .ciber-layout .presupuesto-card-body {
    padding: 4px 6px !important;
}

.layout-ciberservice .ciber-layout .costo-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    font-size: calc(0.75rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .costo-label {
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    font-weight: 600;
    min-width: 140px;
    text-align: right;
}

.layout-ciberservice .ciber-layout .costo-input {
    flex: 1;
    height: 22px !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
}

.layout-ciberservice .ciber-layout .costo-total {
    font-weight: 700;
    font-size: calc(0.8125rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .costo-item.total {
    border-top: 1px solid var(--ciber-border-dark);
    padding-top: 3px;
    margin-top: 3px;
}

.layout-ciberservice .ciber-layout .divider {
    border-top: 1px solid var(--ciber-border-mid);
    margin: 3px 0;
}

.layout-ciberservice .ciber-layout .pagos-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .pago-row {
    font-size: calc(0.75rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .pago-recibido-input {
    height: 20px !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
}

.layout-ciberservice .ciber-layout .btn-add-pago,
.layout-ciberservice .ciber-layout .btn-remove-pago {
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    padding: 0 4px !important;
    height: 18px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

/* Estado de pago button */
.layout-ciberservice .ciber-layout .btn-estado-presupuesto {
    font-size: calc(0.625rem * var(--app-text-scale, 1)) !important;
    padding: 1px 6px !important;
    border-radius: 0 !important;
    height: 20px !important;
}

/* ─── Estado cards ─── */

.layout-ciberservice .ciber-layout .estado-content {
    padding: 0 !important;
}

.layout-ciberservice .ciber-layout .estado-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.layout-ciberservice .ciber-layout .estado-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

.layout-ciberservice .ciber-layout .estado-card.span-2 {
    grid-column: span 1 !important;
}

.layout-ciberservice .ciber-layout .estado-card-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid var(--ciber-border-mid);
    padding: 6px 10px !important;
}

.layout-ciberservice .ciber-layout .estado-card-header h4 {
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    font-weight: 600;
    margin: 0;
}

.layout-ciberservice .ciber-layout .estado-card-body {
    padding: 4px 6px !important;
}

.layout-ciberservice .ciber-layout .estado-nombre {
    font-size: calc(0.8125rem * var(--app-text-scale, 1));
    font-weight: 700;
}

.layout-ciberservice .ciber-layout .estado-descripcion,
.layout-ciberservice .ciber-layout .estado-fecha,
.layout-ciberservice .ciber-layout .estado-tecnico {
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    margin-top: 2px;
}

.layout-ciberservice .ciber-layout .estado-opciones {
    display: flex;
    gap: 8px;
}

.layout-ciberservice .ciber-layout .estado-col {
    flex: 1;
}

.layout-ciberservice .ciber-layout .estado-col-title {
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    font-weight: 600;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ciber-border-mid);
}

.layout-ciberservice .ciber-layout .btn-estado {
    border-radius: 5px !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    padding: 4px 8px !important;
    margin-bottom: 3px;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
}

.layout-ciberservice .ciber-layout .estado-proceso {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.layout-ciberservice .ciber-layout .proceso-step {
    text-align: center;
    font-size: calc(0.625rem * var(--app-text-scale, 1));
}

.layout-ciberservice .ciber-layout .proceso-step .step-icon {
    width: 26px;
    height: 26px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid var(--ciber-border-mid);
    font-size: calc(0.6875rem * var(--app-text-scale, 1));
    background: var(--ciber-bg-light);
    transition: all 0.15s ease;
}

.layout-ciberservice .ciber-layout .proceso-step .step-label {
    font-size: calc(0.5625rem * var(--app-text-scale, 1));
    margin-top: 1px;
}

.layout-ciberservice .ciber-layout .proceso-line {
    flex: 0 0 12px;
    height: 1px;
    background: var(--ciber-border-mid);
    margin-top: -10px;
}

.layout-ciberservice .ciber-layout .anulado-banner {
    background: #fef0f0;
    border: 1px solid #e8a0a0;
    padding: 6px 10px;
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    margin-bottom: 6px;
    border-radius: 6px;
    color: #b91c1c;
}

/* ─── Productos y Servicios tab ─── */

.layout-ciberservice .ciber-layout .productos-servicios-content {
    padding: 0 !important;
}

.layout-ciberservice .ciber-layout .comprobante-trabajo-field textarea {
    height: 50px !important;
}

/* ─── Sucesos ─── */

.layout-ciberservice .ciber-layout .suceso-item {
    padding: 5px 8px !important;
    border-radius: 4px !important;
    border-bottom: 1px solid rgba(176,181,190,0.4);
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    margin-bottom: 2px;
}

.layout-ciberservice .ciber-layout .suceso-fecha {
    font-size: calc(0.625rem * var(--app-text-scale, 1));
}

/* ─── Importe Total footer bar ─── */

.ciber-importe-total-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 14px;
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%);
    border: 1px solid var(--ciber-border-mid);
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    font-weight: 600;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
}

.ciber-importe-total-bar .ciber-importe-label {
    color: var(--ciber-text);
}

.ciber-importe-total-bar .ciber-importe-value {
    background: var(--ciber-yellow);
    border: 1px solid var(--ciber-yellow-border);
    border-radius: 3px;
    padding: 2px 12px;
    font-size: calc(0.875rem * var(--app-text-scale, 1));
    font-weight: 700;
    color: #cc0000;
    min-width: 100px;
    text-align: right;
}

/* ─── Global tabs (square) ─── */

/* ─── Dynamic tabs bar sizing ─── */

.layout-ciberservice .dynamic-tabs-bar .dynamic-tab {
    font-size: calc(0.75rem * var(--app-text-scale, 1));
    padding: 0 !important;
}

/* ─── Sub-tab actions (moved to header, hide here) ─── */

.layout-ciberservice .ciber-layout .order-sub-tabs-actions {
    display: none !important;
}

/* ─── Header action buttons: Vista toolbar style ─── */

.layout-ciberservice .ciber-header .ciber-actions-field .btn {
    height: 30px !important;
    min-width: 30px !important;
    padding: 4px 10px !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%) !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(0,0,0,0.08) !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-header-gradient-top) 100%) !important;
    border-color: var(--ciber-highlight) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px rgba(40,86,163,0.2) !important;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn:active {
    background: linear-gradient(180deg, var(--ciber-btn-gradient-bot) 0%, var(--ciber-btn-gradient-top) 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset !important;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn i {
    font-size: calc(0.8125rem * var(--app-text-scale, 1)) !important;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn.btn-danger {
    color: #cc0000 !important;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn.btn-danger:hover {
    border-color: #cc0000 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 3px rgba(204,0,0,0.3) !important;
}

.layout-ciberservice .ciber-header .ciber-actions-field .btn.btn-danger i {
    color: #cc0000 !important;
}

/* ─── Scrollbar: Windows classic ─── */

.layout-ciberservice ::-webkit-scrollbar {
    width: 10px;
}

.layout-ciberservice ::-webkit-scrollbar-track {
    background: var(--ciber-bg);
    border-radius: 5px;
}

.layout-ciberservice ::-webkit-scrollbar-thumb {
    background: var(--ciber-border-mid);
    border-radius: 5px;
    border: 2px solid var(--ciber-bg);
}

.layout-ciberservice ::-webkit-scrollbar-thumb:hover {
    background: var(--ciber-bg-dark);
}

/* ─── CiberService preset button styling ─── */

#btn-ciberservice-theme {
    color: var(--color-text-secondary, #666) !important;
}

#btn-ciberservice-theme.is-active {
    border-color: var(--color-primary, #1e40af) !important;
    background: var(--color-primary, #1e40af) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* ─── Order tab container in ciber mode: remove gaps ─── */

/* Hide order until CiberService transform is done */
.layout-ciberservice .order-tab-container:not(.ciber-layout) {
    display: none !important;
}

.layout-ciberservice .order-tab-container.ciber-layout {
    padding: 0 !important;
    background: var(--ciber-bg) !important;
    background-color: var(--ciber-bg) !important;
    animation: ciber-fadein 0.2s ease-out;
}

@keyframes ciber-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading spinner while transforming */
.ciber-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    background: var(--ciber-bg-light, #ebebeb);
    border: 1px solid var(--ciber-border-mid, #b0b0b0);
    border-radius: var(--ciber-radius, 4px);
}

.ciber-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--ciber-border-mid, #b0b5be);
    border-top-color: var(--ciber-highlight, #2856a3);
    border-radius: 50%;
    animation: ciber-spin 0.6s linear infinite;
}

@keyframes ciber-spin {
    to { transform: rotate(360deg); }
}

.layout-ciberservice .ciber-layout .order-sub-tabs {
    margin-top: 0 !important;
}

/* ─── Checkbox styling ─── */

.layout-ciberservice .ciber-layout input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--ciber-border-mid);
}

/* ─── Make full-width info-fields stretch ─── */

.layout-ciberservice .ciber-layout .info-field.full-width {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.layout-ciberservice .ciber-layout .info-field.full-width .field-value {
    width: 100%;
}

/* ─── Order age indicator compact ─── */

.layout-ciberservice .ciber-layout .order-age {
    font-size: calc(0.625rem * var(--app-text-scale, 1));
    padding: 0 4px;
}

/* ─── Pending indicator ─── */

.layout-ciberservice .ciber-layout .tab-pending-indicator {
    font-size: calc(0.625rem * var(--app-text-scale, 1));
}

/* ─── Hide card decorations that look too modern ─── */

.layout-ciberservice .ciber-layout .info-card-header i.fas {
    font-size: calc(0.625rem * var(--app-text-scale, 1));
}

/* ═══════════════════════════════════════════════════════════════════
   APP HEADER — Windows classic menu bar style
   ═══════════════════════════════════════════════════════════════════ */

#app-service-container.layout-ciberservice .app-service-header,
.layout-ciberservice .app-service-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
    padding: 2px 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.layout-ciberservice .header-content {
    padding: 0 8px !important;
}

.layout-ciberservice .logo-section {
    gap: 6px !important;
}

.layout-ciberservice .logo-section i {
    font-size: calc(1rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-highlight) !important;
    background: var(--ciber-bg-light) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--ciber-radius) !important;
    border: 1px solid var(--ciber-border-mid);
}

.layout-ciberservice .logo-section h1 {
    font-size: calc(0.875rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-highlight) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

.layout-ciberservice .subtitle {
    font-size: calc(0.625rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-text) !important;
}

/* ─── Global tabs: Windows menu style ─── */

#app-service-container.layout-ciberservice .app-service-tabs,
.layout-ciberservice .app-service-tabs {
    background: var(--ciber-bg) !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.layout-ciberservice .tabs-list {
    gap: 0 !important;
    padding: 0 8px !important;
}

.layout-ciberservice .tab-item {
    padding: 6px 14px !important;
    border-radius: var(--ciber-radius) var(--ciber-radius) 0 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--ciber-text) !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    font-weight: 400 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    transition: none !important;
}

.layout-ciberservice .tab-item i {
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    opacity: 0.8 !important;
    color: var(--ciber-text) !important;
}

.layout-ciberservice .tab-item:hover {
    background: var(--ciber-bg-light) !important;
    color: var(--ciber-text) !important;
}

.layout-ciberservice .tab-item.active {
    background: var(--ciber-bg-light) !important;
    border-bottom: 2px solid var(--ciber-highlight) !important;
    color: var(--ciber-highlight) !important;
    font-weight: 600 !important;
}

.layout-ciberservice .tab-item.active i {
    color: var(--ciber-highlight) !important;
    opacity: 1 !important;
}

/* ─── User info (top right) ─── */

.layout-ciberservice .user-info {
    background: var(--ciber-bg-light) !important;
    border: 1px solid var(--ciber-border-mid) !important;
    border-radius: var(--ciber-radius) !important;
    padding: 2px 6px !important;
}

.layout-ciberservice .user-name {
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-text) !important;
}

.layout-ciberservice .user-role {
    font-size: calc(0.625rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-bg-dark) !important;
}

.layout-ciberservice .user-avatar i {
    color: var(--ciber-highlight) !important;
}

/* ─── Tab content area (Ordenes tab) ─── */

#app-service-container.layout-ciberservice .tab-content,
.layout-ciberservice .tab-content {
    background: var(--ciber-bg) !important;
}

#app-service-container.layout-ciberservice .tab-header,
.layout-ciberservice .tab-header {
    background: var(--ciber-bg) !important;
    border-radius: 0 !important;
}

/* ─── Force all section backgrounds ─── */

#app-service-container.layout-ciberservice .tab-content-section {
    background: var(--ciber-bg) !important;
}

#app-service-container.layout-ciberservice .ordenes-list-section,
#app-service-container.layout-ciberservice .ordenes-section {
    background: var(--ciber-bg) !important;
}

/* ─── Toolbar / Search bar ─── */

.layout-ciberservice .ordenes-toolbar {
    padding: 8px 10px !important;
    margin-bottom: 0 !important;
    background: var(--ciber-bg-light) !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
    border-radius: 6px 6px 0 0;
}

.layout-ciberservice .toolbar-search {
    background: transparent !important;
}

.layout-ciberservice .toolbar-search input#buscar-orden {
    border-radius: 20px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    height: auto !important;
    padding: 0.3em 1em !important;
    color: var(--ciber-text) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.layout-ciberservice .toolbar-search input#buscar-orden:focus {
    border-color: var(--ciber-highlight) !important;
    box-shadow: 0 0 0 2px rgba(40,86,163,0.12), inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

.layout-ciberservice .order-input-container input.order-number-input {
    border-radius: 5px 0 0 5px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    height: auto !important;
    padding: 0.3em 0.7em !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

.layout-ciberservice .order-input-container .btn {
    border-radius: 0 5px 5px 0 !important;
    height: auto !important;
    font-size: calc(0.8rem * var(--app-text-scale, 1)) !important;
    padding: 0.3em 0.7em !important;
}

.layout-ciberservice .search-filters label {
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-text) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

.layout-ciberservice .search-filters input[type="checkbox"] {
    border-radius: 3px !important;
}

/* ─── Toolbar buttons ─── */

.layout-ciberservice .toolbar-actions .btn,
.layout-ciberservice .btn-nueva-orden,
.layout-ciberservice .tab-header .btn {
    border-radius: 5px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%) !important;
    color: var(--ciber-text) !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    padding: 4px 14px !important;
    height: 30px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 3px rgba(0,0,0,0.08) !important;
    transition: all 0.15s ease !important;
    gap: 6px !important;
}

.layout-ciberservice .toolbar-actions .btn:hover,
.layout-ciberservice .btn-nueva-orden:hover,
.layout-ciberservice .tab-header .btn:hover {
    background: linear-gradient(180deg, var(--ciber-input-bg) 0%, var(--ciber-header-gradient-top) 100%) !important;
    border-color: var(--ciber-border-dark) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 5px rgba(0,0,0,0.1) !important;
}

.layout-ciberservice .toolbar-actions .btn:active,
.layout-ciberservice .btn-nueva-orden:active,
.layout-ciberservice .tab-header .btn:active {
    background: linear-gradient(180deg, var(--ciber-btn-gradient-bot) 0%, var(--ciber-btn-gradient-top) 100%) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset !important;
}

/* ─── Dynamic tabs bar: Chrome / Safari style ─── */

/* ─── Dynamic tabs bar: Windows Vista style ─── */

#app-service-container.layout-ciberservice .dynamic-tabs-bar {
    background: linear-gradient(180deg, var(--ciber-header-gradient-bot) 0%, var(--ciber-bg-dark) 100%) !important;
    border-bottom: none !important;
    border-top: 1px solid var(--ciber-border-light) !important;
    padding: 4px 4px 0 !important;
    gap: 2px !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative;
    z-index: 1;
}

#app-service-container.layout-ciberservice .dynamic-tabs-scroll {
    gap: 2px !important;
    align-items: flex-end !important;
    padding: 0 2px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

/* Tab inactiva */
#app-service-container.layout-ciberservice .dynamic-tab {
    border-radius: 4px 4px 0 0 !important;
    background: linear-gradient(180deg, var(--ciber-bg) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    background-color: var(--ciber-header-gradient-bot) !important;
    border: 1px solid var(--ciber-border-mid) !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 -1px 0 !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    color: var(--ciber-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transition: background 0.12s ease !important;
    min-height: auto !important;
    min-width: 60px !important;
    max-width: fit-content !important;
    position: relative;
    flex-direction: column !important;
}

#app-service-container.layout-ciberservice .dynamic-tab .tab-header {
    padding: 7px 10px 6px 12px !important;
    gap: 6px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}

/* Tab hover */
#app-service-container.layout-ciberservice .dynamic-tab:hover {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-bg) 100%) !important;
    background-color: var(--ciber-bg) !important;
    color: var(--ciber-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Tab activa: se funde con el contenido */
#app-service-container.layout-ciberservice .dynamic-tab.active {
    background: linear-gradient(180deg, var(--ciber-bg-light) 0%, var(--ciber-bg-light) 100%) !important;
    background-color: var(--ciber-bg-light) !important;
    border: 1px solid var(--ciber-border-mid) !important;
    border-bottom: 1px solid var(--ciber-bg-light) !important;
    z-index: 3;
    position: relative;
    color: var(--ciber-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
    margin-bottom: -1px !important;
}

#app-service-container.layout-ciberservice .dynamic-tab .tab-title {
    font-size: calc(0.84rem * var(--app-text-scale, 1)) !important;
    font-weight: 400 !important;
    color: inherit !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}

#app-service-container.layout-ciberservice .dynamic-tab.active .tab-title {
    color: var(--ciber-text) !important;
    font-weight: 600 !important;
}

#app-service-container.layout-ciberservice .dynamic-tab .tab-title i {
    font-size: calc(0.625rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-border-dark) !important;
    opacity: 0.6;
}

#app-service-container.layout-ciberservice .dynamic-tab.active .tab-title i {
    color: var(--ciber-highlight) !important;
    opacity: 1;
}

/* Botón cerrar */
#app-service-container.layout-ciberservice .dynamic-tab .tab-close {
    font-size: calc(0.5rem * var(--app-text-scale, 1)) !important;
    color: var(--ciber-border-dark) !important;
    border-radius: 2px !important;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, opacity 0.1s ease;
    opacity: 0;
    background: transparent !important;
    border: 1px solid transparent !important;
    flex-shrink: 0 !important;
    margin-left: 1px !important;
}

#app-service-container.layout-ciberservice .dynamic-tab:hover .tab-close,
#app-service-container.layout-ciberservice .dynamic-tab.active .tab-close {
    opacity: 1;
}

#app-service-container.layout-ciberservice .dynamic-tab .tab-close:hover {
    background: linear-gradient(180deg, #f5d0d0 0%, #e8a0a0 100%) !important;
    border-color: #c07070 !important;
    color: #8b0000 !important;
}

/* Ocultar indicador de estado */
#app-service-container.layout-ciberservice .dynamic-tab .tab-indicator {
    display: none !important;
    height: 0 !important;
}

/* ─── Dynamic tabs content area ─── */

#app-service-container.layout-ciberservice #dynamic-tabs-content {
    background: var(--ciber-bg-light) !important;
    border-top: 1px solid var(--ciber-border-mid);
    position: relative;
    z-index: 0;
}

/* ─── Ordenes list / Estado grid: Windows style ─── */

.layout-ciberservice .ordenes-estado-header {
    background: var(--ciber-bg) !important;
    border-radius: 0 !important;
}

#app-service-container.layout-ciberservice .estado-filter-card,
.layout-ciberservice .estado-filter-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    transition: all 0.15s ease !important;
}

#app-service-container.layout-ciberservice .estado-icon,
.layout-ciberservice .estado-icon {
    border-radius: var(--ciber-radius) !important;
    background: var(--ciber-bg-light) !important;
}

#app-service-container.layout-ciberservice .estado-filter-card .estado-count {
    color: var(--ciber-highlight) !important;
}

#app-service-container.layout-ciberservice .estado-filter-card .estado-label {
    color: var(--ciber-text) !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
}

/* ─── Estados grid ─── */

#app-service-container.layout-ciberservice .estados-grid {
    background: var(--ciber-bg) !important;
}

#app-service-container.layout-ciberservice .estado-filter-card:hover {
    background: var(--ciber-bg-light) !important;
    border-color: var(--ciber-border-dark) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

#app-service-container.layout-ciberservice .estado-filter-card.active {
    border-color: var(--ciber-highlight) !important;
    background: var(--ciber-bg) !important;
    box-shadow: 0 0 0 2px rgba(40,86,163,0.2), 0 1px 4px rgba(0,0,0,0.07) !important;
}

/* ─── Config cards (Personalizar tab) ─── */

.layout-ciberservice .config-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

.layout-ciberservice .config-card-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
}

/* ─── Modals ─── */

.layout-ciberservice .modal-content {
    border-radius: 10px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08) !important;
}

.layout-ciberservice .modal-header {
    background: linear-gradient(135deg, var(--ciber-highlight) 0%, var(--ciber-highlight) 100%) !important;
    color: var(--ciber-highlight-text) !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 8px 12px !important;
}

/* ─── Editor prefs / User menu ─── */

.layout-ciberservice .user-menu-dropdown {
    border-radius: 8px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.layout-ciberservice .editor-prefs-header {
    background: var(--ciber-bg) !important;
    border-radius: var(--ciber-radius) var(--ciber-radius) 0 0 !important;
}

/* ─── Footer / Status bar ─── */

#app-service-container.layout-ciberservice .app-service-footer {
    background: var(--color-bg-primary, #f0f0f1) !important;
    border-top: 1px solid var(--ciber-border-mid) !important;
    border-radius: 0 !important;
    padding: 3px 8px !important;
}

#app-service-container.layout-ciberservice .app-service-footer * {
    color: var(--ciber-text) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
}

#app-service-container.layout-ciberservice .app-service-footer .status-connected {
    color: var(--color-success) !important;
    font-size: 0.5rem !important;
}

#app-service-container.layout-ciberservice .app-service-footer .status-disconnected {
    color: var(--color-error) !important;
    font-size: 0.5rem !important;
}

/* ─── Personalizar config section in CiberService ─── */

#app-service-container.layout-ciberservice .config-card {
    border-radius: 6px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-bg-light) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

#app-service-container.layout-ciberservice .config-card-header {
    background: linear-gradient(180deg, var(--ciber-header-gradient-top) 0%, var(--ciber-header-gradient-bot) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid var(--ciber-border-mid) !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

#app-service-container.layout-ciberservice .config-card-header h3,
#app-service-container.layout-ciberservice .config-card-header h4 {
    color: var(--ciber-text) !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
}

#app-service-container.layout-ciberservice .preset {
    border-radius: var(--ciber-radius) !important;
    border: 1px solid var(--ciber-border-mid) !important;
}

#app-service-container.layout-ciberservice .preset.is-active {
    border-color: var(--ciber-highlight) !important;
    box-shadow: 0 0 0 1px var(--ciber-highlight) inset !important;
}

/* ─── Exportar / Importar section ─── */

#app-service-container.layout-ciberservice .config-card input[type="text"],
#app-service-container.layout-ciberservice .config-card input[type="number"],
#app-service-container.layout-ciberservice .config-card input[type="date"],
#app-service-container.layout-ciberservice .config-card select {
    border-radius: 3px !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: var(--ciber-input-bg) !important;
    font-size: calc(0.75rem * var(--app-text-scale, 1)) !important;
    height: 24px !important;
    padding: 1px 6px !important;
}

#app-service-container.layout-ciberservice .config-card .btn {
    border-radius: var(--ciber-radius) !important;
    border: 1px solid var(--ciber-border-mid) !important;
    background: linear-gradient(180deg, var(--ciber-btn-gradient-top) 0%, var(--ciber-btn-gradient-bot) 100%) !important;
    color: var(--ciber-text) !important;
    font-size: calc(0.6875rem * var(--app-text-scale, 1)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset !important;
}

#app-service-container.layout-ciberservice .config-card .btn:active {
    background: linear-gradient(180deg, var(--ciber-btn-gradient-bot) 0%, var(--ciber-btn-gradient-top) 100%) !important;
}