/* Tema Ziur sobre el material de Radzen.
   Aqui se calibra el tamano de letra, la densidad de las grillas y los acentos de color con las
   variables --rz-* del tema, para no repetir reglas en cada pagina. Carga despues del tema y antes
   de ziur-mobile.css, que sigue mandando en celular (<= 767px). */

/* --- Escala general ----------------------------------------------------------- */
/* El material trae 16px de cuerpo y 24px de icono, pensados para pantallas de consumo. En una
   aplicacion de datos 14px lee mejor, deja sitio y no compite con los titulos. */
:root {
    --rz-body-font-size: 0.875rem;
    --rz-body-line-height: 1.45;
    --rz-icon-size: 1.25rem;
    --rz-text-body1-font-size: 0.875rem;
    --rz-text-body1-letter-spacing: 0;

    /* El material de fabrica usa un fucsia como color secundario (botones redondos de los filtros,
       pestanas de los documentos, papeleras). No es un color de marca: pasa a un gris azulado
       tranquilo y el indigo del primario queda como unico acento. */
    --rz-secondary: #5b6478;
    --rz-secondary-light: #7b849a;
    --rz-secondary-dark: #454c5e;
    --rz-secondary-darker: #333947;
    --rz-secondary-lighter: rgba(91, 100, 120, 0.12);
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-secondary-lighter: #454c5e;
}

/* --- Grillas ------------------------------------------------------------------ */
/* Se declara tambien sobre .rz-density-compact porque esa clase (Density.Compact, presente en casi
   todas las grillas) redefine las mismas variables y le ganaria a :root. */
.rz-data-grid,
.rz-data-grid.rz-density-compact {
    /* celda: 13px con un poco de aire; la fila queda en unos 32px sin fijar alturas */
    --rz-grid-cell-font-size: 0.8125rem;
    --rz-grid-cell-line-height: 1.35;
    --rz-grid-cell-padding: 0.25rem 0.625rem;
    /* cabecera: pequena, en mayusculas y en gris, para que no compita con los datos */
    --rz-grid-header-font-size: 0.6875rem;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-line-height: 1.25rem;
    --rz-grid-header-cell-padding: 0.5rem 0;
    --rz-grid-header-title-padding-inline: 0.625rem 0.625rem;
    --rz-grid-header-background-color: var(--rz-base-50);
    --rz-grid-header-color: var(--rz-base-700);
    --rz-grid-header-cell-border-bottom: 1px solid var(--rz-base-400);
    --rz-grid-header-filter-icon-font-size: 1rem;
    --rz-grid-column-icon-width: 1.5rem;
    /* cebra apenas perceptible y resaltado suave al pasar el mouse */
    --rz-grid-stripe-background-color: #f7f8fb;
    --rz-grid-hover-background-color: #eef0f8;
    /* editores dentro de una fila en edicion: a la altura de la fila, no a los 40px de un formulario */
    --rz-input-height: 1.875rem;
    --rz-input-padding-block: 0.25rem;
    --rz-input-padding-inline: 0.5rem;
    --rz-input-font-size: 0.8125rem;
}

/* RadzenText dentro de una celda renderiza un <p class="rz-text-body1"> con su propio tamano (16px);
   toma el de la celda. */
.rz-data-grid .rz-cell-data .rz-text-body1,
.rz-data-grid .rz-cell-data p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Digitos del mismo ancho: las cifras alineadas a la derecha se comparan de un vistazo */
.rz-data-grid tbody td {
    font-variant-numeric: tabular-nums;
}

/* Cabecera: el titulo se lee en un tono mas oscuro que el resto de la cabecera */
.rz-data-grid thead th .rz-column-title-content {
    letter-spacing: 0.04em;
}

/* Con manija de reordenar el tema deja el titulo sin relleno inicial y quedaba 10px antes que el texto de la celda */
.rz-data-grid thead th .rz-column-drag + .rz-column-title {
    padding-inline-start: 0.625rem;
}

/* La manija de reordenar y el embudo del filtro solo aparecen al pasar el mouse por la columna, y van
   en absoluto sobre el borde derecho para no quitarle sitio al titulo: en linea, los cuatro iconos de
   Radzen recortaban "CODIGO DE BARRAS" en una columna de 160px. Con opacity el titulo no salta. */
.rz-data-grid thead th > div {
    position: relative;
}

.rz-data-grid thead th .rz-column-drag,
.rz-data-grid thead th .rz-grid-filter-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.rz-data-grid thead th .rz-grid-filter-icon {
    right: 0.25rem;
}

.rz-data-grid thead th .rz-column-drag {
    right: 1.5rem;
}

.rz-data-grid thead th .rz-column-drag,
.rz-data-grid thead th .rz-grid-filter-icon:not(.rz-grid-filter-active) {
    opacity: 0;
    transition: opacity 0.15s;
}

