/* 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;
}

/* ==========================================================================
   Presentacion de las busquedas, en prueba en Cierres de Caja.
   Todo cuelga de .ziur-find-v2, que hoy solo envuelve /find-cierres: cuando
   se apruebe, se quita ese prefijo y sale en las 123 busquedas sin mas cambios.

   La barra de comandos de arriba se deja tal como estaba: se probo en claro y
   el usuario prefiere los iconos como los tenia.
   ========================================================================== */

/* --- 1. Titulo de la pantalla -----------------------------------------------
   El nombre de la busqueda solo estaba en el menu lateral. */
.ziur-find-v2 .find-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.5rem;
}

.ziur-find-v2 .find-titulo h1 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--rz-text-title-color, #1d2230);
}

.ziur-find-v2 .find-titulo .find-titulo-nota {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6b7080);
}

/* --- 2. Panel de filtros ----------------------------------------------------
   Compacto, pero con sitio de sobra para que el recuadro de cada campo se vea
   entero: forzar la altura del RadzenFormField lo recortaba por arriba y por abajo. */
.ziur-find-v2 .rz-panel {
    padding: 0.5rem 1rem 0.875rem;
    border-radius: 0.5rem;
}

.ziur-find-v2 .rz-panel-titlebar {
    min-height: 2.25rem;
    padding: 0 !important;
}

/* Los botones de la cabecera quedaban encima de la primera fila de campos */
.ziur-find-v2 .rz-panel-content {
    padding: 1.125rem 0 0 !important;
}

/* Los filtros se reparten solos segun cuantos traiga la pantalla, sin depender del SizeLG que
   declare cada busqueda: cada campo pide 15 rem y crece para llenar la fila. Con dos campos salen
   anchos, con seis se ajustan, y nunca se apachurran porque en cuanto no cabe el minimo saltan
   de linea. Es la regla que sirve para las 123 busquedas, que tienen de 1 a 8 filtros. */
.ziur-find-v2 .rz-panel-content > form > .rz-row > [class*="rz-col"] > .rz-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem !important;
    margin: 0 !important;
}

/* Las columnas de Radzen traen su ancho en porcentaje y su relleno: dentro del grid sobran */
.ziur-find-v2 .rz-panel-content > form > .rz-row > [class*="rz-col"] > .rz-row > [class*="rz-col"] {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    padding: 0 !important;
}

.ziur-find-v2 .rz-panel .rz-row {
    row-gap: 0.75rem !important;
    column-gap: 0.75rem !important;
    margin-top: 0 !important;
}

/* --- 3. Boton Buscar --------------------------------------------------------
   Era el elemento mas pesado de la pantalla: 260x70 px, con la lupa al 35 % y
   la etiqueta en 1,75 rem. Ahora pesa lo que tiene que pesar: un boton, con su
   lupa al tamano del texto. */
/* El boton compartia linea con los filtros y le robaba el sitio al ultimo, que se caia solo a la fila
   de abajo. Los filtros usan ahora todo el ancho y el boton va debajo, alineado a la derecha. */
.ziur-find-v2 .rz-panel-content > form > .rz-row > [class*="rz-col"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* El componente trae display:block en linea, asi que el flex necesita ganarle */
.ziur-find-v2 .rz-panel-content > form > .rz-row > .rz-col-lg-2 {
    display: flex !important;
    justify-content: flex-start;
    margin-inline-start: 0;
    padding: 0 !important;
}

/* El componente le pone width:100% en linea: en su propia fila se estiraba de lado a lado */
.ziur-find-v2 .rz-panel-content > form > .rz-row > .rz-col-lg-2 .rz-button {
    width: auto !important;
    max-width: 12rem;
}

.ziur-find-v2 .rz-panel-content > form > .rz-row > .rz-col-lg-2 .rz-button {
    height: 3.5rem !important;
    min-width: 9rem;
    padding: 0 1rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
}

.ziur-find-v2 .ziur-button-image-search-find {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 auto;
}

.ziur-find-v2 .ziur-button-label-search-find {
    font-size: 0.875rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* --- 4. Botones de accion del encabezado ------------------------------------
   Los cinco circulos sueltos de la derecha, que quedaban pegados a los campos. */
.ziur-find-v2 .botones {
    gap: 0.25rem;
    margin-inline-end: 0.25rem;
}

.ziur-find-v2 .botones .rz-button {
    width: 2rem;
    height: 2rem;
    padding: 0;
}

/* --- 5. Estado inicial ------------------------------------------------------
   Sin resultados la pantalla era medio metro de gris sin decir que hacer. */
.ziur-find-v2 .find-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #6b7080);
}

.ziur-find-v2 .find-vacio .rz-icon {
    font-size: 2.5rem;
    opacity: 0.35;
}

.ziur-find-v2 .find-vacio p {
    margin: 0;
    font-size: 0.875rem;
    max-width: 30rem;
}

/* ---------------------------------------------------------------------------
   Importaciones masivas. Replican la ventana del escritorio: la grilla editable
   arriba, el avance del pegado en la esquina y la grilla de errores abajo.
   --------------------------------------------------------------------------- */

.ziur-import .import-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0 0.25rem;
}

