/* Encabezados de tabla mas grandes y en negritas — pedido del dueño.
   Antes: text-sm (14px) semibold (600), como el resto del texto de la tabla. */
.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn {
    font-size: 0.9375rem;
    font-weight: 700;
}

/* El contenido de las filas tambien un poco mas grande, no solo el encabezado. */
.fi-ta-text {
    font-size: 0.9rem;
}

/* Tablas mas compactas — Filament trae padding-block:1rem por celda (el
   doble que el sistema original), lo que deja huecos enormes entre filas
   en pantallas con muchas columnas. Se recorta a la mitad, estilo
   hoja-de-calculo/SAP, sin tocar --spacing global (afectaria botones y
   formularios tambien).

   2026-10-10: pedido del dueño, "en todas las tablas quita el espacio
   entre columnas" — se angosta tambien el padding-inline (el espacio
   horizontal entre una columna y la siguiente), sin tocar padding-block
   (alto de fila, ya resuelto arriba). */
.fi-ta-text,
.fi-ta-text:not(.fi-inline) {
    padding-inline: 0.25rem;
    padding-block: 0.375rem;
}

.fi-ta-header-cell {
    padding-inline: 0.25rem;
    padding-block: 0.5rem;
}

.fi-ta-header-cell:first-of-type {
    padding-inline-start: 1rem;
}

.fi-ta-header-cell:last-of-type {
    padding-inline-end: 1rem;
}

/* Botones de acciones por fila (Aceptar/Descargar/Detalle/.../Editar en
   Cotizaciones y similares): al volverlos solo-icono (`->iconButton()`)
   sobraba el mismo hueco que tenian con el texto. Luego se pidieron un
   poco mas grandes (`->iconSize(IconSize::Large)` en PHP) y con un poco
   mas de separacion entre si para que no se vean amontonados. */
.fi-ta-actions {
    gap: 0.5rem;
}

/* El badge de Estado (Disponible/Rentado/...) de Equipos un poco mas
   grande: es lo primero que se busca con la vista en esa lista. Solo esa
   columna --el resto de los badges del sistema (conteos, semaforos de
   poliza) se quedan en su tamaño normal. */
.badge-estado-grande .fi-badge {
    font-size: 0.875rem;
    padding-inline: 0.625rem;
    padding-block: 0.3rem;
}

/* Marca y Poliza en Vehiculos: en vez de estirar la columna al texto mas
   largo (empuja todo lo demas fuera de pantalla), se topa el ancho y el
   texto se va a la siguiente linea — para que quepan mas columnas sin
   tener que hacer scroll horizontal. */
.col-angosta .fi-ta-text {
    max-width: 8rem;
    white-space: normal;
}

/* Lo mismo, un poco mas ancho, para nombres de cliente y de obra (Entradas a
   patio, 2026-10-22): a dos renglones en vez de empujar "Tipo" y "Recibir"
   fuera de la pantalla. */
.col-media .fi-ta-text {
    max-width: 13rem;
    white-space: normal;
}