.rz-data-grid thead th:hover .rz-column-drag,
.rz-data-grid thead th:hover .rz-grid-filter-icon,
.rz-data-grid thead th:focus-within .rz-grid-filter-icon {
    opacity: 0.6;
}

/* La flecha de orden se ve solo cuando la columna esta ordenada; sin orden ocupaba sitio en blanco */
.rz-data-grid thead th[aria-sort="none"] .rz-sortable-column-icon {
    display: none;
}

.rz-data-grid thead th .rz-grid-filter-icon:hover,
.rz-data-grid thead th .rz-column-drag:hover {
    opacity: 1;
}

/* Botones de la fila (editar, borrar, guardar, cancelar): iconos grises y planos; el color aparece
   al pasar el mouse. Antes cada fila llevaba un lapiz y una papelera rosada de relleno. */
.rz-data-grid .rz-cell-data > .rz-button.rz-button-icon-only.rz-variant-flat {
    color: var(--rz-base-600);
    background-color: transparent;
    box-shadow: none;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0.1875rem;
    /* las utilidades rz-my-* del tema llevan !important y estiraban la fila a 49px */
    margin-block: 0 !important;
}

.rz-data-grid .rz-cell-data > .rz-button.rz-button-icon-only.rz-variant-flat:hover {
    color: var(--rz-primary);
    background-color: var(--rz-primary-lighter);
}

.rz-data-grid .rz-cell-data > .rz-button.rz-button-icon-only.rz-variant-flat.rz-danger:hover {
    color: var(--rz-danger);
    background-color: rgba(198, 40, 40, 0.08);
}

.rz-data-grid .rz-cell-data > .rz-button.rz-button-icon-only.rz-variant-flat.rz-success {
    color: var(--rz-success);
}

/* Cabecera de la grilla (boton Agregar + selector de columnas): una sola franja, boton compacto a la
   izquierda y selector pequeno a la derecha */
.rz-data-grid .rz-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background-color: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-300);
}

.rz-data-grid .rz-group-header .rz-custom-header {
    flex: 1 1 auto;
}

.rz-data-grid .rz-group-header .rz-button.rz-button-md {
    height: auto;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

.rz-data-grid .rz-group-header .rz-button.rz-button-md .rzi {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.rz-data-grid .rz-column-picker .rz-dropdown {
    width: auto;
    min-width: 11rem;
    font-size: 0.75rem;
}

/* Paginador: al tamano de la letra de la grilla */
.rz-data-grid .rz-pager {
    font-size: 0.75rem;
}

.rz-data-grid .rz-pager .rz-pager-summary {
    color: var(--rz-base-700);
}

/* --- Clases propias que antes se repetian en el <style> de cada pagina ------------------- */
.ziur-focus:focus,
.ziur-focus:focus-within {
    border-color: dodgerblue !important;
    box-shadow: 0px 0px 5px !important;
}

.ziur-DropDownGrid {
    width: 100%;
    text-align: center;
}

.table-cell-edited {
    position: relative;
}

.table-cell-edited::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid transparent;
}

/* --- Titulo de la pantalla y pestanas ----------------------------------------------- */
/* El titulo del panel de filtros venia en mayusculas al 150% (21px): baja a 16px con peso 600 */
.rz-panel-titlebar > .title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

:root {
    --rz-tabs-tab-font-size: 0.8125rem;
    --rz-tabs-tab-padding-block: 0.5rem;
    --rz-tabs-tab-letter-spacing: 0.5px;
    --rz-tabs-tab-line-height: 1.25rem;
}

/* --- Documentos (DocBase) ------------------------------------------------------------ */
.areas {
    --rz-input-font-size: 0.8125rem;
}

/* Etiquetas de los campos del encabezado: pequenas y en gris; el valor es lo que se lee */
.areas .rz-form-field .rz-form-field-label {
    font-size: 0.6875rem;
    color: var(--rz-base-600);
}

/* Los numeros del encabezado siguen a la derecha (el texto ya va a la izquierda) */
.areas .rz-numeric input {
    text-align: end;
}

/* Pestanas verticales del borde derecho (Encabezado detallado, Especiales): conservan su color de
   siempre, que el gris azulado del resto no les cambia, y van mas delgadas */
.barra {
    --rz-secondary: #e31c65;
    --rz-secondary-light: #e94984;
    --rz-secondary-dark: #b61651;
    --rz-secondary-darker: #9a1345;
    --rz-secondary-lighter: rgba(227, 28, 101, 0.12);
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #e31c65;
}

.barra .barra-botones .rz-button {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.3125rem !important;
    margin: 0.25rem 0 !important;
    border-radius: 0.25rem;
}

/* Pie de totales: sin cajas. Cada total es "etiqueta arriba, cifra abajo" separado por un hilo, como un
   libro mayor; la cifra en negro (deshabilitada salia en gris claro) y con digitos tabulares. La maquetacion
   (columnas, etiqueta en flujo) vive en el <style> de DocBase.razor. */
.doc-totales .rz-form-field.rz-variant-flat {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--rz-base-200);
    border-radius: 0;
    margin-block: 0;
}

