/* =============================================================
   DSA Compliance · Escala de CONTROLES (reutilizable, las 3 apps)
   -------------------------------------------------------------
   Radzen viene calibrado para una app de consumo: 16px de texto y
   12px de padding por item del desplegable. En una pantalla de
   gestion con cinco filtros en fila eso se lee como una maqueta.

   AQUI SOLO SE TOCA TIPOGRAFIA. Nada de alturas, paddings internos
   ni tamanos de casilla: la primera version de este fichero bajaba
   --rz-input-height y --rz-dropdown-label-padding-block, y eso
   descoloca la etiqueta respecto a su caja -sale descentrada y
   cortada- porque Radzen calcula la linea base a partir de la
   altura que el mismo define. Reducir la fuente es seguro: la
   altura de linea se deriva de ella y el control se recentra solo.

   Se carga DESPUES del tema de Radzen y con selector html:root
   para ganarle por especificidad, no por orden de carga.
   ============================================================= */

html:root {
    /* Texto de los campos y de las opciones del panel. */
    --rz-input-font-size: 0.875rem;      /* 14px: legible sin gritar */
    --rz-dropdown-item-font-size: 0.875rem;

    /* Esquinas: decorativo, no afecta a la caja. */
    --rz-input-border-radius: 8px;

    /* Chips de la seleccion multiple: son etiquetas, no botones. */
    --rz-chip-font-size: 0.75rem;
    --rz-chip-border-radius: 6px;
}

/* ---- Etiqueta flotante del RadzenFormField ----
   Si mantiene el tamano del valor, compite con el. Es contexto. */
.rz-form-field-label,
.rz-form-field .rz-form-field-label { font-size: 0.78rem; }

/* ---- Alto del panel ----
   Un panel que crece hasta el borde de la ventana tapa el formulario
   de debajo y obliga a cerrarlo para ver que se estaba filtrando. */
.rz-dropdown-items-wrapper,
.rz-multiselect-items-wrapper { max-height: 17rem; }

/* ---- Un desplegable nunca por debajo de lo legible ----
   Sin ancho minimo, en una fila flexible la etiqueta se recorta a
   "V..." y el filtro deja de decir por que esta filtrando. */
.dsa-toolbar .rz-dropdown,
.dsa-toolbar .rz-multiselect,
.dsa-filtro .rz-dropdown,
.dsa-filtro .rz-multiselect { min-width: 150px; }

/* =============================================================
   Barra de filtros
   -------------------------------------------------------------
   Flex y no rejilla: con rejilla hay que decidir en que columna cae
   cada cosa, y las acciones acababan compartiendo celda con el
   ultimo filtro -se solapaban-. Asi cada filtro pide su ancho
   minimo, crece si sobra sitio y baja de linea cuando no cabe.
   ============================================================= */
.dsa-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    padding: .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 1rem;
}
.dsa-toolbar > * { flex: 1 1 180px; min-width: 0; }
.dsa-toolbar .rz-form-field,
.dsa-toolbar .rz-dropdown,
.dsa-toolbar .rz-multiselect,
.dsa-toolbar .rz-textbox { width: 100%; }

/* La busqueda libre pesa mas que un filtro cerrado: parte de mas ancho. */
.dsa-toolbar__wide { flex: 2 1 260px; }

