—
un pseudo-elemento generado directamente sobre una fila de tabla
descuadra el ancho de columnas en Chrome (el thead y el tbody dejan
de compartir el mismo cálculo de columnas). Por eso se pone sobre la
primera | , igual que la franja de estado de Expedientes de más
abajo. */
.fi-ta-row {
transition: background 0.15s ease;
}
.fi-ta-row > td.fi-ta-cell:first-child {
position: relative;
}
.fi-ta-row > td.fi-ta-cell:first-child::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--ccv-blue), var(--ccv-cyan));
opacity: 0;
transition: opacity 0.15s ease;
}
.fi-ta-row:hover > td.fi-ta-cell:first-child::before {
opacity: 1;
}
.dark .fi-ta-row:hover > td.fi-ta-cell:first-child::before {
box-shadow: 0 0 8px var(--ccv-cyan);
}
.fi-ta-row:hover {
background: rgba(26, 74, 142, 0.045) !important;
}
.dark .fi-ta-row:hover {
background: rgba(74, 144, 200, 0.08) !important;
}
/* ===== Badges con leve resplandor de color ===== */
.fi-badge {
border-radius: 9999px !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}
/* ===== Botones: píldora redondeada en vez del rectángulo casi recto por
defecto de Filament (rounded-lg), para que combine con el resto del
panel (badges, paginación, tarjetas de Inicio) ===== */
.fi-btn {
border-radius: 9999px !important;
padding-inline: 1.1rem !important;
font-weight: 700 !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fi-btn:hover {
transform: translateY(-1px);
}
.fi-btn-color-gray {
box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.35) !important;
}
/* ===== Botones primarios con gradiente y elevación ===== */
.fi-btn-color-primary {
background: linear-gradient(90deg, var(--ccv-blue) 0%, var(--ccv-blue-light) 100%) !important;
border: none !important;
box-shadow: 0 10px 22px -10px var(--ccv-glow) !important;
}
.fi-btn-color-primary:hover {
box-shadow: 0 14px 26px -8px var(--ccv-glow) !important;
}
.fi-btn-color-danger {
background: linear-gradient(90deg, #c0392b 0%, #e57373 100%) !important;
border: none !important;
box-shadow: 0 10px 22px -10px rgba(192, 57, 43, 0.5) !important;
}
.fi-btn-color-danger:hover {
box-shadow: 0 14px 26px -8px rgba(192, 57, 43, 0.6) !important;
}
.fi-btn-color-warning {
background: linear-gradient(90deg, #ea580c 0%, #fb923c 100%) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 10px 22px -10px rgba(234, 88, 12, 0.5) !important;
}
.fi-btn-color-warning:hover {
box-shadow: 0 14px 26px -8px rgba(234, 88, 12, 0.6) !important;
}
/* ===== Acciones de fila (PDF/Editar/Eliminar/Asignar Rol/Cambiar Estado):
estilo "anillo delineado" — transparente con borde y ícono del color de
la acción en reposo, se rellena de color sólido con sombra al pasar el
mouse. Reemplaza el link con icono+texto por defecto de Filament (ese
formato ocupaba demasiado ancho horizontal y forzaba scroll en las
tablas). Aplica a cualquier tabla del panel (Expedientes, Roles,
Usuarios). ===== */
.fi-ta-actions {
gap: 0.4rem !important;
}
.fi-ta-actions .fi-icon-btn {
width: 2.1rem !important;
height: 2.1rem !important;
margin: 0 !important;
border-radius: 9999px !important;
background: transparent !important;
border: 1.5px solid currentColor !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fi-ta-actions .fi-icon-btn-icon {
width: 1rem !important;
height: 1rem !important;
}
.fi-ta-actions .fi-icon-btn:hover {
color: #fff !important;
transform: translateY(-2px);
}
.fi-ta-actions .fi-icon-btn.fi-color-gray {
color: #64748b !important;
}
.fi-ta-actions .fi-icon-btn.fi-color-gray:hover {
background: #64748b !important;
box-shadow: 0 8px 18px -6px rgba(100, 116, 139, 0.55);
}
.fi-ta-actions .fi-icon-btn.fi-color-primary {
color: var(--ccv-blue) !important;
}
.fi-ta-actions .fi-icon-btn.fi-color-primary:hover {
background: var(--ccv-blue) !important;
box-shadow: 0 8px 18px -6px var(--ccv-glow);
}
.fi-ta-actions .fi-icon-btn.fi-color-danger {
color: #c0392b !important;
}
.fi-ta-actions .fi-icon-btn.fi-color-danger:hover {
background: #c0392b !important;
box-shadow: 0 8px 18px -6px rgba(192, 57, 43, 0.55);
}
.fi-ta-actions .fi-icon-btn.fi-color-warning {
color: #ea580c !important;
}
.fi-ta-actions .fi-icon-btn.fi-color-warning:hover {
background: #ea580c !important;
box-shadow: 0 8px 18px -6px rgba(234, 88, 12, 0.55);
}
.dark .fi-ta-actions .fi-icon-btn.fi-color-gray {
color: #94a3b8 !important;
}
/* ===== Tabla de Expedientes más compacta para que quepa sin scroll
horizontal: menos padding por celda y columnas de badge/fecha más
angostas ===== */
.fi-ta-cell {
padding-inline: 0.3rem !important;
}
.fi-ta-header-cell {
padding-inline: 0.3rem !important;
}
.fi-ta-actions-cell > div {
padding-inline: 0.3rem !important;
}
.fi-ta-cell .fi-badge {
font-size: 0.7rem !important;
padding-inline: 0.5rem !important;
}
/* ===== Corrección de contraste en modo oscuro: encabezado del repetidor
de documentos (paquete awcodes/filament-table-repeater no trae CSS
propio compilado con soporte dark, así que se sobreescribe aquí) ===== */
.dark .table-repeater-header-column {
background: rgba(15, 23, 42, 0.75) !important;
color: #cbd5e1 !important;
}
.dark .table-repeater-header {
border-color: rgba(255, 255, 255, 0.12) !important;
}
/* =====================================================================
Dirección "Sala de Control": refuerzo terminal/control-room sobre la
capa tech existente. Solo modo oscuro — en claro el panel se queda
con la identidad institucional de siempre.
===================================================================== */
/* Encabezados de tabla y etiquetas de stats con tipografía técnica */
.dark thead th.fi-ta-header-cell,
.dark .fi-wi-stats-overview-stat-label {
font-family: var(--ccv-font-tech);
letter-spacing: 0.04em;
}
/* Celdas de datos "de código" (matrícula, NIT/cédula, fecha) en mono —
posiciones fijas de columna en la tabla de Expedientes: 1=matrícula,
3=NIT/cédula, 6=fecha de elaboración */
.dark td.fi-ta-cell:nth-child(1),
.dark td.fi-ta-cell:nth-child(3),
.dark td.fi-ta-cell:nth-child(6) {
font-family: var(--ccv-font-tech);
font-variant-numeric: tabular-nums;
}
/* Badges: de "pastilla sólida" a "readout" con borde + glow del propio color */
.dark .fi-badge {
background: transparent !important;
border: 1px solid currentColor;
box-shadow: 0 0 10px -3px currentColor;
font-family: var(--ccv-font-tech);
letter-spacing: 0.02em;
}
/* Franja de estado a la izquierda de cada fila de Expedientes, como un
indicador de estado en una consola de monitoreo */
.dark tr.fi-ta-row.ccv-row-abierto > td.fi-ta-cell:first-child,
.dark tr.fi-ta-row.ccv-row-cerrado > td.fi-ta-cell:first-child,
.dark tr.fi-ta-row.ccv-row-reabierto > td.fi-ta-cell:first-child {
position: relative;
}
.dark tr.fi-ta-row.ccv-row-abierto > td.fi-ta-cell:first-child::before,
.dark tr.fi-ta-row.ccv-row-cerrado > td.fi-ta-cell:first-child::before,
.dark tr.fi-ta-row.ccv-row-reabierto > td.fi-ta-cell:first-child::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 0.45rem;
bottom: 0.45rem;
width: 3px;
border-radius: 2px;
opacity: 1;
}
.dark tr.fi-ta-row.ccv-row-abierto > td.fi-ta-cell:first-child::before {
background: #34d399;
box-shadow: 0 0 8px #34d399;
}
.dark tr.fi-ta-row.ccv-row-cerrado > td.fi-ta-cell:first-child::before {
background: #f87171;
box-shadow: 0 0 8px #f87171;
}
.dark tr.fi-ta-row.ccv-row-reabierto > td.fi-ta-cell:first-child::before {
background: #fbbf24;
box-shadow: 0 0 8px #fbbf24;
}
/* Campos de formulario: anillo de foco con glow cian, como un campo de
terminal que se "activa" — reemplaza el foco azul institucional plano
solo en modo oscuro (en claro se deja el foco de marca de siempre) */
.dark .fi-input-wrp:focus-within {
box-shadow: 0 0 0 1px var(--ccv-cyan), 0 0 14px -2px var(--ccv-cyan) !important;
}
/* Botones de acción de fila: además del relleno sólido al pasar el
mouse, un glow hacia afuera del mismo color en modo oscuro */
.dark .fi-ta-actions .fi-icon-btn:hover {
box-shadow: 0 0 16px -3px currentColor, 0 8px 18px -6px rgba(0, 0, 0, 0.5) !important;
}
/* Pestañas activas: refuerzo de glow en modo oscuro */
.dark .fi-tabs-item.fi-active {
box-shadow: 0 0 18px -4px var(--ccv-cyan), 0 8px 18px -8px var(--ccv-glow) !important;
}
/* Encabezado del repetidor de documentos: mismo lenguaje "de código" que
los encabezados de tabla del resto del panel */
.dark .table-repeater-header-column {
font-family: var(--ccv-font-tech);
letter-spacing: 0.04em;
}
/* Estado vacío de una tabla: aro con glow en vez de círculo gris plano */
.dark .fi-ta-empty-state-icon-ctn {
box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 24px -6px var(--ccv-cyan);
}
/* ===== Inicio: el reloj en vivo como un "readout" digital y las
tarjetas de acceso rápido con el mismo glow del resto del panel ===== */
.dark .ccv-home-clock-time {
font-family: var(--ccv-font-tech);
text-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
}
.dark .ccv-home-clock-date,
.dark .ccv-home-clock-label,
.dark .ccv-home-clock-year {
font-family: var(--ccv-font-tech);
}
.dark .ccv-home-card:hover {
box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 18px 32px -18px rgba(0, 0, 0, 0.6) !important;
}
.dark .ccv-home-activity-time {
font-family: var(--ccv-font-tech);
font-size: 0.7rem;
}
/* ===== Ocultar el botón "Reiniciar" del panel de filtros (tablas de
Expedientes/Usuarios) — pedido explícito del usuario ===== */
.fi-ta-filters [wire\:click="resetTableFiltersForm"] {
display: none !important;
}
|