.ziur-import .import-cabecera h1 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.ziur-import .import-avance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7080);
}

.ziur-import .import-avance-cifra {
    min-width: 3rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ziur-import .import-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
}

.ziur-import .import-chips {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-inline-start: auto;
    font-size: 0.8125rem;
}

.ziur-import .chip {
    border-radius: 0.625rem;
    padding: 0.125rem 0.5rem;
    background: var(--rz-base-200, #eef0f6);
}

.ziur-import .chip-ok { background: #e8f5e9; color: #1b5e20; }
.ziur-import .chip-error { background: #ffebee; color: #b71c1c; }

.ziur-import .import-nota {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7080);
    margin: 0;
}

.ziur-import .import-columnas { margin-bottom: 0.5rem; }

.ziur-import .import-columnas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
}

.ziur-import .import-columnas-lista label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ziur-import .import-columnas-lista label.fija { color: var(--rz-text-secondary-color, #6b7080); cursor: default; }

/* Grilla principal: se desplaza a lo ancho, con las tres primeras columnas fijas */
.ziur-import .import-grilla {
    overflow: auto;
    max-height: 52dvh;
    border: 1px solid var(--rz-base-300, #dcdfe8);
    border-radius: 0.25rem;
    background: var(--rz-base-background-color, #fff);
}

.ziur-import .import-grilla:focus-visible { outline: 2px solid var(--rz-primary, #4340d2); outline-offset: -2px; }

.ziur-import .import-grilla table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.ziur-import .import-grilla th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rz-base-200, #eef0f6);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rz-text-color, #26323b);
    padding: 0.375rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--rz-base-300, #dcdfe8);
}

.ziur-import .import-grilla th.obligatoria { color: #b71c1c; }

.ziur-import .import-grilla th.col-fija,
.ziur-import .import-grilla td.col-fija {
    position: sticky;
    background: var(--rz-base-100, #f3f4f8);
    z-index: 1;
}

.ziur-import .import-grilla th.col-fija { z-index: 3; background: var(--rz-base-200, #eef0f6); }

.ziur-import .import-grilla th:nth-child(1), .ziur-import .import-grilla td:nth-child(1) { left: 0; }
.ziur-import .import-grilla th:nth-child(2), .ziur-import .import-grilla td:nth-child(2) { left: 2rem; }
.ziur-import .import-grilla th:nth-child(3), .ziur-import .import-grilla td:nth-child(3) { left: 4.25rem; }

.ziur-import .import-grilla td {
    padding: 0;
    border-bottom: 1px solid var(--rz-base-200, #eef0f6);
    border-inline-end: 1px solid var(--rz-base-200, #eef0f6);
}

.ziur-import .import-grilla td.col-fija { padding: 0.125rem 0.375rem; text-align: center; }
.ziur-import .import-grilla td.numero { font-variant-numeric: tabular-nums; text-align: end; }
.ziur-import .import-grilla td.estado { line-height: 1; }

.ziur-import .import-grilla td input[type="text"] {
    width: 100%;
    min-width: 7rem;
    border: 0;
    background: transparent;
    padding: 0.3125rem 0.375rem;
    font: inherit;
    color: inherit;
}

.ziur-import .import-grilla td input[type="text"]:focus {
    outline: 2px solid var(--rz-primary, #4340d2);
    outline-offset: -2px;
    background: var(--rz-base-background-color, #fff);
}

.ziur-import .import-grilla td input[readonly] { color: var(--rz-text-secondary-color, #6b7080); }
.ziur-import .import-grilla td input.celda-derecha { text-align: end; font-variant-numeric: tabular-nums; }

.ziur-import .import-grilla tr.fila-con-error > td { background: #fdf0f0; }
.ziur-import .import-grilla tr.fila-con-error > td.col-fija { background: #f9e2e2; }
.ziur-import .import-grilla tr.fila-validada > td { background: #f2f9f3; }
.ziur-import .import-grilla tr.fila-validada > td.col-fija { background: #e6f2e8; }
.ziur-import .import-grilla tr.fila-importada > td { background: #eef4fb; }
.ziur-import .import-grilla tr.fila-importada > td.col-fija { background: #e1ecf8; }

.ziur-import .import-grilla td.celda-error { box-shadow: inset 0 0 0 2px #e57373; }

.ziur-import .fila-vacia td {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #6b7080);
    white-space: normal;
}

.ziur-import .import-paginas {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
}

/* Pie: la grilla de errores a la izquierda y los dos botones a la derecha, como el escritorio */
.ziur-import .import-pie {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.ziur-import .import-errores {
    flex: 1 1 24rem;
    min-width: 0;
    max-height: 11rem;
    overflow: auto;
    border: 1px solid var(--rz-base-300, #dcdfe8);
    border-radius: 0.25rem;
    background: var(--rz-base-background-color, #fff);
}

.ziur-import .import-errores table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.ziur-import .import-errores th {
    position: sticky;
    top: 0;
    background: var(--rz-base-200, #eef0f6);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.375rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--rz-base-300, #dcdfe8);
}

.ziur-import .import-errores td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rz-base-200, #eef0f6);
    white-space: normal;
}

.ziur-import .import-errores tr.renglon-error { cursor: pointer; }
.ziur-import .import-errores tr.renglon-error:hover > td { background: #fdf0f0; }
.ziur-import .import-errores td.numero { font-variant-numeric: tabular-nums; text-align: end; }

.ziur-import .import-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .ziur-import .import-chips { margin-inline-start: 0; }
    .ziur-import .import-grilla { max-height: 44dvh; }
    .ziur-import .import-acciones { width: 100%; }
    .ziur-import .import-acciones .rz-button { flex: 1 1 8rem; }
}

/* Un canal a los lados para que los botones y las marcas no queden pegados al borde */
.ziur-import {
    padding-inline: 0.75rem;
    padding-block-end: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Barra de instrucciones con IA. El documento es la via principal, asi que su
   boton va rotulado y no como un icono suelto perdido a la izquierda.
   --------------------------------------------------------------------------- */

.ziur-barra-ia {
    gap: 0.5rem;
    align-items: stretch;
}

/* El boton de documento: visible, con su rotulo, y sin la lista de archivos debajo */
.ziur-barra-ia .btnUpload .rz-fileupload-buttonbar,
.btnUpload .rz-fileupload-buttonbar {
    padding: 0;
    border: 0;
    background: transparent;
}

.ziur-barra-ia .btnUpload .rz-fileupload-choose {
    height: 100%;
    min-width: 7.5rem;
    white-space: nowrap;
    border-radius: 0.25rem;
}

/* Radzen lista debajo el archivo elegido; aqui estorba porque se procesa al instante */
.ziur-barra-ia .btnUpload .rz-fileupload-content {
    display: none;
}

.ziur-barra-ia .rz-textarea {
    min-height: 3.5rem;
    resize: vertical;
}

/* Lo que esta pasando, mientras pasa */
.ziur-ia-trabajando {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7080);
}

.ziur-ia-trabajando .rz-icon {
    font-size: 1.125rem;
    animation: ziur-gira 1.1s linear infinite;
}

@keyframes ziur-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ziur-ia-trabajando .rz-icon { animation: none; }
}

@media (max-width: 767px) {
    .ziur-barra-ia { flex-wrap: wrap; }
    .ziur-barra-ia .btnUpload .rz-fileupload-choose { min-width: 100%; }
}

/* El boton de documento con aspecto de boton, no de recuadro gris */
.ziur-barra-ia .btnUpload .rz-fileupload-choose {
    background: var(--rz-base-200, #eef0f6);
    border: 1px solid var(--rz-base-400, #c8cddb);
    color: var(--rz-text-color, #26323b);
    font-weight: 500;
    gap: 0.375rem;
}

.ziur-barra-ia .btnUpload .rz-fileupload-choose:hover {
    background: var(--rz-base-300, #dcdfe8);
}

/* El microfono se perdia: el cuadro de texto se comia todo el ancho */
.ziur-barra-ia .rz-textarea {
    flex: 1 1 auto;
    min-width: 0;
}

.ziur-barra-ia .rz-speech-to-text-button {
    flex: 0 0 auto;
    align-self: center;
}

/* Casilla de una ficha: etiqueta al lado, alineada con los recuadros de al lado.
   No se usa RadzenFormField porque con Variant.Flat la etiqueta es position:absolute y se sale. */
.ziur-ficha-casilla {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.5rem;
    padding-left: .25rem;
}

/* ==========================================================================
   Fichas del menu Crear (PanelFicha.razor)

   Los campos se reparten solos segun cuantos traiga cada ficha, con el mismo
   criterio que los filtros de las busquedas: no se fijan anchos por pantalla.
   Un campo puede pedir el doble de sitio (ancho-2) y aun asi baja de linea
   cuando la pantalla se estrecha.
   ========================================================================== */

.ziur-ficha {
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: var(--rz-border-radius, 4px);
    padding: 1rem;
    margin-top: .75rem;
}

.ziur-ficha-titulo {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: 1rem;
}

.ziur-ficha-nombre {
    font-size: 1.05rem;
    font-weight: 600;
}

.ziur-ficha-chip {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #eceef9;
    color: #3d4ab0;
}

.ziur-ficha-chip.nuevo {
    background: #e3f3ea;
    color: #1f7a4d;
}

/* La ficha se parte en dos: a la izquierda quien es el registro y el boton que lo confirma; a la
   derecha, separados por una linea, los campos que se llenan. */
.ziur-ficha-cuerpo {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) 1fr;
    gap: 0 1.25rem;
    align-items: start;
}

.ziur-ficha-identidad {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
    padding-right: 1.25rem;
    border-right: 1px solid var(--rz-base-300, #e0e0e0);
    min-height: 4.5rem;
}

/* en pantalla angosta la linea estorba: la identidad pasa arriba y los campos debajo */
@media (max-width: 700px) {
    .ziur-ficha-cuerpo { grid-template-columns: 1fr; gap: 1rem; }
    .ziur-ficha-identidad {
        border-right: none;
        border-bottom: 1px solid var(--rz-base-300, #e0e0e0);
        padding-right: 0;
        padding-bottom: .9rem;
        min-height: 0;
    }
}

.ziur-ficha-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .85rem 1rem;
    align-items: start;
}

.ziur-ficha-campo.ancho-2 { grid-column: span 2; }
.ziur-ficha-campo.ancho-3 { grid-column: span 3; }

/* en pantalla angosta nadie ocupa dos columnas: no hay dos que ocupar */
@media (max-width: 700px) {
    .ziur-ficha-campo.ancho-2,
    .ziur-ficha-campo.ancho-3 { grid-column: span 1; }
}

.ziur-ficha-campo .rz-form-field { width: 100%; }

/* El codigo que propone el servicio: es un dato, no un campo por llenar */
.ziur-ficha-dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .35rem .25rem;
    min-height: 2.5rem;
    justify-content: center;
}

.ziur-ficha-dato .etiqueta {
    font-size: .7rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, #6b6b6b);
}

.ziur-ficha-dato .valor {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* La accion principal de la ficha, al extremo del titulo */
/* El boton va debajo del codigo, dentro de la columna de identidad: junto a lo que identifica el
   registro y no en una esquina lejos de lo que se esta llenando. */
.ziur-ficha-accion { align-self: stretch; }

/* La tabla de lo que ya existe, debajo de la ficha */
.ziur-ficha-tabla {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rz-base-300, #e0e0e0);
    padding-top: .9rem;
}

.ziur-ficha-tabla-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color, #6b6b6b);
}

.ziur-ficha-tabla-titulo .cuenta {
    font-weight: 500;
    letter-spacing: 0;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--rz-base-200, #eee);
}

.ziur-ficha-tabla .rz-data-row { cursor: pointer; }