* { box-sizing: border-box; }
        body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: var(--route-font); }
        .config-page { padding: 20px 22px 30px; }
        .config-hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; background:linear-gradient(135deg,#fff,#eff6ff); border:1px solid #dbeafe; border-radius:18px; padding:20px 22px; box-shadow:0 12px 30px rgba(15,23,42,.07); }
        .config-hero h1 { margin:0; font-size:24px; }
        .config-hero p { margin:7px 0 0; color:#64748b; max-width:780px; font-size:13px; line-height:1.5; }
        .config-count { min-width:120px; text-align:right; }
        .config-count strong { display:block; font-size:30px; color:#1d4ed8; }
        .config-count span { color:#64748b; font-size:12px; }
        .config-kpis { display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:12px; margin:16px 0; }
        .config-kpi { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px 16px; box-shadow:0 8px 20px rgba(15,23,42,.05); }
        .config-kpi span { display:block; color:#64748b; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
        .config-kpi strong { display:block; margin-top:5px; font-size:24px; }
        .config-toolbar { position:sticky; top:var(--route-nav-height); z-index:1000; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:13px; margin-bottom:14px; background:rgba(255,255,255,.96); border:1px solid #dbe4ee; border-radius:14px; box-shadow:0 10px 24px rgba(15,23,42,.10); backdrop-filter:blur(10px); }
        .config-toolbar input,.config-toolbar select,.config-table input,.config-table select,.config-table textarea { border:1px solid #cbd5e1; border-radius:8px; padding:8px 9px; background:#fff; color:#0f172a; font-size:12px; }
        .config-toolbar input[type=text] { min-width:280px; flex:1 1 320px; }
        .config-btn { border:0; border-radius:9px; padding:9px 14px; color:#fff; background:#2563eb; font-weight:800; text-decoration:none; cursor:pointer; font-size:12px; }
        .config-btn.secondary { background:#64748b; }
        .config-btn.success { background:#16a34a; }
        .config-message,.config-error { margin:14px 0; padding:12px 14px; border-radius:11px; font-size:13px; font-weight:700; }
        .config-message { background:#dcfce7; border:1px solid #86efac; color:#166534; }
        .config-error { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }
        .config-table-wrap { max-height:calc(100vh - var(--route-nav-height) - 150px); overflow:auto; background:#fff; border:1px solid #dbe4ee; border-radius:15px; box-shadow:0 12px 28px rgba(15,23,42,.08); }
        .config-table { width:100%; min-width:1810px; border-collapse:separate; border-spacing:0; }
        .config-table th { position:sticky; top:0; z-index:8; padding:10px 9px; background:#eaf0f7; border-bottom:1px solid #cbd5e1; color:#334155; text-align:left; white-space:nowrap; font-size:11px; }
        .config-table td { padding:8px; border-bottom:1px solid #edf2f7; vertical-align:top; font-size:12px; }
        .config-table tbody tr:nth-child(even) { background:#f8fafc; }
        .config-table tbody tr:hover { background:#eff6ff; }
        .config-table th:first-child,.config-table td:first-child { position:sticky; left:0; z-index:6; background:inherit; box-shadow:6px 0 12px rgba(15,23,42,.05); }
        .config-table th:first-child { z-index:10; background:#eaf0f7; }
        .config-table input[type=time] { width:104px; }
        .config-table input[type=number] { width:74px; }
        .config-table textarea { width:190px; min-height:36px; resize:vertical; }
        .config-checkbox { text-align:center; }
        .config-checkbox input { transform:scale(1.12); }
        .config-code { font-family:Consolas,monospace; font-weight:800; }
        .config-small { margin-top:3px; color:#64748b; font-size:10px; }
        .config-badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:900; }
        .config-badge.ok { background:#dcfce7; color:#166534; }
        .config-badge.pending { background:#ffedd5; color:#9a3412; }
        .config-savebar { position:sticky; bottom:0; z-index:30; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,.96); border-top:1px solid #cbd5e1; box-shadow:0 -8px 20px rgba(15,23,42,.10); }
        .config-savebar span { color:#64748b; font-size:12px; }
        @media(max-width:1050px){ .config-kpis{grid-template-columns:repeat(2,1fr)} .config-page{padding:14px} .config-hero{flex-direction:column}.config-count{text-align:left} }

.config-action-col {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 142px;
    background: inherit;
}
.config-table thead .config-action-col {
    z-index: 7;
    background: #e2e8f0;
}
.config-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 126px;
}
.config-btn.danger { background: #dc2626; }
.config-badge.shift { background: #ffedd5; color: #9a3412; }
.config-badge.entry { background: #dbeafe; color: #1e40af; }
.config-badge.exit { background: #fef3c7; color: #92400e; }
.config-table tr.configured-row { background: #f0fdf4; }


/* Filtros instantáneos: no recargan ni modifican la URL */
.config-toolbar {
    top: var(--route-nav-height);
}

.config-toolbar .config-filter-status {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.config-data-row[hidden],
.config-no-results[hidden] {
    display: none !important;
}

.config-no-results td {
    padding: 26px 18px;
    color: #64748b;
    text-align: center;
    font-weight: 700;
}

.config-toolbar select:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #f1f5f9;
}

@media (max-width: 900px) {
    .config-toolbar .config-filter-status {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   Configurador: un único scroll vertical de página
   ========================================================= */
.config-table-wrap {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overflow-y: clip !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
}

/* El encabezado original forma parte del flujo normal. La copia flotante
   se muestra cuando el encabezado queda detrás de la barra de filtros. */
.config-table thead th {
    position: static !important;
    top: auto !important;
}

.config-sticky-header {
    position: fixed;
    z-index: 1050;
    display: none;
    overflow: hidden;
    background: #eaf0f7;
    border: 1px solid #cbd5e1;
    border-top: 0;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}

.config-sticky-header.is-visible {
    display: block;
}

.config-sticky-header-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.config-sticky-header table {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    min-width: 1810px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.config-sticky-header th {
    position: static !important;
    box-sizing: border-box;
    padding: 10px 9px;
    background: #eaf0f7;
    border-bottom: 1px solid #cbd5e1;
    color: #334155;
    text-align: left;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.config-sticky-header th:first-child {
    position: static !important;
    background: #eaf0f7;
    box-shadow: none;
}

.config-table-wrap::-webkit-scrollbar:vertical {
    width: 0;
}

/* =========================================================
   Filas Override: fondo completo y hover claramente visible
   ========================================================= */
.config-table tbody tr.configured-row > td,
.config-table tbody tr.configured-row:nth-child(even) > td {
    background-color: #ecfdf5 !important;
    transition: background-color .14s ease;
}

/* La columna fija también debe conservar el mismo fondo verde. */
.config-table tbody tr.configured-row > td.config-action-col,
.config-table tbody tr.configured-row > td:first-child {
    background-color: #ecfdf5 !important;
}

/* Al pasar el ratón, se resalta toda la fila seleccionada. */
.config-table tbody tr.configured-row:hover > td,
.config-table tbody tr.configured-row:hover > td.config-action-col,
.config-table tbody tr.configured-row:hover > td:first-child {
    background-color: #dbeafe !important;
}

/* Hover coherente para las filas estándar. */
.config-table tbody tr.config-data-row:not(.configured-row):hover > td,
.config-table tbody tr.config-data-row:not(.configured-row):hover > td.config-action-col,
.config-table tbody tr.config-data-row:not(.configured-row):hover > td:first-child {
    background-color: #eff6ff !important;
}

/* =========================================================
   Textos traducidos: permitir varias líneas sin solapamientos
   ========================================================= */
.config-table th,
.config-sticky-header th {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    line-height: 1.2;
    vertical-align: middle;
}

/* Las columnas de identificación y nombre disponen de un ancho controlado
   y pueden crecer verticalmente cuando la traducción es más larga. */
.config-table th:nth-child(4),
.config-table td:nth-child(4),
.config-sticky-header th:nth-child(4) {
    min-width: 112px;
    width: 124px;
    max-width: 145px;
}

.config-table th:nth-child(5),
.config-table td:nth-child(5),
.config-sticky-header th:nth-child(5) {
    min-width: 190px;
    width: 220px;
    max-width: 270px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Las cabeceras de parámetros pueden partirse en dos o más líneas. */
.config-table th:nth-child(n+7):nth-child(-n+17),
.config-sticky-header th:nth-child(n+7):nth-child(-n+17) {
    min-width: 82px;
    max-width: 118px;
    text-align: center;
}

.config-table td,
.config-table td * {
    min-width: 0;
}

.config-table input,
.config-table select,
.config-table textarea {
    max-width: 100%;
}

.config-code {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.config-badge,
.config-actions .config-btn {
    white-space: nowrap;
}

/* =========================================================
   Frotcom brand layer
   ========================================================= */
body.route-config-page {
    background: var(--route-bg);
    color: var(--route-text);
    font-family: var(--route-font);
}

.config-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, var(--frotcom-blue-soft) 100%) !important;
    border-color: #cfe4ee !important;
}

.config-count strong {
    color: var(--frotcom-blue) !important;
}

.config-kpi,
.config-toolbar,
.config-table-wrap {
    border-color: var(--route-border) !important;
    box-shadow: 0 10px 24px rgba(38, 55, 69, .06) !important;
}

.config-toolbar input,
.config-toolbar select,
.config-table input,
.config-table select,
.config-table textarea {
    border-color: #c6d4dd !important;
    color: var(--route-text) !important;
}

.config-btn {
    background: var(--frotcom-blue) !important;
}

.config-btn:hover {
    background: var(--frotcom-blue-dark) !important;
}

.config-btn.secondary {
    background: var(--frotcom-grey) !important;
}

.config-btn.success {
    background: var(--frotcom-blue) !important;
    border: 1px solid var(--frotcom-blue) !important;
    color: #fff !important;
}

.config-btn.success:hover {
    background: var(--frotcom-blue-dark) !important;
    border-color: var(--frotcom-blue-dark) !important;
}

.config-btn.danger {
    background: #fff !important;
    border: 1px solid var(--frotcom-blue) !important;
    color: var(--frotcom-blue-dark) !important;
}

.config-btn.danger:hover {
    background: var(--frotcom-blue-soft) !important;
    border-color: var(--frotcom-blue-dark) !important;
    color: var(--frotcom-blue-dark) !important;
}

.config-table th,
.config-sticky-header th,
.config-table th:first-child,
.config-table thead .config-action-col {
    background: #e7eef2 !important;
    color: var(--frotcom-grey) !important;
}

.config-table tbody tr:hover {
    background: var(--frotcom-blue-soft) !important;
}

.config-small,
.config-toolbar .config-filter-status,
.config-savebar span,
.config-count span {
    color: var(--route-muted) !important;
}

.route-config-page .config-table,
.route-config-page .config-sticky-header table {
    font-family: var(--route-font) !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}

.route-config-page .config-table th,
.route-config-page .config-sticky-header th {
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
}

.route-config-page .config-table td,
.route-config-page .config-table td *,
.route-config-page .config-table input,
.route-config-page .config-table select,
.route-config-page .config-table textarea {
    font-family: var(--route-font) !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}

.route-config-page .config-toolbar,
.route-config-page .config-toolbar input,
.route-config-page .config-toolbar select,
.route-config-page .config-toolbar button,
.route-config-page .config-savebar {
    font-family: var(--route-font) !important;
    font-size: 12px !important;
}