/* Las acciones no se estiran: ocupan lo suyo y se van a la derecha. */
.dsa-toolbar__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: .4rem;
    align-items: center;
}
@media (max-width: 720px) {
    .dsa-toolbar__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* =============================================================
   Tarjetas de indicador (KPI)
   -------------------------------------------------------------
   El mismo bloque que ya usa el listado de pedidos. Se sube aqui
   para que cualquier pantalla pueda encabezarse con cifras sin
   volver a inventarse el estilo.
   ============================================================= */
.dsa-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.dsa-kpi {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: .9rem 1rem;
}
.dsa-kpi::after {
    content: "";
    position: absolute;
    top: -28px; right: -28px;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--dsa-kpi-tint, #eef2ff);
    opacity: .55;
}
.dsa-kpi__value {
    position: relative; z-index: 1;
    font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #0f172a;
}
.dsa-kpi__unit { font-size: .8rem; font-weight: 600; color: #64748b; margin-left: .25rem; }
.dsa-kpi__label { position: relative; z-index: 1; font-size: .82rem; font-weight: 600; color: #334155; margin-top: .35rem; }
.dsa-kpi__hint  { position: relative; z-index: 1; font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.dsa-kpi--good { --dsa-kpi-tint: #dcfce7; }
.dsa-kpi--warn { --dsa-kpi-tint: #fee2e2; }
.dsa-kpi--info { --dsa-kpi-tint: #dbeafe; }
.dsa-kpi--cool { --dsa-kpi-tint: #fef3c7; }

/* ---- Opcion del desplegable de tipo de encargo ----
   El nombre solo no basta: «Puntual» y «Proyecto» son dos palabras y
   el usuario elige la primera. Con una linea de para-que-sirve,
   elige el que le toca. */
.tipo-op { display: flex; align-items: flex-start; gap: .5rem; padding: .15rem 0; }
.tipo-op .rzi { font-size: 18px; color: #6366f1; margin-top: 2px; flex-shrink: 0; }
.tipo-op__n { font-size: .85rem; font-weight: 650; color: #0f172a; line-height: 1.2; }
.tipo-op__d { font-size: .74rem; color: #94a3b8; line-height: 1.35; max-width: 46ch; }
.tipo-aviso {
    display: flex; align-items: center; gap: .3rem;
    font-size: .74rem; color: #b45309; margin-top: .25rem;
}
.tipo-aviso .rzi { font-size: 15px; }

/* =============================================================
   Filtros en Syncfusion
   -------------------------------------------------------------
   Los listados usan controles de Syncfusion en la barra de filtros.
   Aqui SOLO se iguala la tipografia con el resto de la pantalla:
   nada de alturas ni paddings internos, que es justo lo que
   descoloco los de Radzen en la primera version de este fichero.
   ============================================================= */
.dsa-toolbar .e-input-group,
.dsa-toolbar .e-control-wrapper,
.dsa-f.e-input-group,
.dsa-f .e-input,
.dsa-f input.e-input { font-size: .875rem; }

/* Los controles de Syncfusion traen margen propio pensado para un
   formulario; en una fila de filtros sobra y descuadra la linea. */
.dsa-toolbar .e-input-group,
.dsa-toolbar .e-control-wrapper { margin-bottom: 0; }

/* Que el filtro ocupe su hueco de la fila flexible. */
.dsa-toolbar .e-control-wrapper,
.dsa-toolbar .e-input-group { width: 100%; }
.dsa-toolbar__actions .e-btn { white-space: nowrap; }

/* =============================================================
   Legibilidad al pasar el ratón
   -------------------------------------------------------------
   Un botón plano que al hover cambia el fondo Y el color del texto
   se queda ilegible medio segundo. El fondo sí cambia -es la señal
   de que se puede pulsar-; el texto se queda como estaba.
   ============================================================= */
.dsa-toolbar .rz-button.rz-shade-lighter:hover,
.dsa-toolbar .rz-button.rz-variant-flat:hover,
.dsa-toolbar .rz-button.rz-variant-text:hover,
.dsa-form-footer .rz-button.rz-variant-flat:hover,
.ord-filtros .rz-button:hover { color: inherit; }

.dsa-toolbar .rz-button.rz-variant-flat,
.dsa-toolbar .rz-button.rz-variant-text,
.ord-filtros .rz-button.rz-variant-flat { color: #334155; }
.dsa-toolbar .rz-button.rz-variant-flat:hover,
.dsa-toolbar .rz-button.rz-variant-text:hover,
.ord-filtros .rz-button.rz-variant-flat:hover { color: #0f172a; background: #eef2ff; }

/* =============================================================
   Borde de los filtros
   -------------------------------------------------------------
   El tema de Syncfusion dibuja el campo con un borde inferior y
   los laterales casi transparentes: en una barra sobre fondo
   blanco la silueta no se cierra y el filtro parece flotar.
   Se le da caja completa, como la tienen los de Radzen.
   ============================================================= */
.dsa-toolbar .e-input-group,
.dsa-toolbar .e-control-wrapper.e-ddl,
.dsa-toolbar .e-date-range-wrapper,
.ord-filtros .e-input-group,
.ord-filtros .e-control-wrapper.e-ddl,
.ord-filtros .e-date-range-wrapper,
.mkt-filter-line .e-control-wrapper,
.mkt-filter-line .e-input-group {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px;
    background: #fff;
}
/* El tema pinta la linea inferior con un pseudo-elemento; sobra al tener caja. */
.dsa-toolbar .e-input-group::before, .dsa-toolbar .e-input-group::after,
.ord-filtros .e-input-group::before, .ord-filtros .e-input-group::after,
.mkt-filter-line .e-input-group::before, .mkt-filter-line .e-input-group::after { display: none; }

.dsa-toolbar .e-input-group:hover,
.ord-filtros .e-input-group:hover,
.mkt-filter-line .e-input-group:hover { border-color: #94a3b8 !important; }

.dsa-toolbar .e-input-group.e-input-focus,
.ord-filtros .e-input-group.e-input-focus,
.mkt-filter-line .e-input-group.e-input-focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

/* El asistente sin motor: un aviso que dice qué pasa y qué hacer. */
.ia-motor-ko {
    display: flex; gap: .7rem; align-items: flex-start;
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem;
    font-size: .85rem; line-height: 1.45;
}
.ia-motor-ko .rzi { font-size: 22px; flex-shrink: 0; }
.ia-motor-ko b { display: block; margin-bottom: .1rem; }
.ia-motor-ko__detalle {
    margin-top: .35rem; font-family: ui-monospace, Consolas, monospace;
    font-size: .74rem; color: #b91c1c; opacity: .8;
    overflow-wrap: anywhere;
}

/* =============================================================
   Calendario: distinguir lo agendado de lo que vence
   -------------------------------------------------------------
   Un vencimiento no es una cita. La cita se atiende el día que
   toca; el vencimiento hay que verlo ANTES. Se marcan con borde
   izquierdo grueso para que salten a la vista dentro de la rejilla.
   ============================================================= */
.rz-scheduler .rz-event[style*="#B91C1C"],
.rz-scheduler .rz-event[style*="#15803D"],
.rz-scheduler .rz-event[style*="#4338CA"] { border-left: 4px solid rgba(0,0,0,.35); }

.rz-scheduler .rz-event { font-size: .74rem; line-height: 1.25; }

/* =============================================================
   .dsa-grid — rejilla de datos
   -------------------------------------------------------------
   Solo tipografia, espaciado y cabecera. NO se tocan alturas de
   fila ni tamanos de control: cambiarlos descoloca las celdas
   con badges y botones, que es como se rompio la ultima vez.
   ============================================================= */

.dsa-grid {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

.dsa-grid .rz-grid-table thead th {
    background: #f8fafc;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #64748b;
}

.dsa-grid .rz-grid-table tbody td { font-size: .85rem; color: #334155; }
.dsa-grid .rz-grid-table tbody tr:hover td { background: #f8fafc; }

/* La paginacion pega con el borde redondeado en lugar de flotar suelta. */
.dsa-grid .rz-paginator { background: #fcfcfd; border-top: 1px solid #f1f5f9; }

/* ---- Cabecera de pagina de listado ---- */
.cc-cab { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; }
.cc-cab > .rz-button:first-of-type { margin-left: auto; }
.cc-titulo {
    display: flex; align-items: center; gap: .5rem;
    margin: 0; font-size: 1.35rem; font-weight: 700; color: #0f172a;
}
.cc-titulo .rzi { font-size: 26px; color: #4f46e5; }
.cc-sub { margin: .2rem 0 0; font-size: .86rem; color: #64748b; }

/* ---- Celda de identidad: inicial + nombre + metadatos ---- */
.cc-cli { display: flex; align-items: center; gap: .6rem; }
.cc-cli__av {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4c3cc9; font-size: .74rem; font-weight: 800;
}
.cc-cli__txt { min-width: 0; }
.cc-cli__n { font-weight: 650; color: #0f172a; line-height: 1.2; }
.cc-cli__m { font-size: .74rem; color: #94a3b8; }

.cc-cont__m { font-size: .75rem; color: #94a3b8; }

.cc-pais b { color: #0f172a; margin-right: .25rem; }
.cc-pais { color: #64748b; font-size: .82rem; }

/* Un dato que falta se marca, no se deja en blanco: en blanco parece que no aplica. */
.cc-falta { display: inline-flex; align-items: center; gap: .25rem; color: #b45309; font-size: .78rem; }
.cc-falta .rzi { font-size: 15px; }

/* ---- Selector de sociedad ----
   El pais en su propia pastilla: pegado al nombre se leia «ESDSA Nexus», que no es
   ni un pais ni una empresa. */
.sel-soc { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.sel-soc__pais {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    background: #eef2ff; color: #4c3cc9;
    border-radius: 5px; padding: .1rem .3rem; line-height: 1.5;
}
.sel-soc__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }