/* =============================================================================
   justtime.components.informes - CSS GLOBAL del diseñador v2.
   Solo lo que el CSS aislado (.razor.css) no puede alcanzar:
   - tokens --rep-* (derivados de los --jt-* del host)
   - controles Syncfusion en popups y dialogos (se renderizan en <body>, fuera del scope)
   - tema Syncfusion bootstrap5 reconducido de azul a la marca (foco, seleccion, checkbox, primario)
   - estados de arrastre sobre <body>
   ========================================================================== */

:root {
    --rep-tinte:        color-mix(in srgb, var(--jt-brand) 8%, var(--jt-white));
    --rep-tinte-fuerte: color-mix(in srgb, var(--jt-brand) 16%, var(--jt-white));
    --rep-borde:        var(--jt-gray-light);
    --rep-texto-suave:  var(--jt-gray-mid);
    --rep-aviso:        color-mix(in srgb, var(--jt-warning) 40%, var(--jt-gray-dark));
    --rep-aviso-fondo:  color-mix(in srgb, var(--jt-warning) 14%, var(--jt-white));
    --rep-mono:         ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
    --rep-navbar-h:     48px;
}

/* --- Estados globales del arrastre ---------------------------------------------- */
body.rep-arrastrando { cursor: copy; }
body.rep-redimensionando { cursor: col-resize; user-select: none; }

/* --- Foco visible (Syncfusion lo quita en varios controles) ---------------------- */
.rep-shell :focus-visible,
.rep-dlg :focus-visible {
    outline: 2px solid var(--jt-brand);
    outline-offset: -2px;
}

/* --- Tema Syncfusion -> marca JustTime (una sola vez, no control por control) ---- */
.rep-shell .e-btn.e-primary, .rep-dlg .e-btn.e-primary,
.rep-shell .e-btn.jt-btn-brand, .rep-dlg .e-btn.jt-btn-brand {
    background-color: var(--jt-brand);
    border-color: var(--jt-brand);
    color: var(--jt-white);
}
.rep-shell .e-btn.e-primary:hover, .rep-dlg .e-btn.e-primary:hover,
.rep-shell .e-btn.e-primary:focus, .rep-dlg .e-btn.e-primary:focus,
.rep-shell .e-btn.e-primary:active, .rep-dlg .e-btn.e-primary:active,
.rep-shell .e-btn.jt-btn-brand:hover, .rep-dlg .e-btn.jt-btn-brand:hover {
    background-color: var(--jt-brand-dark);
    border-color: var(--jt-brand-dark);
    color: var(--jt-white);
}
.rep-shell .e-btn.e-primary:disabled, .rep-dlg .e-btn.e-primary:disabled { opacity: .45; }

.rep-shell .e-input-group.e-input-focus:not(.e-float-icon-left),
.rep-shell .e-input-group.e-control-wrapper.e-input-focus,
.rep-dlg .e-input-group.e-input-focus,
.rep-dlg .e-input-group.e-control-wrapper.e-input-focus,
.rep-pop .e-input-group.e-input-focus {
    border-color: var(--jt-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jt-brand) 18%, transparent);
}
.rep-shell .e-input-group:not(.e-disabled)::before, .rep-shell .e-input-group:not(.e-disabled)::after,
.rep-shell .e-input-group .e-input-group-icon:hover { color: var(--jt-brand-dark); }

.rep-shell .e-checkbox-wrapper .e-frame.e-check, .rep-dlg .e-checkbox-wrapper .e-frame.e-check,
.rep-shell .e-checkbox-wrapper:hover .e-frame.e-check, .rep-dlg .e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--jt-brand);
    border-color: var(--jt-brand);
    color: var(--jt-white);
}
.rep-shell .e-checkbox-wrapper:focus-within .e-frame, .rep-dlg .e-checkbox-wrapper:focus-within .e-frame {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jt-brand) 25%, transparent);
}

/* TreeView: seleccion con barra de marca en lugar del azul del tema */
.rep-shell .e-treeview .e-list-item.e-active > .e-fullrow,
.rep-dlg .e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: var(--rep-tinte-fuerte);
    border-left: 3px solid var(--jt-brand);
}
.rep-shell .e-treeview .e-list-item.e-hover > .e-fullrow,
.rep-dlg .e-treeview .e-list-item.e-hover > .e-fullrow { background-color: var(--rep-tinte); }
.rep-shell .e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
.rep-dlg .e-treeview .e-list-item.e-active > .e-text-content .e-list-text { color: var(--jt-gray-dark); }