/* Todas las tablas del sistema: el hueco real no es solo la tabla
   (`.fi-ta-table`) sino la TARJETA completa (`.fi-ta-ctn`, el div con el
   borde/ring redondeado) — Filament la estira a los 1376px del área de
   contenido aunque la tabla tenga pocas columnas angostas (Proveedores,
   Accesorios, Vehículos...). Angostar solo `.fi-ta-table` deja la tabla
   flotando lejos del borde, que se queda ancho ("faltan bordes"). Angostando
   la tarjeta completa, el borde queda pegado al contenido, estilo
   hoja-de-cálculo — pedido explícito del dueño: "así como está la de
   accesorios" para todas las tablas con mucho espacio en blanco.
   Una tabla con columnas anchas de verdad (muchas columnas, texto largo)
   no se ve afectada: `fit-content` nunca encoge más de lo que el contenido
   necesita, solo deja de estirar de más cuando sobra espacio.
*/
.fi-ta-ctn {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.fi-ta-table {
    width: auto;
    min-width: 0;
}

/* Barra de menú de arriba: a 1440px de ancho, los 10 grupos (Directivo,
   Catálogos... Taller) necesitan ~1390px y solo hay ~1243px, así que
   "Diesel" y "Taller" se caen a una segunda hilera. Pedido del dueño: que
   quepan todos en una sola. Se angosta el espaciado entre botones, el
   padding de cada uno y el tamaño de letra — lo suficiente para que los
   ~1390px necesarios bajen por debajo del ancho disponible, medido con
   Playwright contra el sitio real, no a ojo. */
.fi-topbar-nav-groups {
    gap: 4px 2px;
}

.fi-topbar-item-btn {
    padding-inline: 0.25rem;
    padding-block: 0.375rem;
    gap: 0.1875rem;
    font-size: 0.75rem;
}

/* Foto de Empleados/Vehiculos en el formulario: sin esto, el recuadro de
   Filepond ocupa el 100% de su columna (media pantalla) aunque la foto
   real sea angosta — de ahi las barras negras enormes a los lados. Se topa
   el ancho del visor; el alto ya lo limita imagePreviewHeight() en PHP. */
.foto-compacta .filepond--root {
    max-width: 10rem;
}

/* Foto de Vehiculos: mas chica todavia que foto-compacta, para que no se
   sienta como un bloque propio arriba del formulario (pedido del dueño,
   2026-10-08) — del mismo tamaño que la columna de la tabla (80px). */
.foto-chica .filepond--root {
    max-width: 5rem;
}

/* El boton de "abrir en nueva pestaña" de Filepond (`openable()`) queda
   tapado por la capa de la vista previa de la imagen (`.filepond--image-
   preview-wrapper`, z-index:2) — el clic le pega a la foto, no al botón, y
   parece que "no abre" (pedido del dueño, 2026-10-09). Se sube el icono
   por encima de esa capa. */
.filepond--open-icon {
    position: relative;
    z-index: 3;
}

/* Las pantallas con el renglon de "Filtros" arriba (Ordenes de Salida por
   facturar, Emision de facturas recurrentes, Facturas Emitidas/Canceladas,
   Limpiezas, Historial de recolecciones): la tarjeta sigue compacta, del
   ancho de sus columnas (la regla `fit-content` de arriba), pero con un
   minimo para que los tres filtros quepan en una hilera. La tabla llena la
   tarjeta, asi que solo se reparte espacio extra cuando la tabla es mas
   angosta que ese minimo (Facturas Canceladas, 3 columnas). Estirarlas a
   todo el ancho de la pagina dejaba un hueco enorme entre columnas. */
.fi-ta-ctn:has(.fi-ta-filters-above-content-ctn) {
    min-width: min(100%, 44rem);
}

.fi-ta-ctn:has(.fi-ta-filters-above-content-ctn) .fi-ta-table {
    width: 100%;
}

/* El bloque de filtros: titulo y "Resetear" arriba, los campos debajo en una
   sola hilera de columnas iguales, con aire parejo. */
.fi-ta-filters-above-content-ctn {
    padding-inline: 0;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters {
    padding: 1rem 1rem 1.25rem;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters-header {
    margin-bottom: 0.75rem;
}

/* Las celdas de boton ("Ver", "Facturar", "Imprimir", "Asignar"...) se
   quedan en una linea, sin partirse. */
.fi-ta-text-item.fi-color:has(.fi-icon),
.fi-ta-text:has(.fi-ta-text-item .fi-icon) {
    white-space: nowrap;
}

/* Vehiculos y Empleados: celdas y encabezados mas compactos (pedido del
   dueño, 2026-10-16) para que todas las columnas quepan en pantalla sin
   scroll horizontal. */
.fi-resource-vehiculos .fi-ta-cell,
.fi-resource-empleados .fi-ta-cell {
    padding-block: 0.25rem;
}

.fi-resource-vehiculos .fi-ta-cell .fi-ta-text,
.fi-resource-empleados .fi-ta-cell .fi-ta-text,
.fi-resource-vehiculos .fi-ta-cell .fi-ta-icon,
.fi-resource-empleados .fi-ta-cell .fi-ta-icon {
    padding-inline: 0.375rem;
    padding-block: 0.125rem;
    font-size: 0.8125rem;
}

.fi-resource-vehiculos .fi-ta-header-cell,
.fi-resource-empleados .fi-ta-header-cell {
    padding-inline: 0.375rem;
    padding-block: 0.375rem;
    font-size: 0.75rem;
}

/* "Bitacoras" de Clientes, como el original: la fila entera pintada según
   los días que faltan para el seguimiento (CotizacionBitacorasTable). */
.fi-ta-row.fila-semaforo-verde > td { background-color: #bbf7d0 !important; }
.fi-ta-row.fila-semaforo-amarillo > td { background-color: #fef08a !important; }
.fi-ta-row.fila-semaforo-rojo > td { background-color: #fecaca !important; }
.fi-ta-row.fila-semaforo-verde > td .fi-ta-text-item,
.fi-ta-row.fila-semaforo-amarillo > td .fi-ta-text-item,
.fi-ta-row.fila-semaforo-rojo > td .fi-ta-text-item { color: #111827; }

/* Tabla de documentos del modal "Cobro de documentos por cliente" (2026-10-22):
   filas bajas y letra chica, como una hoja de calculo; cada renglon es una
   factura y con muchas el modal se hacia larguisimo. */
.tabla-cobro th,
.tabla-cobro td {
    padding-block: 0.125rem;
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
}

.tabla-cobro .fi-input-wrp {
    min-height: 0;
}

.tabla-cobro .fi-input {
    padding-block: 0.1875rem;
    font-size: 0.8125rem;
}

/* Semáforo Rentas Fiscales / No Fiscales (2026-10-22): tabla HTML sencilla en
   vez de la de Filament, que pintaba 6 MB para ~440 clientes y tardaba en
   cargar. Mismo aspecto que las demás tablas: tarjeta del ancho de sus
   columnas, encabezados en negritas y montos a la derecha. Los colores de las
   celdas son los mismos que tenía la pantalla, con letra oscura para que se
   lean también en modo oscuro. */
/* La tarjeta de Filament acomoda a sus hijos en fila: aquí van uno debajo del otro. */
.fi-ta-ctn.semaforo {
    display: block;
}

.semaforo-cuenta {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.semaforo-vacio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--gray-500);
}

.semaforo-tabla {
    border-collapse: collapse;
    font-size: 0.9rem;
}

.semaforo-tabla th,
.semaforo-tabla td {
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--gray-200);
    white-space: nowrap;
}

.dark .semaforo-tabla th,
.dark .semaforo-tabla td {
    border-color: rgb(255 255 255 / 0.1);
}

.semaforo-tabla th {
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
}

.semaforo-tabla th:first-child,
.semaforo-tabla td.cliente {
    text-align: start;
    padding-inline-start: 1rem;
}

.semaforo-tabla td {
    text-align: end;
}

.semaforo-tabla td:last-child,
.semaforo-tabla th:last-child {
    padding-inline-end: 1rem;
}

.semaforo-orden {
    cursor: pointer;
    user-select: none;
}

.semaforo-orden span {
    font-size: 0.7rem;
}

.semaforo-tabla tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

.dark .semaforo-tabla tbody tr:nth-child(even) {
    background-color: rgb(255 255 255 / 0.03);
}

.semaforo-tabla .rojo { background-color: #fecaca; color: #111827; }
.semaforo-tabla .amarillo { background-color: #fef08a; color: #111827; }
.semaforo-tabla .verde { background-color: #bbf7d0; color: #111827; }

.semaforo-tabla td.total,
.semaforo-tabla tfoot td {
    font-weight: 700;
}

.semaforo-tabla tfoot td {
    border-top-width: 2px;
}

/* Fecha póliza y Pago póliza en Vehículos (pedido del dueño, 2026-10-23):
   el cuadro de color más grande, y relleno sólido en rojo y amarillo para
   que lo que vence se vea de lejos; el verde se queda clarito. */
.fecha-semaforo .fi-badge {
    font-size: 0.875rem;
    font-weight: 600;
    padding-inline: 0.625rem;
    padding-block: 0.3rem;
    min-width: 5.25rem;
}

.fecha-semaforo .fi-badge.fi-color-danger {
    background-color: var(--color-600);
    color: #fff;
}

.fecha-semaforo .fi-badge.fi-color-warning {
    background-color: var(--color-400);
    color: #111827;
}

/* Nombre de un documento de papelería: los que vienen del sistema viejo no
   traen espacios, así que se parten donde sea para verse completos. */
.nombre-documento {
    overflow-wrap: anywhere;
    resize: none;
}

/* Indicadores de arriba de Vehículos y Empleados
   (indicadores-vencimiento.blade.php). */
.indicadores-vencimiento {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.indicadores-vencimiento .indicador {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-200);
    border-left-width: 6px;
    border-radius: 0.75rem;
    background-color: #fff;
    text-align: start;
    cursor: pointer;
}

.indicadores-vencimiento .indicador:hover {
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
}

.indicador-warning { border-left-color: #f59e0b !important; }
.indicador-danger { border-left-color: #dc2626 !important; }

.indicador-conteo {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.indicador-warning .indicador-conteo { color: #b45309; }
.indicador-danger .indicador-conteo { color: #b91c1c; }
.indicador-vacio .indicador-conteo { color: var(--gray-400); }

.indicador-etiqueta {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.indicador-activo.indicador-warning { background-color: #fef3c7; border-color: #f59e0b; }
.indicador-activo.indicador-danger { background-color: #fee2e2; border-color: #dc2626; }

.dark .indicadores-vencimiento .indicador {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
}

.dark .indicador-etiqueta { color: var(--gray-200); }
.dark .indicador-warning .indicador-conteo { color: #fbbf24; }
.dark .indicador-danger .indicador-conteo { color: #f87171; }
.dark .indicador-activo.indicador-warning { background-color: rgb(245 158 11 / 0.2); }
.dark .indicador-activo.indicador-danger { background-color: rgb(220 38 38 / 0.2); }