/* Tablas: .table-app, estados de cobro y tabla de conceptos. */

/* Estado cobro indicadores (albaranes, facturas) */
.estado-cobro-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.estado-cobro-pendiente { background-color: #dc3545; } /* Rojo - Pendiente */
.estado-cobro-parcial   { background-color: #ffc107; } /* Amarillo - Cobrado Parcialmente */
.estado-cobro-completo  { background-color: #198754; } /* Verde - Cobrado */

/* Columnas fijas en la tabla de conceptos editable (arrastrar, concepto,
   cantidad, precio, importe, borrar): con table-layout:auto el editor de
   texto que se crea al añadir una línea (barra de herramientas sin cortes)
   ensanchaba "Concepto" y rompía la tabla. Con fixed los anchos los manda la
   cabecera y "Concepto" se queda con lo que sobra. Solo la de 6 columnas: la
   de Presupuesto no editable (4, sin arrastrar ni borrar) no se toca. */
#tblConceptos:has(> thead th:nth-child(6)) {
    table-layout: fixed;
    width: 100%;
}

#tblConceptos:has(> thead th:nth-child(6)) > thead th:nth-child(1) { width: 32px; }
#tblConceptos:has(> thead th:nth-child(6)) > thead th:nth-child(3) { width: 96px; }
#tblConceptos:has(> thead th:nth-child(6)) > thead th:nth-child(4),
#tblConceptos:has(> thead th:nth-child(6)) > thead th:nth-child(5) { width: 116px; }
#tblConceptos:has(> thead th:nth-child(6)) > thead th:nth-child(6) { width: 48px; }

/* El editor ocupa su celda y su barra de herramientas se parte en varias
   líneas si no cabe, en vez de empujar la columna */
#tblConceptos .note-editor {
    width: 100%;
    min-width: 0;
}

#tblConceptos .note-toolbar {
    white-space: normal;
}

#tblConceptos .note-toolbar .note-btn-group {
    white-space: nowrap;
}

/* ---- Aspecto de la tabla de conceptos (vale también para las filas que
   añade el JS: todo va por clases que ya traen) ---- */

/* Cabecera como la de los listados (.table-app) */
#tblConceptos > thead th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: .5rem;
}

#tblConceptos > thead th:nth-child(n+3):nth-child(-n+5) {
    text-align: right;
}

/* Filas separadas por una línea fina en vez de bloques de color */
#tblConceptos > tbody > tr > td {
    vertical-align: top;
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .06));
}

#tblConceptos > tbody > tr > td.drag-handle {
    padding-top: 1rem;
}

/* Campos sin sombra y más discretos; el importe (calculado) como texto */
#tblConceptos .form-control {
    box-shadow: none;
}

#tblConceptos input[type="number"],
#tblConceptos input[name$=".PrecioUnitario"],
#tblConceptos input[name$=".Importe"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#tblConceptos input[name$=".Importe"][readonly] {
    background: transparent;
    border-color: transparent;
    font-weight: 600;
}

/* Capítulo: fondo de marca muy suave y acento a la izquierda (en vez del
   azul table-info) */
#tblConceptos > tbody > tr.fila-capitulo {
    --bs-table-bg: var(--brand-050);
}

#tblConceptos > tbody > tr.fila-capitulo > td:first-of-type {
    box-shadow: inset 3px 0 0 var(--brand-600);
}

#tblConceptos > tbody > tr.fila-capitulo .note-editable,
#tblConceptos > tbody > tr.fila-capitulo textarea {
    font-weight: 600;
}

/* Bloque de texto: sin fondo, en gris */
#tblConceptos > tbody > tr.fila-texto {
    --bs-table-bg: transparent;
}

#tblConceptos > tbody > tr.fila-texto .note-editable,
#tblConceptos > tbody > tr.fila-texto textarea {
    color: var(--bs-secondary-color);
}

/* Subtotal: sin el amarillo table-warning; línea discontinua encima y la
   etiqueta alineada a la derecha, junto a su importe */
#tblConceptos > tbody > tr.fila-subtotal {
    --bs-table-bg: transparent;
}

#tblConceptos > tbody > tr.fila-subtotal > td {
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
}

#tblConceptos > tbody > tr.fila-subtotal input[name$=".Descripcion"] {
    text-align: right;
    background: transparent;
    border-color: transparent;
}

#tblConceptos > tbody > tr.fila-subtotal input[name$=".Descripcion"]:focus {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* Borrar línea: icono discreto en vez de botón rojo macizo */
#tblConceptos .btnRemoveLinea {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    box-shadow: none;
}