/* la caja blanca con borde y esquinas redondeadas es del contenido del campo, no del campo; el estado
   deshabilitado del tema la vuelve a dibujar con mas especificidad, de ahi el !important */
.doc-totales .rz-form-field .rz-form-field-content {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0.25rem;
}

.doc-totales .rz-form-field .rz-form-field-content > .rz-form-field-label {
    color: var(--rz-base-600);
}

.doc-totales .rz-form-field .rz-form-field-content > .rz-textbox {
    color: var(--rz-base-900);
    -webkit-text-fill-color: var(--rz-base-900);
    opacity: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.doc-totales label.rz-label {
    font-size: 0.6875rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-base-600);
    margin: 0.4rem 0 0.15rem !important;
}

/* --- Estado del documento en chips junto al titulo -------------------------------------- */
.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2rem;
    vertical-align: middle;
}

.doc-chip .rzi {
    font-size: 0.875rem;
    width: 0.875rem;
    height: 0.875rem;
}

.doc-chip-bloqueado { background-color: #fff3e0; color: #9a5b00; }
.doc-chip-anulado { background-color: #ffebee; color: #b71c1c; }
.doc-chip-contabilizado { background-color: #e8f5e9; color: #1b5e20; }

/* --- Pie de totales: la cifra clave se lee primero y un descuadre contable se ve en rojo ---- */
.areas .doc-totales .doc-total-clave .rz-form-field-content > .rz-textbox {
    font-size: 0.9375rem !important;
    font-weight: 700;
}

.areas .doc-totales .doc-total-clave .rz-form-field-content > .rz-form-field-label {
    color: var(--rz-base-900);
    font-weight: 600;
}

.areas .doc-totales .doc-total-descuadre .rz-form-field-content > .rz-textbox {
    color: var(--rz-danger) !important;
    -webkit-text-fill-color: var(--rz-danger) !important;
}

.areas .doc-totales .doc-total-descuadre .rz-form-field-content > .rz-form-field-label {
    color: var(--rz-danger);
}

/* --- Grilla sin filas: el mensaje ocupa su sitio con aire, en gris ---------------------------- */
.rz-data-grid .rz-datatable-emptymessage,
.rz-data-grid .rz-datatable-emptymessage-row td {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--rz-base-600);
    font-size: 0.8125rem;
}

/* --- Menu lateral: 260px (el material trae 300) y letra de 13px ----------------------------- */
:root {
    --rz-sidebar-width: 16.25rem;
}

.rz-layout .ziur-main-sidebar .rz-panel-menu .rz-navigation-item-text {
    font-size: 0.8125rem;
}

.rz-layout .ziur-main-sidebar .rz-panel-menu .rz-navigation-item-link {
    padding-block: 0.5rem;
}

.rz-layout .ziur-main-sidebar .ziur-sidebar-search input {
    font-size: 0.8125rem;
}

/* --- Encabezado del documento: la X de limpiar aparece al pasar el mouse o al enfocar el campo ------ */
/* Siempre visible, en las columnas angostas (Pref, Moneda) tapaba el valor: "SETP" se veia como "S...". El calendario
   usa la misma clase de icono que los combos. */
.areas .rz-form-field .rz-dropdown-clear-icon {
    display: none;
}

.areas .rz-form-field:hover .rz-dropdown-clear-icon,
.areas .rz-form-field:focus-within .rz-dropdown-clear-icon {
    display: inline-flex;
}

/* Combos del encabezado mas apretados por dentro: 15px de relleno a cada lado y una flecha de 32px dejaban
   25px para el texto en las columnas de 1/12 (Pref, Moneda) y "SETP" quedaba en "S..." */
.areas .rz-form-field {
    --rz-dropdown-label-padding-inline: 0.5rem 0.25rem;
    --rz-dropdown-trigger-width: 1.5rem;
    --rz-form-field-start-end-padding-inline: 0.5rem;
}

/* Medido en Pref (94px de campo): el combo llevaba 15px de relleno a cada lado y la etiqueta 40px a la derecha
   reservados para la X y la flecha; quedaban 14px para el texto. Con la X oculta hasta el hover, el sitio es la flecha. */
.areas .rz-form-field .rz-dropdown,
.areas .rz-form-field .rz-textbox,
.areas .rz-form-field .rz-numeric,
.areas .rz-form-field .rz-datepicker {
    --rz-input-padding-inline: 0.375rem;
}

.areas .rz-form-field .rz-dropdown .rz-dropdown-label {
    padding-inline: 0.25rem 1.5rem;
}