/* Tarjetas de información del grupo */
.grupo-info-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.grupo-info-card {
	background: var(--bg-primary);
	border: 2px solid var(--border-color);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.grupo-info-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-card-icon {
	font-size: 2rem;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border-radius: 10px;
	flex-shrink: 0;
}

.info-card-content {
	flex: 1;
	min-width: 0;
}

.info-card-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 4px;
}

.info-card-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Estilos específicos por tipo de tarjeta */
.info-descripcion-card {
	grid-column: span 2;
}

.info-descripcion-card .info-card-value {
	font-size: 1rem;
	font-weight: 500;
	white-space: normal;
	overflow: visible;
}

.info-estado-card.abierto {
	border-color: #4caf50;
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.1) 100%);
}

.info-estado-card.abierto .info-card-value {
	color: #2e7d32;
}

.info-estado-card.cerrado {
	border-color: #f44336;
	background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, rgba(244, 67, 54, 0.1) 100%);
}

.info-estado-card.cerrado .info-card-value {
	color: #c62828;
}

.info-total-card {
	border-color: #2196f3;
	background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.1) 100%);
}

.info-total-card .info-card-value {
	color: #1565c0;
}

.info-count-card {
	border-color: #9c27b0;
	background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(156, 39, 176, 0.1) 100%);
}

.info-count-card .info-card-value {
	color: #7b1fa2;
}

/* Cabecero de tabla y filas */
.table-custom-thead {
	background: #f7f7fa;
}

.table-custom-th {
	padding: 12px 8px;
	font-weight: 600;
	color: #333;
	background: #f7f7fa;
	border-bottom: 2px solid #e0e0e0;
}
.table-custom-th:nth-child(2) {
	width: 40%;
	min-width: 120px;
}
.table-custom-th:nth-child(1),
.table-custom-th:nth-child(3),
.table-custom-th:nth-child(4) {
	width: 20%;
	min-width: 80px;
}
.table-custom-row td {
	padding: 12px 8px;
	border-bottom: 1px solid #ececec;
}
.table-custom-row td:nth-child(2) {
	width: 40%;
}
.table-custom-row td:nth-child(1),
.table-custom-row td:nth-child(3),
.table-custom-row td:nth-child(4) {
	width: 20%;
}

/* Responsive: ocultar acciones y hacer filas clicables */
@media (max-width: 768px) {
	.table-custom-th:nth-child(4),
	.table-custom-row td:nth-child(4) {
		display: none;
	}
	.table-custom-row {
		cursor: pointer;
		transition: background 0.2s;
	}
	.table-custom-row:hover {
		background: #f0f4fa;
	}
}

/* --- Responsive mobile-list para movimientos de grupo de gastos --- */
@media (max-width: 768px) {
  .table-responsive, .table-container table, .table-custom-thead, .table-custom-header-row, .table-custom-th, .table-custom-row, .table-custom-row td {
    display: none !important;
  }
  .mobile-list {
    display: block;
    margin-top: 8px;
  }
  .mobile-list-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 12px;
    padding: 12px 16px;
    transition: box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid #f0f0f0;
  }
  .mobile-list-item.expanded {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: #d0e6fa;
  }
  .mobile-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .mobile-item-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-item-amount {
    font-weight: bold;
    font-size: 1.1em;
    min-width: 70px;
    text-align: right;
  }
  .mobile-item-details {
    display: none;
    margin-top: 10px;
    animation: fadeIn 0.2s;
  }
  .mobile-list-item.expanded .mobile-item-details {
    display: block;
  }
  .mobile-item-details button {
    min-width: 80px;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Oculta la mobile-list en escritorio */
@media (min-width: 769px) {
  .mobile-list {
    display: none !important;
  }
}

/* Estilos específicos para móviles */
@media (max-width: 768px) {
  .grupo-info-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .info-descripcion-card {
    grid-column: span 1;
  }
  
  .info-card-value {
    font-size: 1.1rem;
  }
  
  .info-card-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }
}