/* Listas desplegables (popups en <body>) */
.rep-pop .e-list-item.e-active, .rep-pop .e-list-item.e-active.e-hover {
    background-color: var(--rep-tinte-fuerte);
    color: var(--jt-gray-dark);
}
.rep-pop .e-list-item.e-hover, .rep-pop .e-list-item:hover { background-color: var(--rep-tinte); }
.rep-pop .e-list-item, .rep-pop .e-menu-item { font-family: var(--jt-font-body); font-size: var(--jt-font-size-sm); }

/* --- Dialogos ------------------------------------------------------------------------------- */
.rep-dlg.e-dialog {
    border-top: 3px solid var(--jt-brand-dark);
    font-family: var(--jt-font-body);
    max-width: 96vw;
}
.rep-dlg.e-dialog .e-dlg-header-content {
    background: var(--jt-white);
    border-bottom: 1px solid var(--rep-borde);
    padding: 8px 16px;
}
.rep-dlg.e-dialog .e-dlg-header {
    font-family: var(--jt-font-display);
    font-size: var(--jt-font-size-lg);
    font-weight: 700;
    color: var(--jt-gray-dark);
}
.rep-dlg.e-dialog .e-dlg-content { padding: 12px 16px; color: var(--jt-gray-dark); font-size: var(--jt-font-size-base); }
.rep-dlg.e-dialog .e-footer-content { border-top: 1px solid var(--rep-borde); padding: 8px 16px; background: var(--jt-gray-bg); }
.rep-dlg .rep-dlg-pie { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.rep-dlg .rep-dlg-pie .rep-dlg-nota { margin-right: auto; font-size: var(--jt-font-size-sm); color: var(--rep-texto-suave); }

/* Lista de errores / avisos dentro de dialogos (el DOM de Blazor del dialogo queda bajo .rep-dlg en <body>) */
.rep-dlg .rep-lista-errores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.rep-dlg .rep-lista-errores li {
    display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--jt-danger) 7%, var(--jt-white));
    border-left: 3px solid var(--jt-danger);
    font-size: var(--jt-font-size-base);
}
.rep-dlg .rep-lista-errores li i { color: var(--jt-danger); margin-top: 2px; }
.rep-dlg .rep-lista-errores .ruta { display: block; font-family: var(--rep-mono); font-size: var(--jt-font-size-sm); color: var(--rep-texto-suave); }

/* Campos del dialogo: etiqueta arriba, uppercase pequeña */
.rep-dlg .rep-campo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.rep-dlg .rep-etiqueta {
    font-size: var(--jt-font-size-sm); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--rep-texto-suave);
}
.rep-dlg .rep-etiqueta .req { color: var(--jt-brand); }
.rep-dlg .rep-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-dlg .rep-aviso { padding: 6px 10px; font-size: var(--jt-font-size-sm); border-left: 3px solid var(--rep-aviso); background: var(--rep-aviso-fondo); color: var(--jt-gray-dark); }
.rep-dlg .rep-aviso.mal { border-left-color: var(--jt-danger); background: color-mix(in srgb, var(--jt-danger) 7%, var(--jt-white)); }

@media (prefers-reduced-motion: reduce) {
    .rep-shell *, .rep-dlg * { transition: none !important; animation: none !important; }
}

/* --- Chips de clase / reemplazo (ESQUEMA2 14.7) ----------------------------------
   Compartidos por el catalogo y la barra de identidad del diseñador. Rectangulo de 3px (no pildora)
   para no confundirse con los chips de ambito. El texto es SIEMPRE gris oscuro: el cian solo va
   en borde y tinte. */
.cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 0 6px;
    border: 1px solid;
    border-radius: 3px;
    font-size: var(--jt-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    color: var(--jt-gray-dark);
}
.cat-tag.comp { background: var(--jt-white); border-color: var(--jt-gray-mid); }
.cat-tag.pers {
    background: color-mix(in srgb, var(--jt-info) 14%, var(--jt-white));
    border-color: color-mix(in srgb, var(--jt-info) 55%, var(--jt-white));
}
.cat-tag .nom { max-width: 180px; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
@media (max-width: 1099px) { .cat-tag .nom { max-width: 110px; } }