/* Editor de texto de "Concepto" (Summernote Lite) con el mismo aspecto que
   un .form-control: mismo borde, radio, relleno y anillo de foco; sin la
   barra de redimensionar ni el marco gris por defecto del editor. */
#tblConceptos .note-editor.note-frame {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Mismo foco que .form-control:focus (tokens.css) */
#tblConceptos .note-editor.note-frame.is-active {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

#tblConceptos .note-editor .note-statusbar {
    display: none;
}

#tblConceptos .note-editor .note-editable,
#tblConceptos .note-editor .note-placeholder {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
}

#tblConceptos .note-editor .note-placeholder {
    color: var(--bs-secondary-color);
    opacity: .75;
}

#tblConceptos .note-editor .note-editable p {
    margin-bottom: 0;
}

/* Barra de herramientas plana: solo aparece al editar (ver .is-active abajo) */
#tblConceptos .note-editor .note-toolbar {
    padding: .25rem .375rem;
    background: var(--bs-tertiary-bg);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

#tblConceptos .note-editor .note-toolbar .note-btn {
    padding: .2rem .45rem;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--bs-body-color);
}

#tblConceptos .note-editor .note-toolbar .note-btn:hover,
#tblConceptos .note-editor .note-toolbar .note-btn.active {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* "También puedes buscar conceptos existentes": fuera del flujo, para que
   los totales (a la derecha) suban a su misma altura en vez de ir debajo */
.panel-body:has(> .documento-totales) > #tblConceptos ~ div:has(#btnBuscarConceptosExistentes) {
    position: absolute;
    margin-top: 1rem;
}

/* Todos los campos de una fila igual de altos que el editor de "Concepto":
   height:1px en la celda hace que el height:100% de sus campos se calcule
   sobre la altura real de la fila (la que marca el editor). */
#tblConceptos > tbody > tr > td {
    height: 1px;
}

#tblConceptos > tbody > tr > td > input.form-control {
    height: 100%;
}

/* Mientras se escribe en el concepto el editor crece: ahí los campos se
   quedan con su alto normal en vez de estirarse con él */
#tblConceptos > tbody > tr.concepto-row-active > td > input.form-control {
    height: auto;
}

#tblConceptos .note-editor.note-frame {
    margin-bottom: 0;
}

/* UX compacto para tabla de conceptos con editor */
#tblConceptos .drag-handle {
    cursor: grab;
    color: var(--bs-secondary-color);
    user-select: none;
}

#tblConceptos .drag-handle:active {
    cursor: grabbing;
}

#tblConceptos tbody tr.concepto-row {
    transition: background-color .15s ease;
}

#tblConceptos tbody tr.concepto-row.concepto-row-active {
    background: var(--bs-tertiary-bg);
}

#tblConceptos .concepto-note-editor .note-toolbar {
    display: none;
    border-bottom: 1px solid var(--bs-border-color);
}

#tblConceptos .concepto-note-editor.is-active .note-toolbar {
    display: block;
}

#tblConceptos .concepto-note-editor .note-editable {
    /* Plegado: una sola línea, el mismo alto que un .form-control (1.5rem de
       línea + .375rem de relleno arriba y abajo); al editar se abre */
    min-height: 2.25rem;
    max-height: 2.25rem;
    overflow-y: hidden;
}

#tblConceptos .concepto-note-editor.is-active .note-editable {
    min-height: 90px;
    max-height: 220px;
    overflow-y: auto;
}

/* Marco para una tabla secundaria/embebida dentro de un .panel-body con más
   contenido alrededor (tarjetas, gráficos, otros campos): a diferencia de
   .panel.panel-table -pensado para un panel cuyo único contenido es la
   tabla-, aquí la tabla no hereda ningún borde propio y queda "flotando"
   sin encuadre. Se aplica a mano en el markup (class="table-responsive
   table-responsive-boxed") allí donde haga falta, con el mismo recorte por
   overflow:hidden que .panel-table usa para redondear las esquinas. */
.table-responsive-boxed {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Fila de totales del resumen de IVA (AltaFacturaProveedor.cshtml): mismo
   tono que la cabecera de .table-app en vez del azul sólido de antes. */
.table-app tbody tr.fila-total-iva td {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-top: 2px solid var(--bs-border-color, #dee2e6);
}

/* Bootstrap solo fija overflow-x:auto en .table-responsive, sin tocar
   overflow-y; por la propia especificación CSS ("visible" se computa
   como "auto" si el otro eje no lo es), ese eje queda con scroll
   vertical implícito y puede aparecer sin que la tabla lo necesite
   -el mismo caso que #mainPage #myTabs-. Se fija explícito a hidden
   para toda la app: el scroll que sí hace falta (horizontal, cuando
   la tabla no cabe) sigue funcionando igual. */
.table-responsive {
    overflow-y: hidden;
}

/* Tabla estándar de listados (filtros + resultados). Estilo "limpio" al
   estilo de referencia CONSTRUTEC: sin rejilla (nada de bordes
   verticales ni zebra-striping), cabecera pequeña en mayúsculas sobre
   fondo gris tenue, filas separadas solo por una línea horizontal fina
   y resaltado sutil de marca al pasar el ratón. Las clases
   .table-striped/.table-hover se dejan en el markup de las vistas (no
   hace falta tocar cada vista una a una): se neutralizan/redirigen
   aquí vía las variables de Bootstrap. */
.table-app {
    width: 100%;
    margin-bottom: 0;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--brand-050);
}

.table-app th,
.table-app td {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Solo cuando el badge es el único contenido de la celda (p.ej. un
   código o un estado que llena su propia columna): en Acciones
   (data-exclude, botones/badges en fila) o cuando comparte celda con
   un botón (p.ej. "Confirmado" + "Sobreescribir" en Fichajes), un
   badge al 100% de ancho rompería la fila.
   Ojo: :only-child solo cuenta elementos, no texto. Si el badge va junto
   a texto suelto (una fecha, un número...), ese texto tiene que ir en su
   propio <span>; si no, el badge se estira a todo el ancho y desborda
   (pasaba en Vencimiento de Facturas de proveedor). */
.table-app td:not([data-exclude]) .badge:only-child {
    width: 100%;
    text-align: center;
}

/* Celdas con "bolita" de estado + texto (p.ej. Nº de parte): siempre en
   fila, nunca se parten en dos líneas por falta de espacio. */
.table-app td:has(.estado-indicator) {
    white-space: nowrap;
}

.table-app thead th {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.table-app thead th:last-child {
    border-right: 0;
}

/* wwwroot/js/tableSorter.js añade el icono de orden (▲▼⇅) a cada
   <th data-sort> DESPUÉS de la carga inicial. Sin reservarle hueco,
   ese icono ensancha la cabecera tras el render y puede hacer que la
   tabla, donde no hacía falta al principio, acabe necesitando el
   scroll horizontal de .table-responsive. Reservando el espacio y
   sacando el icono del flujo, el ancho de la tabla no cambia al
   inyectarlo. */
.table-app thead th[data-sort] {
    position: relative;
    padding-right: 1.75rem;
}

.table-app thead th .sort-icon {
    position: absolute;
    margin-left: .6rem;
    top: 50%;
    transform: translateY(-50%);
}

.table-app tbody td {
    vertical-align: middle;
    text-align: left;
    padding-top: .65rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .06));
}

/* La columna Acciones no lleva texto, es un grupo de iconos alineado
   a la derecha (justify-content:end en el .d-flex de dentro); el
   centrado de texto de arriba no le pega. */
.table-app tbody td[data-exclude] {
    text-align: right;
}

.table-app tbody tr:last-child td {
    border-bottom: 0;
}

/* .table-group-divider (Bootstrap) añade un borde de 2px justo debajo
   de la cabecera -en algunas vistas, como Clientes- que desentona con
   el resto de .table-app: filas separadas solo por líneas finas de
   1px, sin ningún borde "de acento". Se anula para que las tablas
   básicas queden todas igual. */
.table-app .table-group-divider {
    border-top: 0;
}

/* Fichajes: fila ya registrada (antes en un <style> de Fichajes/Index.cshtml) */
.fila-registrada {
    background-color: #DDEBF6 !important;
}

/* Listado vacío (<sin-resultados>, TagHelpers/SinResultadosTagHelper.cs).
   Antes era un container > row > col-md-6 con text-lg / mr-3 (Bootstrap 4,
   no existen en el 5) y, en la mayoría, text-secundary (mal escrito): el
   texto salía sin el gris previsto. */
.sin-resultados {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Textos recortados con "…" dentro de una celda (<div class="text-truncate"
   style="max-width: 360px">): sin esto la columna nunca baja de ese max-width,
   porque para el ancho mínimo de la tabla cuenta el texto entero en una línea,
   y el listado acaba con scroll horizontal (Avisos: Dirección + Descripción).
   width 0 + min-width 100%: el div ocupa la celda pero no le impone ancho, así
   que la columna encoge y el "…" aparece antes; el max-width de la vista sigue
   siendo el tope cuando sobra sitio. */
.table-app td > .text-truncate {
    width: 0;
    min-width: 100%;
}

/* <operario-asignado> sin operario: resaltado para ver de un vistazo lo pendiente de asignar */
.sin-asignar {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .375rem;
    background: color-mix(in srgb, #b25e00 12%, white);
    color: #8a4a00;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}